/* ==========================================================================
   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;
	--ks-ink: #1A261F;
	--ks-slate: #3E4D44;
	--ks-silver-border: #DDE4D8;
}

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;
}

/* ==========================================================================
   Viewport & Overflow Containment (Zero Horizontal Scroll Guarantee)
   ========================================================================== */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw;
	position: relative;
}

.page-wraper {
	overflow-x: hidden !important;
	width: 100%;
	position: relative;
}

.page-content {
	overflow-x: hidden !important;
}

.page-content img,
.page-wraper img {
	max-width: 100%;
	height: auto;
}

.dz-bnr-inr {
	overflow: hidden !important;
	position: relative !important;
}

.testimonial-wrapper1 {
	overflow: hidden !important;
	position: relative !important;
}

.contact-box {
	overflow: hidden !important;
	border-radius: 16px !important;
}

.counter-wrapper1 {
	overflow: hidden !important;
	position: relative !important;
}

/* ==========================================================================
   Header / navigation — centered floating pill with smooth sticky transitions
   ========================================================================== */

/* Anchor offset so fixed header doesn't cover section headings */
#home, #about-us, #services, #portfolio, #contact-us, [id] {
	scroll-margin-top: 85px;
}

.ks-header {
	position: relative;
	z-index: 100000;
}

/* Force override of old theme's destructive fixed styling */
.site-header.style-1 .is-fixed .main-bar,
.is-fixed .main-bar {
	position: relative !important;
	animation: none !important;
	-webkit-animation: none !important;
	margin-top: 0 !important;
	left: auto !important;
	top: auto !important;
	box-shadow: none !important;
}

/* Header container reset & layout stabilization */
.ks-header .container {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 8px !important;
}

.ks-header .sticky-header.main-bar-wraper {
	background: transparent !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 100000 !important;
	padding: 16px 0 0 !important;
	transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease !important;
	pointer-events: none;
}

.ks-header .main-bar {
	pointer-events: auto;
	max-width: 1240px;
	margin: 0 auto;
	background: #ffffff !important;
	border-radius: 999px;
	border: 1px solid rgba(226, 232, 240, 0.85);
	box-shadow: 0 4px 20px -6px rgba(30, 41, 59, 0.1);
	padding: 6px 14px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sticky state on scroll */
.ks-header .sticky-header.is-fixed,
.ks-header.is-sticky .sticky-header.main-bar-wraper {
	padding: 10px 0 0 !important;
}

.ks-header .sticky-header.is-fixed .main-bar,
.ks-header.is-sticky .main-bar {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: rgba(203, 213, 225, 0.9) !important;
	box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.14) !important;
}

.ks-header .box-header { 
	border-radius: 999px; 
}

.ks-header .logo-header img { 
	max-height: 32px; 
	width: auto; 
	vertical-align: middle;
}

/* Enforce pointer cursor on all interactive elements */
.ks-header a,
.ks-header button,
.ks-header .nav-item,
.ks-header .nav > li > a,
.ks-header .sub-menu li a,
.ks-header .navbar-toggler,
.ks-header .navicon,
.ks-header .appointment-btn,
.ks-header .ks-cta-btn,
.ks-header .btn,
.ks-mobile-close {
	cursor: pointer !important;
}

/* Desktop header flex alignment & vertical centering */
@media (min-width: 992px) {
	.ks-header .box-header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		min-height: 54px !important;
		padding: 0 4px !important;
	}
	.ks-header .box-header::after {
		display: none !important;
	}
	
	/* Logo alignment */
	.ks-header .logo-header {
		display: inline-flex !important;
		align-items: center !important;
		height: auto !important;
		min-height: 40px !important;
		line-height: 1 !important;
		float: none !important;
		padding: 0 8px 0 4px !important;
		margin: 0 !important;
		flex-shrink: 0;
	}
	.ks-header .logo-header a {
		display: inline-flex !important;
		align-items: center !important;
		height: 100% !important;
		vertical-align: middle !important;
	}
	.ks-header .logo-header img {
		max-height: 32px !important;
		width: auto !important;
		display: block;
	}
	
	/* Hide mobile-specific drawer elements on desktop */
	.ks-header .header-nav .logo-header {
		display: none !important;
	}
	.ks-header .header-nav .dz-social-icon {
		display: none !important;
	}

	/* Navigation list - perfectly centered horizontally and vertically */
	.ks-header .header-nav {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 100% !important;
		margin: 0 auto !important;
		padding: 0 10px !important;
		float: none !important;
		flex: 1 1 auto;
	}
	.ks-header .header-nav .nav {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		height: 100% !important;
		margin: 0 auto !important;
		padding: 0 !important;
		float: none !important;
		gap: 4px;
		flex-wrap: nowrap;
		white-space: nowrap;
		list-style: none !important;
	}
	.ks-header .nav > li {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative;
	}
	.ks-header .nav > li > a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 9px 14px !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		color: var(--ks-ink) !important;
		border-radius: 999px !important;
		white-space: nowrap !important;
		text-decoration: none !important;
		cursor: pointer !important;
		transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}
	
	/* Hover and active states */
	.ks-header .nav > li > a:hover {
		color: var(--primary) !important;
		background: rgba(37, 99, 235, 0.08) !important;
		transform: translateY(-1px);
	}
	.ks-header .nav > li.active > a {
		color: var(--primary) !important;
		background: rgba(37, 99, 235, 0.12) !important;
		font-weight: 600 !important;
		box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2) !important;
	}
	.ks-header .nav > li.sub-menu-down > a:after {
		display: inline-block;
		margin-left: 6px;
		font-size: 9px;
		vertical-align: middle;
		transition: transform 0.2s ease;
	}
	.ks-header .nav > li.sub-menu-down:hover > a:after {
		transform: rotate(180deg);
	}
	
	/* Submenu dropdown styling */
	.ks-header .nav > li .sub-menu {
		top: calc(100% + 8px) !important;
		border-radius: 14px !important;
		box-shadow: 0 14px 35px -8px rgba(15, 23, 42, 0.14) !important;
		border: 1px solid rgba(226, 232, 240, 0.9) !important;
		padding: 8px 0 !important;
		min-width: 220px !important;
		background: #ffffff !important;
		transform: translateY(8px);
		opacity: 0;
		visibility: hidden;
		transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}
	.ks-header .nav > li:hover .sub-menu {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	.ks-header .nav > li .sub-menu li {
		margin: 0;
		padding: 0;
	}
	.ks-header .nav > li .sub-menu li a {
		padding: 10px 20px !important;
		font-size: 13.5px !important;
		color: var(--ks-ink) !important;
		display: block !important;
		font-weight: 500;
		cursor: pointer !important;
		transition: all 0.2s ease !important;
	}
	.ks-header .nav > li .sub-menu li a:hover {
		color: var(--primary) !important;
		background: #F8FAFC !important;
		padding-left: 24px !important;
	}
	
	/* Extra Nav (CTA buttons) */
	.ks-header .extra-nav {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		height: auto !important;
		float: none !important;
		padding: 0 !important;
		margin: 0 !important;
		flex-shrink: 0;
	}
	.ks-header .extra-cell {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.ks-header .appointment-btn,
	.ks-header .ks-cta-btn {
		border-radius: 999px !important;
		padding: 9px 20px !important;
		white-space: nowrap !important;
		background: var(--primary) !important;
		border-color: var(--primary) !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		transition: all 0.22s ease !important;
	}
	.ks-header .appointment-btn:hover,
	.ks-header .ks-cta-btn:hover {
		background: var(--primary-dark) !important;
		transform: translateY(-1px);
		box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
	}
	.ks-header .extra-nav .btn-outline-primary {
		border-radius: 999px !important;
		padding: 8px 16px !important;
		white-space: nowrap !important;
		font-size: 13.5px !important;
		border-color: #E2E8F0 !important;
		color: var(--ks-ink) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		transition: all 0.22s ease !important;
	}
	.ks-header .extra-nav .btn-outline-primary:hover {
		border-color: #CBD5E1 !important;
		background: #F8FAFC !important;
		color: var(--primary) !important;
		transform: translateY(-1px);
	}
}

/* Laptop & Compact Desktop Optimization (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
	.ks-header .header-nav {
		padding: 0 2px !important;
	}
	.ks-header .header-nav .nav {
		gap: 2px !important;
	}
	.ks-header .nav > li > a {
		padding: 7px 6px !important;
		font-size: 12.5px !important;
	}
	.ks-header .appointment-btn,
	.ks-header .ks-cta-btn {
		padding: 7px 12px !important;
		font-size: 12px !important;
	}
	.ks-header .extra-nav .btn-outline-primary {
		padding: 7px 10px !important;
		font-size: 12px !important;
	}
}

/* Mobile & Tablet Layout (< 992px) */
@media (max-width: 991px) {
	.ks-header {
		z-index: 100000 !important;
	}
	.ks-header .nav { flex-wrap: wrap; white-space: normal; }
	.ks-header .sticky-header.main-bar-wraper {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 100000 !important;
		padding: 10px 0 !important;
		pointer-events: none !important;
	}
	.ks-header .sticky-header.is-fixed {
		padding: 6px 0 !important;
	}
	.ks-header .main-bar {
		border-radius: 18px !important;
		margin: 0 12px !important;
		max-width: none !important;
		padding: 7px 14px !important;
		pointer-events: auto !important;
	}
	.ks-header .box-header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: auto;
		padding: 2px 0 !important;
	}
	.ks-header .box-header::after { display: none !important; }
	.ks-header .logo-header { 
		padding: 0; 
		float: none; 
		display: flex; 
		align-items: center; 
	}
	.ks-header .logo-header img { max-height: 26px; }
	
	.ks-header .navicon,
	.ks-header .navbar-toggler {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px;
		border-radius: 8px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: none;
		border: 1px solid #E2E8F0;
		background: #fff;
		margin-left: 8px;
		cursor: pointer !important;
	}
	.ks-header .navicon span { width: 18px; left: 9px; }
	.ks-header .extra-nav {
		margin-left: auto;
		height: auto;
		padding: 0;
	}
	.ks-header .extra-cell {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.ks-header .extra-nav .btn-outline-primary {
		display: none; /* Keep header compact on mobile screens */
	}
	.ks-header .appointment-btn,
	.ks-header .ks-cta-btn {
		font-size: 13px !important;
		padding: 7px 15px !important;
		border-radius: 999px !important;
	}
	
	/* Off-canvas mobile menu drawer */
	.ks-header .header-nav {
		background: #ffffff;
		border-top: none;
		box-shadow: 0 12px 30px rgba(11, 19, 43, 0.25);
		position: fixed !important;
		top: 0 !important;
		left: -320px !important;
		width: 310px !important;
		max-width: 86vw !important;
		height: 100vh !important;
		z-index: 100002 !important;
		pointer-events: auto !important;
		transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
		overflow-y: auto !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
	}
	.ks-header .header-nav.show {
		left: 0 !important;
	}
	.ks-header .header-nav .logo-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
		border-bottom: 1px solid #F1F5F9;
		flex-shrink: 0;
	}
	.ks-header .ks-mobile-close {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 34px !important;
		height: 34px !important;
		min-width: 34px;
		opacity: 0.75;
		cursor: pointer;
		border-radius: 8px;
		background-color: #F8FAFC;
		transition: all 0.2s ease;
	}
	.ks-header .ks-mobile-close:hover {
		opacity: 1;
		background-color: #EEF2F6;
	}
	.ks-header .nav.navbar-nav {
		flex: 1 1 auto;
		overflow-y: auto;
		pointer-events: auto !important;
	}
	.ks-header .nav.navbar-nav > li > a {
		padding: 13px 20px !important;
		border-bottom: 1px solid #F1F3F5;
		font-size: 14.5px;
		font-weight: 500;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		pointer-events: auto !important;
		cursor: pointer !important;
	}
	.ks-header .nav.navbar-nav > li.active > a {
		color: var(--primary) !important;
		font-weight: 600 !important;
		background: rgba(37, 99, 235, 0.06);
	}
	.ks-header .nav.navbar-nav > li.sub-menu-down > .sub-menu {
		display: none;
		background: #F8FAFC !important;
		padding: 6px 0 6px 15px !important;
		border-left: 3px solid var(--primary) !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		box-shadow: none !important;
		transform: none !important;
		pointer-events: auto !important;
	}
	.ks-header .nav.navbar-nav > li.sub-menu-down.open > .sub-menu {
		display: block !important;
	}
	.ks-header .nav.navbar-nav > li.sub-menu-down > a:after {
		content: "\f078" !important;
		font-family: "Font Awesome 6 Free" !important;
		font-weight: 900 !important;
		display: inline-block !important;
		font-size: 11px !important;
		margin-left: auto !important;
		transition: transform 0.25s ease !important;
	}
	.ks-header .nav.navbar-nav > li.sub-menu-down.open > a:after {
		transform: rotate(180deg) !important;
		color: var(--primary) !important;
	}
	.ks-header .nav.navbar-nav > li.sub-menu-down .sub-menu li a {
		padding: 11px 18px !important;
		font-size: 13.5px;
		color: var(--ks-ink) !important;
		border-bottom: none;
		display: block !important;
		pointer-events: auto !important;
		cursor: pointer !important;
		position: relative;
		z-index: 10;
		transition: all 0.2s ease !important;
	}
	.ks-header .nav.navbar-nav > li.sub-menu-down .sub-menu li a:hover,
	.ks-header .nav.navbar-nav > li.sub-menu-down .sub-menu li a:active {
		color: var(--primary) !important;
		background: rgba(37, 99, 235, 0.08) !important;
		padding-left: 22px !important;
	}
	.ks-header .ks-mobile-drawer-footer {
		flex-shrink: 0;
		background: #ffffff;
		border-top: 1px solid #F1F5F9;
		pointer-events: auto !important;
	}
	.ks-header .ks-mobile-drawer-footer .btn {
		border-radius: 999px !important;
		font-size: 13.5px !important;
		padding: 9px 18px !important;
		font-weight: 600;
	}
	.ks-header .navbar-toggler span {
		background: var(--ks-ink) !important;
	}
}

