/* =========================================
   1. PREMIUM GLOBAL RESET (The "Intellect" Look)
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

   :root {
       /* COLOR PALETTE */
       --primary: #0F172A;   /* Deep Navy (Headings) */
       --text-body: #475569; /* Slate Grey (Body Text - Easier to read than black) */
       --accent: #2563EB;    /* Royal Blue (Buttons/Highlights) */
       --bg-light: #FFFFFF;
       --bg-gray: #F8FAFC;   /* Very light grey for section breaks */
       --border: #E2E8F0;    /* Subtle borders */
   }
   
   * { box-sizing: border-box; }
   
   body {
       font-family: 'Plus Jakarta Sans', sans-serif; /* THE NEW FONT */
       color: var(--text-body);
       font-size: 16px;
       line-height: 1.6; /* Breathing room */
       margin: 0;
       padding: 0;
       background-color: var(--bg-light);
       -webkit-font-smoothing: antialiased; /* Makes text look crisp */
   }
   
   /* TYPOGRAPHIC SCALE (The "Standardized" Hierarchy) */
   h1, h2, h3, h4, h5 {
       color: var(--primary);
       font-weight: 700;
       line-height: 1.2;
       margin-top: 0;
       margin-bottom: 20px;
       letter-spacing: -0.02em; /* Tight formatting */
   }
   
   h1 { font-size: 56px; font-weight: 800; } /* Hero Headline */
   h2 { font-size: 42px; } /* Section Headlines */
   h3 { font-size: 24px; } /* Card Titles */
   p  { font-size: 18px; color: var(--text-body); margin-bottom: 20px; }
   
   /* LAYOUT STANDARDS */
   .container {
    width: 90%;            /* Fluid on smaller screens */
    max-width: 1600px;     /* THE FIX: Standard containers are 1140px, we want 1600px */
    margin: 0 auto;
    padding: 0 40px;       /* Extra breathing room on the edges */
}
   
   .section-padding {
       padding: 20px 0; /* More white space = More Premium */
   }
   
   /* SECTION TITLES (Left Aligned & Clean) */
   .section-title {
       text-align: left; /* The "Intellect" Style */
       max-width: 800px;
       margin-bottom: 60px;
   }
   
   /* LINKS & IMAGES */
   a { text-decoration: none; color: inherit; transition: 0.3s; }
   ul { list-style: none; padding: 0; margin: 0; }
   img { display: block; max-width: 100%; height: auto; }
   
   /* MOBILE RESPONSIVENESS */
   @media (max-width: 768px) {
       h1 { font-size: 36px; }
       h2 { font-size: 28px; }
       .section-title { text-align: left; /* Keep left even on mobile for modern look */ }
       .section-padding { padding: 20px 0; }
   }



/* =========================================
   FORCE GRID LAYOUT (3 Columns for 6 Services)
   ========================================= */
   .hover-services-grid {
    display: grid !important;
    
    /* CHANGED: 3 Columns instead of 4 */
    grid-template-columns: repeat(3, 1fr) !important; 
    
    gap: 30px !important; /* Slightly bigger gap for better breathing room */
    width: 100%;
}


/* TABLET (2 Columns) */
@media (max-width: 1024px) {
    .hover-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* MOBILE (1 Column) */
@media (max-width: 768px) {
    .hover-services-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2. The Individual Card Container (The Mask) */
.service-hover-card {
    position: relative;
    /* Fixed height is crucial for this effect */
    height: 450px; 
    background: var(--bg-light);
    border: 1px solid var(--border);
    /* This hides everything outside the box boundary */
    overflow: hidden; 
    cursor: pointer;
}

/* 3. The Image Wrapper & Image */
.img-wrapper {
    height: 100%;
    width: 100%;
    /* Smooth transition for the image sliding up */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-img {
    width: 100%;
    height: 100%;
    /* Ensures image covers area without distortion */
    object-fit: cover; 
    object-position: center;
}



/* =========================================
   STYLE: SOLID WHITE BOX (With Link)
   ========================================= */

/* 4. The White Box Container */
.service-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    background: #FFFFFF; 
    border-top: 1px solid #E2E8F0; 
    padding: 24px 24px;
    
    /* ANIMATION SETUP */
    /* This automatically adjusts to content height. 
       "78px" is the height of the Heading part we want visible. */
    transform: translateY(calc(100% - 78px)); 
    
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
    
    /* Ensure content stacks correctly */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Typography */
.service-content-overlay h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    padding-bottom: 0; 
    width: 100%;
}

/* The Body Copy (Hidden initially) */
.hidden-copy {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-body);
    margin-top: 20px; 
    margin-bottom: 15px; /* Space between text and link */
    
    opacity: 0;
    transition: opacity 0.3s ease 0.1s; 
}

/* NEW: The Learn More Link (Hidden initially) */
/* NEW: The Learn More Link */
.learn-more-link {
    font-size: 14px;
    
    /* UPDATED: Medium Bold */
    font-weight: 600; 
    
    /* UPDATED: Specific Blue Color */
    color: #1a56ba; 
    
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Hide initially */
    opacity: 0;
    transform: translateY(10px); 
    transition: all 0.3s ease 0.2s; 
    text-decoration: none; /* Ensure no underline by default */
}

.learn-more-link:hover {
    /* Darker shade on hover */
    color: #0f3680; 
    text-decoration: underline; /* Optional: Add underline on hover */
}

/* ============================
   HOVER STATES
   ============================ */

/* 1. Move Image Up */
.service-hover-card:hover .img-wrapper {
    transform: translateY(-50px);
}

/* 2. Slide White Box UP */
.service-hover-card:hover .service-content-overlay {
    transform: translateY(0); 
    border-top-color: var(--accent);
}

/* 3. Show Text */
.service-hover-card:hover .hidden-copy {
    opacity: 1;
}

/* 4. Show Link */
.service-hover-card:hover .learn-more-link {
    opacity: 1;
    transform: translateY(0);
}


/* ============================
   RESPONSIVE ADJUSTMENTS
   ============================ */
@media (max-width: 1024px) {
    .hover-services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
    .service-hover-card {
        height: 400px; /* Slightly shorter on tablet */
    }
}

@media (max-width: 768px) {
    .hover-services-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .service-hover-card {
        height: 350px; /* Even shorter on mobile */
    }
    /* On mobile, we usually want the text visible always, 
       or the hover effect can be sticky. Let me know if you 
       want this disabled on mobile. Currently it works on tap. */
}

/* ============================
   HEADER BUTTON (Global)
   ============================ */
   .btn-contact-header {
    background-color: var(--accent); /* Your Brand Blue */
    color: #FFFFFF !important;       /* Force White Text */
    padding: 10px 24px;              /* Pill Padding */
    border-radius: 50px;             /* Round Edges */
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-left: 20px; /* Space it away from other links */
    display: inline-block;
}

.btn-contact-header:hover {
    background-color: var(--primary); /* Navy on Hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .btn-contact-header {
        margin-left: 0;
        margin-top: 15px;
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ============================
   2. HEADER & LOGO (FIXED)
   ============================ */
header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    height: 80px; /* Fixed height */
    top: 0;
    left: 0;
    z-index: 9999;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* LOGO SIZE FIX - Forces it to be small */
.logo-img {
    height: 45px; 
    width: auto;
    object-fit: contain;
}

/* DESKTOP MENU */
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links li a { 
    font-size: 15px; 
    font-weight: 600; 
    color: var(--text-gray); 
}
.nav-links li a:hover { color: var(--accent); }

.btn-primary {
    background: var(--accent);
    color: white !important;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
}

/* MOBILE TOGGLE (Hidden on Desktop) */
.mobile-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--primary);
    user-select: none;

    
}

/* ============================
   RESPONSIVE HERO SECTION (Final)
   ============================ */

/* ============================
   HERO SECTION (Locked Top-Left)
   ============================ */

   .hero {
    width: 100%;
    min-height: 85vh; /* Tall banner */
    
    /* ALIGNMENT: Top Left Always */
    display: flex;
    align-items: flex-start; /* Align to TOP */
    justify-content: flex-start; /* Align to LEFT */
    
    /* Background Images */
    background-image: url('../images/homebanner-1920x1000.jpg');
    background-size: cover;
    background-position: center right; 
    background-repeat: no-repeat;
    
    /* SPACING: Push content down from the fixed header */
    padding-top: 140px; 
    padding-bottom: 60px;
    position: relative;
}

.hero .container {
    position: relative;
    z-index: 2;
    width: 100%; /* Ensure container fills width */
}

/* CONTENT BOX */
.hero-content {
    max-width: 650px;
    text-align: left; /* Always Left Aligned */
}

/* 1. HEADLINE */
.hero h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--primary);
    font-weight: 800;
}

