/* ==========================================================================
   Kodesphere IT Solutions — theme layer (v2)
   Rebuilt to match a plain, flat, corporate-SaaS style: blue accent, white
   cards with soft borders, no dark bands, no monospace/code-editor identity.
   Loaded after style.css + skin-1.css.
   ========================================================================== */

:root{
	--font-display: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Poppins', 'Segoe UI', sans-serif;
	--font-mono: 'Poppins', 'Segoe UI', sans-serif;
}

body, p, li, a, span, input, textarea, button {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.title, .dz-title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ks-ink);
}

/* Eyebrow / label text — plain small caps, no mono/dot styling */
.sub-title {
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--primary) !important;
}

/* Badges — plain flat blue pills */
.badge.bg-primary {
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 12px !important;
	background: var(--rgba-primary-1) !important;
	color: var(--primary-dark) !important;
	border: none;
	padding: 5px 12px !important;
	border-radius: 999px !important;
}

/* ==========================================================================
   Header / navigation — solid white floating pill, VMK style
   ========================================================================== */

.ks-header .sticky-header.main-bar-wraper {
	background: transparent !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	padding: 18px 0 0;
}
.ks-header .main-bar {
	max-width: 1240px;
	margin: 0 auto;
	background: #ffffff !important;
	border-radius: 999px;
	box-shadow: 0 4px 24px -8px rgba(30,41,59,0.12);
	padding: 6px 10px;
}
.ks-header .box-header { border-radius: 999px; }
.ks-header .logo-header img { max-height: 30px; }
.ks-header .nav { flex-wrap: nowrap; white-space: nowrap; }
.ks-header .nav > li > a {
	padding: 10px 12px !important;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ks-ink) !important;
	border-radius: 999px;
	white-space: nowrap;
}
.ks-header .nav > li > a:hover,
.ks-header .nav > li.active > a { color: var(--primary) !important; background: transparent; }
.ks-header .appointment-btn {
	border-radius: 999px !important;
	padding: 10px 22px !important;
	white-space: nowrap;
	background: var(--primary) !important;
	border-color: var(--primary) !important;
}
.ks-header .extra-nav .btn-outline-primary {
	border-radius: 999px !important;
	padding: 8px 16px !important;
	white-space: nowrap;
	font-size: 14px;
	border-color: #E2E8F0 !important;
	color: var(--ks-ink) !important;
}
.ks-header .extra-nav { display: flex; align-items: center; gap: 8px; }
.ks-header .extra-cell { display: flex; align-items: center; gap: 8px; }

@media (max-width: 991px){
	.ks-header .nav { flex-wrap: wrap; white-space: normal; }
	.ks-header .sticky-header.main-bar-wraper { position: relative; padding: 10px 0; }
	.ks-header .main-bar { border-radius: 20px; margin: 0 16px; max-width: none; padding: 4px 14px; }
	.ks-header .box-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: auto;
		padding: 6px 0 !important;
	}
	.ks-header .box-header::after { display: none !important; }
	.ks-header .logo-header { padding: 0; }
	.ks-header .logo-header img { max-height: 24px; }
	.ks-header .navicon,
	.ks-header .navbar-toggler {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px;
		border-radius: 8px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: none;
	}
	.ks-header .navicon span { width: 16px; left: 9px; }
	.ks-header .extra-nav {
		order: 3;
		width: 100%;
		justify-content: center;
		margin-top: 8px;
		gap: 8px;
	}
	.ks-header .extra-nav .btn-outline-primary,
	.ks-header .appointment-btn {
		font-size: 13px;
		padding: 7px 14px !important;
	}
	.ks-header .header-nav {
		background: #fff;
		border-top: 1px solid #E7EAEE;
		box-shadow: 0 12px 24px -12px rgba(15,23,42,0.15);
	}
	.ks-header .nav.navbar-nav > li > a {
		padding: 14px 20px !important;
		border-bottom: 1px solid #F1F3F5;
	}
	.ks-header .navbar-toggler span {
		background: var(--ks-ink) !important;
	}
}

/* ==========================================================================
   Hero — plain centered text, soft blue blur behind headline, no side panel
   ========================================================================== */