/* Mobile drawer backdrop */
.ks-nav-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(11, 19, 43, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 99990 !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}
.ks-nav-backdrop.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	cursor: pointer;
}
body.nav-open {
	overflow: hidden;
}

/* ==========================================================================
   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(37, 99, 235,0.14) 0%, rgba(37, 99, 235,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 & Visual Rhythm — Sage & Warm Backgrounds
   ========================================================================== */

.ks-band-paper {
	background: #F7F4ED !important;
	background-image: none !important;
	border-top: 1px solid #DDE4D8;
	border-bottom: 1px solid #DDE4D8;
	color: #4B554E;
}

.ks-band-ink {
	background: linear-gradient(135deg, #1E2822 0%, #26332C 60%, #1A241E 100%) !important;
	background-image: none !important;
	color: #FFFFFF !important;
	position: relative;
}
.ks-band-ink .title,
.ks-band-ink .dz-title,
.ks-band-ink h2, 
.ks-band-ink h3 { 
	color: #FFFFFF !important; 
}
.ks-band-ink .sub-title { 
	color: #C8A96B !important; 
	font-weight: 600;
	letter-spacing: 1px;
}
.ks-band-ink p { 
	color: rgba(247, 244, 237, 0.9) !important; 
}

/* Inner Page Header Banners — Deep Sage / Forest Tech Gradient */
.dz-bnr-inr {
	background: linear-gradient(135deg, #1A231E 0%, #26332C 55%, #314238 100%) !important;
	position: relative;
	overflow: hidden;
	padding: 95px 0 75px !important;
}
.dz-bnr-inr::before {
	content: "";
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 350px;
	background: radial-gradient(circle, rgba(143, 162, 138, 0.22) 0%, rgba(143, 162, 138, 0) 70%);
	pointer-events: none;
}
.dz-bnr-inr .dz-bnr-inr-entry h1,
.dz-bnr-inr .dz-bnr-inr-entry .title { 
	color: #FFFFFF !important; 
	font-weight: 700 !important;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row {
	margin-top: 10px;
}
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row li {
	color: rgba(247, 244, 237, 0.75) !important;
	font-size: 14px;
}
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row li a {
	color: #C7D3C0 !important;
	font-weight: 500;
	transition: color 0.3s ease;
}
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row li a:hover {
	color: #C8A96B !important;
}
.dz-bnr-inr .dz-bnr-inr-entry .breadcrumb-row li.active {
	color: #FFFFFF !important;
}

/* Counter / stats bar — High Contrast, subtle gradient border */
.counter-wrapper1 .counter-inner {
	background: #FBFAF7 !important;
	border-top: 1px solid #DDE4D8;
	border-bottom: 1px solid #DDE4D8;
	box-shadow: 0 4px 20px rgba(38, 51, 44, 0.03);
}
.counter-wrapper1 .counter-inner .counter-box .title {
	color: #26332C !important;
	font-family: var(--font-display);
	font-weight: 700;
}
.counter-wrapper1 .counter-inner .counter-box p { 
	color: #68736B !important; 
	font-weight: 500;
}

/* ==========================================================================
   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 .25s cubic-bezier(0.16, 1, 0.3, 1),
	            transform .25s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1);
	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: rgba(37, 99, 235, 0.45);
	transform: translateY(-5px);
	box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.12),
	            0 0 0 1px rgba(37, 99, 235, 0.12);
}
.pricingtable-wrapper.style-1::before,
.pricingtable-wrapper.style-1::after { display: none !important; }

/* Course & Internship Cards Hover */
.pricingtable-wrapper.style-1 {
	transition: border-color .28s cubic-bezier(0.16, 1, 0.3, 1),
	            transform .28s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow .28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pricingtable-wrapper.style-1:hover {
	transform: translateY(-6px) !important;
	border-color: rgba(37, 99, 235, 0.5) !important;
	box-shadow: 0 22px 42px -12px rgba(15, 23, 42, 0.14),
	            0 0 0 1px rgba(37, 99, 235, 0.18) !important;
}
.pricingtable-wrapper.style-1 .pricingtable-title {
	transition: color 0.22s ease !important;
}


/* Internship & Feature Highlight Cards */
.icon-bx-wraper.style-1.box-hover {
	transition: border-color .28s cubic-bezier(0.16, 1, 0.3, 1),
	            transform .28s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow .28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.icon-bx-wraper.style-1.box-hover:hover {
	transform: translateY(-5px) !important;
	border-color: rgba(37, 99, 235, 0.4) !important;
	box-shadow: 0 18px 36px -12px rgba(15, 23, 42, 0.1) !important;
}
.icon-bx-wraper.style-1 .icon-bx {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.icon-bx-wraper.style-1.box-hover:hover .icon-bx {
	transform: translateY(-2px) scale(1.05);
}
.icon-bx-wraper.style-1 .icon-cell i,
.ks-service-card__icon {
	color: var(--primary);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
.icon-bx-wraper.style-1.box-hover:hover .icon-cell i {
	color: var(--primary-dark) !important;
}

/* Website Development & Service Cards */
.ks-service-card {
	padding: 28px;
	height: 100%;
	transition: border-color .28s cubic-bezier(0.16, 1, 0.3, 1),
	            transform .28s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow .28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ks-service-card:hover {
	transform: translateY(-5px) !important;
	border-color: rgba(37, 99, 235, 0.45) !important;
	box-shadow: 0 20px 40px -14px rgba(15, 23, 42, 0.12) !important;
}
.ks-service-card__icon { display: block; font-size: 26px; margin-bottom: 14px; }
.ks-service-card:hover .ks-service-card__icon {
	transform: translateY(-2px) scale(1.06);
	color: var(--primary-dark) !important;
}
.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: 195px;
	border-radius: 14px;
	margin-bottom: 18px;
	display: block;
	object-fit: cover;
	border: 1px solid rgba(221, 228, 216, 0.9);
	box-shadow: 0 4px 18px rgba(38, 51, 44, 0.07);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.ks-service-card:hover .ks-service-card__media {
	transform: scale(1.03);
	box-shadow: 0 10px 28px rgba(38, 51, 44, 0.14);
}
.dz-media {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 26px rgba(38, 51, 44, 0.08);
	border: 1px solid var(--light-border, #DDE4D8);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.dz-media:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(38, 51, 44, 0.13);
}
.dz-media img {
	width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dz-media:hover img {
	transform: scale(1.025);
}
.ks-service-card__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--ks-ink);
	transition: color 0.2s ease;
}
.ks-service-card__link i {
	font-size: 12px;
	margin-left: 4px;
	transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ks-service-card:hover .ks-service-card__link { color: var(--primary); }
.ks-service-card:hover .ks-service-card__link i { transform: translateX(5px); }

.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: #0B132B !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: #CBD5E1; }
.footer-dark a, footer.site-footer.ks-footer-dark a { color: #CBD5E1; }
.footer-dark a:hover, footer.site-footer.ks-footer-dark a:hover { color: #38BDF8 !important; }
footer.site-footer.ks-footer-dark .copyright-text { color: #94A3B8; }
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: 13px;
	color: #94A3B8;
	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: #38BDF8;
	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 — Smooth, modern, subtle SaaS interactions
   ========================================================================== */

.btn {
	border-radius: 999px !important;
	position: relative;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary,
.appointment-btn,
.ks-cta-btn {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.btn-primary:hover,
.appointment-btn:hover,
.ks-cta-btn:hover {
	background: var(--primary-dark) !important;
	border-color: var(--primary-dark) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -4px rgba(37, 99, 235, 0.38) !important;
}
.btn-primary:active,
.appointment-btn:active,
.ks-cta-btn:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22) !important;
}

.btn-outline-primary {
	border-radius: 999px !important;
	color: var(--primary) !important;
	border-color: rgba(37, 99, 235, 0.45) !important;
	background-color: transparent !important;
}
.btn-outline-primary:hover {
	color: var(--primary-dark) !important;
	background-color: rgba(37, 99, 235, 0.08) !important;
	border-color: var(--primary) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.16) !important;
}
.btn-outline-primary:active {
	transform: translateY(0);
	background-color: rgba(37, 99, 235, 0.12) !important;
}

.btn-dark:hover,
.btn-secondary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.25) !important;
}

.btn-skew, .btn-skew span { transform: none !important; clip-path: none !important; }

/* Global Smooth Transitions */
a, .btn, .icon-bx-wraper, .pricingtable-wrapper, .badge, .ks-service-card {
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Internship & Service sidebar navigation — clean hover states
   ========================================================================== */

.service_menu_nav {
	background: #FFFFFF !important;
	border: 1px solid #DDE4D8 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	padding: 16px !important;
	box-shadow: 0 4px 18px rgba(26, 38, 31, 0.05) !important;
}
.service_menu_nav ul li {
	margin-bottom: 8px !important;
	list-style: none !important;
}
.service_menu_nav ul li:last-child {
	margin-bottom: 0 !important;
}
.service_menu_nav ul li a {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	padding: 12px 18px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: #1A261F !important;
	background: #F5F7F4 !important;
	border: 1px solid #DDE4D8 !important;
	border-radius: 10px !important;
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-decoration: none !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.service_menu_nav ul li a i {
	color: #2D5A43 !important;
	font-size: 15px !important;
	width: 18px !important;
	text-align: center !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: transform 0.2s ease, color 0.2s ease !important;
}
.service_menu_nav ul li a:hover {
	color: #1F3F2F !important;
	background: #E8EFE5 !important;
	border-color: #8FA28A !important;
	padding-left: 22px !important;
	transform: translateX(4px) !important;
}
.service_menu_nav ul li a:hover i {
	color: #1F3F2F !important;
	transform: scale(1.12) !important;
}
.service_menu_nav ul li.active a {
	color: #FFFFFF !important;
	background: #2D5A43 !important;
	border-color: #2D5A43 !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 14px rgba(45, 90, 67, 0.25) !important;
}
.service_menu_nav ul li.active a i {
	color: #FFFFFF !important;
}
.service_menu_nav ul li.active a:hover {
	background: #244835 !important;
	color: #FFFFFF !important;
	padding-left: 18px !important;
}
.service_menu_nav svg { display: none !important; }

.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; }

/* ==========================================================================
   Cursor & Interactive Elements Enhancement
   ========================================================================== */
a,
button,
[role="button"],
.btn,
.btn *,
.navbar-toggler,
.navicon,
.navicon span,
.nav > li > a,
.scroltop,
.scroltop i,
.whatsapp_float,
.whatsapp_float a,
.whatsapp_float img,
.accordion-header,
.accordion-button,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination-bullet,
.service_menu_nav li a,
.pricingtable-wrapper,
.ks-service-card,
.box-hover a,
input[type="submit"],
input[type="button"],
select,
.dropdown-toggle,
.dropdown-item {
	cursor: pointer !important;
}

button:disabled,
.btn:disabled,
.btn.disabled,
input:disabled {
	cursor: not-allowed !important;
}

/* ==========================================================================
   Interactive Hover & Micro-interaction Effects
   ========================================================================== */

/* Social Media Icons Hover */
.dz-social-icon ul li a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            background-color 0.22s ease,
	            box-shadow 0.22s ease,
	            color 0.22s ease !important;
}
.dz-social-icon ul li a:hover {
	transform: translateY(-3px) scale(1.06);
	background: var(--primary) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important;
}

/* Floating WhatsApp Button Hover */
.whatsapp_float a {
	display: block;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
	            filter 0.25s ease;
}
.whatsapp_float a:hover {
	transform: scale(1.1) translateY(-3px);
	filter: drop-shadow(0 8px 20px rgba(37, 211, 102, 0.5));
}

/* Scroll-to-Top Button Hover */
.scroltop {
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            background-color 0.22s ease,
	            box-shadow 0.22s ease !important;
}
.scroltop:hover {
	transform: translateY(-4px);
	background: var(--primary-dark) !important;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45) !important;
}

/* Swiper Pagination & Prev/Next Arrow Buttons Hover */
.num-pagination .btn-prev,
.num-pagination .btn-next {
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
.num-pagination .btn-prev:hover,
.num-pagination .btn-next:hover {
	background: var(--primary) !important;
	color: #ffffff !important;
	transform: scale(1.1);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* Footer Link Hovers */
footer.site-footer.ks-footer-dark .widget_working ul li a {
	display: inline-block;
	transition: color 0.2s ease, transform 0.2s ease;
}
footer.site-footer.ks-footer-dark .widget_working ul li a:hover {
	color: #38BDF8 !important;
	transform: translateX(5px);
}
footer.site-footer.ks-footer-dark .ks-footer-contact-list a {
	transition: color 0.2s ease;
}
footer.site-footer.ks-footer-dark .ks-footer-contact-list a:hover {
	color: #38BDF8 !important;
}

/* Badges Hover */
.badge.bg-primary {
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.badge.bg-primary:hover,
.icon-bx-wraper:hover .badge.bg-primary {
	background: var(--rgba-primary-2) !important;
	color: var(--primary-dark) !important;
}

/* Nav Tabs Hover */
.nav-tabs.style-1 .nav-link {
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
}
.nav-tabs.style-1 .nav-link:hover {
	color: var(--primary) !important;
	background: rgba(37, 99, 235, 0.06);
}

/* Callout & Perk Cards Hover */
.border.rounded-3.bg-white {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.border.rounded-3.bg-white:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.4) !important;
	box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.1) !important;
}

/* Contact Box Social Icons Hover */
.contact-box .dz-social-icon.style-1.dark ul li a {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	transition: all 0.22s ease;
}
.contact-box .dz-social-icon.style-1.dark ul li a:hover {
	background: #ffffff !important;
	color: var(--primary) !important;
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* Responsive typography & spacing */
@media (max-width: 767px) {
	.ks-hero-bg {
		padding: 120px 0 50px !important;
	}
	.ks-hero-bg .title {
		font-size: 32px !important;
		line-height: 1.25 !important;
	}
	.ks-hero-bg p {
		font-size: 15px !important;
	}
	.content-inner, .content-inner2 {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}
	.section-head .title {
		font-size: 28px !important;
	}
	.main-bar {
		margin: 0 8px !important;
		padding: 6px 10px !important;
	}
}

/* ==========================================================================
   Section Spacing & Empty Space Normalization
   ========================================================================== */

/* Fix 250px gap on homepage services section */
.content-inner2 {
	padding-top: 80px !important;
	padding-bottom: 60px !important;
}

/* Fix massive 200px gap on footer */
footer.site-footer.ks-footer-dark .footer-top,
.site-footer.style-1.footer-action .footer-top {
	padding-top: 60px !important;
	padding-bottom: 30px !important;
}

/* Button Skew Margin & Pseudo-Element Reset */
.btn.btn-skew,
.btn-skew {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.btn.btn-skew:after,
.btn-skew:after {
	display: none !important;
	content: none !important;
}

/* Equal Height Cards & Clean Baseline Alignment */
.icon-bx-wraper.style-1.box-hover {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}
.icon-bx-wraper.style-1.box-hover .icon-content {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
}
.icon-bx-wraper.style-1.box-hover .icon-content > :last-child {
	margin-top: auto !important;
}
.ks-service-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}
.ks-service-card .ks-service-card__link {
	margin-top: auto !important;
}
.pricingtable-wrapper.style-1 {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}
.pricingtable-wrapper.style-1 .pricingtable-inner {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	height: 100% !important;
}
.pricingtable-wrapper.style-1 .pricingtable-footer {
	margin-top: auto !important;
}

/* Sticky Sidebar & Widget Spacing */
.side-bar.sticky-top {
	position: sticky !important;
	top: 110px !important;
	z-index: 10;
}
.widget_contact svg,
.service_menu_nav svg {
	display: none !important;
}
.widget_contact {
	padding: 24px !important;
}
.widget_contact .icon-bx {
	margin-bottom: 15px !important;
}

/* Tablet & Mobile Sidebar Unstick & Counter Reset (< 992px) */
@media (max-width: 991px) {
	.side-bar.sticky-top {
		position: static !important;
		top: auto !important;
	}
	.counter-wrapper1 .counter-inner {
		margin: 0 !important;
		transform: none !important;
		border-radius: 16px !important;
	}
	.counter-wrapper1 .counter-inner .triangle1,
	.counter-wrapper1 .counter-inner .triangle2 {
		display: none !important;
	}
}

/* Testimonials Layout & Avatars Cleanup */
.testimonial-wrapper1 {
	overflow: hidden !important;
	position: relative !important;
}
@media (max-width: 991px) {
	.testimonial-wrapper1 .avatar1,
	.testimonial-wrapper1 .avatar2,
	.testimonial-wrapper1 .avatar3,
	.testimonial-wrapper1 .avatar4,
	.testimonial-wrapper1 .avatar5,
	.testimonial-wrapper1 .avatar6 {
		display: none !important;
	}
}

/* Fluid Typography & Headings Scaling across all viewports */
.ks-hero-bg .title {
	font-size: clamp(24px, 6vw, 46px) !important;
	line-height: 1.25 !important;
}
.ks-hero-bg p {
	font-size: clamp(14px, 3.8vw, 17px) !important;
	line-height: 1.6 !important;
}
.dz-bnr-inr.style-1 h1,
.dz-bnr-inr.style-1 .h1,
.dz-bnr-inr .dz-bnr-inr-entry h1 {
	font-size: clamp(24px, 5.5vw, 40px) !important;
	line-height: 1.25 !important;
	word-wrap: break-word;
}
.section-head .title {
	font-size: clamp(22px, 4.5vw, 36px) !important;
	line-height: 1.3 !important;
}
.section-head.side-line .title {
	font-size: clamp(22px, 4.5vw, 36px) !important;
}

/* Tablet & Mobile Testimonial & Decorative Elements (< 768px) */
@media (max-width: 767px) {
	.testimonial-wrapper1 .svg-shape,
	.testimonial-wrapper1 .svg-shape-2 {
		display: none !important;
	}
	.testimonial-wrapper1:before {
		font-size: 80px !important;
		opacity: 0.15 !important;
	}
	.about-bx4 .dz-media .image-box {
		left: 0 !important;
		top: -25px !important;
	}
}

/* Mobile Pricing Cards & Floating Action Buttons (< 576px) */
@media (max-width: 575px) {
	.pricingtable-wrapper.style-1 {
		padding: 40px 18px 24px !important;
	}
	.pricingtable-wrapper.style-1 .pricingtable-title {
		left: 18px !important;
	}
	.whatsapp_float {
		bottom: 65px !important;
		right: 15px !important;
	}
	.whatsapp_float_btn {
		width: 44px !important;
		height: 44px !important;
	}
	.scroltop {
		bottom: 15px !important;
		right: 15px !important;
		height: 38px !important;
		width: 38px !important;
		line-height: 38px !important;
	}
}

/* Small Mobile Screen Optimizations (<= 375px) */
@media (max-width: 375px) {
	.ks-hero-bg {
		padding: 110px 0 45px !important;
	}
	.ks-hero-bg .d-flex.gap-3 {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.ks-hero-bg .d-flex.gap-3 .btn {
		width: 100% !important;
		max-width: 260px;
		font-size: 13.5px !important;
		padding: 10px 16px !important;
	}
	.pricingtable-wrapper.style-1 {
		padding: 36px 14px 22px !important;
	}
	.pricingtable-wrapper.style-1 .pricingtable-bx {
		font-size: 28px !important;
	}
	.icon-bx-wraper.style-1 {
		padding: 20px 14px !important;
	}
	.ks-service-card {
		padding: 20px 14px !important;
	}
	.btn-lg {
		padding: 10px 16px !important;
		font-size: 13.5px !important;
	}
	.contact-box {
		padding: 30px 18px !important;
	}
}

/* ==========================================================================
   Accessibility & Interactive Cursor Pointer Rules
   ========================================================================== */
a, button, [role="button"], input[type="submit"], input[type="button"], .btn,
.nav-tabs .nav-link, .filter-tabs li, .swiper-button-next, .swiper-button-prev,
.pagination .page-link, .accordion-header, .accordion-button, .menu-btn,
.dz-card, .ks-course-card, .pricingtable-wrapper {
	cursor: pointer;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
	cursor: text;
}
select {
	cursor: pointer;
}

/* ==========================================================================
   Blank Space Elimination & Section Spacing Normalization (Site-Wide)
   ========================================================================== */
.dz-bnr-inr {
	height: 280px !important;
	min-height: 260px !important;
	padding-top: 60px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-size: cover !important;
	background-position: center !important;
	position: relative !important;
	overflow: hidden !important;
}

.dz-bnr-inr:before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(135deg, rgba(11, 19, 43, 0.92) 0%, rgba(15, 23, 42, 0.88) 50%, rgba(30, 64, 175, 0.82) 100%) !important;
	z-index: 1 !important;
}

.dz-bnr-inr .container {
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	height: auto !important;
}

.dz-bnr-inr .dz-bnr-inr-entry {
	display: block !important;
	vertical-align: middle !important;
}

.dz-bnr-inr h1 {
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 12px !important;
	font-size: clamp(24px, 4vw, 38px) !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.dz-bnr-inr .breadcrumb-row {
	display: inline-block !important;
	margin-top: 0 !important;
}

.dz-bnr-inr .breadcrumb {
	background: rgba(255, 255, 255, 0.12) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 999px !important;
	padding: 6px 20px !important;
	margin-bottom: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.dz-bnr-inr .breadcrumb li {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.75) !important;
}

.dz-bnr-inr .breadcrumb li a {
	color: rgba(255, 255, 255, 0.85) !important;
	transition: color 0.2s ease !important;
}

.dz-bnr-inr .breadcrumb li a:hover {
	color: #ffffff !important;
}

.dz-bnr-inr .breadcrumb li.active {
	color: #ffffff !important;
	font-weight: 600 !important;
}

.dz-bnr-inr .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.5) !important;
	padding: 0 8px !important;
}

/* Eliminate excessive padding on all content sections */
.content-inner {
	padding-top: 55px !important;
	padding-bottom: 50px !important;
}

.content-inner-1 {
	padding-top: 55px !important;
	padding-bottom: 50px !important;
}

.content-inner2 {
	padding-top: 55px !important;
	padding-bottom: 50px !important;
}

.section-head {
	margin-bottom: 28px !important;
}

.section-head .title {
	margin-bottom: 8px !important;
	letter-spacing: -0.015em !important;
}

@media (max-width: 991px) {
	.dz-bnr-inr {
		height: 230px !important;
		min-height: 210px !important;
		padding-top: 45px !important;
	}
	.content-inner,
	.content-inner-1,
	.content-inner2 {
		padding-top: 40px !important;
		padding-bottom: 35px !important;
	}
	.section-head {
		margin-bottom: 22px !important;
	}
}

@media (max-width: 576px) {
	.dz-bnr-inr {
		height: 190px !important;
		min-height: 180px !important;
		padding-top: 30px !important;
	}
	.content-inner,
	.content-inner-1,
	.content-inner2 {
		padding-top: 30px !important;
		padding-bottom: 25px !important;
	}
	.section-head {
		margin-bottom: 18px !important;
	}
}

/* ==========================================================================
   Premium UI/UX Polish for All Pages
   ========================================================================== */

/* Modern Card Styling */
.icon-bx-wraper.style-1,
.ks-service-card,
.pricingtable-wrapper.style-1,
.dz-card.style-1 {
	background: #ffffff !important;
	border: 1px solid rgba(226, 232, 240, 0.85) !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.03) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.icon-bx-wraper.style-1:hover,
.ks-service-card:hover,
.pricingtable-wrapper.style-1:hover,
.dz-card.style-1:hover {
	transform: translateY(-5px) !important;
	border-color: rgba(37, 99, 235, 0.35) !important;
	box-shadow: 0 20px 35px -8px rgba(37, 99, 235, 0.14), 0 2px 6px -1px rgba(15, 23, 42, 0.04) !important;
}

/* Featured / Active Card Distinction */
.pricingtable-wrapper.style-1.active {
	border-color: var(--primary) !important;
	position: relative !important;
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.02) 0%, #ffffff 100%) !important;
	box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.16), 0 0 0 1.5px var(--primary) !important;
}

/* Service Detail Sidebar Polish */
.widget.service_menu_nav {
	background: #FFFFFF !important;
	border: 1.5px solid #DDE4D8 !important;
	border-radius: 18px !important;
	padding: 22px 18px !important;
	box-shadow: 0 4px 18px rgba(26, 38, 31, 0.05) !important;
}

.widget.service_menu_nav ul li a {
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	padding: 12px 16px !important;
	color: #1A261F !important;
	background: #F5F7F4 !important;
	border: 1px solid #DDE4D8 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-decoration: none !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.widget.service_menu_nav ul li a i {
	color: #2D5A43 !important;
	font-size: 15px !important;
	width: 18px !important;
	text-align: center !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: transform 0.2s ease, color 0.2s ease !important;
}

.widget.service_menu_nav ul li a:hover {
	background: #E8EFE5 !important;
	color: #1F3F2F !important;
	border-color: #8FA28A !important;
	padding-left: 20px !important;
	transform: translateX(4px) !important;
}

.widget.service_menu_nav ul li a:hover i {
	color: #1F3F2F !important;
	transform: scale(1.12) !important;
}

.widget.service_menu_nav ul li.active a {
	background: #2D5A43 !important;
	color: #FFFFFF !important;
	border-color: #2D5A43 !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 14px rgba(45, 90, 67, 0.25) !important;
}

.widget.service_menu_nav ul li.active a i {
	color: #FFFFFF !important;
}

.widget.service_menu_nav ul li.active a:hover {
	background: #244835 !important;
	color: #FFFFFF !important;
	padding-left: 16px !important;
}

.widget_contact {
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 8px 25px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Contact Page Box Enhancements */
.contact-box {
	padding: 36px 28px !important;
}

.contact-box .icon-bx {
	width: 60px !important;
	height: 60px !important;
	border-radius: 14px !important;
	background: rgba(37, 99, 235, 0.08) !important;
	color: var(--primary) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 18px !important;
	font-size: 22px !important;
}

/* Policy and Legal Pages Content Styling */
.content-inner .about-details__title {
	color: var(--ks-ink) !important;
	font-weight: 600 !important;
	font-size: 16.5px !important;
	letter-spacing: 0.01em !important;
	padding-bottom: 8px !important;
	border-bottom: 2px solid rgba(37, 99, 235, 0.12) !important;
	margin-bottom: 12px !important;
}

.content-inner .about-details__text p {
	color: #475569 !important;
	line-height: 1.75 !important;
	font-size: 15px !important;
}
/* ==========================================================================
   Logo Palette Consistency & Clickable Cards Enhancement
   ========================================================================== */
.ks-service-card {
	position: relative;
	cursor: pointer;
	border: 1px solid var(--ks-silver-border) !important;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ks-service-card:hover {
	transform: translateY(-5px) !important;
	border-color: rgba(37, 99, 235, 0.4) !important;
	box-shadow: 0 20px 35px -8px rgba(37, 99, 235, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
}
.ks-service-card__title a {
	color: var(--ks-ink) !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	cursor: pointer !important;
}
.ks-service-card:hover .ks-service-card__title a,
.ks-service-card__title a:hover {
	color: var(--primary) !important;
}
.ks-service-card__media {
	cursor: pointer !important;
	transition: transform 0.25s ease !important;
}
.ks-service-card:hover .ks-service-card__media {
	transform: scale(1.02);
}

/* Service Detail Sidebar items click guarantee */
.service_menu_nav ul li a,
.widget.service_menu_nav ul li a {
	position: relative;
	z-index: 5;
	pointer-events: auto !important;
	cursor: pointer !important;
}
.service_menu_nav svg,
.widget.service_menu_nav svg {
	pointer-events: none !important;
	display: none !important;
}

/* Course Catalogue Pricing Cards hover & button consistency */
.pricingtable-wrapper.style-1 {
	border: 1px solid rgba(226, 232, 240, 0.9) !important;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pricingtable-wrapper.style-1:hover {
	transform: translateY(-5px) !important;
	border-color: rgba(37, 99, 235, 0.4) !important;
	box-shadow: 0 20px 35px -8px rgba(37, 99, 235, 0.16) !important;
}
.pricingtable-wrapper.style-1.active {
	border-color: var(--primary) !important;
	box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.2), 0 0 0 1.5px var(--primary) !important;
}
.pricingtable-wrapper.style-1 .pricingtable-title {
	color: var(--ks-ink) !important;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.pricingtable-wrapper.style-1 .pricingtable-features li i {
	color: var(--primary) !important;
}

/* Dropdown menu items smooth transition */
.ks-header .nav > li .sub-menu li a {
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ks-header .nav > li .sub-menu li a:hover {
	color: var(--primary) !important;
	background: #F8FAFC !important;
	padding-left: 24px !important;
}

/* ==========================================================================
   Comprehensive Text Visibility & Contrast Protection Layer
   Guarantees 100% legibility across all backgrounds, cards, tabs, and hover states.
   ========================================================================== */

/* 1. Universal Card & Box Hover Text Protection */
.icon-bx-wraper.style-1,
.icon-bx-wraper.style-1.box-hover,
.icon-bx-wraper.style-1.active,
.icon-bx-wraper.style-1:hover {
	background: #ffffff !important;
	color: #475569 !important;
}

.icon-bx-wraper.style-1 .dz-title,
.icon-bx-wraper.style-1 .dz-title a,
.icon-bx-wraper.style-1.active .dz-title,
.icon-bx-wraper.style-1.active .dz-title a {
	color: var(--ks-ink) !important;
	transition: color 0.2s ease !important;
}

.icon-bx-wraper.style-1:hover .dz-title,
.icon-bx-wraper.style-1:hover .dz-title a {
	color: var(--primary) !important;
}

.icon-bx-wraper.style-1 p,
.icon-bx-wraper.style-1 .icon-content p,
.icon-bx-wraper.style-1.active p,
.icon-bx-wraper.style-1.active .icon-content p {
	color: #475569 !important;
}

.icon-bx-wraper.style-1:hover p,
.icon-bx-wraper.style-1:hover .icon-content p {
	color: #1E293B !important;
}

/* Prevent buttons inside cards from inverting to white-on-white on card hover */
.icon-bx-wraper.style-1:hover .btn-primary,
.icon-bx-wraper.style-1.active .btn-primary {
	background-color: var(--primary) !important;
	color: #ffffff !important;
}
.icon-bx-wraper.style-1:hover .btn-primary:hover {
	background-color: var(--primary-dark) !important;
	color: #ffffff !important;
}

/* 2. Course Catalogue & Pricing Cards Legibility */
.pricingtable-wrapper.style-1,
/* ==========================================================================
   2. Course Catalogue — Modern Cards, Headings & Point Bullets
   ========================================================================== */

/* Course Card Base & Elevation */
.ks-course-card,
.pricingtable-wrapper.style-1 {
	position: relative !important;
	background: #ffffff !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 18px !important;
	padding: 34px 26px 26px !important;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

.ks-course-card:hover,
.pricingtable-wrapper.style-1:hover {
	transform: translateY(-6px) !important;
	border-color: rgba(37, 99, 235, 0.4) !important;
	box-shadow: 0 20px 38px -8px rgba(37, 99, 235, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
	background: #ffffff !important;
}

.ks-course-card.active,
.pricingtable-wrapper.style-1.active {
	border-color: var(--primary) !important;
	box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.18), 0 0 0 1.5px var(--primary) !important;
	background: #ffffff !important;
}

/* Course Header & Category Tag */
.ks-course-header {
	margin-bottom: 12px !important;
	text-align: left !important;
}

.ks-course-badge {
	display: inline-block !important;
	padding: 4px 12px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border-radius: 999px !important;
	background: rgba(37, 99, 235, 0.08) !important;
	color: var(--primary) !important;
	border: 1px solid rgba(37, 99, 235, 0.2) !important;
	margin-bottom: 10px !important;
}

/* Course Heading — Deep Navy, Crisp & High Contrast */
.ks-course-title,
.pricingtable-wrapper.style-1 .pricingtable-title,
.pricingtable-wrapper.style-1.active .pricingtable-title,
.pricingtable-wrapper.style-1:hover .pricingtable-title {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	background: transparent !important;
	color: #0F172A !important;
	font-family: var(--font-display) !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.01em !important;
	padding: 0 !important;
	margin: 0 0 10px 0 !important;
	text-align: left !important;
	border: none !important;
	transition: color 0.22s ease !important;
}

.ks-course-card:hover .ks-course-title,
.pricingtable-wrapper.style-1:hover .pricingtable-title {
	color: var(--primary) !important;
	background: transparent !important;
}

/* Course Pricing & Description */
.pricingtable-wrapper.style-1 .pricingtable-price {
	text-align: left !important;
	margin-bottom: 14px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid #F1F5F9 !important;
}

.pricingtable-wrapper.style-1 .pricingtable-bx,
.pricingtable-wrapper.style-1.active .pricingtable-bx,
.pricingtable-wrapper.style-1:hover .pricingtable-bx {
	font-size: 28px !important;
	font-weight: 800 !important;
	color: var(--primary) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	margin-bottom: 6px !important;
}

.pricingtable-wrapper.style-1 .pricingtable-bx small {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #64748B !important;
	margin-left: 4px !important;
}

.ks-course-desc,
.pricingtable-wrapper.style-1 .pricingtable-price p,
.pricingtable-wrapper.style-1.active .pricingtable-price p,
.pricingtable-wrapper.style-1:hover .pricingtable-price p {
	color: #475569 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

/* Complete Removal of Legacy Blue Ticks & Black Hover Circles */
.pricingtable-wrapper.style-1 .pricingtable-features li:after,
.pricingtable-wrapper.style-1:hover .pricingtable-features li:after,
.pricingtable-wrapper.style-1.active .pricingtable-features li:after,
.pricingtable-wrapper.style-1 .pricingtable-features li:before,
.ks-course-points li:after,
.ks-course-points li:hover:after,
.ks-point-item:after,
.ks-point-item:hover:after {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
}

/* Course Points List Container */
.ks-course-points,
.pricingtable-wrapper.style-1 .pricingtable-features,
.pricingtable-wrapper.style-1.active .pricingtable-features,
.pricingtable-wrapper.style-1:hover .pricingtable-features {
	padding: 4px 0 16px 0 !important;
	margin: 0 !important;
	border: none !important;
	list-style: none !important;
	text-align: left !important;
}

/* Modern Course Point Item */
.ks-point-item,
.pricingtable-wrapper.style-1 .pricingtable-features li,
.pricingtable-wrapper.style-1.active .pricingtable-features li,
.pricingtable-wrapper.style-1:hover .pricingtable-features li {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	padding: 8px 12px !important;
	margin: 6px 0 !important;
	background: #F8FAFC !important;
	border: 1px solid #EDF2F7 !important;
	border-radius: 8px !important;
	color: #334155 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: default !important;
}

/* Modern Bullet Chevron Indicator */
.ks-point-bullet {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	border-radius: 6px !important;
	background: rgba(37, 99, 235, 0.08) !important;
	color: var(--primary) !important;
	margin-right: 10px !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ks-point-bullet i {
	font-size: 9px !important;
	color: var(--primary) !important;
	line-height: 1 !important;
	transition: all 0.2s ease !important;
}

.ks-point-text {
	flex: 1;
	color: inherit;
	transition: color 0.2s ease;
}

/* Subtle, Attractive & High-Contrast Point Hover Effect */
.ks-point-item:hover,
.pricingtable-wrapper.style-1 .pricingtable-features li:hover {
	background: rgba(37, 99, 235, 0.05) !important;
	border-color: rgba(37, 99, 235, 0.22) !important;
	transform: translateX(4px) !important;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08) !important;
	color: #0F172A !important;
}

.ks-point-item:hover .ks-point-text,
.pricingtable-wrapper.style-1 .pricingtable-features li:hover .ks-point-text {
	color: #0F172A !important;
	font-weight: 600 !important;
}

.ks-point-item:hover .ks-point-bullet,
.pricingtable-wrapper.style-1 .pricingtable-features li:hover .ks-point-bullet {
	background: var(--primary) !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.ks-point-item:hover .ks-point-bullet i,
.pricingtable-wrapper.style-1 .pricingtable-features li:hover .ks-point-bullet i {
	color: #ffffff !important;
	transform: translateX(1px);
}

/* 3. About Us Tabs Clarity (No Invisible White Text) */
.nav-tabs.style-1 {
	border-bottom: 2px solid #E2E8F0 !important;
	display: flex !important;
	gap: 8px !important;
}
.nav-tabs.style-1:after {
	display: none !important;
}
.nav-tabs.style-1 .nav-item {
	margin-bottom: 0 !important;
}
.nav-tabs.style-1 .nav-link {
	color: #0F172A !important;
	background: #F1F5F9 !important;
	border: 1px solid #CBD5E1 !important;
	border-radius: 8px !important;
	font-weight: 500 !important;
	font-size: 14.5px !important;
	padding: 10px 22px !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav-tabs.style-1 .nav-link span {
	transform: none !important;
	color: inherit !important;
}
.nav-tabs.style-1 .nav-link:hover {
	color: var(--primary) !important;
	background: rgba(37, 99, 235, 0.08) !important;
	border-color: var(--primary) !important;
}
.nav-tabs.style-1 .nav-link.active {
	color: #ffffff !important;
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}
.nav-tabs.style-1 .nav-link.active span {
	color: #ffffff !important;
}

.tab-content .content p {
	color: #334155 !important;
	line-height: 1.75 !important;
	font-size: 15px !important;
}

/* 4. Contact Us Page Box High-Contrast Styling */
.contact-box {
	background: #0B132B !important;
	border: 1px solid rgba(148, 163, 184, 0.2) !important;
	border-radius: 16px !important;
	padding: 40px 32px !important;
	color: #ffffff !important;
	box-shadow: 0 16px 36px -8px rgba(11, 19, 43, 0.35) !important;
}
.contact-box:before,
.contact-box:after {
	display: none !important;
}
.contact-box .contact-title {
	color: #ffffff !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin-bottom: 12px !important;
}
.contact-box .contact-text {
	color: #94A3B8 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	margin-bottom: 24px !important;
}
.contact-box .widget.widget_getintuch ul {
	margin: 0 0 30px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.contact-box .widget.widget_getintuch ul li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
	margin-bottom: 18px !important;
}
.contact-box .widget.widget_getintuch ul li i {
	color: #38BDF8 !important;
	font-size: 18px !important;
	margin-top: 4px !important;
	flex-shrink: 0 !important;
}
.contact-box .widget.widget_getintuch ul li p {
	color: #E2E8F0 !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
}
.contact-box h6,
.contact-box h6.text-white {
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	margin-bottom: 14px !important;
}
.contact-box .dz-social-icon.style-1.dark ul {
	display: flex !important;
	gap: 10px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.contact-box .dz-social-icon.style-1.dark ul li a {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: #1E293B !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #E2E8F0 !important;
	text-decoration: none !important;
	transition: all 0.22s ease !important;
	border: 1px solid rgba(226, 232, 240, 0.12) !important;
}
.contact-box .dz-social-icon.style-1.dark ul li a:hover {
	background: var(--primary) !important;
	color: #ffffff !important;
	transform: translateY(-3px) scale(1.08) !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}
.contact-box svg {
	display: none !important;
}

/* 5. CTA Callout Sections (e.g. on Course Catalogue & Portfolio) */
.bg-primary.text-white,
section.bg-primary {
	background: var(--primary) !important;
	color: #ffffff !important;
}
.bg-primary.text-white h1,
.bg-primary.text-white h2,
.bg-primary.text-white h3,
.bg-primary.text-white h4,
.bg-primary.text-white h5,
.bg-primary.text-white h6,
.bg-primary.text-white .title,
.bg-primary.text-white p,
.bg-primary.text-white span {
	color: #ffffff !important;
}
.bg-primary.text-white .btn-light {
	background: #ffffff !important;
	color: var(--primary) !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	padding: 11px 28px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
	transition: all 0.22s ease !important;
}
.bg-primary.text-white .btn-light:hover {
	background: #F8FAFC !important;
	color: var(--primary-dark) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* 6. General Form Controls Text Clarity */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
	background: #ffffff !important;
	color: #0F172A !important;
	border: 1px solid #CBD5E1 !important;
	font-size: 14.5px !important;
	border-radius: 10px !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	background: #ffffff !important;
	color: #0F172A !important;
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
	outline: none !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: #94A3B8 !important;
	opacity: 1 !important;
}
label, .form-label {
	color: #0F172A !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	margin-bottom: 6px !important;
}

/* 7. Button Hover State Contrast Guarantee */
.btn-outline-primary:hover {
	color: #ffffff !important;
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.35) !important;
}
.btn-outline-primary:hover span,
.btn-outline-primary:hover i {
	color: #ffffff !important;
}

/* 8. Sub-Counters on Service Pages */
.counter-inner-2 .title {
	color: var(--primary) !important;
	font-weight: 700 !important;
}
.counter-inner-2 p,
.text-secondary-2 {
	color: #475569 !important;
	font-weight: 500 !important;
}

/* 9. Testimonial Quote & Info Legibility */
.testimonial-1 .testimonial-text {
	color: #334155 !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	text-transform: none !important;
}
.testimonial-1 .testimonial-name {
	color: #0F172A !important;
	font-weight: 600 !important;
}
.testimonial-1 .testimonial-position {
	color: var(--primary) !important;
	font-weight: 500 !important;
}

/* 10. Counter Wrapper p text clarity */
.counter-wrapper1 .counter-inner p {
	color: #334155 !important;
	font-weight: 500 !important;
}
.counter-wrapper1 .counter-inner p.text-muted,
.counter-wrapper1 .counter-inner p.text-white-50 {
	color: #64748B !important;
	font-weight: 500 !important;
}

/* 11. Sidebar Contact Widget Legibility & High Contrast */
.widget_contact {
	background: #F8FAFC !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
	text-align: center !important;
	position: relative !important;
	z-index: 1 !important;
	padding: 32px 24px !important;
}
.widget_contact:before {
	display: none !important;
}
.widget_contact .icon-bx {
	margin-bottom: 16px !important;
}
.widget_contact .icon-bx i {
	color: var(--primary) !important;
	font-size: 56px !important;
	line-height: 1 !important;
}
.widget_contact h4 {
	color: #0F172A !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	border-bottom: 1px solid #E2E8F0 !important;
	padding-bottom: 14px !important;
	margin-bottom: 14px !important;
}
.widget_contact .phone-number,
.widget_contact .phone-number a {
	color: var(--primary) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin-bottom: 6px !important;
}
.widget_contact .email,
.widget_contact .email a {
	color: #475569 !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	margin-bottom: 24px !important;
	display: block !important;
}
.widget_contact .email a:hover {
	color: var(--primary) !important;
}
.widget_contact .btn-dark {
	background: #0F172A !important;
	color: #ffffff !important;
	border-color: #0F172A !important;
	transition: all 0.25s ease !important;
}
.widget_contact .btn-dark span {
	color: #ffffff !important;
}
.widget_contact .btn-dark:hover {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: #ffffff !important;
}
.widget_contact .btn-dark:hover span {
	color: #ffffff !important;
}

/* 12. Service Card Description Hover Legibility */
.ks-service-card:hover .ks-service-card__desc {
	color: #334155 !important;
}

/* ==========================================================================
   13. Homepage: Modern About Us & Statistics Section Enhancement
   ========================================================================== */

/* About Us Media Composition */
.ks-about-media-wrap {
	position: relative;
	padding: 15px 15px 25px 15px;
	text-align: center;
}

.ks-about-img-main {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 48px -12px rgba(11, 25, 44, 0.16), 0 0 0 1px rgba(37, 99, 235, 0.12);
	border: 1px solid #E2E8F0;
	background: #0B192C;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.ks-about-img-main::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, rgba(11, 25, 44, 0) 65%, rgba(11, 25, 44, 0.22) 100%);
}

.ks-about-img-main img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-about-media-wrap:hover .ks-about-img-main {
	box-shadow: 0 28px 58px -14px rgba(37, 99, 235, 0.24), 0 0 0 1px rgba(37, 99, 235, 0.3);
	transform: translateY(-3px);
	border-color: rgba(37, 99, 235, 0.35);
}

.ks-about-media-wrap:hover .ks-about-img-main img {
	transform: scale(1.025);
}

/* Floating Glassmorphic Badges */
/* Floating Glassmorphic Badge */
.ks-about-badge-exp {
	position: absolute;
	bottom: 15px;
	right: 15px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 12px 18px;
	box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.12);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 3;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-about-badge-exp:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 32px -8px rgba(37, 99, 235, 0.2);
	border-color: rgba(37, 99, 235, 0.35);
}

.ks-badge-icon,
.ks-exp-icon {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 10px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition: all 0.25s ease;
}

.ks-about-badge-float:hover .ks-badge-icon,
.ks-about-badge-exp:hover .ks-exp-icon {
	background: var(--primary);
	color: #ffffff;
}

.ks-badge-info,
.ks-exp-info {
	text-align: left;
}

.ks-badge-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #0F172A;
	line-height: 1.25;
}

.ks-badge-subtitle {
	display: block;
	font-size: 12px;
	color: #64748B;
	font-weight: 500;
	margin-top: 2px;
}

.ks-exp-num {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--primary);
	font-family: var(--font-display);
	line-height: 1.1;
}

.ks-exp-label {
	display: block;
	font-size: 12px;
	color: #475569;
	font-weight: 600;
}

/* Modern Capability Cards Grid */
.ks-capability-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: default;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.ks-capability-card:hover {
	transform: translateY(-2px);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 8px 18px -4px rgba(37, 99, 235, 0.12);
	background: #FFFFFF;
}

.ks-cap-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 9px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: all 0.22s ease;
}

.ks-capability-card:hover .ks-cap-icon {
	background: var(--primary);
	color: #ffffff;
	transform: scale(1.05);
}

.ks-cap-name {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F172A;
	transition: color 0.2s ease;
}

.ks-capability-card:hover .ks-cap-name {
	color: var(--primary);
}

/* Modern Statistics Container & Cards */
.counter-wrapper1 {
	position: relative !important;
	margin-top: 50px !important;
	margin-bottom: 25px !important;
	padding: 0 !important;
	z-index: 5 !important;
}

.ks-stats-container {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 24px !important;
	padding: 44px 34px 32px !important;
	box-shadow: 0 12px 36px -6px rgba(15, 23, 42, 0.07) !important;
	position: relative !important;
}

.ks-stat-card {
	background: #F8FAFC;
	border: 1px solid #EEF2F6;
	border-radius: 18px;
	padding: 28px 20px 22px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-stat-card:hover {
	transform: translateY(-6px);
	background: #FFFFFF;
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
}

.ks-stat-icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
	transition: all 0.28s ease;
}

.ks-stat-card:hover .ks-stat-icon {
	background: var(--primary);
	color: #ffffff;
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.ks-stat-number {
	font-size: clamp(32px, 3.8vw, 44px) !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	font-family: var(--font-display) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 6px !important;
	transition: color 0.2s ease;
}

.ks-stat-card:hover .ks-stat-number {
	color: var(--primary) !important;
}

.ks-stat-plus {
	color: var(--primary) !important;
	font-weight: 700;
	margin-left: 2px;
}

.ks-stat-label {
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin-bottom: 4px !important;
	line-height: 1.35 !important;
}

.ks-stat-desc {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #64748B !important;
	margin-bottom: 0 !important;
	line-height: 1.4 !important;
}

/* Statistics Footnote */
.ks-footnote-pill {
	display: inline-flex;
	align-items: center;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	padding: 8px 24px;
	font-size: 13.5px;
	font-weight: 500;
	color: #475569;
}

/* Responsive Design Tweaks */
@media (max-width: 991px) {
	.ks-about-media-wrap {
		max-width: 520px;
		margin: 0 auto;
		padding: 15px 10px 25px 10px;
	}
	.ks-stats-container {
		padding: 30px 20px 24px !important;
	}
}

@media (max-width: 575px) {
	.ks-about-media-wrap {
		padding: 10px 0 20px 0;
	}
	.ks-about-badge-exp {
		position: static;
		margin-top: 14px;
		width: 100%;
		justify-content: center;
	}
	.ks-stat-card {
		padding: 20px 12px 16px;
	}
	.ks-stat-icon {
		width: 42px;
		height: 42px;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.ks-stat-label {
		font-size: 13.5px !important;
	}
	.ks-stat-desc {
		font-size: 11.5px !important;
	}
	.ks-footnote-pill {
		font-size: 12px;
		padding: 6px 14px;
	}
}

/* ==========================================================================
   Homepage 6-Service Cards Presentation
   ========================================================================== */
.ks-home-service-card {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 32px 26px 28px;
	box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.ks-home-service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--primary-light));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ks-home-service-card:hover {
	transform: translateY(-6px);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

.ks-home-service-card:hover::before {
	opacity: 1;
}

.ks-home-svc-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 20px;
	transition: all 0.28s ease;
}

.ks-home-service-card:hover .ks-home-svc-icon {
	background: var(--primary);
	color: #ffffff;
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.ks-home-svc-title {
	font-size: 19px !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	line-height: 1.35 !important;
	transition: color 0.2s ease;
}

.ks-home-svc-title a {
	color: #0F172A !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ks-home-service-card:hover .ks-home-svc-title a {
	color: var(--primary) !important;
}

.ks-home-svc-desc {
	font-size: 14.5px !important;
	line-height: 1.65 !important;
	color: #475569 !important;
}

.ks-home-svc-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ks-home-svc-link i {
	font-size: 12px;
	transition: transform 0.2s ease;
}

.ks-home-service-card:hover .ks-home-svc-link {
	color: var(--primary-dark);
}

.ks-home-service-card:hover .ks-home-svc-link i {
	transform: translateX(4px);
}

/* ==========================================================================
   Careers Page: Internship Domains & Pillar Cards
   ========================================================================== */
.ks-career-pillar-card {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 18px;
	padding: 28px 20px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
	transition: all 0.25s ease;
}

.ks-career-pillar-card:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: 0 12px 24px -6px rgba(37, 99, 235, 0.12);
}

.ks-pillar-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: all 0.25s ease;
}

.ks-career-pillar-card:hover .ks-pillar-icon {
	background: var(--primary);
	color: #ffffff;
	transform: scale(1.06);
}

.ks-pillar-title {
	font-size: 16px;
	font-weight: 700;
	color: #0F172A;
}

.ks-pillar-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: #64748B;
}

.ks-domain-card {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 22px 20px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
	transition: all 0.25s ease;
}

.ks-domain-card:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 10px 22px -6px rgba(37, 99, 235, 0.14);
}

.ks-domain-icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 10px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	transition: all 0.22s ease;
}

.ks-domain-card:hover .ks-domain-icon {
	background: var(--primary);
	color: #ffffff;
}

.ks-domain-title {
	font-size: 16px;
	font-weight: 700;
	color: #0F172A;
	transition: color 0.2s ease;
}

.ks-domain-card:hover .ks-domain-title {
	color: var(--primary);
}

.ks-domain-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: #475569;
}

.popular-plan {
	border-color: var(--primary) !important;
	box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.2) !important;
	transform: scale(1.02);
}

@media (max-width: 991px) {
	.popular-plan {
		transform: none !important;
	}
}

/* ==========================================================================
   Homepage Continuous Horizontal Services Marquee Showcase
   ========================================================================== */
.ks-services-marquee-wrap {
	position: relative;
	width: 100%;
	padding: 10px 0 20px;
	overflow: hidden;
}

/* Edge gradient mask for smooth fade-in and fade-out */
.ks-services-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 18px 4px 30px;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 4%, rgba(0,0,0,1) 96%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 4%, rgba(0,0,0,1) 96%, transparent 100%);
}

.ks-services-marquee-track {
	display: flex;
	gap: 26px;
	width: max-content;
	animation: ksMarqueeContinuousScroll 38s linear infinite;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Seamless infinite right-to-left loop */
@keyframes ksMarqueeContinuousScroll {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Pause on hover and pause toggle */
.ks-services-marquee:hover .ks-services-marquee-track,
.ks-services-marquee-track.is-paused,
.ks-services-marquee-track.is-touch-paused {
	animation-play-state: paused !important;
}

/* Showcase Card */
.ks-showcase-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 350px;
	width: 350px;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 32px 28px 28px;
	text-decoration: none !important;
	color: inherit;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.ks-showcase-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary) 0%, #38BDF8 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Interactive Card Hover Effects */
.ks-showcase-card:hover {
	transform: translateY(-8px) scale(1.015);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 22px 48px -12px rgba(37, 99, 235, 0.2), 0 4px 14px rgba(15, 23, 42, 0.06);
}

.ks-showcase-card:hover::before {
	opacity: 1;
}

.ks-showcase-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.ks-showcase-badge {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #94A3B8;
	font-family: monospace, sans-serif;
	transition: color 0.3s ease;
}

.ks-showcase-card:hover .ks-showcase-badge {
	color: var(--primary);
}

/* Icon Container & Motion Animation */
.ks-showcase-icon {
	width: 66px;
	height: 66px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(56, 189, 248, 0.12) 100%);
	border: 1px solid rgba(37, 99, 235, 0.16);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 27px;
	transition: all 0.35s ease;
	position: relative;
}

.ks-showcase-card:hover .ks-showcase-icon {
	background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%);
	color: #ffffff;
	border-color: var(--primary);
	box-shadow: 0 10px 24px -4px rgba(37, 99, 235, 0.45);
	animation: ksIconGentleMotion 1.2s ease-in-out infinite alternate;
}

@keyframes ksIconGentleMotion {
	0% {
		transform: scale(1) translateY(0);
	}
	100% {
		transform: scale(1.08) translateY(-2px);
	}
}

.ks-showcase-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.ks-showcase-title {
	font-size: 19.5px;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 12px;
	line-height: 1.35;
	transition: color 0.25s ease;
}

.ks-showcase-card:hover .ks-showcase-title {
	color: var(--primary);
}

.ks-showcase-desc {
	font-size: 14px;
	line-height: 1.62;
	color: #475569;
	margin-bottom: 20px;
	flex: 1 1 auto;
}

.ks-showcase-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	transition: all 0.25s ease;
}

.ks-showcase-link i {
	font-size: 13px;
	transition: transform 0.25s ease;
}

.ks-showcase-card:hover .ks-showcase-link {
	color: #1D4ED8;
}

.ks-showcase-card:hover .ks-showcase-link i {
	transform: translateX(6px);
}

/* Header Live Indicator & Control Button */
.ks-marquee-header-status {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.ks-marquee-live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

.ks-live-ping {
	position: absolute;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #10B981;
	opacity: 0.75;
	animation: ksLivePing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ks-live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #10B981;
	position: relative;
	z-index: 1;
}

@keyframes ksLivePing {
	75%, 100% {
		transform: scale(2.2);
		opacity: 0;
	}
}

.ks-live-text {
	font-size: 12.5px;
	font-weight: 600;
	color: #0F172A;
	letter-spacing: 0.3px;
}

.ks-marquee-ctrl-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #F1F5F9;
	border: none;
	color: #475569;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ks-marquee-ctrl-btn:hover {
	background: var(--primary);
	color: #ffffff;
	transform: scale(1.08);
}

/* Bottom CTA Banner */
.ks-services-bottom-cta .btn {
	box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.35);
	transition: all 0.25s ease;
}

.ks-services-bottom-cta .btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.48);
}