/* 2. SUBTEXT */
.hero-subtext {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 25px;
}

/* 3. NEW BULLET POINTS */
.hero-bullets {
    margin-bottom: 30px;
}

.hero-bullets li {
    font-size: 16px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-bullets i {
    color: var(--accent); /* Blue Checkmarks */
    font-size: 18px;
}

/* 4. BUTTONS */
.hero-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: flex-start; /* Left align button */
}


/* ============================
   MOBILE & TABLET (Keep Top-Left)
   ============================ */
@media (max-width: 1200px) {
    .hero {
        background-image: url('../images/homebanner-1200x850.jpg');
        background-position: center; 
    }
}

@media (max-width: 768px) {
    .hero {
        background-image: url('../images/homebanner-800x1420.jpg');
        /* IMPORTANT: Keep aligning to TOP on mobile */
        align-items: flex-start; 
        padding-top: 120px; /* Adjust spacing for mobile header */
        min-height: 80vh;
    }

    .hero-content {
        /* Optional: Add a light backdrop if text is hard to read on mobile image */
        background: rgba(255, 255, 255, 0.9);
        padding: 24px;
        border-radius: 8px;
        max-width: 100%;
    }

    .hero h1 { font-size: 36px; }
    
    /* Ensure bullets look good on mobile */
    .hero-bullets li { font-size: 15px; }
}


/*/* ============================
   MOBILE ADJUSTMENT (Clean & Left Aligned)
   ============================ */
@media (max-width: 768px) {
    .hero {
        /* Mobile Portrait Image */
        background-image: url('../images/homebanner-800x1420.jpg');
        background-position: center top; 
        background-size: cover;
        
        /* ALIGNMENT: Force content to start at the Top Left */
        align-items: flex-start !important; 
        justify-content: flex-start !important;
        
        padding-top: 120px; /* Space for header */
        padding-bottom: 40px;
        padding-left: 20px; /* Ensure text doesn't hit the left edge */
        padding-right: 20px;
        
        min-height: 85vh;
    }

    /* REMOVE WHITE BOX & FORCE LEFT ALIGN */
    .hero-content {
        background: transparent !important; /* No White Box */
        box-shadow: none !important;        /* No Shadow */
        backdrop-filter: none !important;   /* No Blur */
        padding: 0;                         /* Remove extra padding */
        
        text-align: left !important;        /* Force Text Left */
        width: 100%;
    }

    /* Fix Font Sizes for Mobile */
    .hero h1 { 
        font-size: 36px; 
        margin-bottom: 15px;
    }
    
    .hero p { 
        font-size: 16px; 
        color: var(--primary); /* Use Dark Blue (or #000) for contrast against image */
        font-weight: 500;      /* Make text slightly bolder to read without box */
    }
    
    /* FIX BULLET POINTS ALIGNMENT */
    .hero-bullets {
        margin-top: 15px;
        margin-bottom: 25px;
        padding-left: 0; /* Remove default padding indentation */
    }

    .hero-bullets li {
        justify-content: flex-start; /* Align icon and text to left */
        text-align: left;
        margin-bottom: 10px;
    }

    /* Buttons align left */
    .hero-buttons {
        justify-content: flex-start;
    }
}

/* ============================
   4. MOBILE RESPONSIVE FIX
   ============================ */
@media (max-width: 992px) {
    /* Show Hamburger */
    .mobile-toggle { display: block; }
    
    /* Hide Desktop Menu by default */
    .nav-links {
        display: none; /* Hidden */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    /* Show Menu when Active */
    .nav-links.active {
        display: flex;
    }

    .nav-links li { margin: 15px 0; text-align: center; }
    
    .hero-content h1 { font-size: 40px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ============================
   5. FOOTER & SERVICES
   ============================ */
.section-padding { padding: 20px 0; background: var(--bg-off-white); }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 32px; margin-bottom: 15px; }

/* ============================
   PREMIUM SERVICE CARDS (Clean & Sharp)
   ============================ */
.service-card {
    background: #FFFFFF;
    padding: 40px; /* Big internal spacing */
    border: 1px solid var(--border); /* Subtle border */
    border-radius: 4px; /* Slight roundness, not too much */
    text-align: left; /* Left align text */
    transition: all 0.3s ease;
    height: 100%; /* Ensures equal height in grid */
    
    /* No shadow by default - cleaner look */
}

.service-card:hover {
    border-color: var(--accent); /* Blue border on hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); /* Very subtle float effect */
    transform: translateY(-5px);
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 22px;
}

.service-card p {
    font-size: 16px; /* Smaller, neat body text */
    line-height: 1.6;
    margin-bottom: 25px;
}



.read-more { color: var(--accent); font-weight: 600; display: block; margin-top: 15px; }

footer { background-color: #1E293B; 
    color: #CBD5E1; /* Light Grey Text for contrast */
    padding: 60px 0 20px;
    font-size: 15px;}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-col h4 {color: #FFFFFF;
font-weight: 700;
margin-bottom: 20px;
}
.footer-col a { color: #94A3B8; font-size: 14px; }
.copyright { text-align: center; color: #475569; padding-top: 20px; border-top: 1px solid #1E293B; margin-top: 40px; font-size: 13px; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
}

/* ============================
   FIXED DROPDOWN LAYOUT
   ============================ */
/* Add position: relative here so the menu sticks to THIS button, not the page */
.dropdown {
    position: relative; 
    display: inline-block;
    height: 100%; /* Ensures it fills the header height */
    display: flex; /* Helps align the link and menu */
    align-items: center;
}

/* The Container Box */
.dropdown-menu {
    position: absolute; /* Floating */
    top: 100%;          /* Push it directly below the "Services" text */
    left: 0;            /* Align left edge with the text */
    
    display: none;      /* Hidden by default */
    background-color: white;
    min-width: 260px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 0;
    z-index: 1000;
    margin-top: 0px;    /* Remove large margins that cause gaps */
}

/* The Triangle Arrow */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 25px;
    width: 14px;
    height: 14px;
    background: white;
    transform: rotate(45deg);
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
}

/* The Individual Links */
.dropdown-menu a {
    color: #475569 !important; /* Professional Slate color */
    padding: 12px 20px !important; /* Generous padding for "breathability" */
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important; /* Force left align for text */
    transition: all 0.2s ease;
    border-bottom: none !important; /* Remove lines for a cleaner look */
}

/* Hover Effect: Background change and slight slide */
.dropdown-menu a:hover {
    background-color: #f8fafc !important;
    color: #3b82f6 !important;
    padding-left: 25px !important; /* Subtle "nudge" effect on hover */
}

/* Show on Hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Fix for Mobile: Ensure it doesn't stay center-aligned when menu is active */
@media (max-width: 1024px) {
    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        background: #f1f5f9;
        margin-top: 0;
        padding: 10px 0;
    }
    .dropdown-menu a {
        padding-left: 40px !important; /* Indent sub-items on mobile */
    }
    .dropdown-menu::before {
        display: none;
    }
}



/* ============================
   CONTACT PAGE MOBILE FIX
   ============================ */
   .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns on desktop */
    gap: 60px;
    align-items: start;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stacks them: One under another */
        gap: 40px; /* Space between the info and the form */
    }
    
    .contact-info-box {
        text-align: left; /* Ensures text stays left-aligned */
        order: 1; /* Keeps info on top */
    }
    
    .contact-form-wrapper {
        order: 2; /* Keeps form on bottom */
    }
}
/* ============================
   Trusted Partners Slider (Gap Fix)
   ============================ */
   .clients-slider {
    height: 100vh; /* Reduced to tighten the bottom gap */
    background: #F8FAFC;
    box-shadow: 0 1px 0 #E2E8F0 inset, 0 -1px 0 #E2E8F0 inset;
    overflow: hidden;
    position: relative;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Keeps everything vertically centered */
    
    padding-top: 5px; /* Minimal top spacing */
}

.clients-heading {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94A3B8;
    margin-bottom: 15px; /* Slight reduction to pull logos closer to text */
    width: 100%;
    z-index: 10;
}

.clients-track {
    display: flex;
    align-items: center;
    width: calc(200px * 20); 
    animation: scroll 30s linear infinite;
}

/* ... Keep .client-slide and .client-slide img as they were ... */

/* ============================
   DROPDOWN GAP FIX (Invisible Bridge)
   ============================ */

/* 1. Ensure the dropdown container can hold the bridge */
.dropdown-menu {
    /* Keep your existing styles */
    margin-top: 15px; 
}

/* 2. Create the invisible bridge */
.dropdown-menu::after {
    content: "";
    position: absolute;
    top: -20px;   /* Move it up to cover the gap */
    left: 0;
    width: 100%;
    height: 20px; /* Height of the gap */
    background: transparent; /* It's invisible! */
    display: block;
}

