/* --- COPY OF GLOBALS --- */
        :root {
            --color-bg-dark: #050b1a;
            --color-white: #ffffff;
            --color-accent: #f0c85c;
            --color-blue-pop: #2563eb;
            --color-text-dim: #94a3b8;
        }

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

        body { 
            background-color: var(--color-bg-dark); 
            font-family: 'Inter', sans-serif; 
            color: var(--color-white);
            line-height: 3;
            padding-top: 80px; /* Prevents hero content from hiding under fixed header */
        }

        .main-header {
            width: 100%;
            background: rgba(5, 11, 26, 0.95);
            backdrop-filter: blur(10px);
            position: fixed;
            top: 0;
            z-index: 1000;
            padding: 1rem 5%; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* --- NAVIGATION REFINEMENT --- */
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

       .nav-right-group {
            display: flex;
            align-items: center;
            gap: 2.5rem; /* Space between Menu and Contact button */
        }

        .nav-menu {
            display: flex;
            gap: 1.8rem;
            list-style: none;
        }
        .nav-menu a {
            position: relative;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 1.5px;
            font-weight: 700;
            color: var(--color-text-dim);
            text-decoration: none;
            padding: 8px 0;
            transition: color 0.3s ease;
        }
        .nav-menu a.active::after,
        .nav-menu a:hover::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--color-blue-pop);
        }
        .nav-menu a.active {
            color: var(--color-white) !important;
        }

        .nav-menu a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--color-blue-pop);
        }
        .nav-menu a:hover {
            color: var(--color-white);
        }

        /* Hover line for non-active links */
        .btn-contact {
            background-color: var(--color-blue-pop); /* Blue by default */
            border: 1px solid var(--color-blue-pop);
            /* Reduced height: changed 12px to 10px */
            padding: 0.5px 28px; 
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 800;
            text-transform: uppercase;
            color: hwb(0 96% 2%);
            text-decoration: none;
            transition: 0.4s ease;
        }

        /* Amber state when the user is ON the contact page */
        .btn-contact.active {
            background-color: hsl(40, 27%, 94%); /* Amber/Orange color */
            border-color: #f59e0b;
            color: hsl(0, 0%, 6%);
        }

        /* Optional: Slight hover effect for the amber state */
        .btn-contact.active:hover {
            background-color: #d97706; /* A slightly deeper amber on hover */
            border-color: #d97706;
        }
        .btn-contact:hover {
            background-color: transparent;
            border-color: var(--color-white);
            color: var(--color-white);
        }

        /* --- BRAND LOGO --- */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 44px; 
        }

        .logo-text {
            font-weight: 800;
            font-size: 1.4rem;
            letter-spacing: 1px;
            color: var(--color-white);
            line-height: 1; /* Prevents text descenders from pushing the header */
        }

        /* The Geometric Arc Logo Mark */
        .logo-mark {
            position: relative;
            width: 44px; 
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .logo-arc-top, .logo-arc-bottom {
            position: absolute;
            width: 32px;
            height: 32px;
            border: 4px solid transparent;
            border-radius: 50%;
            box-sizing: border-box;
        }

        /* The Top Arc (Navy/Blue - blends with background) */
        .logo-arc-top {
            border-top-color: #8a94b7;
            border-right-color: #8a94b7;
            transform: rotate(-45deg); /* Rotated to align the "end" points */
        }

        /* The Bottom Arc (Gold/Yellow) */
        .logo-arc-bottom {
            border-bottom-color: var(--color-accent);
            border-left-color: var(--color-accent);
            transform: rotate(-45deg);
        }

        /* The Center Signal Dot */
        .logo-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--color-accent);
            border-radius: 50%;
            z-index: 5;
        }

        /* --- HP SPECIFIC STYLES --- */
        .hp-hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 100px 10% 50px;
        }

        .contact-info-column {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centers everything horizontally */
            text-align: center;
        }

        .hp-hero-label {
            display: block; /* Ensures text-align works */
            color: var(--color-blue-pop);
            font-style: italic;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .hp-hero h1 {
            font-size: clamp(2.5rem, 8vw, 6rem); /* Responsive font size */
            line-height: 0.95;
            font-weight: 800;
            margin-bottom: 2rem;
        }

        .accent { color: var(--color-accent); }

        .hp-hero p {
            font-size: 1.2rem;
            color: var(--color-text-dim);
            max-width: 800px;
            margin-bottom: 3rem;
        }

        .hp-cta-group { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

        .hp-btn-blue {
            background: var(--color-blue-pop);
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            color: rgb(255, 255, 255);
        }

        .hp-btn-outline {
            border: 1px solid rgba(255,255,255,0.2);
            padding: 10px 45px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            color: hsl(56, 76%, 69%);
        }

        /* Footer Base Styles */
        .site-footer {
            background: #050b1a;
            color: #ffffff;
            padding: 80px 0 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            /* This ensures the footer itself fills the screen, but content stays centered */
            width: 100%;
        }

        .footer-grid {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 50px;
            
            /* FIX: Added these lines to prevent touching the border */
            max-width: 1200px; /* Adjust this to match your header/section width */
            margin: 0 auto;    /* Centers the card horizontally */
            padding: 0 40px;   /* Adds a safe 'gutter' so it never touches the edge */
        }

        .footer-col {
            flex: 1;
            min-width: 250px;
        }

        /* Typography */
        .footer-logo {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        .footer-logo .accent {
            color: #f0c85c; /* Gold accent color from your logo */
        }

        .footer-col h4 {
            color: #f0c85c;
            font-size: 1.1rem;
            margin-bottom: 25px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer-col p {
            color: #8a94b7;
            line-height: 1.8;
            font-size: 0.95rem;
        }

        /* Links */
        .footer-col ul {
            list-style: none;
            padding: 0;
        }

        .footer-col ul li {
            margin-bottom: 12px;
        }

        .footer-col ul li a {
            color: #8a94b7;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .footer-col ul li a:hover {
            color: #2563eb; /* Blue accent from your cards */
            padding-left: 5px;
        }

        /* Bottom Bar */
        .footer-bottom-bar {
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .footer-bottom-bar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            
            /* FIX: Keep the bottom bar aligned with the grid above */
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px;
        }
        html {
            scroll-behavior: smooth;
        }

        .footer-bottom-bar p {
            color: #566285;
            font-size: 0.85rem;
        }

        .footer-legal a {
            color: #566285;
            text-decoration: none;
            font-size: 0.85rem;
            margin-left: 20px;
            transition: color 0.3s ease;
        }

        .footer-legal a:hover {
            color: #ffffff;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .footer-grid {
                flex-direction: column;
            }
            
            .footer-bottom-bar .container {
                flex-direction: column;
                text-align: center;
            }
        }

        /* --- MODERN SOLUTIONS GRID WITH IMAGES --- */
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 50px;
        }

        .solution-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            border: 1px solid rgba(136, 199, 10, 0.1);
            transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Background Image Layer */
        .solution-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
            transition: 0.6s ease;
            z-index: 1;
        }

        /* Individual Images - Replace with your actual paths */
        .card-trading::before { background-image: url('trading-bg.jpg'); }
        .card-logistics::before { background-image: url('logistics-bg.jpg'); }
        .card-insights::before { background-image: url('insights-bg.jpg'); }

        /* Dark Overlay for Readability */
        .solution-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, oklch(32.185% 0.00354 286.053 / 0.2) 0%, rgba(3, 3, 49, 0.949) 100%);
            z-index: 2;
            transition: 0.4s;
        }

        .solution-card:hover::before {
            transform: scale(1.1);
        }

        /* Card Content Layer */
        .card-content {
            position: relative;
            z-index: 3;
        }

        .card-number {
            color: var(--color-accent);
            font-weight: 800;
            letter-spacing: 2px;
            font-size: 0.8rem;
            margin-bottom: 10px;
            display: block;
        }

        .solution-card h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--color-white);
        }

        .solution-card p {
            color: var(--color-text-dim);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 25px;
            max-height: 0; /* Hidden by default for modern look */
            opacity: 0;
            transition: 0.4s ease;
            overflow: hidden;
        }

        .solution-card:hover p {
            max-height: 100px;
            opacity: 1;
        }
        /* --- STATS SECTION --- */
        .hp-stats {
            padding: 60px 0;
            border-top: 1px solid rgba(236, 232, 232, 0.05);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .stats-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }

        .stat-num {
            display: block;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--color-blue-pop);
        }

        .stat-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.6;
        }

        .stat-divider {
            width: 1px;
            height: 50px;
            background: rgba(255,255,255,0.1);
        }

        /* --- NETWORK SECTION --- */
        .hp-network { 
            padding: 80px 0; 
            background: #050b1a; 
        }

        .network-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 80px;
        }

        .network-container {
            display: flex !important;
            flex-direction: row; /* Forces side-by-side */
            align-items: center; /* Centers text vertically with the map */
            justify-content: space-between;
            gap: 60px; /* Space between text and map */
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .network-text {
            flex: 1; /* Takes up 50% of the width */
            max-width: 500px;
        }

        .network-text h2 {
            font-size: 3.2rem;
            line-height: 1.1;
            margin: 20px 0 30px;
            color: #ffffff;
        }

        .network-text p {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #8a94b7;
            margin-bottom: 45px;
        }

        /* Organized Checkbox List */
        .network-list {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }

        .network-list li {
            display: flex;
            color: oklab(95.651% -0.07031 0.19557);
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 1.1rem;
        }

        .check-icon {
            color: #2563eb; /* Blue checkmark */
            margin-right: 15px;
            font-weight: bold;
        }

        .list-check {
            color: hsl(216, 17%, 94%); /* Blue checkmarks */
            margin-right: 20px;
            font-size: 1.2rem;
        }

        .network-visual {
            flex: 1.2; /* Takes up slightly more space for the map */
        }

        .map-card {
            /* Path to your newly uploaded map */
            background-image: url('../image/Map.jpg'); 
            
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            
            /* 1. This inverts the map: White becomes Dark, Black becomes Light */
            filter: invert(0.9) hue-rotate(180deg) brightness(0.6) contrast(1.2);
            opacity: 0.4; /* Keeps it subtle background element */
            
            background-color: #050b1a; 
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 40px;
            height: 450px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s ease;
        }
        .map-card:hover {
            opacity: 0.7;
            filter: invert(0.9) hue-rotate(180deg) brightness(0.8) contrast(1.2);
        }

        .pulse-point {
            position: absolute;
            width: 14px;
            height: 14px;
            background: #f0c85c;
            border-radius: 50%;
            z-index: 20;
            filter: none !important; /* Prevents the map inversion from affecting the gold dots */
        }
        .pulse-point::after {
            content: "";
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 2px solid #f0c85c;
            animation: pulse-animation 2s infinite;
        }
        @keyframes pulse-animation {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(3); opacity: 0; }
        }

        /* 5. COORDINATES: Tuned specifically for this map URL */
        .point-dubai { top: 52%; left: 63%; }
        .point-africa { top: 75%; left: 55%; }
        .point-asia { top: 52%; left: 72%; }
        .point-c-asia { top: 39%; left: 65%; }
        .point-brazil { top: 70%; left: 33%; }

        /* --- MERGED SOLUTIONS STYLING --- */
        .hp-solutions-merge {
            padding: 60px 0 100px;
            background: #050b1a; /* Matching your dark theme */
        }

        .solutions-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .solutions-header h2 {
            font-size: 2.8rem;
            margin: 15px 0;
        }

        .solutions-header p {
            color: #8a94b7;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Updated Grid for Home Page Flow */
        .grid-container {
            display: flex;
            gap: 25px;
            justify-content: space-between;
        }

        .solution-card {
            flex: 1;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 30px;
            padding: 40px;
            transition: all 0.3s ease;
        }

        .solution-card:hover {
            border-color: #2563eb; /* Blue accent */
            background: rgba(37, 99, 235, 0.02);
        }

        .card-number {
            color: #f0c85c; /* Gold accent from logo */
            font-weight: 800;
            font-size: 0.8rem;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .solution-card h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        .solution-card p {
            color: hsl(225, 14%, 89%);
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        /* --- CONTACT PAGE LAYOUT --- */
        #contact-form {
            scroll-margin-top: 120px;
        }

        .contact-upper-layout {
            display: grid;
            /* Allocated more space (1.4fr) to the form to increase its width */
            grid-template-columns: 1fr 1.4fr; 
            gap: 60px;
            padding: 80px 0;
            align-items: start;
        }
        .contact-info-column h1 {
            font-size: 2.8rem; /* Scaled down from 4rem */
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .contact-description {
            text-align: center;
            font-size: 1.05rem;
            color: var(--color-text-dim);
            line-height: 1.8;
            max-width: 500px; /* Constrained for better balance */
            margin: 0 auto 50px;
        }
        .contact-details-row {
            display: flex;
            flex-direction: column; /* Stacked orientation */
            gap: 20px; /* Spacing between Office, Phone, and Email */
            width: 100%;
            align-items: center;
        }
        .contact-detail-item label {
            font-size: 0.75rem;
            letter-spacing: 2px;
            color: var(--color-blue-pop);
            margin-bottom: 10px;
            text-transform: uppercase;
            font-weight: 700;
        }
        .detail-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
        }

        .contact-detail-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            padding-top: 15px; /* Space for the longer line */
        }
        .contact-detail-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px; /* Increased from 40px */
            height: 1px; /* Slightly thicker for better visibility */
            background-color: var(--color-blue-pop);
        }
        .contact-page {
            padding: 120px 0 80px;
        }

        .contact-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 80px;
        }

        .contact-header h1 {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
            margin: 15px 0 25px;
        }

        .contact-lead {
            font-size: 1.15rem;
            color: var(--color-text-dim);
            line-height: 1.7;
        }

        /* --- MAIN GRID (INFO + FORM) --- */
        .contact-main-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr; /* Reduced form width compared to info side */
            gap: 80px;
            align-items: start;
            max-width: 1100px;
            margin: 0 auto 100px;
        }

        /* Contact Details Styling */
        .contact-details-sidebar {
            display: flex;
            flex-direction: row; /* Aligned horizontally in screenshot b51384 */
            justify-content: space-between;
            grid-column: 1 / -1; /* Spans full width above the cards in the screenshot */
            margin-bottom: 60px;
        }

        /* Overriding for specific layout in image_b51384.jpg */
        .contact-main-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .contact-details-sidebar {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .contact-item {
            border-top: 1px solid rgba(59, 130, 246, 0.5); /* Blue line from screenshot */
            padding-top: 20px;
        }

        .contact-item label {
            display: block;
            font-size: 0.7rem;
            letter-spacing: 2px;
            color: var(--color-blue-pop);
            margin-bottom: 10px;
        }

        .contact-value {
            font-size: 1.2rem;
            font-weight: 600;
        }

        /* Form Styling - Reduced Width */
        .contact-form-wrapper {
            width: 100%;
            max-width: 650px; /* Constraining form width */
        }

        .contact-form-card {
            background: rgba(255, 255, 255, 0.02);
            padding: 45px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            width: 95%; /* Now occupies more space due to the 1.4fr grid ratio */
        }
        .contact-form-card h3 {
            margin-bottom: 30px;
            font-size: 1.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 0.8rem; margin-bottom: 8px; color: var(--color-text-dim); }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 14px;
            border-radius: 8px;
            color: white;
        }
        .contact-bottom-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            /* Reduce container width so cards don't touch page edges */
            max-width: 1400px; 
            margin: 0 auto; /* Center the grid */
            padding: 0 40px 100px 40px; 
        }
        .contact-bottom-grid .solution-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            /* 1. Moved content higher by reducing top padding */
            padding: 30px 45px 60px 45px; 
            min-height: 240px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Aligns content to the top */
        }
        /* 2. Increased font sizes for better visibility */
        .contact-bottom-grid .solution-card .card-number {
            font-size: 1rem;
            color: var(--color-blue-pop);
            margin-bottom: 15px;
            font-weight: 700;
        }
        .contact-bottom-grid .solution-card h3 {
            font-size: 1.8rem; /* Increased from ~1.4rem */
            margin-bottom: 20px;
            color: #ffffff;
        }
        .contact-bottom-grid .solution-card p {
            font-size: 1.15rem; /* Increased from 1rem */
            line-height: 1.6;
            color: var(--color-text-dim);
        }

        .input-group { margin-bottom: 25px; }

        .input-group label {
            display: block;
            font-size: 0.75rem;
            color: var(--color-text-dim);
            margin-bottom: 12px;
        }

        .input-group input, .input-group select, .input-group textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 16px;
            border-radius: 10px;
            color: white;
        }

        /* --- BOTTOM INFO CARDS --- */
        .contact-bottom-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .info-mini-card {
            background: rgba(255, 255, 255, 0.03);
            padding: 40px;
            border-radius: 15px;
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--color-text-dim);
        }
        /* FIX: Add breathing room on both sides of the form */
        .contact-upper-layout {
            padding: 80px 40px; /* adds left/right spacing */
        }
        
        /* FIX: Prevent form from touching the right edge */
        .contact-form-card {
            width: 100%;
            max-width: 600px; /* reduced from 650px */
            margin: 0 auto;   /* centers the form */
        }
        /* FIX: Dark dropdown list */
        .form-group select {
            background: rgba(255, 255, 255, 0.05);
            color: white;
        }
        
        .form-group select option {
            background: #0d1528; /* dark background */
            color: white;        /* readable text */
        }
        @media (max-width: 768px) {
            .contact-upper-layout {
                grid-template-columns: 1fr;
                padding: 60px 20px;
            }
        
            .contact-form-card {
                max-width: 100%;
                padding: 35px;
            }
        }

        @media (max-width: 992px) {
            .contact-upper-layout, .contact-bottom-grid, .form-row {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 1024px) {
            .contact-upper-layout {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .contact-info-column h1 { font-size: 2.4rem; }
        }
        /* Responsive adjustment for mobile */
        @media (max-width: 768px) {
            .contact-bottom-grid {
                grid-template-columns: 1fr;
                padding: 0 20px 80px 20px;
            }
        }


        /* --- ABOUT PAGE CONSOLIDATED STYLES --- */
        /* --- ABOUT HERO --- */
        .about-hero {
            text-align: center;
            padding: 100px 0 60px;
            max-width: 900px;
            margin: 0 auto;
        }

        .about-hero h1 {
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            margin: 20px 0;
            line-height: 1.1;
        }

        .about-lead {
            font-size: 1.2rem;
            color: var(--color-text-dim);
            line-height: 1.8;
        }

        /* --- MISSION/VISION CARDS --- */
        .about-card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto 60px;
            padding: 0 40px;
        }

        .about-card-grid .solution-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            /* 1. Pulled content up by reducing top padding */
            padding: 35px 50px 60px 50px; 
            min-height: 280px;
        }

        .about-card-grid .solution-card h3 {
            font-size: 2rem; 
            margin-bottom: 15px;
        }
        .about-card-grid .solution-card p {
            font-size: 1.2rem;
            line-height: 1.7;
            color: var(--color-text-dim);
        }
        .about-bottom-section {
            padding: 0 40px 100px 40px;
        }
        .ops-card-centered {
        /* 3. Reduced width and centered card */
            max-width: 1000px; 
            margin: 0 auto;
            background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 60px;
            /* 4. Center all content inside */
            text-align: center; 
        }
        .ops-card-centered h2 {
            font-size: 2.8rem;
            margin: 20px 0;
        }

        .ops-card-centered p {
            max-width: 700px;
            margin: 0 auto 40px;
            font-size: 1.2rem;
            color: var(--color-text-dim);
        }

        .ops-stats-center {
            display: flex;
            justify-content: center;
            gap: 80px;
        }

        /* --- OPERATIONS SECTION --- */
        .about-operations {
            background: rgba(255, 255, 255, 0.01);
            padding: 100px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .ops-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .ops-text h2 {
            font-size: 2.8rem;
            margin: 15px 0 25px;
        }

        .ops-details {
            display: flex;
            gap: 50px;
            margin-top: 40px;
        }

        .ops-stat {
            display: flex;
            flex-direction: column;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-blue-pop);
        }

        .stat-tag {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-text-dim);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .about-card-grid, .ops-layout {
                grid-template-columns: 1fr;
            }
            .about-hero { padding: 60px 20px; }
        }
        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .about-card-grid { grid-template-columns: 1fr; }
            .ops-stats-center { flex-direction: column; gap: 30px; }
            .ops-card-centered { padding: 40px 20px; }
        }

        /* --- MARKET INSIDE --- */
        /* --- HERO SECTION --- */
        .insights-hero {
            text-align: center;
            padding: 100px 20px 60px;
            max-width: 800px;
            margin: 0 auto;
        }

        .insights-hero h1 {
            font-size: clamp(2.8rem, 5vw, 4rem);
            margin-bottom: 20px;
        }

        .hero-subtext {
            font-size: 1.25rem;
            color: var(--color-text-dim);
            line-height: 1.6;
        }

        /* --- INSIGHTS GRID --- */
        .insights-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two-column slick model */
            gap: 35px;
            max-width: 1100px; /* Reduced width so it doesn't touch screen edges */
            margin: 0 auto 80px;
            padding: 0 40px;
        }

        .insight-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            /* Move content higher by using strategic padding */
            padding: 35px 45px 55px; 
            transition: all 0.3s ease;
        }

        .insight-card:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: var(--color-blue-pop);
        }

        /* Increased Font Sizes for statements */
        .insight-card h3 {
            font-size: 1.85rem;
            color: #ffffff;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .insight-card p {
            font-size: 1.15rem;
            line-height: 1.75;
            color: var(--color-text-dim);
        }

        .insight-card strong {
            color: var(--color-blue-pop); /* Highlight UN/FAO and Agtech */
            font-weight: 600;
        }

        /* --- FOOTER CTA --- */
        .insights-footer {
            text-align: center;
            padding-bottom: 100px;
        }

        .insights-footer p {
            font-size: 1.2rem;
            color: var(--color-text-dim);
        }

        .text-link {
            color: var(--color-blue-pop);
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px solid rgba(59, 130, 246, 0.3);
        }

        /* Responsive */
        @media (max-width: 900px) {
            .insights-grid {
                grid-template-columns: 1fr;
                padding: 0 20px;
            }
        }

        /* --- SOLUTIONS PAGE --- */
        /* --- HERO --- */
        .solutions-list-container {
            max-width: 1200px; /* Increased width */
            margin: 0 auto 100px;
            padding: 0 40px;
        }
        .solution-row {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
        }
        .solutions-hero {
            text-align: center;
            padding: 100px 20px 60px;
            max-width: 850px;
            margin: 0 auto;
        }

        .solutions-hero h1 {
            font-size: clamp(3rem, 6vw, 4.5rem);
            margin: 20px 0;
        }

        /* --- SERVICES GRID --- */
        .services-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto 100px;
            padding: 0 40px;
        }

        .service-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 35px 50px 55px; /* High-positioned content */
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            border-color: var(--color-blue-pop);
        }

        .service-card h3 {
            font-size: 2.1rem; /* Increased font size for statements */
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .service-card p {
            font-size: 1.15rem;
            color: var(--color-text-dim);
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .card-tag {
            display: inline-block;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--color-blue-pop);
            border: 1px solid rgba(59, 130, 246, 0.3);
            padding: 6px 15px;
            border-radius: 50px;
        }

        /* --- CENTERED BOTTOM CARD --- */
        .solutions-footer {
            padding: 0 40px 120px;
        }

        .cta-card-centered {
            max-width: 1000px; /* Centered and slightly reduced width */
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 30px;
            padding: 80px 40px;
            text-align: center;
        }

        .cta-card-centered h2 {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .cta-card-centered p {
            font-size: 1.25rem;
            color: var(--color-text-dim);
            max-width: 600px;
            margin: 0 auto 40px;
        }

        /* Responsive Scaling */
        @media (max-width: 900px) {
            .services-grid { grid-template-columns: 1fr; }
            .service-card { padding: 40px 30px; }
        }

        /* --- SOLUTION PAGE --- */
        /* --- PAGE WRAPPER & HERO --- */
        .sp-main-wrapper {
            background-color: var(--color-bg);
            color: #ffffff;
            overflow-x: hidden;
        }

        .sp-hero {
            text-align: center;
            padding: 120px 20px 80px;
            max-width: 900px;
            margin: 0 auto;
        }

        .sp-hero h1 {
            font-size: clamp(3rem, 7vw, 4.5rem);
            line-height: 1.1;
            margin: 20px 0;
        }

        .sp-hero-subtext {
            font-size: 1.3rem;
            color: var(--color-text-dim);
            line-height: 1.7;
        }

        /* --- ALTERNATING GRID SYSTEM --- */
        .sp-list-container {
            max-width: 1200px; 
            margin: 0 auto 100px;
            padding: 0 40px;
        }

        .sp-row {
            display: flex;
            /* 'stretch' ensures the card and image box are always the same height */
            align-items: stretch; 
            margin-bottom: 0; /* Removed margin to let them stack or keep as needed */
            overflow: hidden;
            border-radius: 30px; /* Optional: adds rounded corners to the combined unit */
            margin-bottom: 60px;
        }

        /* AUTOMATIC Z-PATTERN: Flips every even row */
        .sp-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* --- THE CARD STYLING (Namespaced to 'sp-') --- */
        .sp-card {
            flex: 1;
            background: rgba(255, 255, 255, 0.02); /* Subtle surface color */
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Centers text vertically against the image */
            border: none !important; /* Removed borders */
            transition: background 0.3s ease;
        }

        .sp-card:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        .sp-card-num {
            font-size: 0.9rem;
            color: var(--color-blue-pop);
            font-weight: 700;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .sp-card h3 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .sp-card p {
            font-size: 1.15rem;
            color: var(--color-text-dim);
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .sp-card-tag {
            align-self: flex-start;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--color-blue-pop);
            background: rgba(59, 130, 246, 0.1);
            padding: 6px 16px;
            border-radius: 4px;
        }

        /* --- THE IMAGE BOX STYLING --- */
        .sp-image-box {
            flex: 1;
            min-height: 500px; /* Reference height */
            background-size: cover;
            background-position: center;
            border: none !important; /* Removed borders */
        }

        /* Placeholder gradients for images */
        .sp-img-1 { 
            background-image: url('image/Port-Yard.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05); 
        }
        .sp-img-2 { 
            background-image: url('image/3.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05); 
        }
        .sp-img-3 { 
            background-image: url('image/analyst.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05); 
        }
        .sp-img-4 { 
            background-image: url('image/consult.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05); 
        }

        /* --- CENTERED BOTTOM SECTION --- */
        .sp-footer-cta {
            padding: 0 40px 120px;
        }

        .sp-cta-card {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 30px;
            padding: 80px 40px;
            text-align: center;
        }

        .sp-cta-card h2 {
            font-size: 3.2rem;
            margin-bottom: 20px;
        }

        .sp-cta-card p {
            font-size: 1.3rem;
            color: var(--color-text-dim);
            max-width: 650px;
            margin: 0 auto 40px;
        }

        /* --- RESPONSIVE (Stacks on Mobile) --- */
        @media (max-width: 992px) {
            .sp-row, .sp-row:nth-child(even) {
                flex-direction: column;
            }
            .sp-image-box {
                min-height: 300px;
            }
            .sp-card {
                padding: 40px;
            }
        }

         /* --- BLOG PAGR --- */
         /* --- BLOG WRAPPER --- */
        .ba-main-wrapper {
            background-color: var(--color-bg);
            padding-bottom: 120px;
        }

        /* --- BLOG HERO --- */
        .bp-hero {
            padding: 140px 20px 80px;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .bp-hero h1 {
            font-size: 4rem;
            margin: 20px 0;
        }

        .bp-hero p {
            color: #94a3b8;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        /* --- THE LIST FORMATTING --- */
        .bp-list-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .bp-article-item {
            display: flex;
            gap: 60px;
            padding: 60px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .bp-article-item:hover {
            border-bottom-color: var(--color-blue-pop);
        }

        /* SIDE META (Date/Category) */
        .bp-meta {
            flex: 0 0 150px; /* Fixed width for the date column */
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .bp-date {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--color-blue-pop);
            letter-spacing: 2px;
        }

        .bp-category {
            font-size: 0.7rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* ARTICLE CONTENT */
        .bp-content {
            flex: 1;
        }

        .bp-title-link {
            text-decoration: none;
            color: #ffffff;
            transition: color 0.3s ease;
        }

        .bp-article-item h2 {
            font-size: 2rem;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .bp-title-link:hover h2 {
            color: var(--color-blue-pop);
        }

        .bp-content p {
            font-size: 1.1rem;
            color: #94a3b8;
            line-height: 1.7;
            margin-bottom: 25px;
            max-width: 700px;
        }

        .bp-read-more {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #ffffff;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: gap 0.3s ease;
        }

        .bp-read-more:hover {
            color: var(--color-blue-pop);
            gap: 15px;
        }

        /* --- MOBILE RESPONSIVE --- */
        @media (max-width: 768px) {
            .bp-article-item {
                flex-direction: column;
                gap: 20px;
                padding: 40px 0;
            }
            .bp-meta {
                flex-direction: row;
                gap: 20px;
            }
            .bp-hero h1 {
                font-size: 2.8rem;
            }
        }

        /* --- ARTICLE WRAPPER --- */
        .ba-main-wrapper {
            background-color: var(--color-bg);
            padding-bottom: 120px;
        }

        .ba-article-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 140px 40px 0;
        }

        /* --- HEADER --- */
        .ba-header {
            text-align: center;
            margin-bottom: 80px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .ba-meta {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .ba-category { color: var(--color-blue-pop); font-weight: 700; }
        .ba-date { color: var(--color-text-dim); }

        .ba-header h1 {
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            line-height: 1.1;
            text-align: center; /* Keep heading centered */
        }

        /* --- CONTENT TYPOGRAPHY --- */
        .ba-content {
            font-size: 1.25rem;
            line-height: 1.9;
            color: #e2e8f0;
        }
        .ba-content p {
            text-align: justify; /* Justify alignment as requested */
            margin-bottom: 30px;
        }

        .ba-lead {
            font-size: 1.55rem;
            color: #ffffff;
            line-height: 1.7;
            margin-bottom: 60px;
            font-weight: 300;
            text-align: justify;
        }

        .ba-section {
            margin-bottom: 60px;
        }

        .ba-section h3 {
            color: #ffffff;
            font-size: 1.9rem;
            margin-bottom: 20px;
            text-align: left;
        }

        /* --- QUOTES --- */
        .ba-quote {
            margin: 45px 0;
            padding: 40px 50px;
            background: rgba(255, 255, 255, 0.02);
            border-left: 4px solid var(--color-blue-pop);
            border-radius: 0 20px 20px 0;
        }

        .ba-quote cite {
            display: block;
            margin-top: 15px;
            font-style: normal;
            font-size: 0.9rem;
            color: var(--color-blue-pop);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* --- CONCLUSION --- */
        .ba-conclusion {
            margin-top: 80px;
            padding: 60px;
            background: rgba(255, 255, 255, 0.015);
            border-radius: 30px;
        }

        .ba-conclusion h2 {
            margin-bottom: 20px;
        }

        /* --- CTA BOX --- */
        .ba-cta-box {
            margin-top: 100px;
            background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
            border: 1px solid rgba(59, 130, 246, 0.15);
            border-radius: 40px;
            padding: 80px 60px;
            text-align: center;
        }
        .ba-cta-box p {
            text-align: center; /* CTA text looks better centered */
            max-width: 700px;
            margin: 0 auto 40px;
        }

        .ba-cta-list {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }

        .ba-cta-list li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
            color: var(--color-text-dim);
        }

        .ba-cta-list li::before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--color-blue-pop);
        }

        .ba-btn-group {
            margin-top: 40px;
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .ba-article-container { padding: 100px 20px 0; }
            .ba-content p { text-align: left; } /* Remove justification on small screens for better spacing */
        }

        /* --- IMAGE HANDLING --- */
        .ba-image-container {
            margin: 60px 0;
            background: rgba(255, 255, 255, 0.01);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 30px;
        }

        .ba-image-label {
            font-size: 0.75rem;
            color: var(--color-blue-pop);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .ba-responsive-img {
            width: 70%; /* As requested */
            height: auto;
            border-radius: 12px;
            display: block;
            margin: 0 auto; /* Centering block */
            border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle definition */
        }

        .ba-image-caption {
            margin-top: 20px;
            font-size: 0.95rem;
            color: var(--color-text-dim);
            text-align: center !important; /* Captions look better centered */
            font-style: italic;
        }

        /* --- LISTS --- */
        .ba-standard-list {
            margin: 30px 0 30px 20px;
        }

        .ba-standard-list li {
            margin-bottom: 15px;
            color: #e2e8f0;
        }

        .ba-standard-list strong {
            color: var(--color-blue-pop);
        }

        /* --- SOURCES --- */
        .ba-sources {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.85rem;
            color: var(--color-text-dim);
        }

        .ba-sources a {
            color: #ffffff;
            text-decoration: underline;
            margin-left: 10px;
        }

        /* --- DATA TABLE STYLING --- */
        .ba-table-wrapper {
            margin: 40px 0;
            overflow-x: auto; /* Ensures table doesn't break on mobile */
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .ba-data-table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255, 255, 255, 0.02);
            font-size: 1rem;
        }

        .ba-data-table th {
            background: rgba(59, 130, 246, 0.1);
            color: var(--color-blue-pop);
            text-align: left;
            padding: 20px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        .ba-data-table td {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: #cbd5e1;
            vertical-align: top;
        }

        .ba-data-table tr:last-child td {
            border-bottom: none;
        }

        .ba-data-table tr:hover td {
            background: rgba(255, 255, 255, 0.02);
        }

        /* Ensure table cells justify text if they contain long descriptions */
        .ba-data-table td {
            text-align: justify;
        }

        /* --- INLINE LINKS --- */
        .ba-inline-link {
            color: var(--color-blue-pop);
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px solid rgba(59, 130, 246, 0.3);
            transition: all 0.3s ease;
        }

        .ba-inline-link:hover {
            border-bottom-color: var(--color-blue-pop);
            background: rgba(59, 130, 246, 0.1);
        }

        /* FIX HEADER SPACING ON MOBILE */
        @media (max-width: 768px) 
        {
            body {
                padding-top: 120px; /* matches taller mobile header */
            }

            .main-header {
                padding: 1.2rem 6%;
            }

            .nav-right-group {
                gap: 1.2rem;
            }

            .nav-menu {
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        /* FIX WORLD MAP + PULSE POINTS ON MOBILE */
        @media (max-width: 900px) 
        {
            .network-container {
                flex-direction: column !important;
                align-items: center;
                text-align: center;
                gap: 40px;
            }

            .network-text {
                max-width: 100%;
            }

            .network-visual {
                width: 100%;
                display: flex;
                justify-content: center;
            }

            .map-card {
                width: 100%;
                max-width: 380px;
                height: 280px; /* smaller for mobile */
                border-radius: 20px;
            }

            /* Adjust pulse points for mobile proportions */
            .point-dubai { top: 55%; left: 60%; }
            .point-africa { top: 72%; left: 52%; }
            .point-asia { top: 50%; left: 70%; }
            .point-c-asia { top: 38%; left: 63%; }
            .point-brazil { top: 68%; left: 30%; }
        }
        /* RESTORE MAP IMAGE ON MOBILE */
        @media (max-width: 900px) {
            .map-card {
                width: 100%;
                max-width: 380px;
                height: 280px;
                border-radius: 20px;

                /* FIX: absolute path for Chrome + cPanel */
                background-image: url('/image/Map.jpg') !important;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;

                filter: invert(0.6) hue-rotate(180deg) brightness(0.9) contrast(1.1);
                opacity: 0.9;
            }
        }


        /* FIX CONTACT PAGE GRID ON TABLET */
        @media (max-width: 1024px) {
            .contact-main-grid {
                display: grid !important;
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }
        @media (max-width: 900px) {
            .solutions-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 600px) {
            .solutions-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 1024px) {
            .nav-container {
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
                text-align: center;
            }

            .nav-right-group {
                gap: 1.5rem;
            }

            .nav-menu {
                gap: 1.2rem;
                flex-wrap: wrap;
            }

            body {
                padding-top: 110px; /* header becomes taller on tablet */
            }
        }
        @media (max-width: 768px) {

            .main-header {
                padding: 1.2rem 6%;
            }

            .nav-container {
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }

            .logo-container {
                justify-content: center;
            }

            .nav-menu {
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
            }

            .btn-contact {
                padding: 8px 22px;
                font-size: 0.85rem;
            }

            body {
                padding-top: 140px; /* header is taller on mobile */
            }
        }

        /* FIX MOBILE MENU ORDER */
        @media (max-width: 768px) {

            .nav-menu {
                display: flex;
                flex-direction: column;   /* ← forces vertical order */
                align-items: center;
                gap: 1rem;
                width: 100%;
            }

            .nav-menu li {
                width: 100%;
                text-align: center;
            }

            .nav-right-group {
                flex-direction: column;
                gap: 1.5rem;
                width: 100%;
            }

            .btn-contact {
                width: auto;
                padding: 10px 28px;
            }
        }
        /* TABLET — 2 cards per row */
        @media (max-width: 1024px) {
            .grid-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 25px;
            }
        }

        /* MOBILE — 1 card per row */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .solution-card {
                padding: 30px;
            }
        }
        /* TABLET — 2 cards per row */
        @media (max-width: 1024px) {
            .grid-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 25px;
            }
        }

        /* MOBILE — 1 card per row */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .solution-card {
                padding: 30px;
            }
        }
        @media (max-width: 768px) {
            .solution-card {
                border-radius: 20px;
                padding: 28px;
            }

            .solution-card h3 {
                font-size: 1.4rem;
            }

            .solution-card p {
                font-size: 1rem;
            }
        }
        @media (max-width: 768px) {
            .hp-network {
                padding: 60px 0;
            }

            .network-container {
                padding: 30px 15px;
            }

            .hp-solutions-merge {
                padding: 50px 0 80px;
            }
        }
        
        .thankyou-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.75);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s ease;
            z-index: 9999;
        }

        .thankyou-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .thankyou-box {
            background: #0d1528;
            padding: 40px;
            border-radius: 12px;
            text-align: center;
            max-width: 420px;
            width: 90%;
            color: white;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .thankyou-box h2 {
            margin-bottom: 10px;
            font-size: 1.8rem;
        }

        .thankyou-box button {
            margin-top: 20px;
            padding: 10px 25px;
            background: #1a73e8;
            border: none;
            border-radius: 6px;
            color: white;
            cursor: pointer;
            font-size: 1rem;
        }