/* Responsive Rules */
@media (max-width: 991px) {
	.ks-showcase-card {
		flex: 0 0 310px;
		width: 310px;
		padding: 26px 22px 22px;
	}
	.ks-services-marquee-track {
		gap: 20px;
		animation-duration: 32s;
	}
}

@media (max-width: 576px) {
	.ks-showcase-card {
		flex: 0 0 275px;
		width: 275px;
		padding: 22px 18px 18px;
		border-radius: 16px;
	}
	.ks-showcase-icon {
		width: 54px;
		height: 54px;
		font-size: 22px;
		border-radius: 14px;
		margin-bottom: 16px;
	}
	.ks-showcase-title {
		font-size: 17px;
	}
	.ks-showcase-desc {
		font-size: 13px;
		line-height: 1.55;
		margin-bottom: 16px;
	}
	.ks-services-marquee-track {
		gap: 16px;
		animation-duration: 26s;
	}
}

/* ==========================================================================
   MODERN DESIGN UPGRADE — SAGE & GOLD PALETTE (HERO, CARDS, SHOWCASE & FOOTER)
   ========================================================================== */

/* Global Links, Headings & Buttons */
a {
	color: var(--muted-text);
	transition: color 0.3s ease;
}
a:hover {
	color: var(--primary-sage);
}
h1, h2, h3, h4, h5, h6, .title, .dz-title {
	color: var(--dark-heading);
	transition: color 0.3s ease;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .dz-title a:hover {
	color: var(--dark-sage) !important;
}

/* Primary Button Sage Styling */
.btn-primary,
.appointment-btn,
.ks-cta-btn {
	background-color: var(--primary-sage) !important;
	border-color: var(--primary-sage) !important;
	color: #FFFFFF !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary:hover,
.appointment-btn:hover,
.ks-cta-btn:hover {
	background-color: var(--dark-sage) !important;
	border-color: var(--dark-sage) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(113, 134, 109, 0.35) !important;
}
.btn-outline-primary {
	color: var(--primary-sage) !important;
	border-color: var(--primary-sage) !important;
	background: transparent !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-outline-primary:hover {
	background-color: var(--primary-sage) !important;
	border-color: var(--primary-sage) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(143, 162, 138, 0.3) !important;
}
.btn-gold {
	background-color: var(--gold-accent) !important;
	border-color: var(--gold-accent) !important;
	color: #FFFFFF !important;
	transition: all 0.3s ease !important;
}
.btn-gold:hover {
	background-color: var(--dark-gold) !important;
	border-color: var(--dark-gold) !important;
	color: #FFFFFF !important;
	box-shadow: 0 8px 22px rgba(174, 141, 80, 0.35) !important;
}

/* Hero Modern Elements */
.ks-hero-bg {
	background: radial-gradient(circle at 50% 20%, rgba(199, 211, 192, 0.45) 0%, rgba(200, 169, 107, 0.12) 40%, rgba(247, 244, 237, 0) 70%), #F7F4ED !important;
	position: relative;
}
.ks-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 18px;
	border-radius: 999px;
	background: #EBF0E8;
	border: 1px solid var(--light-sage);
	color: var(--dark-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: 0 2px 10px rgba(38, 51, 44, 0.05);
}
.ks-hero-eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary-sage);
	display: inline-block;
	box-shadow: 0 0 0 rgba(143, 162, 138, 0.7);
	animation: ks-pulse 2s infinite;
}
@keyframes ks-pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(143, 162, 138, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 8px rgba(143, 162, 138, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(143, 162, 138, 0);
	}
}
.ks-gradient-text {
	background: linear-gradient(135deg, #26332C 0%, #71866D 50%, #8FA28A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}
.ks-gold-text {
	background: linear-gradient(135deg, #C8A96B 0%, #AE8D50 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* Hero Floating Feature Pills */
.ks-hero-feature-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 30px;
}
.ks-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 30px;
	background: #FFFFFF;
	border: 1px solid var(--light-border);
	color: var(--dark-heading);
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(38, 51, 44, 0.05);
	transition: all 0.3s ease;
}
.ks-hero-pill:hover {
	border-color: var(--primary-sage);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(143, 162, 138, 0.15);
}
.ks-hero-pill i {
	color: var(--gold-accent);
}

/* Our Work / Project Cards */
.ks-project-card {
	background: #FFFFFF;
	border: 1px solid var(--light-border);
	border-radius: 18px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.32s ease;
	box-shadow: 0 4px 20px rgba(38, 51, 44, 0.04);
}
.ks-project-card:hover {
	transform: translateY(-8px);
	border-color: var(--primary-sage);
	box-shadow: 0 20px 42px -10px rgba(38, 51, 44, 0.12),
	            0 0 0 1px rgba(143, 162, 138, 0.25);
}
.ks-project-thumb {
	position: relative;
	overflow: hidden;
	height: 195px;
	background: #26332C;
}
.ks-project-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ks-project-card:hover .ks-project-thumb img {
	transform: scale(1.06);
}
.ks-project-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(38, 51, 44, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--gold-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 5px 12px;
	border-radius: 20px;
	border: 1px solid rgba(200, 169, 107, 0.35);
	text-transform: uppercase;
	z-index: 2;
}
.ks-project-content {
	padding: 24px 22px 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.ks-project-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dark-heading);
	margin-bottom: 8px;
	transition: color 0.3s ease;
}
.ks-project-card:hover .ks-project-title {
	color: var(--dark-sage);
}
.ks-project-desc {
	font-size: 13.5px;
	color: var(--body-text);
	line-height: 1.55;
	margin-bottom: 16px;
	flex-grow: 1;
}
.ks-project-action {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--light-border);
}
.ks-project-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-sage);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.3s ease, color 0.3s ease;
	text-decoration: none !important;
}
.ks-project-link:hover {
	color: var(--dark-sage);
	gap: 10px;
}