/* ============================
       SERVICE CARDS (Bluish Gradient)
       ============================ */
    .service-card {
        /* Default State: Dark Blue Gradient */
        background: linear-gradient(135deg, rgb(215, 220, 230) 0%, #97a9c6 100%);
        padding: 40px 30px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        color: white; /* Make text white */
    }

    /* ============================
   SERVICE CARDS (Boxes) - BLACK TEXT
   ============================ */

/* The Card Title (Heading) */
.service-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    
    /* FORCE BLACK */
    color: #000000 !important; 
}

/* The Card Text (Paragraph) */
.service-card p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    
    /* FORCE BLACK */
    color: #000000 !important; 
}

/* Optional: Keep the "Read More" link blue so it stands out */
.service-card .read-more {
    color: #3B82F6 !important;
}

    /* Hover State: Brighter Blue */
    .service-card:hover {
        transform: translateY(-5px);
        /* Brighter Gradient on Hover */
        background: linear-gradient(135deg, #d8e6fc 0%, #afc6e6 100%);
        border-color: #3B82F6; /* Blue border pop */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .service-card .read-more {
        color: #3B82F6; /* Blue Link */
        font-weight: 600;
        margin-top: 15px;
        display: inline-block;
    }
    
    .service-card:hover .read-more {
        color: #60A5FA; /* Lighter Blue Link on Hover */
    }

/* =========================================
   STATS STRIP (Final: Blue/Grey Dashboard Look)
   ========================================= */

   .stats-strip {
    background-color: #0F172A !important; /* Deep Navy Background */
    padding: 60px 0;
    overflow: hidden; 
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 2px solid var(--accent); /* Thin blue accent line */
}

/* 1. DESKTOP LAYOUT (Static & Centered) */
.stats-strip .container-fluid {
    display: flex;
    justify-content: center;
    width: 100%;
}

.stats-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px; /* Clean spacing between items */
    width: 100%;
    max-width: 1200px;
    animation: none !important; /* Forces items to stay still on Desktop */
}

/* HIDE DUPLICATES ON DESKTOP (Shows only the core 4 stats) */
.stats-track .stat-item:nth-child(n+5) {
    display: none;
}

/* 2. REFINED TYPOGRAPHY (Royal Blue & Slate Grey) */
section.stats-strip .stat-item h3, 
section.stats-strip .stat-item h3 span.counter {
    /* Refined: 75% Size (2.25rem) and 50% Weight (500) */
    font-size: 2.0rem !important; 
    font-weight: 700 !important;    
    margin: 0;
    color: var(--accent) !important; /* Royal Blue */
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

section.stats-strip .stat-item p {
    font-size: 0.9rem;
    color: #94A3B8 !important; /* Slate Grey body text */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 8px;
    font-weight: 600;
}

/* 3. MOBILE RESPONSIVENESS (Horizontal Scroll) */
@media (max-width: 768px) {
    .stats-strip { padding: 40px 0; }
    
    .stats-track {
        justify-content: flex-start;
        gap: 40px;
        overflow-x: auto; /* Allows manual swipe on mobile */
        padding-left: 20px;
    }
    
    /* Reveal all items on mobile for the scroll experience */
    .stats-track .stat-item:nth-child(n+5) {
        display: block;
    }

    section.stats-strip .stat-item h3, 
    section.stats-strip .stat-item h3 span.counter { 
        font-size: 1.8rem !important; 
    }
}

/* ============================
   2. TABLET & MOBILE (The Running Belt)
   ============================ */
@media (max-width: 1024px) {
    
    .stats-strip {
        padding: 40px 0;
        white-space: nowrap;
    }
    
    .stats-strip .container-fluid {
        display: block; /* Reset centering for the belt */
        padding: 0;
    }

    /* Enable the Running Animation */
    .stats-track {
        justify-content: flex-start; /* Align start for scrolling */
        gap: 0;
        width: max-content;
        max-width: none; /* Remove desktop width limit */
        
        animation: stats-scroll 20s linear infinite; 
    }

    /* SHOW ALL ITEMS (Unhide the duplicates for the loop) */
    .stats-track .stat-item:nth-child(n+5) {
        display: block; 
    }

    /* Sizing for Tablet (4 items visible at once) */
    .stat-item {
        min-width: 25vw;
    }
    
    .stat-item h3 { font-size: 36px; }

    /* Keyframes */
    @keyframes stats-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-33.33%); } /* Slide 1/3rd */
    }
}

/* 3. MOBILE SPECIFIC (2 items visible at once) */
@media (max-width: 768px) {
    .stat-item {
        min-width: 50vw; 
    }
    .stat-item h3 {
        font-size: 42px; 
    }
}

/* ============================
   INFINITE LOGO SLIDER (Glitch-Free)
   ============================ */
   .partners-section {
    padding: 40px 0;
    background: #F8FAFC; /* Light background */
    text-align: center;
    overflow: hidden; /* Hides the scrolling parts */
}

.partners-section p {
    color: #94A3B8;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Optional: Fade effect on edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 60px; /* Space between logos */
    width: max-content; /* Force it to be as wide as all logos */
    
    /* THE ANIMATION */
    animation: scroll 20s linear infinite;
}

.logo-track img {
    height: 40px; /* Adjust logo height */
    width: auto;
    opacity: 0.6;
    transition: 0.3s;
    filter: grayscale(100%); /* Optional: Make them grey */
}

.logo-track img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* THE MAGIC KEYFRAMES */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly half way (because we duplicated the logos) */
        transform: translateX(-50%); 
    }
}

/* ============================
   SUCCESS STORIES SECTION (Responsive)
   ============================ */
   .success-section {
    /* Premium Light Blue Gradient */
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    padding: 100px 0;
    overflow: hidden; 
}

.success-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* LEFT SIDE: Text */
.success-text {
    flex: 0 0 40%;
    max-width: 40%;
}

.success-text .eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 15px;
    background: rgba(37, 99, 235, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
}

.success-text h2 {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--primary);
}

.success-text p {
    font-size: 18px;
    color: #475569;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* RIGHT SIDE: Slider Container */
.success-slider-container {
    flex: 0 0 55%;
    max-width: 55%;
    
    /* Fade effect on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    
    overflow: hidden;
}

/* THE TRACK */
.success-track {
    display: flex;
    gap: 24px;
    width: max-content;
    
    /* Auto Scroll: Adjust '40s' to make it faster/slower */
    animation: success-scroll 40s linear infinite;
}

/* Pause on Hover (Desktop only) */
.success-track:hover {
    animation-play-state: paused;
}

/* CARDS */
.success-card {
    width: 300px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.1);
    background: #fff; /* Fallback if image fails */
}

.success-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* KEYFRAMES */
@keyframes success-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}


/* ============================
   MOBILE & TABLET RESPONSIVENESS
   ============================ */
@media (max-width: 992px) {
    .success-section {
        padding: 60px 0;
    }

    .success-grid {
        flex-direction: column; /* Stack Text on Top, Slider on Bottom */
        gap: 40px;
        text-align: center;
    }
    
    .success-text {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 20px; /* Add padding so text doesn't hit edges */
    }
    
    .success-text h2 {
        font-size: 32px; /* Smaller headline for mobile */
    }

    /* Make the slider wider on mobile */
    .success-slider-container {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* Adjust Card Size for Mobile */
    .success-card {
        width: 260px; /* Slightly smaller cards on phone */
        height: 180px;
    }
}

/* ============================
   PREMIUM CTA (Footer Strip)
   ============================ */
   .premium-cta-section {
    padding: 60px 0;
    background: #FFFFFF; /* Fallback */
    /* Ensure it sits nicely above the dark footer */
    position: relative;
    z-index: 10;
}

.cta-box {
    /* THE PREMIUM GRADIENT BACKGROUND */
    /* Light/White Blue on Left -> Richer Blue on Right */
    background: linear-gradient(to right, #F8FAFC 0%, #DBEAFE 100%);
    
    border: 1px solid #EFF6FF; /* Subtle border */
    border-radius: 12px;       /* Smooth corners */
    padding: 50px 60px;
    
    /* Layout: Left Text, Right Button */
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.08); /* Soft blue float shadow */
}

/* LEFT SIDE: TEXT */
.cta-content {
    max-width: 600px;
}

.cta-content h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary); /* Navy */
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.cta-content p {
    font-size: 18px;
    color: #475569; /* Slate */
    margin: 0;
}

/* RIGHT SIDE: GLOWING BUTTON */
.btn-glow {
    background-color: var(--accent); /* Your Brand Blue */
    color: #ffffff !important;
    padding: 16px 32px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap; /* Prevents text breaking */
    
    /* The "Glow" Effect */
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); 
}

