/* ==========================================================================
           1. CORE RESETS & VARIABLES
           ========================================================================== */
        :root {
            --primary-blue: #0b3c5d;
            --secondary-blue: #1d70b8;
            --accent-teal: #00a8cc;
            --accent-light-blue: #e8f4f8;
            --text-dark: #1e293b;
            --text-muted: #64748b;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-color: #e2e8f0;
            --card-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
            --max-width: 1400px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--text-dark);
            background-color: var(--bg-white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /*==================================
        Menu
        ===================================*/
                
                
        /* ─── NAVIGATION ─── */
        nav {
        position: sticky; 
        top: 0; 
        z-index: 100;
        background: #fff;
        padding: 0 5%;
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        height: 80px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .logo img {
        max-height: 68px;
        width: auto;
        }
        .nav-links { 
        display: flex; 
        gap: 2rem; 
        list-style: none; 
        align-items: center;
        }
        .nav-links a { 
        text-decoration: none; 
        color: var(--navy); 
        font-size: 0.95rem; 
        font-weight: 500; 
        transition: color 0.2s ease; 
        position: relative; 
        }
        .nav-links a:hover {
    color: #1a55e3 ;
}


.nav-cta:hover { 
        background: #0b1f4b !important; 
        transform: translateY(-1px);
        color:#fff !important;
}
        .has-dropdown::after { 
        /*content: ' ▾'; */
        font-size: 0.75rem; 
        color: var(--gray); 
        }
        .nav-cta {
        background: var(--blue); 
        color: var(--white) !important;
        padding: 0.7rem 1.4rem; 
        border-radius: 6px;
        white-space: nowrap;
        transition: background 0.2s ease, transform 0.2s ease !important;
        }
        
        .nav-links li.has-dropdown {
           position: relative;
        }
        
        .nav-links .submenu {
           display: none;
           position: absolute;
           top: 100%;
           left: 0;
           background: #fff;
           list-style: none;
           min-width: 180px;
           padding: 0.5rem 0;
           margin: 0;
            border-radius: 0 0 6px 6px;
           border-radius: 6px;
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .nav-links li.has-dropdown:hover .submenu {
           display: block;
           z-index:1000;
        }
        
        .submenu li {
           width: 100%;
        }
        
        .submenu li a {
           display: block;
           padding: 0.6rem 1.2rem;
           white-space: nowrap;
           color: var(--navy);
           font-weight: 400;
        }
        
        .submenu li a:hover {
           background: rgba(0, 0, 0, 0.04);
           color: var(--blue);
        }
        .nav-cta {
        background: #1a55e3;
        color: #fff !important;
        padding: 0.7rem 1.4rem;
        border-radius: 6px;
        white-space: nowrap;
        transition: background 0.2s ease, transform 0.2s ease !important;
        }


        /* ==========================================================================
           2. TYPOGRAPHY & COMMON COMPONENTS
           ========================================================================== */
        .container {
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .section-tag {
            text-transform: uppercase;
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: var(--accent-teal);
            margin-bottom: 0.75rem;
            display: block;
        }

        .section-heading {
            font-size: clamp(1.75rem, 3.5vw, 2.5rem);
            font-weight: 700;
            color: var(--primary-blue);
            line-height: 1.25;
            margin-bottom: 1.25rem;
        }

        .section-description {
            font-size: 1.0625rem;
            color: var(--black);
            line-height: 1.7;
            max-width: 900px;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background-color: var(--accent-teal);
            color: var(--bg-white);
            padding: 0.875rem 1.75rem;
            border-radius: 4px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background-color: #008cae;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 168, 204, 0.3);
        }

        /* ==========================================================================
           3. HERO SECTION
           ========================================================================== */
        .hero-hc {
            position: relative;
            background: linear-gradient(135deg, #f0f7fa 0%, #ffffff 100%);
            padding: 4rem 0 0 0;
            overflow: hidden;
            background-image: url(hero.png);
            min-height: 990px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .hero-title {
            font-size: clamp(2.25rem, 4.5vw, 3.5rem);
            font-weight: 800;
            color: var(--primary-blue);
            line-height: 1.15;
            margin-bottom: 1.5rem;
            padding-top: 183px;
        }

        .hero-subtitle {
            font-size: 1.125rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            max-width: 540px;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        /* ==========================================================================
           4. WHO WE ARE SECTION
           ========================================================================== */
        .who-we-are {
            padding: 5rem 0;
            background-color: var(--bg-white);
            background-image: url(whoweare.png);
            min-height: 990px;
        }

        .split-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .split-image img {
            border-radius: 8px;
            width: 100%;
            box-shadow: var(--card-shadow);
        }

        .text-block p {
            margin-bottom: 1.25rem;
            color: var(--text-muted);
        }

        .text-block p strong {
            color: var(--primary-blue);
        }

        /* ==========================================================================
           5. CHALLENGES & BANNER SECTION
           ========================================================================== */
        .challenges {
            padding: 4rem 0;
            background-color: var(--bg-light);
        }

        .banner-image {
            width: 100%;
            max-height: 380px;
            object-fit: cover;
            border-radius: 8px;
            margin: 2.5rem 0;
        }

        .icon-callouts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-top: 2rem;
        }

        .icon-callout-item {
            display: flex;
            gap: 1.25rem;
            align-items: flex-start;
            background: var(--bg-white);
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .icon-box {
            width: 48px;
            height: 48px;
            /*background-color: var(--accent-light-blue);*/
            color: var(--accent-teal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.25rem;
        }

        /* ==========================================================================
           6. SIX-COLUMN SERVICES GRID
           ========================================================================== */
        .services {
            padding: 5rem 0;
            background-color: var(--bg-white);
            background-image: url(value.png);
            background-repeat: no-repeat;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1.25rem;
            margin-top: 3rem;
        }

        .service-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1.5rem 1rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-shadow);
            border-color: var(--accent-teal);
        }

        .service-card .icon-box {
            margin: 0 auto 1.25rem auto;
        }

        .service-card h4 {
            font-size: 0.95rem;
            color: var(--primary-blue);
            margin-bottom: 0.75rem;
            line-height: 1.3;
        }

        .service-card p {
            font-size: 0.8125rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* ==========================================================================
           7. APRS & KEY FEATURES SECTION
           ========================================================================== */
        .aprs-section {
            padding: 5rem 0;
            background-color: var(--bg-light);
        }

        .aprs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 2.5rem;
            background: var(--bg-white);
            padding: 2.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .aprs-info h3 {
            font-size: 1.75rem;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
        }

        .aprs-info .sub {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--accent-teal);
            margin-bottom: 1rem;
        }

        .aprs-info p {
            font-size: 0.9375rem;
            color: var(--black);
            line-height: 1.6;
        }

        .features-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: #edf6ff;
            padding: 0.875rem 1rem;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--primary-blue);
        }

        .feature-item svg {
            color: var(--accent-teal);
            flex-shrink: 0;
        }

        /* Business Impact Row */
        .impact-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin-top: 2rem;
            background-image:url(world-map.jpg);
            border-radius:10px;
        }

        .impact-card {
            /*background: #d2f7f9;*/
            /*border: 1px solid #a8d2db;*/
            padding: 1.25rem 0.75rem;
            border-radius: 8px;
            text-align: center;
        }

        .impact-card .icon-box {
            /*width: 36px;
            height: 36px;*/
            margin: 0 auto 0.5rem auto;
        }

        .impact-card span {
            font-size: 0.75rem;
            font-weight: 600;
            color: #fff;
            display: block;
        }

        /* ==========================================================================
           8. PERFORMANCE METRICS SECTION
           ========================================================================== */
        .metrics-section {
            padding: 5rem 0;
            background-color: #d2e5f9;
            text-align: center;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1rem;
            margin-top: 3rem;
        }

        .metric-card {
            background: var(--bg-light);
            padding: 1.5rem 0.5rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .metric-card .icon-box {
            margin: 0 auto 0.75rem auto;
            width: 40px;
            height: 40px;
        }

        .metric-card p {
            font-size: 0.75rem;
            color: #000;
            margin-bottom: 1rem;
            min-height: 36px;
        }

        .metric-card .value {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--secondary-blue);
        }

        /* ==========================================================================
           9. WHY CHOOSE CNT (LIST SECTION)
           ========================================================================== */
        .why-choose {
            padding: 5rem 0;
            background-color: var(--bg-light);
            background-image: url(adv.png);
            background-repeat: no-repeat;
        }

        .why-choose-list {
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .why-item {
            display: grid;
            grid-template-columns: 80px 220px 1fr;
            align-items: center;
            background: var(--bg-white);
            padding: 1.5rem 2rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }

        .why-item h4 {
            color: #000;
            font-size: 1.1rem;
        }

        .why-item p {
            color: var(--text-muted);
            font-size: 0.9375rem;
        }

        /* ==========================================================================
           10. CTA SECTION & FOOTER
           ========================================================================== */
        .cta-section {
            background-color: var(--primary-blue);
            color: var(--bg-white);
            padding: 5rem 0 0 0;
            overflow: hidden;
            background-image: url(operations.png);
            min-height: ;
        }

        .cta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .cta-content h2 {
            font-size: clamp(2rem, 3.5vw, 2.75rem);
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .cta-content p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
            font-size: 1rem;
        }

        .cta-features {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            background: rgba(255, 255, 255, 0.05);
            padding: 2rem;
            margin-top: 4rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .cta-feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.875rem;
            color: var(--bg-white);
        }

        .cta-feature-item img{
            border: 1px solid #1b6bb7;
            border-radius: 50%;
            padding: 10px;
        }

        .brand-footer {
            background-color: #051d2d;
            padding: 5rem 0;
            text-align: center;
            color: var(--bg-white);
        }

        .brand-footer h1 {
/*            font-family: 'Playfair Display', serif;*/
            font-size: clamp(2rem, 4vw, 3rem);
/*            font-style: italic;*/
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .brand-footer p {
            font-size: 0.8125rem;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 1rem;
        }
       .bimpact{
margin-top: 3rem;
text-align: center;
margin-bottom: 2rem;
} 
        

/* --- LAPTOP TO SMALL MONITOR SCALING (Down to 1200px) --- */
@media (max-width: 1400px) {

:root { --max-width: 1330px; }
nav { height: 100px; padding: 0 3%; }
.nav-links a { font-size: .85rem; }
section { padding: 3rem 3%; }
.hero-hc { min-height: 80vh; }
.hero-hc h1 { font-size: 3rem; }
.hero-hc p { font-size: 1rem; max-width: 500px; }
.hero-hc {
position: relative;
    background: linear-gradient(135deg, #f0f7fa 0%, #ffffff 100%);
    background-image: url("hero.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 4rem 0 0;
    min-height: 590px;
    overflow: hidden;
}
.hero-title {
    padding-top: 60px;
}
.who-we-are {
    position: relative;
    background: linear-gradient(135deg, #f0f7fa 0%, #ffffff 100%);
    background-image: url("whoweare.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 4rem 0 0;
    min-height: 590px;
    overflow: hidden;
}
.section-heading {
    font-size: 1.75rem;
}
.split-layout {
    gap: 11rem;
}
.service-card p {
    font-size: 0.8rem;
}
.services {
    position: relative;
    background: linear-gradient(135deg, #f0f7fa 0%, #ffffff 100%);
    background-image: url("value.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 4rem 0 0;
    min-height: 590px;
    overflow: hidden;
}
.aprs-grid {
background:#ffffff7d;
}
.bimpact{
margin-top: 3rem;
text-align: center;
margin-bottom: 2rem;
}
.metric-card .value {
    font-size: 1rem;
    font-weight: 800;
}
.cta-section {
    position: relative;
    background: linear-gradient(135deg, #f0f7fa 0%, #ffffff 100%);
    background-image: url(operations.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 4rem 0 0;
    min-height: 590px;
    overflow: hidden;
}
    }    
    
    
    @media (max-width: 480px) {
        .hero-hc{
    background-image:url("hero-mobile.png");
        }
    }
    
    
    
        /* =========================================================
   MOBILE & TABLET BREAKPOINT (1024px and below)
   ========================================================= */
@media screen and (max-width: 1024px) {

  /* 3-Line Hamburger Icon Container */
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px; /* Spacing between lines */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  /* The 3 Individual Horizontal Lines */
  .mobile-menu-toggle .bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333; /* Change color if your nav is dark */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  /* Hidden Menu by default */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 1.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  /* Expanded Menu */
  .nav-links.active {
    display: flex;
  }

  /* ----------------------------------------------------
     ANIMATION: Transform 3 Lines into an "X" when open
     ---------------------------------------------------- */
  .mobile-menu-toggle.open .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .mobile-menu-toggle.open .bar:nth-child(2) {
    opacity: 0; /* Middle line fades out */
  }

  .mobile-menu-toggle.open .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Submenu and Links formatting */
  .nav-links > li {
    width: 100%;
    margin: 0.5rem 0;
  }

  .nav-links a {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .has-dropdown .submenu {
    display: none;
    padding-left: 1rem;
    background-color: #fafafa;
  }

  .has-dropdown.open .submenu {
    display: block;
  }
}


        /* ==========================================================================
           11. RESPONSIVE BREAKPOINTS (4K to Mobile)
           ========================================================================== */

        /* 4K and Ultra-Wide Screens */
        @media (min-width: 2000px) {
            :root {
                --max-width: 1800px;
            }
            html {
                font-size: 18px;
            }
        }

        /* Laptops & Small Desktops (1024px to 1280px) */
        @media (max-width: 1280px) {
            .services-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .metrics-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            .impact-row {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Tablets (768px to 1023px) */
        @media (max-width: 1023px) {
            .hero-grid, 
            .split-layout, 
            .aprs-grid, 
            .cta-grid {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .why-item {
                grid-template-columns: 60px 1fr;
            }
            
            .why-item p {
                grid-column: 1 / -1;
                margin-top: 0.5rem;
            }

            .cta-features {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile Devices (Under 767px) */
        @media (max-width: 767px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .metrics-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .features-list, 
            .icon-callouts {
                grid-template-columns: 1fr;
            }

            .impact-row {
                grid-template-columns: repeat(2, 1fr);
            }

            .cta-features {
                grid-template-columns: 1fr;
            }

            .why-item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .text-block{
                background-color: #ffffff78;
                padding: 10px;
                
            }
            .text-block p{
                color:#000;
            }
        }

        /* Small Mobile Devices (Under 480px) */
        @media (max-width: 480px) {
            .services-grid,
            .metrics-grid,
            .impact-row {
                grid-template-columns: 1fr;
            }
        }