/* What We Build (B2B / B2C) Modern Architecture Cards */
.ks-build-card {
	background: #FFFFFF;
	border: 1px solid var(--light-border);
	border-radius: 20px;
	padding: 36px 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.32s ease;
	position: relative;
	box-shadow: 0 6px 24px rgba(38, 51, 44, 0.04);
}
.ks-build-card:hover {
	transform: translateY(-6px);
	border-color: var(--primary-sage);
	box-shadow: 0 22px 48px -12px rgba(38, 51, 44, 0.12),
	            0 0 0 1px rgba(143, 162, 138, 0.25);
}
.ks-build-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}
.ks-build-card-icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: #EBF0E8;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-sage);
	font-size: 24px;
	transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.ks-build-card:hover .ks-build-card-icon {
	background: var(--primary-sage);
	color: #FFFFFF;
	transform: scale(1.05);
}
.ks-build-card-badge {
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 13px;
	border-radius: 20px;
	background: var(--very-light-bg);
	color: var(--muted-text);
	border: 1px solid var(--light-border);
	letter-spacing: 0.3px;
}
.ks-build-card-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--dark-heading);
	margin-bottom: 10px;
}
.ks-build-card-lead {
	font-size: 14.5px;
	color: var(--body-text);
	line-height: 1.6;
	margin-bottom: 22px;
}
.ks-build-features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px 0;
	flex-grow: 1;
}
.ks-build-features li {
	display: flex;
	align-items: flex-start;
	font-size: 14px;
	color: var(--body-text);
	margin-bottom: 12px;
	line-height: 1.5;
}
.ks-build-features li i {
	color: var(--primary-sage);
	font-size: 15px;
	margin-right: 11px;
	margin-top: 3px;
	flex-shrink: 0;
}