.btn-glow:hover {
    background-color: #1e40af; /* Darker Navy on hover */
    transform: translateY(-2px); /* Lift up */
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5); /* Stronger glow */
}

/* ============================
   RESPONSIVE (Mobile)
   ============================ */
@media (max-width: 768px) {
    .premium-cta-section {
        padding: 40px 0;
    }

    .cta-box {
        flex-direction: column; /* Stack vertically */
        text-align: center;
        padding: 40px 24px;
        gap: 30px;
        
        /* Switch gradient to Top-Bottom for mobile */
        background: linear-gradient(to bottom, #F8FAFC 0%, #DBEAFE 100%);
    }

    .cta-content h2 {
        font-size: 26px;
    }
    
    .cta-action {
        width: 100%;
    }
    
    .btn-glow {
        display: block;
        width: 100%;
    }
}

/* ============================
   PREMIUM LIGHT FOOTER (Blue Gradient)
   ============================ */
   footer {
    /* Light Blue to Medium Blue Gradient */
    background: linear-gradient(135deg, #E0F2FE 0%, #BFDBFE 100%);
    
    padding: 80px 0 30px;
    color: #334155; /* Slate color (Dark text for light bg) */
    font-size: 15px;
    
    /* Subtle top border to blend with the white section above */
    border-top: 1px solid #DBEAFE; 
}

/* FOOTER HEADINGS */
.footer-col h4 {
    color: #0F172A; /* Deep Navy (High Contrast) */
    font-weight: 800;
    margin-bottom: 25px;
    font-size: 18px;
    letter-spacing: -0.5px;
}

/* FOOTER LINKS */
.footer-col a {
    color: #334155; /* Dark Slate */
    font-size: 15px;
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.footer-col a:hover {
    color: #2563EB; /* Bright Blue on Hover */
    transform: translateX(5px); /* Slide effect */
    text-decoration: none;
}

/* FOOTER TEXT (Address/Info) */
.footer-col p {
    color: #475569; /* Medium Slate */
    line-height: 1.6;
}

/* SOCIAL ICONS (Optional) */
.footer-social a {
    color: #0F172A;
    background: rgba(255,255,255,0.6); /* Semi-transparent white circle */
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #2563EB; /* Blue Background */
    color: #FFFFFF;      /* White Icon */
}

/* COPYRIGHT BAR */
.copyright {
    text-align: center;
    color: #64748B; /* Medium Grey */
    padding-top: 30px;
    
    /* Divider line matching the blue theme */
    border-top: 1px solid rgba(37, 99, 235, 0.1); 
    
    margin-top: 50px;
    font-size: 14px;
    font-weight: 500;
}

/* ============================
   SERVICES SECTION (Blue Gradient)
   ============================ */
   .services-section {
    /* Top-to-Bottom Blue Gradient */
    background: linear-gradient(to bottom, #F0F9FF 0%, #D1E9FF 100%);
    position: relative;
    z-index: 1;
}

/* ============================
   ABOUT PAGE ADDITIONS
   ============================ */

/* 1. THREE COLUMN GRID (For Expertise/Why Us) */
.feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 items side-by-side */
    gap: 30px;
}

/* 2. QUOTE GRID (Bottom Section) */
.quote-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.quote-card {
    background: rgba(255, 255, 255, 0.1); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    border-radius: 12px;
    max-width: 450px;
}

.quote-card p {
    color: #0F172A !important; /* Ensure readable dark text */
    font-size: 20px !important;
    font-weight: 500;
    margin: 0 !important;
    font-style: italic;
}

/* If the bottom section background is dark/blue, fix quote text color */
/* Since we changed global-section to Light Blue Gradient in the previous step,
   Dark Text (#0F172A) is correct. */


/* RESPONSIVE UPDATES */
@media (max-width: 992px) {
    .feature-grid-3 {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    
    .quote-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-row {
        flex-wrap: wrap; /* Allow stats to wrap if screen is narrow */
        gap: 20px;
    }
}

/* ============================
   ABOUT PAGE: MAP & OUTCOMES
   ============================ */

/* 1. MAP CONTAINER (Clean & Centered) */
.map-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.map-container img {
    max-width: 90%; /* Keep it from hitting edges */
    height: auto;
    
    /* Optional: Make it look premium with a slight drop shadow */
    filter: drop-shadow(0 20px 30px rgba(37, 99, 235, 0.1));
}

/* 2. OUTCOMES SECTION (Clean Blue Strip) */
.outcomes-section {
    /* Premium Light Blue Gradient */
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    padding: 80px 0;
    border-top: 1px solid #DBEAFE;
}

/* Quote Cards (Updated for Blue Background) */
.quote-card {
    background: #FFFFFF; /* Pure white card */
    padding: 40px;
    border-radius: 12px;
    max-width: 450px;
    
    /* Soft shadow to lift it off the blue background */
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08); 
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.quote-card p {
    color: #334155;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

.quote-card strong {
    color: var(--accent); /* Highlight numbers in Blue */
}

/* Reuse existing grid logic */
.quote-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .quote-grid { flex-direction: column; align-items: center; }
    .map-container img { max-width: 100%; }
}

/* ============================
   MAP HUB ANIMATIONS
   ============================ */

   .map-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.main-map-img {
    width: 100%;
    height: auto;
    display: block;
}

/* The Hub Container */
.map-hub {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* The Pulsing Dot */
.hub-dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent); /* Your Brand Blue */
    border-radius: 50%;
    position: relative;
}

.hub-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: var(--accent);
    border-radius: 50%;
    animation: hub-pulse 2s infinite;
}

/* The Country Name */
.hub-name {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* POSITIONING (Adjust these percentages to fit your map) */
.hub-canada   { top: 32%; left: 68%; }
.hub-uae      { top: 51%; left: 24%; }
.hub-srilanka { top: 60%; left: 28%; }
.hub-japan    { top: 44%; left: 43%; }

/* Pulse Animation */
@keyframes hub-pulse {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.8;
    }
    100% {
        width: 40px;
        height: 40px;
        opacity: 0;
    }
}

/* Hide labels on very small screens to avoid clutter */
@media (max-width: 480px) {
    .hub-name { display: none; }
}

/* Ensure the split columns handle the alignment correctly */
.about-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;            /* Large gap for that premium feel */
    width: 100%;
}

/* Specific styling for the left-side description border */
.about-text p {
    line-height: 1.6;
}

/* Light Blue Gradient for the Map Section */
.bg-light-blue-gradient {
    background: linear-gradient(to bottom, #FFFFFF 0%, #E0F2FE 50%, #DBEAFE 100%);
    padding-bottom: 100px;
}

/* Mobile responsive fix: stack them so heading comes first on small screens */
@media (max-width: 768px) {
    .about-split {
        flex-direction: column-reverse; /* Put heading back on top for mobile */
        text-align: left;
    }
    .about-text {
        text-align: left !important;
        width: 100%;
    }
}

/* Update the split behavior for this specific alignment */
@media (max-width: 992px) {
    .about-split {
        flex-direction: column-reverse !important; /* Heading goes back to top on mobile */
        text-align: left !important;
        gap: 20px;
    }
    
    .about-text {
        text-align: left !important;
        width: 100% !important;
    }
    
    .about-text h2 {
        font-size: 32px !important;
    }
}

/* ============================
   ABOUT PAGE: HERO & ALIGNMENT
   ============================ */

/* 1. The Top Banner (Matches Index Hero Style) */
.page-hero {
    background: #0F172A;
    min-height: 70vh;      /* Uses height of the screen, not fixed pixels */
    display: flex;
    align-items: center;
    padding: 100px 0;
    width: 100%;
}

.hero-inner h1 {
    font-size: 52px;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}

.hero-inner p {
    font-size: 20px;
    color: #DBEAFE;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 2. Split Alignment Logic */
.about-split {
    display: flex;
    align-items: center;
    gap: 80px;
}

.about-text {
    flex: 1;
}

.display-title {
    font-size: 38px;
    color: var(--primary);
    margin-bottom: 25px;
    line-height: 1.2;
}

.lead-text {
    font-size: 19px;
    color: #334155;
    font-weight: 500;
    margin-bottom: 20px;
}

/* 3. Stats Alignment */
.stat-row {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #E2E8F0;
}

.stat-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748B;
}

/* 4. Image Styling */
.about-image {
    flex: 1;
    position: relative;
}

.image-frame {
    position: relative;
    z-index: 2;
}

.image-frame img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(37, 99, 235, 0.15);
}

.image-accent {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent);
    border-radius: 12px;
    z-index: -1;
}

