:root {
			/* --- Palette --- */
			--primary-green: #39b54a;
			--dark-green: #2d9a3c;
			
			/* Standardized Navy (The #0A2A4A found throughout your code) */
			--navy-primary: #0A2A4A;
			--navy-hover: #0436ab;
			--navy-deep: #001a33; /* Footer/Darkest */
			
			/* Backgrounds & Text */
			--bg-color: #e7eeec;
			--bg-light: #f8f9fa;
			--text-body: #64748b;
			--text-heading: #000d0d;
			--white: #ffffff;
			
			/* Layout */
			--sticky-nav-height: 5rem;
			--border-radius-lg: 20px;
			--transition-std: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* --- Core Setup --- */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html {
			scroll-behavior: smooth;
			scroll-padding-top: var(--sticky-nav-height);
			font-family: "DM Sans", sans-serif;
		}

		body {
			font-family: 'Inter', system-ui, -apple-system, sans-serif;
			color: var(--text-body);
			background-color: var(--bg-color);
			overflow-x: hidden;
			line-height: 1.6;
		}

		/* --- Typography --- */
		h1, h2, h3, h4, h5, .section-title {
			color: var(--navy-primary);
			font-weight: 700;
		}

		.display-4 {
			color: #060455;
			font-family: "Poppins", sans-serif;
			font-size: clamp(1.5rem, 5vw, 3rem);
		}

		.display-6 {
			font-family: "Raleway", sans-serif;
			color: var(--text-heading);
		}

		.lead {
			font-family: "DM Sans", sans-serif;
			font-size: clamp(1rem, 1.2vw, 1.1rem);
			color: var(--text-heading);
		}

		.text-navy { color: var(--navy-primary); }
		.text-green { color: var(--primary-green); }

		/* Note: Original code had this class coloring text Navy. Kept for safety. */
		.text-primary-green {
			color: var(--navy-primary) !important;
		}

		.fw-800 { font-weight: 800; }
		.ls-1 { letter-spacing: 1px; }

		/* --- Navigation --- */
		.navbar {
			transition: var(--transition-std);
			background: var(--white);
			padding: 0.8rem 0;
		}

		.navbar.scrolled {
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
			padding: 0.6rem 0;
		}

		.navbar-brand {
			padding: 0;
			/*margin-right: 2rem;*/
			display: flex;
			align-items: center;
		}

		.logo img {
			width: clamp(20rem, -75.056vw + 9.031rem, 1.641rem);
			max-height: 70px;
			object-fit: contain;
		}

		.nav-link {
			color: var(--navy-primary);
			font-weight: 500;
			margin-right: 1rem;
			position: relative;
			padding-bottom: 6px;
		}

		.nav-link:hover, .nav-link.active {
			color: #0c0600 !important;
		}

		/* Optimized Underline Animation (Uses Scale instead of Width) */
		.nav-link::after {
			content: '';
			position: absolute;
			height: 3px;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: var(--navy-hover);
			transform: scaleX(0);
			transform-origin: bottom center;
			transition: transform 0.3s ease;
			border-radius: 2px;
			width: 80%; /* Target width */
			margin: 0 auto;
		}

		.nav-link:hover::after,
		.nav-link.active::after {
			transform: scaleX(1);
		}
		/*mobile-menu*/
		/* 1. Base Styles for Overlay Links ONLY */
		#offcanvasMenu .overlay-link {
		  transition: color 0.3s ease;
		  padding-bottom: 5px;
		  overflow: hidden; 
		}

		/* 2. Hover Color */
		#offcanvasMenu .overlay-link:hover,
		#offcanvasMenu .overlay-link.active {
		  color: #ff4d4d !important;
		}

		/* 3. Scoped Underline Effect */
		#offcanvasMenu .overlay-link::after {
		  content: '';
		  position: absolute;
		  bottom: 0;
		  left: 50%; 
		  width: 0; 
		  height: 2px;
		  background-color: #ff4d4d;
		  transition: width 0.3s ease, left 0.3s ease;
		  transform: translateX(-50%);
		}

		/* 4. Trigger Scoped Underline */
		#offcanvasMenu .overlay-link:hover::after,
		#offcanvasMenu .overlay-link.active::after {
		  width: 100px;
		}

		/* 5. Animation (Same as before) */
		@keyframes slideDownFade {
		  from { opacity: 0; transform: translateY(-20px); }
		  to { opacity: 1; transform: translateY(0); }
		}

		#offcanvasMenu .staggered-menu .overlay-link {
		  opacity: 0;
		  animation-fill-mode: forwards;
		}

		.offcanvas.show .staggered-menu .overlay-link {
		  animation-name: slideDownFade;
		  animation-duration: 0.6s;
		  animation-timing-function: ease-out;
		}

		/* Stagger Delays */
		.offcanvas.show .staggered-menu .overlay-link:nth-child(1) { animation-delay: 0.2s; }
		.offcanvas.show .staggered-menu .overlay-link:nth-child(2) { animation-delay: 0.3s; }
		.offcanvas.show .staggered-menu .overlay-link:nth-child(3) { animation-delay: 0.4s; }
		.offcanvas.show .staggered-menu .overlay-link:nth-child(4) { animation-delay: 0.5s; }
		.offcanvas.show .staggered-menu .overlay-link:nth-child(5) { animation-delay: 0.6s; }
		.offcanvas.show .staggered-menu .overlay-link:nth-child(6) { animation-delay: 0.7s; }
		
		/* --- Buttons --- */
		/* Consolidated Button Base Styles */
		.btn-phone, .btn-hero-submit, .btn-learn-more, .btn-lg {
			background: var(--navy-primary)!important;
			color: var(--white) !important;
			font-weight: 600;
			border: none !important;
			border-radius: 50px !important;
			transition: var(--transition-std)!important;
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center ;
			text-decoration: none !important;
		}
		.bg-white-1{
			border-radius: 50px;
			background-color: var(--navy-primary)!important;
		}
		
		.btn-lg-1 {
			background: var(--navy-primary)!important;
			color: var(--white) !important;
			font-weight: 600;
			border: none;
			border-radius: 50px;
			transition: var(--transition-std);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}
		.btn-lg-1:hover{
			color: var(--navy-primary) !important;
		}

		.btn-phone:hover, .btn-hero-submit:hover, .btn-lg:hover {
			background-color: #0a2a4a!important;
			color: var(--white) !important;
			transform: translateY(-2px);
		}
		.btn-hero-submit:disabled,
        .btn-hero-submit.disabled {
            background-color: var(--navy-primary) !important; /* Keep the Navy background */
            color: var(--white) !important; /* Ensure spinner stays white */
            opacity: 0.75; /* Optional: Slight fade to indicate processing, but not transparent */
            cursor: not-allowed; /* Show 'no' cursor */
            transform: none !important; /* Stop the hover floating effect */
        }

		.btn-phone { padding: 0.5rem 1.5rem; }
		.btn-hero-submit { padding: 0.8rem; max-width: 50%; margin: 0 auto; }

		.btn-learn-more {
			padding: 10px 12px;
			gap: 10px;
			margin-top: 1rem;
		}
		.btn-learn-more:hover { gap: 15px; color: var(--white); }

		.btn-outline-light {
			outline: 1px solid var(--navy-primary) !important;
			background: transparent !important;
			color: var(--navy-primary) !important;
		}

		/* --- Hero Section --- */
		.hero {
			margin-top: var(--sticky-nav-height);
			background: var(--bg-color);
			padding: 80px 0 120px;
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		.hero-slider-container {
			display: grid;
			grid-template-areas: "stack";
			min-height: 280px;
			align-items: center;
		}

		.hero-slide {
			grid-area: stack;
			opacity: 0;
			transform: translateY(20px);
			transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
			pointer-events: none;
		}

		.hero-slide.active {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
			z-index: 1;
		}
		
		.highlight{
			font-family: "poppins", sans-serif;
			font-size: clamp(1rem, -0.0183rem + 3.2587vw, 2rem);
			font-weight: 600;
			color: #08065b ;
			margin: 1rem 0 0 0;
		}
		
		.btn-success-1{
			background: var(--navy-primary) !important;
			color: #fff;
			padding: 0.5rem 1rem 0.5rem !important;
			font-size: 1rem;
		}

		.hero-form-card {
			background: var(--white);
			color: #1e293b;
			padding: 2.5rem;
			border-radius: 1rem;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
			border: 1px solid rgba(255, 255, 255, 0.1);
			position: relative;
			z-index: 3;
		}

		.form-control, .form-select {
			padding: 0.75rem 1rem;
			border-radius: 0.5rem;
			border: 1px solid #cbd5e1;
			font-size: 1rem;
		}

		.form-control:focus, .form-select:focus {
			border-color: var(--navy-primary);
			box-shadow: 0 0 0 4px rgba(10 42 74, 0.15);
			outline: none;
		}

		/* --- Stats & Identity --- */
		.stats-banner {
			background: var(--white);
			border-bottom: 1px solid #e2e8f0;
		}
		.stats-icon {
			font-size: 2.5rem;
			color: var(--navy-primary);
			margin-bottom: 0.5rem;
		}

		.idendity {
			background-color: var(--white);
			color: red; /* Kept original, but consider changing to brand color */
			padding: 4px 15px;
			border-radius: 50px;
			font-weight: 700;
			font-size: 0.85rem;
			display: inline-block;
			margin-right: 8px;
		}

		/* --- About & Services --- */
		.abt-section { padding: 80px 0; }

		.hero-image {
			border-radius: 20px;
			overflow: hidden;
			height: 100%;
			min-height: 400px;
		}
		.hero-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s;
		}
		.hero-image:hover img { transform: scale(1.03); }

		#services {
			position: relative;
			overflow: hidden;
		}
		#services::before {
			content: url(../images/vector.svg);
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 0;
			pointer-events: none;
		}
		#services .container { position: relative; z-index: 2; }

		/* Unified Card Logic for Services, WCU, and Process */
		.service-card, .wcu-card-modern, .process-card {
			background: var(--white);
			border-radius: 16px;
			padding: 2.5rem;
			height: 100%;
			border: 1px solid rgba(0, 0, 0, 0.02);
			box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
		}
		.service-card-1 {
			background: var(--navy-primary);
			color: var(--white);
			border-radius: 16px;
			padding: 2.5rem;
			height: 100%;
			border: 1px solid rgba(0, 0, 0, 0.02);
			box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
		}

		/* Shared Hover Effects */
		.service-card:hover, .wcu-card-modern:hover {
			transform: translateY(-8px);
			box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
			border-color: var(--navy-primary);
		}

		.icon-box, .wcu-icon-wrapper {
			width: 60px;
			height: 60px;
			background: var(--navy-primary);
			color: var(--white);
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.75rem;
			margin-bottom: 1.5rem;
			transition: var(--transition-std);
		}
		.icon-box-1{
			width: 60px;
			height: 60px;
			background: var(--white);
			color: var(--navy-primary);
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.75rem;
			margin-bottom: 1.5rem;
			transition: var(--transition-std);
		}
		
		.service-benefit{
			padding-top: 1rem;
            border-top: 1px solid #0A2A4A;
		}
		.service-benefit-1{
			padding-top: 1rem;
            border-top: 1px solid #fff;
		}
		

		.wcu-section {
			background: linear-gradient(to bottom, #f8fafc, #ffffff);
			position: relative;
		}

		/* WCU Specific Icon Animation */
		.wcu-card-modern:hover .wcu-icon-wrapper {
			transform: rotateY(180deg);
		}
		.wcu-card-modern:hover .wcu-icon-wrapper i {
			transform: rotateY(-180deg);
		}

		/* --- Hybrid Process Section (Refactored) --- */
		.process-timeline-wrapper {
			position: relative;
			padding-top: 20px;
		}

		.step-pill {
			display: inline-block;
			padding: 6px 20px;
			border: 1px solid var(--navy-primary);
			border-radius: 50px;
			font-size: 0.8rem;
			font-weight: 700;
			color: var(--navy-primary);
			background: white;
			position: relative;
			z-index: 2;
			transition: var(--transition-std);
		}

		/* Triangle */
		.step-pill::after {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 50%;
			width: 8px;
			height: 8px;
			background: white;
			border-bottom: 1px solid var(--navy-primary);
			border-right: 1px solid var(--navy-primary);
			transform: translateX(-50%) rotate(45deg);
			transition: var(--transition-std);
		}

		.step-vertical-line {
			width: 1px;
			height: 30px;
			background: #e2e8f0;
			margin: 0 auto;
		}

		.step-dot {
			width: 16px;
			height: 16px;
			background: var(--navy-primary);
			border-radius: 50%;
			margin: 0 auto;
			position: relative;
			z-index: 2;
			box-shadow: 0 0 0 6px #f8f9fa;
			transition: var(--transition-std);
		}

		/* Fixed Timeline Track (Duplicate removed) */
		.timeline-track {
			position: absolute;
			top: 78px;
			left: 0;
			width: 100%;
			height: 2px;
			background: #cbd5e1;
			z-index: 0;
		}

		.process-card {
			text-align: center;
			border-top: 4px solid transparent;
		}

		/* Process Section Hover Logic */
		.col-xl-3:hover .step-pill {
			background: var(--navy-primary);
			color: white;
		}
		.col-lg-3:hover .step-pill::after {
			background: var(--navy-primary);
		}
		.col-lg-3:hover .step-dot {
			background: var(--navy-primary);
			transform: scale(1.3);
			box-shadow: 0 0 0 4px rgba(219, 140, 16, 0.2);
		}
		.col-xl-3:hover .process-card {
			transform: translateY(-5px);
			box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
			border-top: 4px solid var(--navy-primary);
		}

		/* --- Accreditations --- */
		.accreditation-card {
			background: #fff;
			color: var(--navy-primary);
			border-radius: 12px;
			padding: 1.5rem;
			height: 12rem;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
			border: 1px solid rgba(0, 0, 0, 0.05);
			transition: var(--transition-std);
		}

		.accreditation-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
			border-color: rgba(57, 181, 74, 0.2);
		}

		.accreditation-img {
			max-height: 320px;
			width: 25rem;
			transition: var(--transition-std);
			padding: 0.5rem;
		}

		.accreditation-card:hover .accreditation-img {
			transform: scale(1.05);
		}

		/* --- Footer & Misc --- */
		.final-cta {
			background: var(--bg-color);
			color: var(--navy-primary);
		}

		.footer { 
			background-color: var(--navy-primary) !important; 
		}

		footer a { transition: color 0.2s; }
		

		/* --- Scroll Progress Button --- */
		.progress-wrap {
			position: fixed;
			right: 30px;
			bottom: 30px;
			height: 50px;
			width: 50px;
			cursor: pointer;
			display: block;
			border-radius: 50px;
			box-shadow: inset 0 0 0 2px rgba(4, 54, 171, 0.1);
			z-index: 10000;
			opacity: 0;
			visibility: hidden;
			transform: translateY(15px);
			transition: all 200ms linear;
			background-color: #fff;
		}

		.progress-wrap.active-progress {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.progress-wrap svg path { fill: none; }
		.progress-wrap svg.progress-circle path {
			stroke: var(--navy-primary);
			stroke-width: 4;
			box-sizing: border-box;
			transition: all 200ms linear;
		}
		.progress-wrap .arrow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 18px;
		}
		.progress-wrap .arrow path {
			fill: var(--navy-primary);
		}

		/* --- Responsive Utilities --- */
		@media (max-width: 991px) {
			.timeline-track { display: none; }
			.step-vertical-line { height: 20px; }
			.hero h1 { font-size: 2.5rem; }
			.hero-image { margin-bottom: 2rem; }
			.hero-image { min-height: 300px; }
			.hero-slider-container {
                min-height: auto;
                margin-bottom: 2rem;
            }
			
			.btn-success-1.px-5,
			.btn-outline-light .px-5{
				padding: 0.5rem 1rem 0.5rem !important;
			}
			.btn-outline-light .lg:hover{
				color: var(--navy-primary) !important;
			}
		}

		@media (min-width: 992px) {
			.navbar-expand-lg .navbar-collapse {
				display: flex !important;
				flex-basis: 100%;
			}
		}

		/* Logo Switching */
		.logo-desktop { display: block; }
		.logo-mobile { display: none; }

		@media (max-width: 480px) {
			.logo-desktop { display: none; }
			.logo-mobile {
				display: block;
				width: 15rem !important;
				max-height: 50px;
			}
		}
		@media (max-width: 400px) {
			.logo-desktop { display: none; }
			.logo-mobile {
				display: block;
				width: 10rem !important;
				max-height: 50px;
			}
		}
		
		/* Target the awkward gap between Tablet (992px) and Large Desktop (1400px) */
@media (min-width: 992px) and (max-width: 1300px) {
    /* Slightly reduce link spacing so they don't wrap */
   
    
    /* Slightly reduce font size to fit everything on one line */
    .nav-link {
        font-size: 0.95rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Reduce Logo size slightly in this specific range if needed */
    .navbar-brand img {
        width: 250px;
        height: auto;
    }
}