/* Specialty Showcase Box */
.ks-specialty-box {
	background: linear-gradient(135deg, #1E2822 0%, #26332C 100%);
	border: 1px solid rgba(200, 169, 107, 0.35);
	border-radius: 24px;
	padding: 44px 42px;
	box-shadow: 0 20px 50px rgba(30, 40, 34, 0.35);
	position: relative;
	overflow: hidden;
}
.ks-specialty-box::before {
	content: "";
	position: absolute;
	top: -50px;
	right: -50px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(200, 169, 107, 0.15) 0%, transparent 70%);
	pointer-events: none;
}
.ks-specialty-icon-wrapper {
	width: 96px;
	height: 96px;
	border-radius: 24px;
	background: rgba(143, 162, 138, 0.15);
	border: 1px solid rgba(200, 169, 107, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 32px rgba(143, 162, 138, 0.25);
	margin: 0 auto;
}
.ks-specialty-icon-wrapper i {
	color: var(--gold-accent) !important;
}
.ks-specialty-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(200, 169, 107, 0.12);
	border: 1px solid rgba(200, 169, 107, 0.3);
	color: #F7F4ED;
	font-size: 12.5px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 20px;
	margin-right: 8px;
	margin-bottom: 8px;
}
.ks-specialty-pill i {
	color: var(--gold-accent);
}