/* 5. Mobile Adjustments */
@media (max-width: 992px) {
    .about-split {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    
    .stat-row {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .page-hero h1 {
        font-size: 36px;
    }
}

/* Fix for the Trusted Partner Section Spacing */
.section-label {
    margin-bottom: 5px !important; /* Forces the small label to sit close to the title */
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
}

.display-title {
    margin-top: 0 !important; /* Removes the top gap from the main title */
    line-height: 1.2;          /* Tightens the space between the lines of text */
    font-size: 38px;
    font-weight: 800;
    color: var(--primary);
}

/* ============================================================
   ABOUT PAGE: RESPONSIVE HERO & TEXT ALIGNMENT
   ============================================================ */

   .about-hero-responsive {
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: 160px; 
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* DESKTOP IMAGE */
    background-image: url('../images/about-hero-desktop.png'); 
}

/* TABLET IMAGE (Tab) */
@media (max-width: 1024px) {
    .about-hero-responsive {
        background-image: url('../images/about-tab.png');
        min-height: 70vh;
        padding-top: 140px;
    }
}

/* MOBILE IMAGE (Smartphone) */
@media (max-width: 768px) {
    .about-hero-responsive {
        background-image: url('../images/about-hero-tablet.png');
        min-height: 80vh; 
        padding-top: 120px;
    }
    
    .hero-content-left {
        /* Adds a subtle dark overlay behind text for better readability on mobile images */
        background: rgba(0, 0, 0, 0.4); 
        padding: 30px;
        border-radius: 12px;
        width: 100%;
    }
    .hero-content-left h1, .hero-content-left p {
        color: #ffffff !important;
    }
}

/* CONTENT BOX POSITIONING */
.hero-content-left {
    max-width: 700px;
    text-align: left;
    padding-left: 5%; /* Adjust this to move text further from the left edge */
}

.hero-content-left h1 {
    font-size: 52px;
    color: var(--primary); /* Deep Navy - will be overridden by white on mobile if needed */
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero-content-left p {
    font-size: 19px;
    color: var(--text-body);
    line-height: 1.6;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    .hero-content-left h1 { font-size: 32px; }
    .hero-content-left p { font-size: 16px; }
}

/* =========================================
   ALTERNATING SECTION GRADIENTS
   ========================================= */

/* Center Headings and Sub-copy Globally for these sections */
.expertise-gradient .section-title,
.why-choose-gradient .section-title {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto; /* Centers the block itself */
}

.expertise-gradient h2, 
.why-choose-gradient h2 {
    font-size: 38px;
    color: var(--primary);
    margin-bottom: 15px;
}

.expertise-gradient p, 
.why-choose-gradient p {
    font-size: 18px;
    color: #64748B;
    line-height: 1.6;
}

/* LEFT TO RIGHT GRADIENT (Expertise) */
.expertise-gradient {
    background: linear-gradient(to right, #F0F7FF 0%, #FFFFFF 100%);
    border-top: 1px solid #E2E8F0;
}

/* RIGHT TO LEFT GRADIENT (Why Choose Us) */
.why-choose-gradient {
    background: linear-gradient(to left, #F0F7FF 0%, #FFFFFF 100%);
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

/* Keep the cards white so they "pop" off the gradient */
.expertise-gradient .feature-card,
.why-choose-gradient .feature-card {
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.05);
}

/* Centers the section headers and removes horizontal clutter */
.expertise-gradient .section-title,
.why-choose-gradient .section-title {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto; /* Centers the block and adds breathing room below */
}

/* LEFT TO RIGHT GRADIENT */
.expertise-gradient {
    background: linear-gradient(to right, #F0F7FF 0%, #FFFFFF 100%);
    padding: 100px 0;
}

/* RIGHT TO LEFT GRADIENT */
.why-choose-gradient {
    background: linear-gradient(to left, #F0F7FF 0%, #FFFFFF 100%);
    padding: 100px 0;
}

/* Makes cards "pop" cleanly off the background */
.feature-card {
    background: #FFFFFF;
/* INTERNAL SPACE: This keeps the text away from the edges */
padding: 40px 35px; 
    
border-radius: 12px;
border: 1px solid rgba(226, 232, 240, 0.7);

/* Layout inside the card */
display: flex;
flex-direction: column;
align-items: center; /* Centers icons and titles inside the card */
text-align: center;

transition: all 0.3s ease;
height: 100%; /* Ensures all cards in a row are the same height */
}

/* =========================================
   ABOUT PAGE: CLEAN ALIGNMENT & UNCLUTTER
   ========================================= */

/* Center-aligned section headers */
.section-header-centered {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px auto; /* Perfect centering and bottom breathing room */
}

.section-header-centered h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary); /* Deep Navy */
    margin-bottom: 15px !important;
    letter-spacing: -1px;
}

.section-header-centered p {
    font-size: 19px;
    color: #64748B; /* Slate grey for sub-copy */
    line-height: 1.6;
    margin: 0;
}

/* GRADIENT DIRECTIONS */
.expertise-gradient {
    background: linear-gradient(to right, #F0F9FF 0%, #FFFFFF 100%);
}

.why-choose-gradient {
    background: linear-gradient(to left, #F0F9FF 0%, #FFFFFF 100%);
}

/* Fix for the Hero/Top-Left Section Clutter */
.hero-content-left h1 {
    margin-bottom: 10px !important; /* Removes gap between heading and subtext */
    line-height: 1.1;
}

.hero-content-left p {
    margin-top: 0 !important;
    max-width: 600px;
}

/* Grid Layout Fixes */
.feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 20px 0; /* Space above and below the whole grid */
}

/* Mobile Responsive Alignment */
@media (max-width: 768px) {
    .section-header-centered h2 {
        font-size: 32px;
    }
    .feature-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Fix for Clean Header Alignment */
.section-header-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto; /* Centers the whole block */
}

.section-header-centered h2 {
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Tighter spacing to sub-copy */
    font-size: 42px;
    font-weight: 800;
}

.section-header-centered p {
    margin-top: 0 !important;
    font-size: 19px;
    color: #64748B;
}

/* Ensure the Grid displays 3 columns */
.feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 992px) {
    .feature-grid-3 {
        grid-template-columns: 1fr; /* Stack on mobile/tablet */
    }
}

/* =========================================
   FEATURE CARD SPACING & INTERNAL PADDING
   ========================================= */

   .feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Space between the cards */
    padding: 20px 0; /* Space above and below the whole grid */
}

.feature-card {
    background: #FFFFFF;
    
    /* INTERNAL SPACE: This keeps the text away from the edges */
    padding: 40px 35px; 
    
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.7);
    
    /* Layout inside the card */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers icons and titles inside the card */
    text-align: center;
    
    transition: all 0.3s ease;
    height: 100%; /* Ensures all cards in a row are the same height */
}

.feature-card h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 22px;
    color: var(--primary);
}

.feature-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* Add a hover effect to make the spacing feel more dynamic */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
    border-color: var(--accent);
}

/* Icon box spacing */
.icon-box {
    margin-bottom: 10px;
    width: 70px;
    height: 70px;
    background: #F0F7FF;
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* =========================================
   SUPPORT PAGE STYLES
   ========================================= */

/* Hero Image Specifics */
.support-hero {
    background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../images/support-hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Premium Checkmark List */
.premium-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.premium-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #475569;
}

.premium-list li::before {
    content: "\f058"; /* FontAwesome Check Circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 22px;
}

.premium-list li strong {
    color: var(--primary);
    display: block;
    margin-bottom: 2px;
}

/* Alignment Fix for Service Cards */
.expertise-gradient .feature-card {
    text-align: left; /* Service cards usually look better left-aligned on support pages */
    align-items: flex-start;
}

.expertise-gradient .icon-box {
    margin-left: 0;
}

/* =========================================
   MANAGED SUPPORT: RESPONSIVE HERO FIX
   ========================================= */

   .managed-support-hero {
    width: 100% !important;
    min-height: 700px !important; /* Ensure it has height */
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    padding-top: 100px; 
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* ABSOLUTE PATH: This is the most reliable for your server setup */
    background-image: url('/assets/images/managed-desktop.png') !important; 
}

/* Tablet Swapping */
@media (max-width: 1024px) {
    .managed-support-hero {
        background-image: url('/assets/images/managed-tab.png') !important;
        min-height: 500px !important;
    }
}

/* Mobile Swapping */
@media (max-width: 768px) {
    .managed-support-hero {
        background-image: url('/assets/images/managed-mobile.png') !important;
        min-height: 450px !important;
    }
}

/* =========================================
   SAP CONSULTING: RESPONSIVE HERO
   ========================================= */

   .consulting-hero {
    width: 100% !important;
    min-height: 85vh;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: 160px; 
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Desktop */
    background-image: url('/assets/images/consulting-desktop.png') !important; 
}

@media (max-width: 1024px) {
    .consulting-hero {
        background-image: url('/assets/images/consulting-tab.png') !important;
        min-height: 70vh;
    }
}

@media (max-width: 768px) {
    .consulting-hero {
        background-image: url('/assets/images/consulting-mobile.png') !important;
        min-height: 80vh;
    }
}

/* =========================================
   SAP SECURITY: RESPONSIVE HERO
   ========================================= */

   .security-hero {
    width: 100% !important;
    min-height: 85vh;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: 160px; 
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Absolute path for reliability */
    background-image: url('/assets/images/securitypage-desktop.png') !important; 
}

@media (max-width: 1024px) {
    .security-hero {
        background-image: url('/assets/images/securitypage-tab.png') !important;
        min-height: 70vh;
    }
}

@media (max-width: 768px) {
    .security-hero {
        background-image: url('/assets/images/securitypage-mobile.png') !important;
        min-height: 80vh;
    }
}

/* =========================================
   SAP MIGRATION: RESPONSIVE HERO
   ========================================= */

   .migration-hero {
    width: 100% !important;
    min-height: 85vh;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: 160px; 
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    background-image: url('/assets/images/migration-desktop.png') !important; 
}

@media (max-width: 1024px) {
    .migration-hero {
        background-image: url('/assets/images/migration-tab.png') !important;
        min-height: 70vh;
    }
}

@media (max-width: 768px) {
    .migration-hero {
        background-image: url('/assets/images/migration-mobile.png') !important;
        min-height: 80vh;
    }
}

/* =========================================
   SAP CLOUD: RESPONSIVE HERO
   ========================================= */

   .cloud-hero {
    width: 100% !important;
    min-height: 85vh;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: 160px; 
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    background-image: url('/assets/images/cloud-desktop.png') !important; 
}

@media (max-width: 1024px) {
    .cloud-hero {
        background-image: url('/assets/images/cloud-tab.png') !important;
        min-height: 70vh;
    }
}

@media (max-width: 768px) {
    .cloud-hero {
        background-image: url('/assets/images/cloud-mobile.png') !important;
        min-height: 80vh;
    }
}


/* =========================================
   SAP BTP & VALUE ADD: RESPONSIVE HERO
   ========================================= */

   .btp-hero {
    width: 100% !important;
    min-height: 85vh;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: 160px; 
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    background-image: url('/assets/images/btp-desktop.png') !important; 
}

@media (max-width: 1024px) {
    .btp-hero {
        background-image: url('/assets/images/btp-tab.png') !important;
        min-height: 70vh;
    }
}

@media (max-width: 768px) {
    .btp-hero {
        background-image: url('/assets/images/btp-mobile.png') !important;
        min-height: 80vh;
    }
}


.btn-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    padding: 12px 24px;
    background-color: var(--accent);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    width: fit-content;
    transition: all 0.3s ease;
}

.btn-learn-more:hover {
    background-color: var(--primary);
    transform: translateX(3px);
}

/* =========================================
   CONTACT PAGE STYLES (Clean & Standard)
   ========================================= */

/* =========================================
   RESPONSIVE CONTACT HERO BACKGROUND
   ========================================= */

/* 1. DESKTOP DEFAULT (Screens larger than 1024px) */
.contact-hero {
    /* Loads img_contact.PNG for desktop */
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.75)), url('/assets/images/img_contact.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 180px 0 100px 0;
    position: relative;
    color: #ffffff;
}

/* 2. TABLET VERSION (Screens between 768px and 1024px) */
@media (max-width: 1024px) {
    .contact-hero {
        /* Loads img_contacttab.png for tablets */
        background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.75)), url('/assets/images/img_contacttab.png');
        background-size: cover;
        background-position: center;
        padding: 160px 0 80px 0; /* Slightly smaller padding for tablet */
    }
}