.ks-hero-bg {
	background-color: #ffffff !important;
	background-image: none !important;
	min-height: auto !important;
	padding: 150px 0 70px !important;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.ks-hero-bg::before {
	content: "";
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 460px;
	background: radial-gradient(circle, rgba(47,92,255,0.14) 0%, rgba(47,92,255,0.05) 50%, transparent 72%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}
.ks-hero-bg .container { position: relative; z-index: 1; }
.ks-hero-bg .banner-content { text-align: center; max-width: 780px; margin: 0 auto; }
.ks-hero-bg .title { color: var(--ks-ink); font-size: 46px; }
.ks-hero-bg .title .text-primary { color: var(--primary) !important; }
.ks-hero-bg p { color: var(--ks-slate); font-size: 17px; }
.ks-hero-bg .d-flex { justify-content: center; }
.ks-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ks-slate);
	background: #F1F5F9;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 22px;
}
.ks-hero-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary);
}

@media (max-width: 767px){
	.ks-hero-bg { padding: 110px 0 40px !important; }
	.ks-hero-bg .title { font-size: 28px !important; line-height: 1.3 !important; }
}
@media (max-width: 575px){
	.ks-hero-bg .title { font-size: 24px !important; }
}

/* Hide the old code-panel signature element entirely — VMK-style hero is
   plain centered text with no side visual. */
.ks-code-panel { display: none !important; }

/* ==========================================================================
   Section bands — everything flat white/paper, no dark ink sections
   ========================================================================== */

.ks-band-ink,
.ks-band-paper {
	background: #ffffff !important;
	background-image: none !important;
	color: var(--ks-ink);
}
.ks-band-ink .title,
.ks-band-ink .dz-title,
.ks-band-ink h2, .ks-band-ink h3 { color: var(--ks-ink); }
.ks-band-ink .sub-title { color: var(--primary) !important; }
.ks-band-ink p { color: var(--ks-slate); }

[style*="images/background/bg1.png"],
[style*="images/background/bg2.png"],
[style*="images/background/footer-bg.png"] {
	background-image: none !important;
	background-color: #ffffff !important;
}

/* Page header banner on inner pages — flat light gray instead of dark ink */
.dz-bnr-inr {
	background-image: none !important;
	background-color: #F1F5F9 !important;
}
.dz-bnr-inr .dz-bnr-inr-entry h1,
.dz-bnr-inr .dz-bnr-inr-entry .title { color: var(--ks-ink) !important; }
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row li,
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row li a {
	color: var(--ks-slate) !important;
}

/* Counter / stats bar — flat white, blue numbers */
.counter-wrapper1 .counter-inner {
	background: #ffffff !important;
	border-top: 1px solid #EEF1F5;
	border-bottom: 1px solid #EEF1F5;
}
.counter-wrapper1 .counter-inner .counter-box .title {
	color: var(--primary) !important;
	font-family: var(--font-display);
}
.counter-wrapper1 .counter-inner .counter-box p { color: var(--ks-slate); }

/* ==========================================================================
   Cards — flat white, soft border, soft shadow on hover. Applies to
   icon-bx-wraper (used across services/portfolio/internship highlights),
   the dedicated ks-service-card, and pricing cards.
   ========================================================================== */

.icon-bx-wraper.style-1.box-hover,
.ks-service-card,
.pricingtable-wrapper.style-1 {
	background: #ffffff;
	border: 1px solid #E7EAEE;
	border-radius: 16px;
	box-shadow: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	overflow: hidden;
}
.icon-bx-wraper.style-1.box-hover:hover,
.ks-service-card:hover,
.pricingtable-wrapper.style-1:hover,
.pricingtable-wrapper.style-1.active {
	border-color: var(--primary);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -24px rgba(30,41,59,0.18);
}
.pricingtable-wrapper.style-1::before,
.pricingtable-wrapper.style-1::after { display: none !important; }

.icon-bx-wraper.style-1 .icon-bx .icon-cell i,
.ks-service-card__icon {
	color: var(--primary);
}

.ks-service-card { padding: 28px; height: 100%; }
.ks-service-card__icon { display: block; font-size: 26px; margin-bottom: 14px; }
.ks-service-card__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-bottom: 10px; color: var(--ks-ink); }
.ks-service-card__desc { color: var(--ks-slate); font-size: 14.5px; margin-bottom: 18px; }
.ks-service-card__media {
	width: 100%;
	height: 180px;
	border-radius: 10px;
	margin-bottom: 16px;
	display: block;
	object-fit: cover;
	border: 1px solid #E7EAEE;
}
.ks-service-card__link { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ks-ink); }
.ks-service-card__link i { font-size: 12px; margin-left: 4px; transition: transform .2s ease; }
.ks-service-card:hover .ks-service-card__link { color: var(--primary); }
.ks-service-card:hover .ks-service-card__link i { transform: translateX(3px); }