/* Testimonials Polish */
.testimonial-wrapper1 {
	position: relative;
	overflow: hidden;
}
.testimonial-1 {
	background: #FFFFFF;
	border: 1px solid var(--light-border);
	border-radius: 20px;
	padding: 36px 30px;
	box-shadow: 0 8px 30px rgba(38, 51, 44, 0.05);
	position: relative;
	margin: 15px 6px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-1:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(38, 51, 44, 0.1);
}
.testimonial-1 .testimonial-rating {
	margin-bottom: 14px;
	list-style: none;
	padding: 0;
	display: flex;
	gap: 4px;
	justify-content: center;
}
.testimonial-1 .testimonial-rating li i {
	color: var(--gold-accent) !important;
	font-size: 15px;
}
.testimonial-1 .testimonial-text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--body-text);
	font-style: italic;
	margin-bottom: 20px;
}
.testimonial-1 .testimonial-name {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--dark-heading);
	margin-bottom: 4px;
}
.testimonial-1 .testimonial-position {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	color: var(--primary-sage) !important;
}
/* Hide broken/noimage decorative avatars around testimonials */
.testimonial-wrapper1 .avatar1,
.testimonial-wrapper1 .avatar2,
.testimonial-wrapper1 .avatar3,
.testimonial-wrapper1 .avatar4,
.testimonial-wrapper1 .avatar5,
.testimonial-wrapper1 .avatar6 {
	display: none !important;
}

/* Modern Compact Footer with Exact Reorganized Areas */
.ks-footer-dark {
	background: #1E2822 !important;
	color: #C7D3C0 !important;
	position: relative;
	border-top: 2px solid var(--gold-accent);
	padding-top: 45px;
}
.ks-footer-dark::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
}
.ks-footer-dark .footer-top {
	padding: 0 0 35px 0;
}
.ks-footer-dark .footer-title {
	color: #FFFFFF !important;
	font-weight: 700;
	letter-spacing: 0.5px;
	position: relative;
	margin-bottom: 18px;
	padding-bottom: 8px;
	font-size: 16px;
}
.ks-footer-dark .footer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--gold-accent);
}
.ks-footer-dark p {
	color: #C7D3C0 !important;
	font-size: 13px;
	line-height: 1.6;
}
.ks-footer-cin {
	font-size: 11.5px !important;
	color: #94A69A !important;
	letter-spacing: 0.4px;
	margin-top: 8px;
}
.ks-footer-dark .widget_working ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ks-footer-dark .widget_working ul li {
	margin-bottom: 8px;
}
.ks-footer-dark .widget_working ul li a,
.ks-footer-dark .widget_services ul li a {
	color: #C7D3C0 !important;
	font-size: 13.5px;
	transition: color 0.3s ease, transform 0.3s ease;
	display: inline-block;
	text-decoration: none;
}
.ks-footer-dark .widget_working ul li a:hover,
.ks-footer-dark .widget_services ul li a:hover {
	color: var(--gold-accent) !important;
	transform: translateX(4px);
}
.ks-footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 16px 0;
}
.ks-footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	color: #C7D3C0;
	font-size: 13px;
	line-height: 1.45;
}
.ks-footer-contact-list li i {
	color: var(--gold-accent);
	font-size: 14px;
	margin-top: 3px;
	flex-shrink: 0;
}
.ks-footer-contact-list li a {
	color: #C7D3C0 !important;
	text-decoration: none;
	transition: color 0.3s ease;
}
.ks-footer-contact-list li a:hover {
	color: var(--gold-accent) !important;
}

/* Follow Us Row immediately under Contact Us */
.ks-footer-follow-wrap {
	margin-top: 14px;
}
.ks-footer-follow-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--gold-accent);
	font-weight: 600;
	margin-bottom: 10px;
}
.ks-footer-dark .dz-social-icon.style-1 ul {
	display: flex;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.ks-footer-dark .dz-social-icon.style-1 ul li a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(199, 211, 192, 0.2);
	color: #F7F4ED;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	text-decoration: none;
	font-size: 14px;
}
.ks-footer-dark .dz-social-icon.style-1 ul li a:hover {
	background: var(--primary-sage);
	border-color: var(--primary-sage);
	color: #FFFFFF;
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(143, 162, 138, 0.4);
}
.ks-footer-dark .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 18px 0;
}
.ks-footer-dark .copyright-text {
	color: #8C9E92;
	font-size: 12.5px;
}

/* Form Inputs & Interactive Focus Ring */
.form-control {
	border: 1px solid var(--light-border) !important;
	color: var(--body-text) !important;
	background-color: var(--very-light-bg) !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}
.form-control:focus {
	border-color: var(--primary-sage) !important;
	background-color: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(143, 162, 138, 0.25) !important;
}
.btn-primary.btn-skew:hover {
	box-shadow: 0 10px 24px rgba(143, 162, 138, 0.35);
}