/* 3. MOBILE VERSION (Screens smaller than 768px) */
@media (max-width: 768px) {
    .contact-hero {
        /* Loads img_contactmobile.png for mobile */
        background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.75)), url('/assets/images/img_contactmobile.png');
        background-size: cover;
        background-position: center;
        padding: 140px 0 60px 0; /* Compact padding for mobile */
    }
}

/* Ensure text is white and visible on all devices */
.contact-hero h1, 
.contact-hero p, 
.contact-hero .hero-eyebrow {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* Ensure text is white and visible */
.contact-hero h1, 
.contact-hero p, 
.contact-hero .hero-eyebrow {
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* 2. CONTACT GRID & FORM LAYOUT */
.contact-main-section {
    background: #ffffff; /* Clean white background */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

/* Cards for Info & Form */
/* =========================================
   CONTACT FORM: DOUBLE SIZE UPGRADE
   ========================================= */

   .contact-form-card {
    background: #ffffff !important;
    padding: 60px !important;       /* Increased padding for a spacious feel */
    border-radius: 24px !important; /* Smoother, larger corners */
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
    
    /* DOUBLE THE WIDTH */
    max-width: 800px !important;    /* Increased from 400px/500px */
    width: 100% !important;
    margin: 0 auto !important;
}

/* Larger Title */
.contact-form-card h3 {
    font-size: 2.2rem !important;   /* Bigger headline */
    margin-bottom: 35px !important;
    color: #0f172a !important;
}

/* Larger Input Fields */
.contact-form .form-group {
    margin-bottom: 25px !important;
}

.contact-form input, 
.contact-form textarea {
    width: 100% !important;
    padding: 20px !important;      /* Thicker inputs */
    font-size: 1.1rem !important;  /* Easier to read text */
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
}

/* Double Sized Button */
.contact-form .btn-learn-more {
    width: 100% !important;
    padding: 22px !important;      /* Very bold button */
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
}

/* Mobile Adjustment (Don't let it overflow) */
@media (max-width: 768px) {
    .contact-form-card {
        padding: 30px !important;
        max-width: 95% !important;
    }
    
    .contact-form-card h3 {
        font-size: 1.8rem !important;
    }
}

/* Contact Info Items */
.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.info-item .icon-box {
    width: 50px;
    height: 50px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.info-item h4 { margin: 0; font-size: 16px; color: var(--primary); }
.info-item p { margin: 0; color: var(--text-gray); }

/* Form Fields */
.styled-form .form-group { margin-bottom: 20px; }

.styled-form input, .styled-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.styled-form input:focus, .styled-form textarea:focus {
    border-color: var(--accent);
}

/* Responsive Fixes */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-hero { padding: 140px 0 80px 0; }
}

/* =========================================
   SERVICES HERO: ASPECT-RATIO LOCK (NO CROP)
   ========================================= */

/* 1. DESKTOP (1920x1000) */
.services-hero {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
    padding-top: 150px !important; 
    
    /* Remove overlays and background colors */
    background: none !important;
    background-color: #ffffff !important;
    
    /* Image Settings */
    background-image: url('/assets/images/services-1920x1000.png') !important;
    background-size: contain !important; /* Forces the whole image to show */
    background-position: top center !important;
    background-repeat: no-repeat !important;
    
    /* Lock Aspect Ratio: Width / Height */
    aspect-ratio: 1920 / 1000 !important;
}

/* 2. TABLET (768px to 1024px) */
@media (max-width: 1024px) {
    .services-hero {
        background-image: url('/assets/images/services-1200x850.png') !important;
        aspect-ratio: 1200 / 850 !important;
        padding-top: 120px !important;
        min-height: auto !important; /* Removes the old 70vh restriction */
    }
}

/* 3. MOBILE (Below 768px) */
@media (max-width: 767px) {
    .services-hero {
        background-image: url('/assets/images/services-800x1420.png') !important;
        aspect-ratio: 800 / 1420 !important;
        padding-top: 100px !important;
        min-height: auto !important; /* Removes the old 80vh restriction */
    }
}

/* 4. BLACK TEXT & POSITIONING */
.services-hero h1, 
.services-hero p, 
.services-hero .hero-eyebrow {
    color: #000000 !important; /* Change text to black */
    text-shadow: none !important; /* Remove any shadows for clean look */
    position: relative;
    z-index: 2;
}

.services-hero .container {
    margin-left: 5% !important;
    margin-right: auto !important;
}

/* =========================================
   KEEP THE REST OF YOUR SERVICE ROW STYLES 
   ========================================= */
.service-row {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 100px 0;
    border-bottom: 1px solid var(--border);
}
/* ... rest of your code ... */
/* =========================================
   ALIGNED SERVICE ROWS
   ========================================= */

   .service-row {
    display: flex;
    align-items: stretch; /* Forces both columns to have the same height */
    gap: 80px;
    padding: 100px 0;
    border-bottom: 1px solid var(--border);
}

.service-text {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers text vertically if it's shorter than the image */
}

.service-img {
    flex: 0.8;
    display: flex;
}

.service-img img {
    width: 100%;
    height: 100%; /* Spans the full height of the container */
    object-fit: cover; /* Crops the image to fill the space perfectly without stretching */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Maintain alternating layout */
.service-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* Mobile Fix: Reset to auto-height so images don't look weirdly tall on phones */
@media (max-width: 992px) {
    .service-row {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 40px;
    }
    
    .service-img img {
        height: 300px; /* Fixed height for mobile */
    }
}

/* =========================================
   SUCCESS SLIDESHOW: FADE & RED OUTLINE
   ========================================= */

   .success-fade-container {
    position: relative;
    width: 100%;
    height: 550px; /* Tall height to match left content */
    overflow: hidden;
    /* Red outline style */
    /*border: 3px solid #ef4444; */
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.fade-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Total cycle: 30 seconds (3s per image) */
    animation: fadeCycle 30s infinite;
}

.fade-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ANIMATION LOGIC FOR 10 IMAGES */
@keyframes fadeCycle {
    0% { opacity: 0; }
    2% { opacity: 1; }  /* Fade in */
    10% { opacity: 1; } /* Stay visible for 10% of 30s = 3s */
    12% { opacity: 0; } /* Fade out */
    100% { opacity: 0; }
}

/* Staggering the 10 images (3s intervals) */
.fade-slide:nth-child(1)  { animation-delay: 0s; }
.fade-slide:nth-child(2)  { animation-delay: 3s; }
.fade-slide:nth-child(3)  { animation-delay: 6s; }
.fade-slide:nth-child(4)  { animation-delay: 9s; }
.fade-slide:nth-child(5)  { animation-delay: 12s; }
.fade-slide:nth-child(6)  { animation-delay: 15s; }
.fade-slide:nth-child(7)  { animation-delay: 18s; }
.fade-slide:nth-child(8)  { animation-delay: 21s; }
.fade-slide:nth-child(9)  { animation-delay: 24s; }
.fade-slide:nth-child(10) { animation-delay: 27s; }

/* Responsive height for tablets/mobile */
@media (max-width: 992px) {
    .success-fade-container {
        height: 400px;
        margin-top: 30px;
    }
}

/* =========================================
   FIXED: Seamless Partner Slider
   ========================================= */

   .clients-track {
    display: flex;
    align-items: center;
    /* (Width of one slide 200px) * (Total logos including duplicates 20) = 4000px */
    width: 4000px; 
    animation: scroll-seamless 30s linear infinite; /* Faster, smoother scroll */
}

@keyframes scroll-seamless {
    0% { transform: translateX(0); }
    /* Move exactly half the width (one full set of logos) */
    100% { transform: translateX(-2000px); } 
}

/* Ensure slides have a consistent fixed width for the math to work */
.client-slide {
    width: 200px; 
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 0 30px;
}

/* =========================================
   CENTERED CERTIFICATION ROW
   ========================================= */

   .certification-row {
    display: flex;
    flex-wrap: wrap;       /* Allows icons to wrap to a second line on mobile */
    justify-content: center; /* Centers the icons horizontally */
    align-items: center;
    gap: 20px;            /* Even spacing between icons */
    padding: 20px 0;
    max-width: 1000px;
    margin: 0 auto;       /* Centers the container itself */
}

.cert-icon {
    flex: 0 1 auto;
    width: 85px;          /* Size of each icon */
    transition: transform 0.3s ease;
}

.cert-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.cert-icon:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Mobile specific centering */
@media (max-width: 768px) {
    .expertise-content {
        padding: 0 20px;
    }
    .cert-icon {
        width: 65px; /* Smaller icons for phones */
    }
}

/* =========================================
   OUR STORY STYLES
   ========================================= */

   .about-split {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 40px 0;
}

.about-text {
    flex: 1.2;
}

.about-image {
    flex: 0.8;
    position: relative;
}

.story-visual-box {
    position: relative;
}

/* Floating Badge Effect */
.story-badge {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: var(--accent);
    color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.badge-number {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.badge-text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    font-weight: 600;
}

/* Mobile Fix */
@media (max-width: 992px) {
    .about-split {
        flex-direction: column;
        gap: 60px;
    }
    
    .story-badge {
        left: 20px;
        bottom: -20px;
    }
}

/* Add this to your style.css for the Story Image */
.about-image img {
    width: 100%;
    height: 500px; /* Fixed height for a cinematic feel on desktop */
    object-fit: cover; /* Ensures the image fills the area without stretching */
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); /* Subtle Navy shadow */
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.02); /* Very subtle zoom effect */
}

/* =========================================
   OUR STORY - IMAGE SCALE
   ========================================= */

   .about-split {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 60px 0;
}

.about-image {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.about-image img {
    width: 100%;
    height: 550px; /* High value creates the 'Scale' look */
    object-fit: cover; /* Prevents stretching */
    display: block;
    transition: transform 0.6s ease;
}

.about-image:hover img {
    transform: scale(1.03); /* Subtle premium zoom */
}

/* Mobile Fix */
@media (max-width: 992px) {
    .about-image img {
        height: 350px;
    }
}

/* lead text*/

.display-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 25px;
    line-height: 1.2;
}

.lead-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary); /* Deep Navy for the lead para */
    margin-bottom: 20px;
    line-height: 1.6;
}

.about-text p {
    margin-bottom: 15px;
    color: var(--text-body);
}

.about-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;            /* Large gap for that premium feel */
    width: 100%;
}

