/* ──────────────────────────────────────────
       0. CSS Custom Properties (Design Tokens)
       ────────────────────────────────────────── */
 :root {
     --primary-blue: #0B1D78;
     --secondary-blue: #1E63D5;
     --accent-cyan: #25B9F5;
     --primary-orange: #F97316;
     --secondary-orange: #FF8A00;
     --dark-text: #1F2937;
     --light-bg: #F8FAFC;
     --white: #FFFFFF;
     --gray-100: #F1F5F9;
     --gray-200: #E2E8F0;
     --gray-300: #CBD5E1;
     --gray-400: #94A3B8;
     --gray-500: #64748B;
     --gray-600: #475569;
     --font-heading: 'Poppins', sans-serif;
     --font-body: 'Inter', sans-serif;
     --shadow-sm: 0 1px 3px rgba(11, 29, 120, .06);
     --shadow-md: 0 4px 20px rgba(11, 29, 120, .08);
     --shadow-lg: 0 12px 40px rgba(11, 29, 120, .10);
     --shadow-xl: 0 20px 60px rgba(11, 29, 120, .12);
     --radius-sm: 6px;
     --radius-md: 12px;
     --radius-lg: 20px;
     --radius-xl: 28px;
     --transition-fast: .2s cubic-bezier(.4, 0, .2, 1);
     --transition-base: .35s cubic-bezier(.4, 0, .2, 1);
     --transition-slow: .5s cubic-bezier(.4, 0, .2, 1);
 }

 /* ──────────────────────────────────────────
       1. Base & Reset
       ────────────────────────────────────────── */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 90px;
 }

 body {
     font-family: var(--font-body);
     font-weight: 400;
     color: var(--dark-text);
     line-height: 1.7;
     background: var(--white);
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-heading);
     font-weight: 700;
     color: var(--primary-blue);
     line-height: 1.2;
 }

 p {
     color: var(--gray-600);
 }

 a {
     color: var(--primary-orange);
     text-decoration: none;
     transition: color var(--transition-fast);
 }

 a:hover {
     color: var(--secondary-orange);
 }

 img {
     max-width: 100%;
     height: auto;
 }

 ::selection {
     background: var(--accent-cyan);
     color: var(--white);
 }

 /* ──────────────────────────────────────────
       2. Utility Classes
       ────────────────────────────────────────── */
 .section-padding {
     padding: 100px 0;
 }

 .section-padding-sm {
     padding: 70px 0;
 }

 .section-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--font-heading);
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--secondary-blue);
     margin-bottom: 16px;
 }

 .section-label::before {
     content: '';
     display: inline-block;
     width: 32px;
     height: 2px;
     background: var(--primary-orange);
     border-radius: 2px;
 }

 .section-title {
     font-size: clamp(1.75rem, 4vw, 2.75rem);
     margin-bottom: 18px;
 }

 .section-subtitle {
     font-size: 1.05rem;
     color: var(--gray-500);
     max-width: 600px;
     line-height: 1.8;
 }

 .text-gradient {
     background: linear-gradient(135deg, var(--secondary-blue), var(--accent-cyan));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .divider {
     width: 50px;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-orange), var(--secondary-orange));
     border-radius: 3px;
     margin: 20px 0;
 }

 /* ──────────────────────────────────────────
       3. Buttons
       ────────────────────────────────────────── */
 .btn-primary-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 13px 30px;
     font-family: var(--font-heading);
     font-size: .9rem;
     font-weight: 600;
     color: var(--white);
     background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange));
     border: none;
     border-radius: var(--radius-sm);
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
     z-index: 1;
 }

 .btn-primary-custom::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--secondary-orange), #e06000);
     opacity: 0;
     transition: opacity var(--transition-fast);
     z-index: -1;
 }

 .btn-primary-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(249, 115, 22, .35);
     color: var(--white);
 }

 .btn-primary-custom:hover::before {
     opacity: 1;
 }

 /* Ripple effect */
 .btn-primary-custom .ripple {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, .35);
     transform: scale(0);
     animation: rippleAnim .6s linear;
     pointer-events: none;
 }

 @keyframes rippleAnim {
     to {
         transform: scale(4);
         opacity: 0;
     }
 }

 .btn-outline-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 13px 30px;
     font-family: var(--font-heading);
     font-size: .9rem;
     font-weight: 600;
     color: var(--primary-blue);
     background: transparent;
     border: 2px solid var(--primary-blue);
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .btn-outline-custom:hover {
     background: var(--primary-blue);
     color: var(--white);
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(11, 29, 120, .2);
 }

 .btn-outline-light-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 13px 30px;
     font-family: var(--font-heading);
     font-size: .9rem;
     font-weight: 600;
     color: var(--white);
     background: transparent;
     border: 2px solid rgba(255, 255, 255, .4);
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .btn-outline-light-custom:hover {
     background: var(--white);
     color: var(--primary-blue);
     border-color: var(--white);
     transform: translateY(-2px);
 }

 /* ──────────────────────────────────────────
       4. Navigation
       ────────────────────────────────────────── */
 .navbar-main {
     padding: 18px 0;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border-bottom: 1px solid transparent;
     transition: all var(--transition-base);
     z-index: 1050;
 }

 .navbar-main.scrolled {
     padding: 10px 0;
     background: rgba(255, 255, 255, .97);
     border-bottom: 1px solid var(--gray-200);
     box-shadow: var(--shadow-sm);
 }

 .navbar-brand-custom {
     display: flex;
     align-items: center;
     gap: 4px;
     font-family: var(--font-heading);
     font-weight: 800;
     font-size: 1.55rem;
     color: var(--primary-blue) !important;
     letter-spacing: -.5px;
 }

 .navbar-brand-custom span {
     color: var(--primary-orange);
 }

 .navbar-main .nav-link {
     font-family: var(--font-heading);
     font-size: .88rem;
     font-weight: 600;
     color: var(--dark-text) !important;
     padding: 8px 18px !important;
     position: relative;
     transition: color var(--transition-fast);
 }

 .navbar-main .nav-link::after {
     content: '';
     position: absolute;
     bottom: 2px;
     left: 18px;
     right: 18px;
     height: 2px;
     background: var(--primary-orange);
     border-radius: 2px;
     transform: scaleX(0);
     transform-origin: right;
     transition: transform var(--transition-base);
 }

 .navbar-main .nav-link:hover {
     color: var(--primary-blue) !important;
 }

 .navbar-main .nav-link:hover::after {
     transform: scaleX(1);
     transform-origin: left;
 }

 .navbar-main .nav-link.active {
     color: var(--primary-blue) !important;
 }

 .navbar-main .nav-link.active::after {
     transform: scaleX(1);
     transform-origin: left;
 }

 .navbar-toggler {
     border: none;
     padding: 4px 8px;
     font-size: 1.4rem;
     color: var(--primary-blue);
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 /* ──────────────────────────────────────────
       5. Hero Section
       ────────────────────────────────────────── */
 .hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     background: linear-gradient(165deg, #f0f4ff 0%, var(--white) 40%, #f7f9ff 100%);
     overflow: hidden;
 }

 /* Subtle geometric background */
 .hero::before {
     content: '';
     position: absolute;
     top: -20%;
     right: -10%;
     width: 700px;
     height: 700px;
     background: radial-gradient(circle, rgba(30, 99, 213, .06) 0%, transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .hero::after {
     content: '';
     position: absolute;
     bottom: 10%;
     left: -5%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(37, 185, 245, .05) 0%, transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .hero-pattern {
     position: absolute;
     inset: 0;
     opacity: .035;
     background-image:
         linear-gradient(var(--primary-blue) 1px, transparent 1px),
         linear-gradient(90deg, var(--primary-blue) 1px, transparent 1px);
     background-size: 60px 60px;
     pointer-events: none;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
     background: rgba(30, 99, 213, .08);
     border: 1px solid rgba(30, 99, 213, .12);
     border-radius: 50px;
     font-family: var(--font-heading);
     font-size: .78rem;
     font-weight: 600;
     color: var(--secondary-blue);
     margin-bottom: 24px;
 }

 .hero-badge i {
     font-size: .65rem;
     color: var(--primary-orange);
 }

 .hero h1 {
     font-size: clamp(2.2rem, 5.5vw, 3.6rem);
     font-weight: 800;
     line-height: 1.12;
     margin-bottom: 22px;
     max-width: 620px;
 }

 .hero h1 .highlight {
     position: relative;
     display: inline;
 }

 .hero h1 .highlight::after {
     content: '';
     position: absolute;
     bottom: 4px;
     left: 0;
     right: 0;
     height: 12px;
     background: rgba(249, 115, 22, .15);
     border-radius: 4px;
     z-index: -1;
 }

 .hero-description {
     font-size: 1.1rem;
     color: var(--gray-500);
     max-width: 500px;
     margin-bottom: 36px;
     line-height: 1.8;
 }

 .hero-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     margin-bottom: 0;
 }

 /* Hero visual */
 .hero-visual {
     position: relative;
     z-index: 2;
 }

 .hero-image-wrapper {
     position: relative;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-xl);
 }

 .hero-image-placeholder {
     width: 100%;
     aspect-ratio: 4/3;
     background: linear-gradient(145deg, var(--primary-blue) 0%, var(--secondary-blue) 60%, var(--accent-cyan) 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .7);
     font-family: var(--font-heading);
     font-size: .95rem;
     gap: 12px;
 }

 .hero-image-placeholder i {
     font-size: 2.5rem;
     opacity: .5;
 }

 /* Floating badges on hero image */
 .hero-float-badge {
     position: absolute;
     background: var(--white);
     border-radius: var(--radius-md);
     padding: 14px 18px;
     box-shadow: var(--shadow-lg);
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: var(--font-heading);
     font-size: .82rem;
     font-weight: 600;
     color: var(--dark-text);
     z-index: 3;
     animation: floatBadge 4s ease-in-out infinite;
 }

 .hero-float-badge:nth-child(2) {
     animation-delay: -2s;
 }

 .hero-float-badge .badge-icon {
     width: 38px;
     height: 38px;
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--white);
     flex-shrink: 0;
 }

 .float-top {
     top: 12%;
     right: -18px;
 }

 .float-bottom {
     bottom: 15%;
     left: -18px;
 }

 @keyframes floatBadge {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 /* ──────────────────────────────────────────
       6. Statistics Strip
       ────────────────────────────────────────── */
 .stats-strip {
     position: relative;
     z-index: 5;
     margin-top: -40px;
 }

 .stats-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     padding: 38px 30px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--gray-100);
 }

 .stat-item {
     text-align: center;
     padding: 10px 15px;
 }

 .stat-item+.stat-item {
     border-left: 1px solid var(--gray-200);
 }

 .stat-number {
     font-family: var(--font-heading);
     font-size: clamp(2rem, 4vw, 2.75rem);
     font-weight: 800;
     color: var(--primary-blue);
     line-height: 1;
     margin-bottom: 6px;
 }

 .stat-number span {
     color: var(--primary-orange);
 }

 .stat-label {
     font-family: var(--font-heading);
     font-size: .82rem;
     font-weight: 600;
     color: var(--gray-500);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 @media (max-width: 767.98px) {
     .stat-item+.stat-item {
         border-left: none;
         /*border-top: 1px solid var(--gray-200);*/
     }
 }

 /* ──────────────────────────────────────────
       7. About Section
       ────────────────────────────────────────── */
 .about-section {
     background: var(--white);
 }

 .about-image-block {
     position: relative;
 }

 .about-image-main {
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
 }

 .about-image-placeholder {
     width: 100%;
     aspect-ratio: 5/4;
     background: linear-gradient(160deg, #0d2280 0%, var(--secondary-blue) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .5);
     font-size: 3rem;
 }

 .about-accent-box {
     position: absolute;
     bottom: -20px;
     right: -20px;
     width: 140px;
     height: 140px;
     background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange));
     border-radius: var(--radius-md);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: var(--white);
     font-family: var(--font-heading);
     box-shadow: 0 10px 30px rgba(249, 115, 22, .3);
     z-index: 2;
 }

 .about-accent-box .number {
     font-size: 2.2rem;
     font-weight: 800;
     line-height: 1;
 }

 .about-accent-box .label {
     font-size: .7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-top: 4px;
 }

 .about-text {
     padding-left: 20px;
 }

 .about-text p {
     font-size: 1.02rem;
     line-height: 1.85;
 }

 .mission-vision-row {
     margin-top: 30px;
 }

 .mv-item {
     display: flex;
     gap: 14px;
     align-items: flex-start;
 }

 .mv-icon {
     width: 44px;
     height: 44px;
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 .mv-icon.mission {
     background: rgba(30, 99, 213, .1);
     color: var(--secondary-blue);
 }

 .mv-icon.vision {
     background: rgba(249, 115, 22, .1);
     color: var(--primary-orange);
 }

 .mv-item h5 {
     font-size: .95rem;
     font-weight: 700;
     margin-bottom: 4px;
 }

 .mv-item p {
     font-size: .88rem;
     margin-bottom: 0;
     line-height: 1.65;
 }

 /* Feature cards (Why InfniCX) */
 .features-grid {
     margin-top: 80px;
 }

 .feature-card {
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-md);
     padding: 36px 28px;
     transition: all var(--transition-base);
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--secondary-blue), var(--accent-cyan));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform var(--transition-base);
 }

 .feature-card:hover {
     border-color: transparent;
     box-shadow: var(--shadow-lg);
     transform: translateY(-6px);
 }

 .feature-card:hover::before {
     transform: scaleX(1);
 }

 .feature-icon {
     width: 56px;
     height: 56px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.35rem;
     margin-bottom: 20px;
 }

 .feature-card h4 {
     font-size: 1.05rem;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .feature-card p {
     font-size: .9rem;
     margin-bottom: 0;
     line-height: 1.7;
 }

 /* ──────────────────────────────────────────
       8. Services Section
       ────────────────────────────────────────── */
 .services-section {
     background: var(--light-bg);
 }

 .service-card {
     background: var(--white);
     border-radius: var(--radius-md);
     padding: 0;
     overflow: hidden;
     border: 1px solid var(--gray-100);
     height: 100%;
     transition: all var(--transition-base);
     display: flex;
     flex-direction: column;
 }

 .service-card:hover {
     box-shadow: var(--shadow-xl);
     transform: translateY(-8px);
     border-color: transparent;
 }

 .service-card-top {
     padding: 32px 28px 0;
     flex: 1;
 }

 .service-icon-wrap {
     width: 60px;
     height: 60px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     margin-bottom: 22px;
     position: relative;
     transition: transform var(--transition-base);
 }

 .service-card:hover .service-icon-wrap {
     transform: scale(1.08);
 }

 .service-card h4 {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .service-card p {
     font-size: .9rem;
     line-height: 1.75;
     color: var(--gray-500);
 }

 .service-card-bottom {
     padding: 0 28px 28px;
 }

 .service-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: var(--font-heading);
     font-size: .85rem;
     font-weight: 600;
     color: var(--primary-orange);
     transition: gap var(--transition-fast), color var(--transition-fast);
 }

 .service-link:hover {
     gap: 10px;
     color: var(--secondary-orange);
 }

 /* Service card color accents */
 .service-card[data-accent="blue"] .service-icon-wrap {
     background: rgba(30, 99, 213, .08);
     color: var(--secondary-blue);
 }

 .service-card[data-accent="cyan"] .service-icon-wrap {
     background: rgba(37, 185, 245, .1);
     color: var(--accent-cyan);
 }

 .service-card[data-accent="orange"] .service-icon-wrap {
     background: rgba(249, 115, 22, .1);
     color: var(--primary-orange);
 }

 .service-card[data-accent="navy"] .service-icon-wrap {
     background: rgba(11, 29, 120, .08);
     color: var(--primary-blue);
 }

 /* ──────────────────────────────────────────
       9. Industries Section
       ────────────────────────────────────────── */
 .industries-section {
     background: var(--white);
 }

 .industry-card {
     background: var(--light-bg);
     border-radius: var(--radius-md);
     padding: 34px 26px;
     text-align: center;
     transition: all var(--transition-base);
     border: 1px solid transparent;
     height: 100%;
 }

 .industry-card:hover {
     background: var(--white);
     border-color: var(--gray-200);
     box-shadow: var(--shadow-md);
     transform: translateY(-5px);
 }

 .industry-icon {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.45rem;
     margin: 0 auto 18px;
     transition: transform var(--transition-base), box-shadow var(--transition-base);
 }

 .industry-card:hover .industry-icon {
     transform: scale(1.1);
     box-shadow: 0 6px 20px rgba(30, 99, 213, .15);
 }

 .industry-card h5 {
     font-size: .98rem;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .industry-card p {
     font-size: .84rem;
     line-height: 1.7;
     margin-bottom: 0;
     color: var(--gray-500);
 }

 /* Extends list style to industry pages */
 .industry-features-list {
     list-style: none;
     padding-left: 0;
     margin-top: 15px;
     margin-bottom: 0;
     text-align: left;
 }

 .industry-features-list li {
     position: relative;
     padding-left: 24px;
     font-size: 0.88rem;
     color: var(--gray-600);
     margin-bottom: 8px;
 }

 .industry-features-list li::before {
     content: "\F272";
     /* bi-check-lg */
     font-family: "bootstrap-icons";
     position: absolute;
     left: 0;
     color: var(--secondary-blue);
     font-weight: 700;
 }

 /* ──────────────────────────────────────────
       10. Why Choose Us
       ────────────────────────────────────────── */
 .why-section {
     background: var(--light-bg);
 }

 .timeline-container {
     position: relative;
     padding-left: 40px;
 }

 .timeline-container::before {
     content: '';
     position: absolute;
     left: 15px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(to bottom, var(--secondary-blue), var(--accent-cyan), var(--primary-orange));
     border-radius: 2px;
 }

 .timeline-item {
     position: relative;
     margin-bottom: 50px;
 }

 .timeline-item:last-child {
     margin-bottom: 0;
 }

 .timeline-dot {
     position: absolute;
     left: -33px;
     top: 4px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     border: 3px solid var(--secondary-blue);
     background: var(--white);
     z-index: 2;
     transition: all var(--transition-fast);
 }

 .timeline-item:hover .timeline-dot {
     background: var(--secondary-blue);
     box-shadow: 0 0 0 6px rgba(30, 99, 213, .12);
 }

 .timeline-content {
     background: var(--white);
     border-radius: var(--radius-md);
     padding: 30px;
     border: 1px solid var(--gray-200);
     transition: all var(--transition-base);
 }

 .timeline-item:hover .timeline-content {
     box-shadow: var(--shadow-md);
     border-color: transparent;
 }

 .timeline-content h4 {
     font-size: 1.08rem;
     font-weight: 700;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .timeline-content h4 i {
     color: var(--primary-orange);
     font-size: .95rem;
 }

 .timeline-content p {
     font-size: .9rem;
     margin-bottom: 0;
     line-height: 1.75;
 }

 /* Right-side image/visual block */
 .why-visual {
     position: relative;
 }

 .why-image-placeholder {
     width: 100%;
     aspect-ratio: 4/5;
     background: linear-gradient(155deg, var(--primary-blue) 0%, var(--secondary-blue) 70%, var(--accent-cyan) 100%);
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .4);
     font-size: 3.5rem;
     box-shadow: var(--shadow-xl);
     position: sticky;
     top: 120px;
 }

 /* ──────────────────────────────────────────
       11. CTA Banner
       ────────────────────────────────────────── */
 .cta-banner {
     position: relative;
     background: linear-gradient(135deg, var(--primary-blue) 0%, #132991 40%, var(--secondary-blue) 100%);
     overflow: hidden;
 }

 .cta-banner::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(37, 185, 245, .15), transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .cta-banner::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(249, 115, 22, .1), transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .cta-content {
     position: relative;
     z-index: 2;
     text-align: center;
 }

 .cta-content h2 {
     font-size: clamp(1.8rem, 4vw, 2.6rem);
     color: var(--white);
     margin-bottom: 16px;
 }

 .cta-content p {
     color: rgba(255, 255, 255, .7);
     font-size: 1.05rem;
     max-width: 550px;
     margin: 0 auto 36px;
     line-height: 1.8;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 14px;
 }

 /* ──────────────────────────────────────────
       12. Contact Section
       ────────────────────────────────────────── */
 .contact-section {
     background: var(--white);
 }

 .contact-info-card {
     background: var(--primary-blue);
     border-radius: var(--radius-lg);
     padding: 44px 36px;
     color: var(--white);
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .contact-info-card::before {
     content: '';
     position: absolute;
     top: -40%;
     right: -30%;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(37, 185, 245, .12), transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .contact-info-card h3 {
     color: var(--white);
     font-size: 1.45rem;
     margin-bottom: 8px;
 }

 .contact-info-card>p {
     color: rgba(255, 255, 255, .6);
     font-size: .9rem;
     margin-bottom: 34px;
 }

 .contact-detail {
     display: flex;
     gap: 14px;
     margin-bottom: 26px;
 }

 .contact-detail-icon {
     width: 42px;
     height: 42px;
     border-radius: var(--radius-sm);
     background: rgba(255, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--accent-cyan);
     flex-shrink: 0;
 }

 .contact-detail h6 {
     color: rgba(255, 255, 255, .5);
     font-size: .72rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 3px;
 }

 .contact-detail p {
     color: var(--white);
     font-size: .92rem;
     margin-bottom: 0;
     line-height: 1.6;
 }

 .contact-detail a {
     color: var(--white);
     transition: color var(--transition-fast);
 }

 .contact-detail a:hover {
     color: var(--accent-cyan);
 }

 .contact-social {
     display: flex;
     gap: 10px;
 }

 .contact-social a {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
     background: rgba(255, 255, 255, .08);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     font-size: 1rem;
     transition: all var(--transition-fast);
 }

 .contact-social a:hover {
     background: var(--primary-orange);
     transform: translateY(-3px);
 }

 /* Map placeholder */
 .map-placeholder {
     width: 100%;
     height: 200px;
     background: rgba(255, 255, 255, .06);
     border-radius: var(--radius-md);
     margin-top: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .3);
     font-size: .85rem;
     gap: 8px;
     border: 1px dashed rgba(255, 255, 255, .12);
 }

 /* Contact Form */
 .contact-form-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     padding: 44px 36px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--gray-100);
 }

 .contact-form-card h3 {
     font-size: 1.35rem;
     margin-bottom: 6px;
 }

 .contact-form-card>p {
     color: var(--gray-500);
     font-size: .9rem;
     margin-bottom: 30px;
 }

 .form-label-custom {
     font-family: var(--font-heading);
     font-size: .82rem;
     font-weight: 600;
     color: var(--dark-text);
     margin-bottom: 6px;
 }

 .form-control-custom {
     padding: 11px 16px;
     font-family: var(--font-body);
     font-size: .9rem;
     border: 1.5px solid var(--gray-200);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
     background: var(--light-bg);
 }

 .form-control-custom:focus {
     border-color: var(--secondary-blue);
     box-shadow: 0 0 0 3px rgba(30, 99, 213, .08);
     background: var(--white);
 }

 .form-select-custom {
     padding: 11px 16px;
     font-family: var(--font-body);
     font-size: .9rem;
     border: 1.5px solid var(--gray-200);
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
     background-color: var(--light-bg);
     color: var(--dark-text);
 }

 .form-select-custom:focus {
     border-color: var(--secondary-blue);
     box-shadow: 0 0 0 3px rgba(30, 99, 213, .08);
     background-color: var(--white);
 }

 /* ──────────────────────────────────────────
       13. Footer
       ────────────────────────────────────────── */
 .footer {
     background: #060c27;
     color: rgba(255, 255, 255, .7);
     padding: 70px 0 0;
     position: relative;
     border-top: 1px solid rgba(255, 255, 255, .08);
 }

 .footer-brand {
     font-family: var(--font-heading);
     font-weight: 800;
     font-size: 1.5rem;
     color: var(--white) !important;
     margin-bottom: 20px;
     display: inline-flex;
     align-items: center;
     background: var(--white);
     padding: 8px 16px;
     border-radius: 10px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     transition: var(--transition-base);
     text-decoration: none;
 }

 .footer-brand:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
 }

 .footer-brand img {
     max-width: 150px;
     height: auto;
     display: block;
 }

 .footer-brand span {
     color: var(--primary-orange);
 }

 .footer p {
     color: rgba(255, 255, 255, .55);
     font-size: .9rem;
     line-height: 1.75;
 }

 .footer h6 {
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: .85rem;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 22px;
 }

 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-links li {
     margin-bottom: 10px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, .55);
     font-size: .88rem;
     transition: all var(--transition-fast);
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .footer-links a::before {
     content: '';
     width: 0;
     height: 1px;
     background: var(--primary-orange);
     transition: width var(--transition-fast);
 }

 .footer-links a:hover {
     color: var(--white);
     padding-left: 4px;
 }

 .footer-links a:hover::before {
     width: 12px;
 }

 .footer-contact-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-bottom: 14px;
     font-size: .88rem;
 }

 .footer-contact-item i {
     color: var(--accent-cyan);
     margin-top: 3px;
     font-size: .9rem;
 }

 .footer-contact-item a {
     color: rgba(255, 255, 255, .55);
 }

 .footer-contact-item a:hover {
     color: var(--white);
 }

 .footer-bottom {
     margin-top: 50px;
     padding: 22px 0;
     border-top: 1px solid rgba(255, 255, 255, .08);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
 }

 .footer-bottom p {
     margin: 0;
     font-size: .82rem;
 }

 .footer-bottom-links {
     display: flex;
     gap: 20px;
 }

 .footer-bottom-links a {
     color: rgba(255, 255, 255, .45);
     font-size: .82rem;
 }

 .footer-bottom-links a:hover {
     color: var(--white);
 }

 /* ──────────────────────────────────────────
       14. WhatsApp Floating Button
       ────────────────────────────────────────── */
 .whatsapp-float {
     position: fixed;
     bottom: 28px;
     right: 28px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #25D366;
     color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
     z-index: 1040;
     transition: all var(--transition-fast);
     cursor: pointer;
 }

 .whatsapp-float:hover {
     transform: scale(1.1) translateY(-3px);
     box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
     color: var(--white);
 }

 .whatsapp-float .pulse-ring {
     position: absolute;
     inset: -4px;
     border-radius: 50%;
     border: 2px solid #25D366;
     animation: whatsappPulse 2s ease-out infinite;
 }

 @keyframes whatsappPulse {
     0% {
         transform: scale(1);
         opacity: .6;
     }

     100% {
         transform: scale(1.4);
         opacity: 0;
     }
 }

 /* ──────────────────────────────────────────
       15. Back to Top
       ────────────────────────────────────────── */
 .back-to-top {
     position: fixed;
     bottom: 96px;
     right: 28px;
     width: 44px;
     height: 44px;
     border-radius: var(--radius-sm);
     background: var(--primary-blue);
     color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     z-index: 1040;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all var(--transition-fast);
     cursor: pointer;
     border: none;
 }

 .back-to-top.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .back-to-top:hover {
     background: var(--secondary-blue);
     transform: translateY(-3px);
 }

 /* ──────────────────────────────────────────
       16. Responsive Overrides
       ────────────────────────────────────────── */
 @media (max-width: 991.98px) {
     .hero {
         min-height: auto;
         padding-top: 120px;
         padding-bottom: 40px;
     }

     .hero-visual {
         margin-top: 50px;
     }

     .about-text {
         padding-left: 0;
         margin-top: 40px;
     }

     .about-accent-box {
         right: 10px;
         bottom: -10px;
         width: 110px;
         height: 110px;
     }

     .about-accent-box .number {
         font-size: 1.7rem;
     }

     .why-visual {
         margin-top: 50px;
     }

     .why-image-placeholder {
         position: static;
         aspect-ratio: 16/9;
     }

     .section-padding {
         padding: 70px 0;
     }

     .timeline-container {
         padding-left: 35px;
     }

     .contact-info-card {
         margin-bottom: 30px;
     }
 }

 @media (max-width: 767.98px) {
     .hero h1 {
         font-size: 2rem;
     }

     .hero-description {
         font-size: 1rem;
     }

     .float-top,
     .float-bottom {
         display: none;
     }

     .section-title {
         font-size: 1.6rem;
     }

     .stats-card {
         padding: 28px 20px;
     }

     .stat-number {
         font-size: 1.8rem;
     }

     .contact-form-card {
         padding: 30px 22px;
     }

     .contact-info-card {
         padding: 30px 24px;
     }

     .footer-bottom {
         justify-content: center;
         text-align: center;
     }
 }

 @media (max-width: 575.98px) {
     .hero-buttons {
         flex-direction: column;
     }

     .hero-buttons .btn-primary-custom,
     .hero-buttons .btn-outline-custom {
         width: 100%;
         justify-content: center;
     }

     .cta-buttons {
         flex-direction: column;
         align-items: center;
     }

     .cta-buttons .btn-primary-custom,
     .cta-buttons .btn-outline-light-custom {
         width: 100%;
         max-width: 280px;
         justify-content: center;
     }
 }

 /* ──────────────────────────────────────────
       17. Page Loader
       ────────────────────────────────────────── */
 .page-loader {
     position: fixed;
     inset: 0;
     background: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity .5s ease, visibility .5s ease;
 }

 .page-loader.hidden {
     opacity: 0;
     visibility: hidden;
 }

 .loader-spinner {
     width: 44px;
     height: 44px;
     border: 3px solid var(--gray-200);
     border-top-color: var(--primary-blue);
     border-radius: 50%;
     animation: spin .8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* ──────────────────────────────────────────
       18. Subpage Styles
       ────────────────────────────────────────── */
 .subpage-header {
     position: relative;
     padding: 160px 0 85px 0;
     background: linear-gradient(165deg, #f0f4ff 0%, var(--white) 60%, #f7f9ff 100%);
     overflow: hidden;
     border-bottom: 1px solid var(--gray-200);
     text-align: center;
 }

 .subpage-header::before {
     content: '';
     position: absolute;
     top: -20%;
     right: -10%;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(30, 99, 213, .05) 0%, transparent 70%);
     border-radius: 50%;
     pointer-events: none;
 }

 .subpage-header .header-pattern {
     position: absolute;
     inset: 0;
     opacity: .025;
     background-image:
         linear-gradient(var(--primary-blue) 1px, transparent 1px),
         linear-gradient(90deg, var(--primary-blue) 1px, transparent 1px);
     background-size: 50px 50px;
     pointer-events: none;
 }

 .subpage-header h1 {
     font-size: clamp(2rem, 5vw, 3rem);
     font-weight: 800;
     margin-bottom: 15px;
 }

 .subpage-header p {
     font-size: 1.05rem;
     color: var(--gray-500);
     max-width: 650px;
     margin: 0 auto;
     line-height: 1.8;
 }

 /* Core Values cards styling */
 .value-card {
     background: var(--white);
     border-radius: var(--radius-md);
     padding: 35px 30px;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--gray-100);
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
     height: 100%;
 }

 .value-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .value-card-icon {
     width: 50px;
     height: 50px;
     border-radius: var(--radius-sm);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
     margin-bottom: 22px;
 }

 .value-card h4 {
     font-size: 1.15rem;
     margin-bottom: 12px;
 }

 .value-card p {
     font-size: 0.92rem;
     margin-bottom: 0;
     color: var(--gray-500);
 }

 /* Detailed Services on Services page */
 .detail-features-list {
     list-style: none;
     padding-left: 0;
     margin-top: 15px;
     margin-bottom: 0;
     text-align: left;
 }

 .detail-features-list li {
     position: relative;
     padding-left: 24px;
     font-size: 0.9rem;
     color: var(--gray-600);
     margin-bottom: 8px;
 }

 .detail-features-list li::before {
     content: "\F272";
     /* bi-check-lg */
     font-family: "bootstrap-icons";
     position: absolute;
     left: 0;
     color: var(--secondary-blue);
     font-weight: 700;
 }

 .service-card[data-accent="blue"] .detail-features-list li::before {
     color: var(--secondary-blue);
 }

 .service-card[data-accent="orange"] .detail-features-list li::before {
     color: var(--primary-orange);
 }

 .service-card[data-accent="cyan"] .detail-features-list li::before {
     color: var(--accent-cyan);
 }

 .service-card[data-accent="navy"] .detail-features-list li::before {
     color: var(--primary-blue);
 }

 .service-card-btn-wrap {
     margin-top: 25px;
 }

 .service-card-btn-wrap .btn-primary-custom {
     padding: 10px 20px;
     font-size: 0.82rem;
 }

 /* ──────────────────────────────────────────
    Security: Disable Text Selection & Highlight
    ────────────────────────────────────────── */
 body {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
 }

 input,
 textarea,
 select,
 [contenteditable="true"] {
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
 }