/* ==========================================================================
   ERADICATE UNWANTED GIANT DECORATIVE WATERMARK TEXT ACROSS ALL PAGES
   ========================================================================== */
.dz-bnr-inr:after,
.dz-bnr-inr[data-text]:after,
[data-text]:after,
.testimonial-wrapper1:after,
.counter-wrapper1:after,
.portfolio-wrapper:after,
.error-page:after,
.banner-inner .data-text,
.main-bnr-one .data-text,
.main-bnr-two .data-text,
.main-bnr-three .data-text {
	content: none !important;
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	pointer-events: none !important;
}

/* Clean, Modern Subpage Hero Banner */
.dz-bnr-inr {
	height: 240px !important;
	min-height: 240px !important;
	background: linear-gradient(135deg, #1A231E 0%, #26332C 100%) !important;
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 100px 0 40px 0 !important;
}
.dz-bnr-inr h1 {
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-size: clamp(26px, 4vw, 38px) !important;
	margin-bottom: 12px !important;
	letter-spacing: -0.02em !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.dz-bnr-inr .breadcrumb-row {
	display: inline-block !important;
	margin: 0 auto !important;
}
.dz-bnr-inr .breadcrumb {
	background: rgba(255, 255, 255, 0.08) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 999px !important;
	padding: 6px 18px !important;
	margin: 0 !important;
}
.dz-bnr-inr .breadcrumb li,
.dz-bnr-inr .breadcrumb li a {
	color: #C7D3C0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	transition: color 0.3s ease !important;
}
.dz-bnr-inr .breadcrumb li a:hover {
	color: #C8A96B !important;
}
.dz-bnr-inr .breadcrumb li.active {
	color: #FFFFFF !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   GLOBAL TEXT VISIBILITY: DEFAULT STATE IS ALWAYS VISIBLE (NEVER HIDDEN)
   ========================================================================== */
.ks-showcase-title,
.ks-showcase-desc,
.ks-showcase-link,
.ks-project-title,
.ks-project-desc,
.ks-project-link,
.ks-build-card-title,
.ks-build-card-lead,
.ks-build-features li,
.ks-specialty-box h2,
.ks-specialty-box p,
.testimonial-text,
.testimonial-name,
.testimonial-position,
.pricingtable-title,
.pricingtable-price,
.pricingtable-features li,
.ks-domain-title,
.ks-domain-desc,
.ks-capability-card,
.ks-capability-title {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

/* ==========================================================================
   STANDARDIZED IMAGE PRESENTATION (NEVER RAW OR UNSTYLED)
   ========================================================================== */
.ks-img-styled,
.ks-project-thumb img,
.ks-about-img-main img,
.dz-card .dz-media img,
.side-bar .widget img {
	border-radius: 12px;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.ks-project-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 16 / 10;
	background: var(--warm-bg);
	border: 1px solid var(--light-border);
}
.ks-project-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ks-project-card:hover .ks-project-thumb img {
	transform: scale(1.04);
}
.ks-project-card {
	background: #FFFFFF;
	border: 1px solid var(--light-border);
	border-radius: 16px;
	padding: 16px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
	box-shadow: 0 4px 16px rgba(38, 51, 44, 0.04);
}
.ks-project-card:hover {
	transform: translateY(-6px);
	border-color: var(--primary-sage);
	box-shadow: 0 16px 36px rgba(38, 51, 44, 0.1);
}
.ks-project-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(38, 51, 44, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.ks-project-content {
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.ks-project-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dark-heading);
	margin-bottom: 6px;
	transition: color 0.3s ease;
}
.ks-project-card:hover .ks-project-title {
	color: var(--primary-hover);
}
.ks-project-desc {
	font-size: 13.5px;
	color: var(--body-text);
	line-height: 1.6;
	margin-bottom: 14px;
	flex-grow: 1;
}
.ks-project-action {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--light-border);
}
.ks-project-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.3s ease;
}
.ks-project-link:hover {
	color: var(--primary-sage);
	transform: translateX(3px);
}
.ks-project-link.text-primary {
	color: var(--primary-sage) !important;
}
.ks-project-link.text-primary:hover {
	color: var(--primary-hover) !important;
}

/* ==========================================================================
   About Us Subpage — Modern Box-Model Architecture & Image Styling
   ========================================================================== */

.ks-about-media-box {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--light-border);
	box-shadow: 0 20px 45px -12px rgba(38, 51, 44, 0.14);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-about-media-box:hover {
	box-shadow: 0 26px 55px -12px rgba(38, 51, 44, 0.2);
}

.ks-about-media-box img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-about-media-box:hover img {
	transform: scale(1.035);
}

.ks-about-floating-badge {
	position: absolute;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--light-border);
	border-radius: 14px;
	padding: 12px 18px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
	transition: transform 0.3s ease;
}

.ks-about-floating-badge:hover {
	transform: translateY(-2px);
}

.ks-about-floating-badge.badge-bottom-left {
	bottom: 20px;
	left: 20px;
	max-width: 270px;
}

.ks-about-floating-badge.badge-top-right {
	top: 20px;
	right: 20px;
	max-width: 250px;
}

/* Box-Model Eyebrow Tags */
.ks-box-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 13px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.ks-tag-sage {
	background: rgba(143, 162, 138, 0.16);
	color: #3E5B47;
	border: 1px solid rgba(143, 162, 138, 0.35);
}

.ks-tag-gold {
	background: rgba(200, 169, 107, 0.16);
	color: #8C6A28;
	border: 1px solid rgba(200, 169, 107, 0.35);
}

/* Box-Model Cards: Mission & Vision */
.ks-mission-box,
.ks-vision-box {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 40px 34px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	position: relative;
}

.ks-mission-box {
	border: 1.5px solid rgba(143, 162, 138, 0.35);
	box-shadow: 0 14px 36px -10px rgba(143, 162, 138, 0.12);
}

.ks-vision-box {
	border: 1.5px solid rgba(200, 169, 107, 0.35);
	box-shadow: 0 14px 36px -10px rgba(200, 169, 107, 0.12);
}

.ks-mission-box:hover {
	transform: translateY(-5px);
	border-color: var(--primary-sage);
	box-shadow: 0 22px 48px -10px rgba(143, 162, 138, 0.22);
}

.ks-vision-box:hover {
	transform: translateY(-5px);
	border-color: var(--gold-accent);
	box-shadow: 0 22px 48px -10px rgba(200, 169, 107, 0.22);
}

.ks-box-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
}

.ks-icon-sage {
	background: rgba(143, 162, 138, 0.16);
	color: #3E5B47;
}

.ks-icon-gold {
	background: rgba(200, 169, 107, 0.16);
	color: #8C6A28;
}

.ks-box-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--dark-heading);
	margin-bottom: 12px;
}

.ks-box-statement {
	font-size: 15px;
	line-height: 1.7;
	color: var(--body-text);
	margin-bottom: 24px;
	font-weight: 450;
}

/* Pillar Sub-cards within Box Model */
.ks-pillar-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #FAFBF9;
	border: 1px solid var(--light-border);
	margin-bottom: 12px;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ks-pillar-card:last-child {
	margin-bottom: 0;
}

.ks-pillar-card:hover {
	background: #FFFFFF;
	transform: translateX(4px);
}

.ks-mission-box .ks-pillar-card:hover {
	border-color: rgba(143, 162, 138, 0.5);
}

.ks-vision-box .ks-pillar-card:hover {
	border-color: rgba(200, 169, 107, 0.5);
}

.ks-pillar-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	margin-top: 2px;
}

.ks-pillar-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dark-heading);
	margin-bottom: 3px;
}

.ks-pillar-desc {
	font-size: 13px;
	color: var(--muted-text);
	line-height: 1.5;
	margin-bottom: 0;
}

/* Box-Model Showcase: Ready to Build Your Next Solution */
.ks-about-cta-box {
	background: linear-gradient(135deg, #FFFFFF 0%, #F7F4ED 100%);
	border: 1.5px solid rgba(143, 162, 138, 0.35);
	border-radius: 24px;
	padding: 56px 44px;
	box-shadow: 0 20px 48px -12px rgba(38, 51, 44, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.ks-about-cta-box {
		padding: 36px 20px;
	}
	.ks-mission-box,
	.ks-vision-box {
		padding: 28px 20px;
	}
}

.ks-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	border: 1px solid var(--light-border);
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dark-heading);
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
	transition: all 0.25s ease;
}