.about-image {
    flex: 1;
    width: 100%;
}

.about-image img {
    width: 100%;
    height: auto;          /* Let it grow */
    aspect-ratio: 4 / 3;   /* Forces the image to stay at a professional scale */
    object-fit: cover;
    border-radius: 12px;
}

.about-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;            /* Large gap for that premium feel */
    width: 100%;
}


/* =========================================
   CONTACT HERO: PATH & VISIBILITY RESET
   ========================================= */

   .contact-hero-intellect {
    /* 1. Full screen height and spread */
    height: 60vh !important; 
    width: 100% !important;
    display: flex !important;
    
    /* 2. Position text at top left */
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
    padding-top: 140px !important; /* Adjust based on your header height */
    
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important; /* Prevents dark blue from showing */

    /* 3. Load Desktop Image by default */
    background-image: url('/assets/images/img_contact.png') !important;
}

/* Tablet Image (Fixes the 992px issue) */
@media (max-width: 1024px) {
    .contact-hero-intellect {
        background-image: url('/assets/images/img_contacttab.png') !important;
        height: 60vh !important;
    }
}

/* Mobile Image */
@media (max-width: 767px) {
    .contact-hero-intellect {
        background-image: url('/assets/images/img_contactmobile.png') !important;
        height: 60vh !important;
        padding-top: 100px !important;
    }
}

/* 4. Text Styling (Black color) */
.contact-hero-intellect h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    font-weight: 800 !important;
    color: #000000 !important; 
    margin-bottom: 20px;
}

.contact-hero-intellect p {
    font-size: 1.25rem !important;
    color: #000000 !important; 
    max-width: 450px;
    line-height: 1.6;
}

/* Keeps text from touching the edge of the screen */
.contact-hero-intellect .container {
    margin-left: 5% !important;
    margin-right: auto !important;
}

/* =========================================
   GLOBAL RESPONSIVE ENGINE (The Fix for All Screens)
   ========================================= */

/* --- 1. TABLET & SMALL LAPTOP FIXES (992px and down) --- */
@media (max-width: 992px) {
    
    /* Force containers to stack vertically */
    .about-split, 
    .hero-split, 
    .contact-grid {
        flex-direction: column !important;
        gap: 40px !important;
        align-items: flex-start !important;
    }

    /* Images usually need to go on top or bottom, not side */
    .about-image {
        width: 100% !important;
        margin-top: 30px;
    }
    
    /* Fix the "Tall Image" issue on tablets */
    .about-image img,
    .page-hero .about-image img {
        height: 350px !important; /* Shorter height for tablets */
        aspect-ratio: 16/9;
    }

    /* Relax the padding */
    .section-padding, .page-hero {
        padding: 20px 0 !important;
        min-height: auto !important; /* Allow content to dictate height */
    }
    
}