.pricingtable-wrapper.style-1 .pricingtable-inner { padding: 32px 28px; }
.pricingtable-wrapper.style-1 .pricingtable-title {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ks-slate);
	margin-bottom: 14px;
}
.pricingtable-wrapper.style-1 .pricingtable-bx {
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 700;
	color: var(--ks-ink) !important;
	margin-bottom: 10px;
}
.pricingtable-wrapper.style-1 .pricingtable-price p { color: var(--ks-slate); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.pricingtable-wrapper.style-1 .pricingtable-footer { padding: 0; background: transparent; }

/* ==========================================================================
   Footer — flat white/light instead of dark ink
   ========================================================================== */

.footer-dark,
footer.site-footer.ks-footer-dark {
	background: #0B1220 !important;
	font-family: var(--font-body);
	border-top: none;
}
.footer-dark .footer-title,
footer.site-footer.ks-footer-dark .footer-title {
	font-family: var(--font-display);
	font-weight: 600;
	color: #ffffff !important;
	font-size: 16px;
	margin-bottom: 18px;
}
footer.site-footer.ks-footer-dark .widget_about h6 {
	color: #ffffff;
	font-family: var(--font-display);
	font-weight: 600;
}
.footer-dark p, footer.site-footer.ks-footer-dark p { color: #94A3B8; }
.footer-dark a, footer.site-footer.ks-footer-dark a { color: #94A3B8; }
.footer-dark a:hover, footer.site-footer.ks-footer-dark a:hover { color: var(--primary); }
footer.site-footer.ks-footer-dark .copyright-text { color: #64748B; }
footer.site-footer.ks-footer-dark svg { display: none; }
footer.site-footer.ks-footer-dark .footer-bottom {
	border-top: 1px solid #1E293B;
	margin-top: 20px;
	padding-top: 20px;
}
footer.site-footer.ks-footer-dark .ks-footer-cin {
	font-size: 12px;
	color: #475569;
	margin-top: 10px;
}
footer.site-footer.ks-footer-dark .ks-footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
footer.site-footer.ks-footer-dark .ks-footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
footer.site-footer.ks-footer-dark .ks-footer-contact-list li,
footer.site-footer.ks-footer-dark .ks-footer-contact-list li span {
	color: #94A3B8;
}
footer.site-footer.ks-footer-dark .ks-footer-contact-list i {
	color: var(--primary);
	width: 16px;
	flex-shrink: 0;
}
footer.site-footer.ks-footer-dark .dz-social-icon ul {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
footer.site-footer.ks-footer-dark .dz-social-icon ul li a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #1E293B;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #E2E8F0;
}
footer.site-footer.ks-footer-dark .dz-social-icon ul li a:hover {
	background: var(--primary);
	color: #fff;
}

/* ==========================================================================
   Buttons — flat, rounded, blue
   ========================================================================== */

.btn-primary {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	border-radius: 999px !important;
}
.btn-outline-primary {
	border-radius: 999px !important;
	color: var(--primary) !important;
	border-color: var(--primary) !important;
}
.btn-skew, .btn-skew span { transform: none !important; clip-path: none !important; }
.btn { border-radius: 999px !important; }

/* Smooth transitions everywhere */
a, .btn, .icon-bx-wraper, .pricingtable-wrapper, .badge, .ks-service-card {
	transition: all 0.25s ease;
}
.btn:hover { transform: translateY(-1px); }

/* ==========================================================================
   Internship page sidebar widgets — flat light instead of dark ink
   ========================================================================== */

.service_menu_nav {
	background: #fff;
	border: 1px solid #E7EAEE;
	border-radius: 16px;
	overflow: hidden;
	padding: 8px 0;
}
.service_menu_nav ul li a {
	font-family: var(--font-body);
	font-weight: 500;
	padding: 14px 24px;
}
.service_menu_nav ul li.active a,
.service_menu_nav ul li a:hover { color: var(--primary); }
.service_menu_nav svg { display: none; }

.widget_contact {
	background: #F1F5F9 !important;
	border-radius: 16px;
	margin-top: 20px;
}
.widget_contact .widget-content { padding: 32px 28px; }
.widget_contact h4, .widget_contact .phone-number { color: var(--ks-ink) !important; font-family: var(--font-display); }
.widget_contact .email { color: var(--primary) !important; }