.ks-cta-pill:hover {
	border-color: var(--primary-sage);
	color: var(--primary-sage);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Services Subpage — Unconditional Text Visibility (Default & Hover)
   ========================================================================== */
.ks-service-card {
	background: #FFFFFF !important;
	border: 1.5px solid #E2E8E0 !important;
	border-radius: 16px !important;
	padding: 26px !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 4px 16px rgba(26, 38, 31, 0.05) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.3s ease !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ks-service-card:hover {
	transform: translateY(-5px) !important;
	border-color: #8FA28A !important;
	box-shadow: 0 18px 38px -6px rgba(26, 38, 31, 0.14) !important;
}

.ks-service-card__icon {
	display: block !important;
	font-size: 26px !important;
	margin-bottom: 14px !important;
	color: #2D5A43 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: transform 0.25s ease, color 0.25s ease !important;
}

.ks-service-card:hover .ks-service-card__icon {
	transform: translateY(-2px) scale(1.06) !important;
	color: #1F3F2F !important;
}

.ks-service-card__title {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	margin-bottom: 10px !important;
	line-height: 1.35 !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ks-service-card__title a {
	color: #1A261F !important;
	text-decoration: none !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: color 0.2s ease !important;
}

.ks-service-card:hover .ks-service-card__title a,
.ks-service-card__title a:hover {
	color: #2D5A43 !important;
}

.ks-service-card__desc {
	color: #3E4D44 !important;
	font-size: 14.5px !important;
	line-height: 1.65 !important;
	margin-bottom: 16px !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	font-weight: 400 !important;
	transition: color 0.2s ease !important;
}

.ks-service-card:hover .ks-service-card__desc {
	color: #1A261F !important;
}

.ks-service-card .badge {
	display: inline-flex !important;
	align-items: center !important;
	background: #F2F5F0 !important;
	color: #2D4A38 !important;
	border: 1px solid #D5DEC0 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	padding: 5px 11px !important;
	border-radius: 6px !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.ks-service-card:hover .badge {
	background: #E8EFE5 !important;
	border-color: #B8C7A0 !important;
	color: #1B3524 !important;
}

.ks-service-card__media {
	width: 100% !important;
	height: 195px !important;
	border-radius: 14px !important;
	margin-bottom: 18px !important;
	display: block !important;
	object-fit: cover !important;
	border: 1px solid rgba(221, 228, 216, 0.9) !important;
	box-shadow: 0 4px 18px rgba(38, 51, 44, 0.07) !important;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.ks-service-card:hover .ks-service-card__media {
	transform: scale(1.03) !important;
	box-shadow: 0 10px 28px rgba(38, 51, 44, 0.14) !important;
}

.ks-service-card__link {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #2D5A43 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
}

.ks-service-card__link i {
	font-size: 12px !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ks-service-card:hover .ks-service-card__link {
	color: #1F3F2F !important;
}

.ks-service-card:hover .ks-service-card__link i {
	transform: translateX(5px) !important;
}

/* ==========================================================================
   Portfolio Subpage — Fixed Heights & Guaranteed Image Visibility
   ========================================================================== */
.ks-project-thumb {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 14px !important;
	width: 100% !important;
	height: 210px !important;
	min-height: 200px !important;
	background: #141E18 !important;
	border: 1px solid var(--light-border, #DDE4D8) !important;
	display: block !important;
}

.ks-project-thumb img {
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ks-project-card:hover .ks-project-thumb img {
	transform: scale(1.05) !important;
}

/* ==========================================================================
   Services Subpage — Card Containing All Services & Service Items
   100% Guaranteed Text Visibility BOTH WITHOUT HOVER and WITH HOVER
   ========================================================================== */

/* The Card Containing All Services (Sidebar / Navigation Card) */
aside .widget.service_menu_nav,
aside .service_menu_nav,
.widget.service_menu_nav,
.service_menu_nav {
	background: #FFFFFF !important;
	border: 1.5px solid #DDE4D8 !important;
	border-radius: 18px !important;
	padding: 22px 18px !important;
	box-shadow: 0 4px 20px rgba(26, 38, 31, 0.05) !important;
	overflow: hidden !important;
	position: relative !important;
}

aside .widget.service_menu_nav ul,
aside .service_menu_nav ul,
.widget.service_menu_nav ul,
.service_menu_nav ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

aside .widget.service_menu_nav ul li,
aside .service_menu_nav ul li,
.widget.service_menu_nav ul li,
.service_menu_nav ul li {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Service Item Links Inside The All-Services Card (DEFAULT STATE: WITHOUT HOVER) */
aside .widget.service_menu_nav ul li a,
aside .service_menu_nav ul li a,
.widget.service_menu_nav ul li a,
.service_menu_nav ul li a,
div.service_menu_nav ul li a {
	color: #1A261F !important; /* High-contrast dark ink — NOT white! */
	background: #F5F7F4 !important; /* Soft tinted surface */
	border: 1px solid #DDE4D8 !important;
	border-radius: 10px !important;
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: relative !important;
	z-index: 5 !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Icons within Service Item Links */
aside .widget.service_menu_nav ul li a i,
aside .service_menu_nav ul li a i,
.widget.service_menu_nav ul li a i,
.service_menu_nav ul li a i,
div.service_menu_nav ul li a i {
	color: #2D5A43 !important; /* Forest green */
	font-size: 15px !important;
	width: 18px !important;
	text-align: center !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Service Item Links (HOVER STATE: WITH HOVER) */
aside .widget.service_menu_nav ul li a:hover,
aside .service_menu_nav ul li a:hover,
.widget.service_menu_nav ul li a:hover,
.service_menu_nav ul li a:hover,
div.service_menu_nav ul li a:hover {
	color: #1F3F2F !important;
	background: #E8EFE5 !important;
	border-color: #8FA28A !important;
	padding-left: 20px !important;
	transform: translateX(4px) !important;
	box-shadow: 0 4px 12px rgba(45, 90, 67, 0.1) !important;
}

aside .widget.service_menu_nav ul li a:hover i,
aside .service_menu_nav ul li a:hover i,
.widget.service_menu_nav ul li a:hover i,
.service_menu_nav ul li a:hover i,
div.service_menu_nav ul li a:hover i {
	color: #1F3F2F !important;
	transform: scale(1.12) !important;
}

/* Active Service Item Link */
aside .widget.service_menu_nav ul li.active a,
aside .service_menu_nav ul li.active a,
.widget.service_menu_nav ul li.active a,
.service_menu_nav ul li.active a,
div.service_menu_nav ul li.active a {
	background: #2D5A43 !important;
	color: #FFFFFF !important;
	border-color: #2D5A43 !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 14px rgba(45, 90, 67, 0.25) !important;
}

aside .widget.service_menu_nav ul li.active a i,
aside .service_menu_nav ul li.active a i,
.widget.service_menu_nav ul li.active a i,
.service_menu_nav ul li.active a i,
div.service_menu_nav ul li.active a i {
	color: #FFFFFF !important;
}

aside .widget.service_menu_nav ul li.active a:hover,
aside .service_menu_nav ul li.active a:hover,
.widget.service_menu_nav ul li.active a:hover,
.service_menu_nav ul li.active a:hover,
div.service_menu_nav ul li.active a:hover {
	background: #244835 !important;
	color: #FFFFFF !important;
	padding-left: 18px !important;
}

/* Remove all interfering legacy skew overlays and SVG decoration */
.service_menu_nav ul li a:before,
.service_menu_nav ul li a:after,
.widget.service_menu_nav ul li a:before,
.widget.service_menu_nav ul li a:after,
.service_menu_nav:before,
.service_menu_nav:after,
.widget.service_menu_nav:before,
.widget.service_menu_nav:after,
.service_menu_nav svg,
.widget.service_menu_nav svg {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}




/* ============================================================================
   KODESPHERE HOMEPAGE - MOBILE RESPONSIVE LAYOUT
   --------------------------------------------------------------------------
   This block is intentionally scoped to .ks-home-page so the existing
   responsive styles for other pages remain untouched.
   The homepage header is fixed on mobile, so the homepage content receives
   a controlled top offset instead of forcing the hero itself underneath it.
   ============================================================================ */

@media (max-width: 767px) {
    .ks-home-page {
        padding-top: 110px !important;
    }

    .ks-home-page .ks-hero-bg {
        min-height: 0 !important;
        padding: 52px 14px 42px !important;
        overflow: hidden !important;
    }

    .ks-home-page .ks-hero-bg .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ks-home-page .ks-hero-bg .banner-content {
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }

    #ksHeroCompany {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 14px !important;
        padding: 0 4px !important;
        color: #0F172A !important;
        font-family: var(--font-display) !important;
        font-size: clamp(25px, 7vw, 32px) !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.45px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        transform: none !important;
        filter: none !important;
    }

    #ksHeroCompany::after {
        content: "" !important;
        display: block !important;
        width: 52px !important;
        height: 2px !important;
        margin: 8px auto 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #8FA28A, #C8A96B, #8FA28A) !important;
        transform: none !important;
    }

    .ks-home-page .ks-hero-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        margin: 0 auto 17px !important;
        padding: 6px 11px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .ks-home-page .ks-hero-bg .title {
        max-width: 100% !important;
        margin: 0 auto 15px !important;
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.45px !important;
        text-align: center !important;
    }

    .ks-home-page .ks-hero-bg p {
        max-width: 100% !important;
        margin: 0 auto 22px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .ks-home-page .ks-hero-bg .d-flex.gap-3 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .ks-home-page .ks-hero-bg .d-flex.gap-3 .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 250px !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
        line-height: 1.3 !important;
    }

    .ks-home-page .ks-hero-feature-pills {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 20px !important;
    }

    .ks-home-page .ks-hero-pill {
        width: auto !important;
        max-width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
    }

    /* Keep floating WhatsApp control away from the bottom edge on phones. */
    .ks-home-page ~ .whatsapp_float,
    body .whatsapp_float {
        bottom: 64px !important;
        right: 15px !important;
        z-index: 9990 !important;
    }

    .ks-home-page ~ .whatsapp_float .whatsapp_float_btn,
    body .whatsapp_float .whatsapp_float_btn {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (max-width: 380px) {
    .ks-home-page {
        padding-top: 106px !important;
    }

    .ks-home-page .ks-hero-bg {
        padding-top: 46px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #ksHeroCompany {
        font-size: 24px !important;
    }

    .ks-home-page .ks-hero-bg .title {
        font-size: 26px !important;
    }

    .ks-home-page .ks-hero-bg p {
        font-size: 13.5px !important;
    }
}

/* ============================================================================
   KODESPHERE HOMEPAGE - FINAL MOBILE HERO ALIGNMENT
   --------------------------------------------------------------------------
   Homepage only. Fixes the mobile hero vertical position, keeps the company
   name visible, and centers the hero content without changing other pages.
   ============================================================================ */

@media (max-width: 767.98px) {
    .ks-home-page {
        padding-top: 110px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .ks-home-page .main-bnr-one {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .ks-home-page .ks-hero-bg {
        width: 100% !important;
        min-height: 0 !important;
        padding: 28px 12px 42px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .ks-home-page .ks-hero-bg > .container,
    .ks-home-page .ks-hero-bg .banner-row,
    .ks-home-page .ks-hero-bg .col-lg-10,
    .ks-home-page .ks-hero-bg .banner-content,
    .ks-home-page .ks-hero-bg .top-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .ks-home-page .ks-hero-bg .banner-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .ks-home-page .ks-hero-bg .banner-content {
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
    }

    /* Company name: always visible and centered on mobile. */
    .ks-home-page #ksHeroCompany {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 14px !important;
        padding: 0 6px !important;
        color: #0F172A !important;
        font-family: var(--font-display) !important;
        font-size: clamp(25px, 7vw, 32px) !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.45px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .ks-home-page #ksHeroCompany::after {
        content: "" !important;
        display: block !important;
        width: 52px !important;
        height: 2px !important;
        margin: 8px auto 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #8FA28A, #C8A96B, #8FA28A) !important;
        transform: none !important;
        animation: none !important;
    }

    /* Eyebrow stays below the company name and remains centered. */
    .ks-home-page .ks-hero-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto 17px !important;
        padding: 6px 11px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Main heading: remove legacy left padding that shifted it left. */
    .ks-home-page .main-bnr-one .banner-content .title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 15px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.45px !important;
        text-align: center !important;
        transform: none !important;
    }

    /* Keep the decorative vertical line at the left of the centered heading. */
    .ks-home-page .main-bnr-one .banner-content .title::after {
        left: 0 !important;
        transform: translateY(-50%) !important;
    }

    .ks-home-page .ks-hero-bg p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 22px !important;
        padding: 0 4px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .ks-home-page .ks-hero-bg .d-flex.gap-3 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .ks-home-page .ks-hero-bg .d-flex.gap-3 .btn {
        width: 100% !important;
        max-width: 250px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
        line-height: 1.3 !important;
    }

    .ks-home-page .ks-hero-feature-pills {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 20px !important;
    }

    .ks-home-page .ks-hero-pill {
        width: auto !important;
        max-width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 380px) {
    .ks-home-page {
        padding-top: 106px !important;
    }

    .ks-home-page .ks-hero-bg {
        padding: 24px 10px 38px !important;
    }

    .ks-home-page #ksHeroCompany {
        font-size: 24px !important;
    }

    .ks-home-page .main-bnr-one .banner-content .title {
        font-size: 26px !important;
    }

    .ks-home-page .ks-hero-bg p {
        font-size: 13.5px !important;
    }
}



/* FINAL HOMEPAGE MOBILE HERO VISIBILITY FIX
   Homepage only. The mobile navbar is intentionally left unchanged. */
@media (max-width: 767.98px) {
    .ks-home-page .ks-hero-bg { padding-top: 18px !important; }
    .ks-home-page .ks-hero-bg .banner-content { position:relative !important; display:block !important; width:100% !important; max-width:780px !important; margin:0 auto !important; }
    .ks-home-page .banner-content > #ksHeroCompany { display:block !important; visibility:visible !important; opacity:1 !important; position:relative !important; z-index:100 !important; width:100% !important; height:auto !important; margin:0 auto 12px !important; padding:0 8px !important; color:#0F172A !important; font-size:clamp(23px,7vw,30px) !important; font-weight:900 !important; line-height:1.15 !important; letter-spacing:-0.4px !important; text-align:center !important; white-space:normal !important; overflow:visible !important; transform:none !important; filter:none !important; animation:none !important; }
    .ks-home-page .banner-content > #ksHeroCompany::after { content:"" !important; display:block !important; width:48px !important; height:2px !important; margin:7px auto 0 !important; border-radius:999px !important; background:#8FA28A !important; }
    .ks-home-page .ks-hero-eyebrow { display:inline-flex !important; visibility:visible !important; opacity:1 !important; position:relative !important; z-index:50 !important; margin:0 auto 15px !important; transform:none !important; }
    .ks-home-page .main-bnr-one .banner-content .title { position:relative !important; z-index:10 !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; text-align:center !important; transform:none !important; }
}
@media (max-width: 380px) {
    .ks-home-page .ks-hero-bg { padding-top:14px !important; }
    .ks-home-page .banner-content > #ksHeroCompany { font-size:22px !important; }
}

/* ============================================================
   KODESPHERE HOMEPAGE - FINAL MOBILE HERO VISIBILITY FIX
   Homepage only. Does not modify other pages or desktop layout.
   ============================================================ */
@media (max-width: 767.98px) {
    .ks-home-page .ks-hero-bg,
    .ks-home-page .ks-hero-bg .container,
    .ks-home-page .ks-hero-bg .banner-row,
    .ks-home-page .ks-hero-bg .col-lg-10,
    .ks-home-page .ks-hero-bg .banner-content {
        overflow: visible !important;
        text-align: center !important;
    }

    .ks-home-page .banner-content {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .ks-home-page #ksHeroCompany {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1000 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 10px !important;
        padding: 0 8px !important;
        color: #0F172A !important;
        font-family: var(--font-display) !important;
        font-size: clamp(23px, 7vw, 30px) !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.4px !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .ks-home-page #ksHeroCompany::after {
        content: "" !important;
        display: block !important;
        width: 48px !important;
        height: 2px !important;
        margin: 7px auto 0 !important;
        border-radius: 999px !important;
        background: #8FA28A !important;
    }

    .ks-home-page .ks-hero-eyebrow {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 900 !important;
        margin: 0 auto 14px !important;
        transform: none !important;
        animation: none !important;
    }

    .ks-home-page .main-bnr-one .banner-content .title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        transform: none !important;
    }
}

@media (max-width: 380px) {
    .ks-home-page #ksHeroCompany { font-size: 22px !important; }
}


/* ============================================================================
   KODESPHERE MOBILE HEADER - COMPACT HEIGHT
   ---------------------------------------------------------------------------
   Mobile phones only. Desktop and tablet header remain unchanged.
   Keeps the existing logo, hamburger button and mobile drawer functionality.
   ============================================================================ */
@media (max-width: 767.98px) {

    /* Compact fixed header wrapper */
    .ks-header .sticky-header.main-bar-wraper {
        padding: 5px 0 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .ks-header .sticky-header.is-fixed {
        padding: 4px 0 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Compact white navbar */
    .ks-header .main-bar {
        margin: 0 10px !important;
        padding: 4px 12px !important;
        min-height: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    /* Keep logo vertically centered */
    .ks-header .box-header {
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .ks-header .logo-header {
        height: 44px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .ks-header .logo-header img {
        max-height: 24px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* Compact hamburger while keeping it easy to tap */
    .ks-header .navicon,
    .ks-header .navbar-toggler {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        margin-left: 8px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .ks-header .navicon span {
        width: 18px !important;
        left: 9px !important;
    }

    /* The homepage previously reserved 110px for the larger header.
       Match that offset to the new compact mobile header. */
    .ks-home-page {
        padding-top: 72px !important;
    }
}

@media (max-width: 380px) {
    .ks-header .main-bar {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ks-header .logo-header img {
        max-height: 23px !important;
    }
}

/* ============================================================================
   KODESPHERE HOMEPAGE - MOBILE NAVBAR TO HERO CONTINUITY
   --------------------------------------------------------------------------
   Mobile only. Keeps all existing colors, fonts, images and hero styling.
   Only removes the extra white gap created by the old homepage top offset.
   ============================================================================ */
@media (max-width: 767.98px) {
    .ks-home-page {
        padding-top: 58px !important;
    }

    .ks-home-page .ks-hero-bg {
        margin-top: 0 !important;
    }
}

@media (max-width: 380px) {
    .ks-home-page {
        padding-top: 58px !important;
    }
}

/* ============================================================================
   KODESPHERE HOMEPAGE - MOBILE NAVBAR / HERO SEAMLESS JOIN
   --------------------------------------------------------------------------
   Mobile homepage only.
   Moves the existing homepage top offset from the white page wrapper into
   the existing hero section so the hero background continues directly
   beneath the compact fixed navbar.
   No colors, fonts, buttons, images, or desktop styles are changed.
   ============================================================================ */
@media (max-width: 767.98px) {
    .ks-home-page {
        padding-top: 0 !important;
    }

    .ks-home-page .ks-hero-bg {
        padding-top: 76px !important;
    }
}

@media (max-width: 380px) {
    .ks-home-page {
        padding-top: 0 !important;
    }

    .ks-home-page .ks-hero-bg {
        padding-top: 72px !important;
    }
}