/* --- 2. MOBILE PHONE FIXES (768px and down) --- */
@media (max-width: 768px) {

    
    /* Typography Scaling: Prevent huge headlines breaking the screen */
    h1, .display-title {
        font-size: 2.0rem !important; /* Readable mobile size */
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.8rem !important;
    }
    
    p, .lead-text {
        font-size: 1rem !important;
        text-align: left; /* Easier to read on phone */
    }

    /* Container Handling */
    .container {
        width: 92% !important; /* Use almost full width */
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    /* Fix Grid Systems (Certificates, Services, etc.) */
    .certification-grid, 
    .services-grid, 
    .footer-grid {
        grid-template-columns: 1fr !important; /* Stack in single column */
        gap: 30px !important;
    }
    
    /* Footer Alignment */
    .footer-col {
        text-align: left;
    }
    
    /* Fix Hero Images on Mobile */
    .about-image img {
        height: 250px !important; /* Even smaller for phones */
    }
    
    /* Navigation / Buttons */
    .btn-glow, .btn-primary {
        width: 100%; /* Full width buttons for easy tapping */
        text-align: center;
    }
}

/* =========================================
   INDEX HERO MOBILE FIX (Corrected)
   ========================================= */
   @media (max-width: 768px) {
    
    /* 1. Reset the Hero Container */
    .hero {
        height: auto !important;       /* Let it grow if text is long */
        min-height: 100vh !important;   /* THE FIX: Force it to be at least 65% of screen height so image shows */
        padding: 120px 20px 60px 20px !important; 
        text-align: center !important; 
        display: flex !important;      /* Changed back to flex to center content vertically */
        flex-direction: column;
        justify-content: center;       /* Centers text in the middle of the image */
        
        /* Ensure background stays cover */
        background-size: cover !important;
        background-position: center !important;
    }

    /* 2. Fix the Text */
    .hero-content {
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    /* FIXED TYPO: changed '1 rem' to '1rem' */
    .hero-subtext {
        font-size: 1rem !important; 
        margin-bottom: 20px !important;
        padding: 0 10px;
    }

    /* 3. Tame the Bullet Points */
    .hero-bullets {
        text-align: left;
        display: inline-block;
        margin-bottom: 30px !important;
        padding-left: 0 !important;
    }

    .hero-bullets li {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    /* 5. BUTTON (PUSH TO BOTTOM) */
    .hero-buttons {
        width: 100%;
        margin-top: auto !important; /* THIS IS THE MAGIC: Pushes button to the very bottom */
        padding-top: 20px;
    }

    .hero-buttons .btn-primary {
        width: 100%;
        display: block;
        padding: 16px 0;
        font-size: 1.1rem;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1); /* Adds a nice lift */
    }

    /* ============================
       MOBILE STATS FADE-IN (One by One)
       ============================ */
       .stats-track .stat-item {
        opacity: 0;
        transform: translateY(30px); 
        transition: all 0.6s ease-out;
    }

    .stats-track.fade-in-active .stat-item {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered Delays */
    .stats-track.fade-in-active .stat-item:nth-child(1) { transition-delay: 0.1s; }
    .stats-track.fade-in-active .stat-item:nth-child(2) { transition-delay: 0.3s; }
    .stats-track.fade-in-active .stat-item:nth-child(3) { transition-delay: 0.5s; }
    .stats-track.fade-in-active .stat-item:nth-child(4) { transition-delay: 0.7s; }
/* ============================
       MOBILE STATS FADE-IN (Safe Mode)
       ============================ */
    
    /* 1. Force items to be invisible initially */
    .stats-track .stat-item {
        opacity: 0 !important; /* Force invisible */
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
    }

    /* 2. When the JS trigger hits, make them visible */
    .stats-track.fade-in-active .stat-item {
        opacity: 1 !important; /* Force visible */
        transform: translateY(0);
    }

    /* 3. The Wave Effect (Staggered Delays) */
    .stats-track.fade-in-active .stat-item:nth-child(1) { transition-delay: 0.1s !important; }
    .stats-track.fade-in-active .stat-item:nth-child(2) { transition-delay: 0.3s !important; }
    .stats-track.fade-in-active .stat-item:nth-child(3) { transition-delay: 0.5s !important; }
    .stats-track.fade-in-active .stat-item:nth-child(4) { transition-delay: 0.7s !important; }

}



/* =========================================
   PAGE HERO MOBILE FIX (About & Contact)
   ========================================= */
   @media (max-width: 768px) {

    /* 1. RESET THE CONTAINER (Don't force 100vh) */
    .page-hero {
        height: auto !important;
        min-height: 85vh !important; /* Let it shrink to fit the text */
        padding: 100px 20px 60px 20px !important; 
        text-align: center !important;
        display: block !important;    /* Removes flex centering so it flows naturally */
    }

    /* 2. STACK THE LAYOUT (Text Top, Image Bottom) */
    .about-split {
        display: flex !important;
        flex-direction: column !important; /* This stacks them */
        gap: 40px !important;
        align-items: center !important;
    }

    /* 3. CENTER THE TEXT */
    .hero-content-left {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .page-hero h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    .page-hero p {
        font-size: 1rem !important;
        color: rgba(255,255,255,0.85) !important;
        margin-bottom: 0 !important;
    }

    /* 4. FIX THE IMAGE (Make it visible) */
    .about-image {
        width: 100% !important;
        margin: 0 !important;
    }

    .about-image img {
        width: 100% !important;
        height: 300px !important; /* Fixed height ensures it looks good */
        object-fit: cover !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
}

/* =========================================
   WHY CHOOSE SECTION (6-Box Grid)
   ========================================= */

/* 1. The Grid Layout (3 Columns on Desktop) */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forces 3 boxes per row */
    gap: 30px;
    width: 100%;
}

/* 2. The Card Design */
.why-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid var(--border); /* Subtle border */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%; /* Ensures all boxes are same height */
}

/* Hover Effect (Lifts up) */
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: var(--accent); /* Blue border on hover */
}

/* 3. Icon Styling */
.why-icon {
    width: 60px;
    height: 60px;
    background: #EFF6FF; /* Very light blue background */
    color: var(--accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 25px;
}

.why-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--primary);
    font-weight: 700;
}

.why-card p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0;
}

/* 4. RESPONSIVE: Tablet (2 Columns) */
@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 5. RESPONSIVE: Mobile (1 Column) */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    
    .why-card {
        padding: 30px 20px;
        align-items: center; /* Center align for mobile look */
        text-align: center;
    }
}

/* =========================================
   SERVICES PAGE HERO (Text Color Override)
   ========================================= */
   .services-hero h1 {
    color: #0F172A !important; /* Dark Navy (almost black) */
}

.services-hero p {
    color: #475569 !important; /* Dark Slate Grey */
}


/* =========================================
   SERVICES SECTION - SHADOW REMOVAL
   ========================================= */

/* Target the main title */
.services-section .section-title h2 {
    color: #475569 !important;    /* Clean Gray color */
    text-shadow: none !important; /* Removes the drop shadow completely */
    font-weight: 700;
}

/* Target the subtext */
.services-section .section-title p {
    color: #64748b !important;    /* Lighter Gray for subtext */
    text-shadow: none !important; /* Removes the drop shadow completely */
}

/* If you have a specific shadow on the container itself */
.services-section .section-title {
    box-shadow: none !important;
}

.services-section * {
    text-shadow: none !important;
    filter: none !important;
}

/* =========================================
   MOBILE SERVICE IMAGE FIX
   ========================================= */
   @media (max-width: 768px) {
    
    /* 1. Ensure the card has enough height to show the image */
    .service-hover-card {
        height: auto !important; /* Let it grow with content */
        display: flex;
        flex-direction: column;
        background: #fff;
    }

   /* GLOBAL OVERFLOW FIX */
        .service-hover-card, 
        .img-wrapper, 
        .about-image {
            overflow: hidden !important; /* Forces images to stay inside their boxes */
            position: relative;
        }

        .img-wrapper img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .service-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 3. Disable the "Overlay" and show text normally below the image */
    .service-content-overlay {
        position: relative !important; /* Move it from floating to normal position */
        transform: none !important;    /* Show it fully */
        padding: 20px !important;
        background: #fff !important;
        border-top: 1px solid var(--border) !important;
    }

    /* 4. Make the "Hidden" text visible by default on mobile */
    .hidden-copy {
        opacity: 1 !important;
        display: block !important;
        margin-top: 10px !important;
    }
}

/* =========================================
   CUSTOM IMAGE SOCIAL LOGOS
   ========================================= */
   .social-links-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.custom-social-logo {
    height: 30px; /* Adjust height to match your text size */
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

.social-link:hover .custom-social-logo {
    transform: scale(1.1); /* Subtle grow effect on hover */
}

.social-divider {
    color: #CBD5E1;
    font-size: 18px;
    font-weight: 300;
    margin: 0 5px;
}

/* SHOW HAMBURGER MENU ICON ON SMALL SCREENS */
@media only screen and (max-width: 768px) {

  /* Make sure the hamburger icon is visible */
  .hamburger {
    display: block !important;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    color: #333; /* Adjust the color if it blends with background */
    z-index: 9999;
    cursor: pointer;
  }

  /* Hide the normal nav links */
  nav ul {
    display: none;
  }
}