/* ========================================== */
/* BASE SAFETY NET                            */
/* Every other page (about/services/intelligence/portfolio/contact) already
   sets this on body — it's the last line of defense against a stray
   decorative element (a background glow, a watermark) ever producing a
   visible horizontal scrollbar. The homepage was the one page missing it. */
/* ========================================== */
body {
    overflow-x: hidden;
}

/* ========================================== */
/* HERO SECTION BASE STYLES                   */
/* ========================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--primary-black);
    color: var(--primary-white);
}

/* ========================================== */
/* BACKGROUND VIDEO & OVERLAYS                */
/* ========================================== */
.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* Dark Gradient & Blue Tint Overlay */
.hero-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.85) 100%),
                linear-gradient(180deg, rgba(26, 93, 172, 0.15) 0%, rgba(0, 0, 0, 0.70) 100%);
    pointer-events: none;
}

/* Technology Grid & Glowing Radial Overlay */
.hero-overlay-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at 75% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%);
    -webkit-mask-image: radial-gradient(circle at 75% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%);
}

.hero-overlay-tech::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 15%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(26, 93, 172, 0.25) 0%, rgba(141, 30, 164, 0.1) 50%, transparent 70%);
    filter: blur(50px);
    border-radius: 50%;
}

/* ========================================== */
/* HERO CONTAINER & LAYOUT                    */
/* ========================================== */
.hero-container {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    /* Reduced top spacing from header */
    padding: calc(var(--header-height) - 20px) 4vw 0 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
}

/* Left Column (60%) */
.hero-left {
    flex: 0 0 58%;
    max-width: 58%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Right Column (40%) */
.hero-right {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    justify-content: flex-end;
}

/* ========================================== */
/* TYPOGRAPHY                                 */
/* ========================================== */
.hero-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.5vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-white);
    margin-bottom: 24px;
}

/* GSAP Line Animation Wrapper */
.heading-line {
    display: block;
    overflow: hidden;
}

.line-inner {
    display: block;
    will-change: transform, opacity;
}

.text-accent-blue {
    color: var(--primary-blue);
}

.hero-description {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.25rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--primary-grey);
    max-width: 540px;
    margin-bottom: 36px;
    will-change: transform, opacity;
}

/* ========================================== */
/* BUTTONS                                    */
/* ========================================== */
.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 20px;
    will-change: transform, opacity;
}

/* Primary CTA Button */
.btn-primary {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-white);
    text-decoration: none;
    padding: 16px 36px;
    background-color: var(--primary-blue);
    border-radius: 50px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 20px rgba(26, 93, 172, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: #1e6bc4;
    box-shadow: 0 8px 30px rgba(26, 93, 172, 0.5);
}

/* Secondary CTA Button */
.btn-secondary {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-white);
    text-decoration: none;
    padding: 16px 36px;
    background-color: transparent;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* ========================================== */
/* FLOATING GLASS CARD                        */
/* ========================================== */
.hero-glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 36px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    will-change: transform, opacity;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
}

.card-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--primary-white);
    letter-spacing: 0.02em;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-grey);
    letter-spacing: 0.15em;
    margin-top: 6px;
    text-transform: uppercase;
}

.stat-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1;
    color: var(--primary-white);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.stat-sublabel {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--primary-grey);
    margin-top: 6px;
}

/* ========================================== */
/* SCROLL INDICATOR                           */
/* ========================================== */
.hero-scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    will-change: opacity;
}

.scroll-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */

/* Laptops & Desktop scaling */
@media (max-width: 1200px) {
    .hero-container {
        padding-top: calc(var(--header-height) + 20px);
    }
    .hero-left {
        flex: 0 0 62%;
        max-width: 62%;
    }
    .hero-right {
        flex: 0 0 38%;
        max-width: 38%;
    }
    .hero-glass-card {
        padding: 28px 24px;
        max-width: 340px;
    }
    .stat-number {
        font-size: 2.75rem;
    }
    .stat-title {
        font-size: 1.75rem;
    }
}

/* Tablets (Stacked Vertical Layout) */
@media (max-width: 992px) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: calc(var(--header-height) + 40px);
        padding-bottom: 80px;
    }

    .hero-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 48px;
    }

    .hero-left,
    .hero-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .hero-right {
        justify-content: flex-start;
    }

    .hero-glass-card {
        max-width: 100%;
    }

    .card-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Mobile Devices */
@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .hero-heading {
        margin-bottom: 20px;
    }

    .hero-description {
        margin-bottom: 28px;
    }

    .hero-cta-group {
        width: 100%;
        flex-direction: column;
        gap: 14px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .hero-scroll-indicator {
        display: none; /* Hide on small mobile viewports to prevent UI clutter */
    }
}

/* Small Mobile Devices */
@media (max-width: 380px) {
    .hero-glass-card {
        padding: 24px 18px;
    }

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

    .stat-title {
        font-size: 1.5rem;
    }
}

/* ========================================== */
/* WHO WE ARE SECTION                         */
/* ========================================== */
.who-we-are {
    position: relative;
    width: 100%;
    background-color: #F9EFE8; /* Official Company Cream Background */
    color: var(--primary-black);
    padding: 120px 0 140px 0;
    z-index: 5; /* Stack above background video overlays */
}

/* Subtle Geometric Background Pattern (2-3% opacity) */
.who-we-are-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.025;
    background-image: 
        radial-gradient(#1A5DAC 1px, transparent 1px),
        linear-gradient(to right, #000000 1px, transparent 1px),
        linear-gradient(to bottom, #000000 1px, transparent 1px);
    background-size: 30px 30px, 90px 90px, 90px 90px;
}

/* Section Container */
.who-we-are-container {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
}

/* ========================================== */
/* LEFT COLUMN (CONTENT)                      */
/* ========================================== */
.who-we-are-content {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-blue); /* #1A5DAC */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-block;
}

.section-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 4vw, 4.25rem);
    line-height: 1.05;
    color: var(--primary-black);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 24px;
    /* Several sections (e.g. "Who We Are") center this heading inside a
       flex column with align-items:center rather than stretch, which lets
       a block element size itself to its own text instead of the column's
       width. At narrow phone widths the unwrapped heading text is wider
       than the screen, so without a max-width it overflows instead of
       wrapping. overflow-wrap is a second line of defense in case a single
       word alone is still too wide even after wrapping. */
    max-width: 100%;
    overflow-wrap: break-word;
}

.section-description {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
    color: #555555; /* Approved Body Text Color */
    max-width: 520px;
    margin-bottom: 36px;
}

.who-we-are-cta {
    display: inline-block;
}

/* Learn More Button */
.btn-about {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-white);
    text-decoration: none;
    padding: 16px 40px;
    background-color: var(--primary-blue); /* #1A5DAC */
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(26, 93, 172, 0.2);
}

.btn-about:hover {
    background-color: #144988; /* Slightly darker blue */
    transform: translateY(-4px); /* Micro-interaction lift */
    box-shadow: 0 10px 25px rgba(26, 93, 172, 0.35);
}

/* ========================================== */
/* WHO WE ARE - REFINED IMAGE & OVERLAP       */
/* ========================================== */
.who-we-are-media {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    /* Added breathing room from the right edge of the viewport */
    padding-right: clamp(40px, 5vw, 80px); 
}

/* Controlled & Intentional Upward Overlap (60px-80px) */
.who-we-are-image-wrapper {
    position: relative;
    margin-top: -70px; /* Reduced overlap so image remains mainly inside section */
    width: 100%;
    border-radius: 24px; /* Premium rounded corners */
    overflow: hidden;
    /* Soft premium shadow with a subtle white accent border for crisp separation */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22),
                0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: var(--primary-black);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    will-change: transform;
}

.who-we-are-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtle Image Hover Interaction */
.who-we-are-image-wrapper:hover {
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.28),
                0 6px 16px rgba(0, 0, 0, 0.12);
}

.who-we-are-image-wrapper:hover .who-we-are-img {
    transform: scale(1.03);
}


/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */

/* Laptops & Desktop scaling */
@media (max-width: 1200px) {
    .who-we-are-media {
        padding-right: 30px;
    }
    .who-we-are-image-wrapper {
        margin-top: -60px; /* Slightly lower overlap for laptop screen heights */
    }
    .who-we-are-img {
        height: 440px;
    }
}

/* Tablets (Maintains 2-column with tighter layout) */
@media (max-width: 992px) {
    .who-we-are {
        padding: 90px 0 100px 0;
    }

    .who-we-are-container {
        gap: 4vw;
    }

    .who-we-are-content {
        flex: 0 0 48%;
        max-width: 48%;
    }

    .who-we-are-media {
        flex: 0 0 48%;
        max-width: 48%;
    }

    .who-we-are-image-wrapper {
        margin-top: -40px;
    }

    .who-we-are-img {
        height: 380px;
    }
}

/* Large Mobile & Mobile (Stacked Layout) */
@media (max-width: 768px) {
    .who-we-are {
        padding: 70px 0 80px 0;
    }

    .who-we-are-container {
        flex-direction: column;
        text-align: center;
        gap: 48px;
    }

    .who-we-are-content,
    .who-we-are-media {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        align-items: center;
    }

    .who-we-are-content {
        align-items: center;
    }

    .section-description {
        max-width: 100%;
    }

    /* Remove Hero Overlap on Mobile for flawless usability */
    .who-we-are-image-wrapper {
        margin-top: 0;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        margin-left: -35px;
    
    }

    .who-we-are-img {
        height: 320px;
        
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .who-we-are-img {
        height: 260px;
        border-radius: 20px;
    }

    .who-we-are-image-wrapper {
        border-radius: 20px;
    }

    .btn-about {
        width: 100%;
    }
}

/* ========================================== */
/* OUR SOLUTIONS SECTION                      */
/* ========================================== */
.our-solutions {
    position: relative;
    width: 100%;
    background-color: #000000;
    color: var(--primary-white);
    padding: 120px 0;
    overflow: hidden;
    z-index: 6;
}

/* ========================================== */
/* AMBIENT BACKGROUND GLOWS (5-8% OPACITY)    */
/* ========================================== */
.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
}

.glow-blue {
    top: 10%;
    left: -5%;
    width: 450px;
    height: 450px;
    background: #1A5DAC;
    opacity: 0.08;
}

.glow-purple {
    bottom: 15%;
    left: 30%;
    width: 400px;
    height: 400px;
    background: #8D1EA4;
    opacity: 0.06;
}

.glow-magenta {
    top: 40%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: #9F1850;
    opacity: 0.06;
}

/* Container */
.solutions-container {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 4vw;
}

/* Section Header */
.solutions-header {
    max-width: 720px;
    margin-bottom: 56px;
}

.section-label-blue {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A5DAC;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-block;
}

.solutions-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.05;
    color: var(--primary-white);
    text-transform: uppercase;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

.solutions-subheading {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 300;
    color: var(--primary-grey);
    line-height: 1.5;
}

/* ========================================== */
/* SPLIT LAYOUT (45% / 55%)                   */
/* ========================================== */
.solutions-body-split {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4vw;
}

.solutions-left-col {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.solutions-right-col {
    flex: 0 0 51%;
    max-width: 51%;
    position: relative;
}

/* ========================================== */
/* CARDS STACK & DESIGN                       */
/* ========================================== */
.cards-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}

.solution-card {
    position: relative;
    background-color: #111111;
    border-radius: 20px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--primary-white);
    display: block;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.35s ease, 
                background-color 0.35s ease;
    will-change: transform, box-shadow;
}

/* Left Accent Bar (3px) */
.card-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    opacity: 0.4;
    transition: opacity 0.3s ease, width 0.3s ease;
}

.bar-blue { background-color: #1A5DAC; }
.bar-magenta { background-color: #9F1850; }
.bar-purple { background-color: #8D1EA4; }
.bar-grey { background-color: #A09FA3; }

.card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 2;
    position: relative;
}

.card-icon-wrapper {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.icon-blue { stroke: #1A5DAC; }
.icon-magenta { stroke: #9F1850; }
.icon-purple { stroke: #8D1EA4; }
.icon-grey { stroke: #A09FA3; }

.card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-grow: 1;
    color: var(--primary-white);
}

.card-arrow {
    font-size: 1.4rem;
    color: var(--primary-grey);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
}

/* Animated Accent Underline */
.card-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.line-blue { background-color: #1A5DAC; }
.line-magenta { background-color: #9F1850; }
.line-purple { background-color: #8D1EA4; }
.line-grey { background-color: #A09FA3; }

/* ========================================== */
/* CARD HOVER & ACTIVE STATES                 */
/* ========================================== */
.solution-card:hover,
.solution-card.active-card {
    transform: translateY(-4px);
    background-color: #161616;
}

.solution-card:hover .card-accent-bar,
.solution-card.active-card .card-accent-bar {
    opacity: 1;
    width: 6px;
}

.solution-card:hover .card-arrow,
.solution-card.active-card .card-arrow {
    transform: translateX(6px);
    color: var(--primary-white);
}

.solution-card:hover .card-underline,
.solution-card.active-card .card-underline {
    transform: scaleX(1);
}

.solution-card:hover .card-icon,
.solution-card.active-card .card-icon {
    transform: scale(1.1);
}

/* Distinct Soft Color Glows per Accent on Hover */
.solution-card[data-accent="blue"]:hover,
.solution-card[data-accent="blue"].active-card {
    box-shadow: 0 12px 35px rgba(26, 93, 172, 0.25);
}

.solution-card[data-accent="magenta"]:hover,
.solution-card[data-accent="magenta"].active-card {
    box-shadow: 0 12px 35px rgba(159, 24, 80, 0.25);
}

.solution-card[data-accent="purple"]:hover,
.solution-card[data-accent="purple"].active-card {
    box-shadow: 0 12px 35px rgba(141, 30, 164, 0.25);
}

.solution-card[data-accent="grey"]:hover,
.solution-card[data-accent="grey"].active-card {
    box-shadow: 0 12px 35px rgba(160, 159, 163, 0.2);
}

/* ========================================== */
/* BLUE EXPLORE BUTTON                        */
/* ========================================== */

/* Desktop: ~60px Top Margin */
.solutions-cta-wrapper {
    margin-top: 60px;
    display: flex;
    justify-content: flex-start;
}

.btn-primary-blue {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-white);
    background-color: #1A5DAC;
    text-decoration: none;
    padding: 16px 36px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 6px 20px rgba(26, 93, 172, 0.3);
}

.btn-primary-blue .btn-arrow {
    transition: transform 0.3s ease;
}

.btn-primary-blue:hover {
    background-color: #144988;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 93, 172, 0.45);
}

.btn-primary-blue:hover .btn-arrow {
    transform: translateX(4px);
}

/* ========================================== */
/* RIGHT COLUMN PREVIEW FRAME                 */
/* ========================================== */
.preview-image-frame {
    position: sticky;
    top: 120px;
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: 620px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    background-color: #111111;
}

#solutions-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in; /* hints that the image opens a fullscreen gallery view */
    transition: opacity 0.35s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.frame-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

/* Small "2 / 12" style badge — only populated (via JS) when a category's
   gallery has more than one image, so a single-image category still looks
   exactly like the original design. */
.preview-gallery-count {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--primary-white);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
}

.preview-gallery-count:empty {
    display: none;
}

/* Thumbnail rail overlaid on the bottom of the preview frame, letting a
   visitor browse a category's gallery without leaving the section. Also
   built and emptied entirely by JS, so it stays invisible for any category
   that only has one image. */
.preview-thumb-strip {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 4;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.preview-thumb-strip:empty {
    display: none;
}

.preview-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 42px;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    background-color: #000;
    border: 2px solid rgba(255, 255, 255, 0.35);
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.preview-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.preview-thumb.active {
    opacity: 1;
    border-color: #1A5DAC;
}

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

/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */

/* Laptops & Small Desktops */
@media (max-width: 1100px) {
    .preview-image-frame {
        min-height: 440px;
    }
}

/* Tablets & Mobile (Stacked Vertical Layout) */
@media (max-width: 900px) {
    .our-solutions {
        padding: 80px 0;
    }

    .solutions-body-split {
        flex-direction: column;
        gap: 40px;
    }

    .solutions-left-col,
    .solutions-right-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Move Preview Image Below Cards on Mobile */
    .preview-image-frame {
        position: relative;
        top: 0;
        min-height: 320px;
        max-height: 400px;
    }
    .solutions-cta-wrapper {
        margin-top: 50px;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .solution-card {
        padding: 18px 20px;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .btn-primary-blue {
        width: 100%;
        justify-content: center;
    }

    .preview-image-frame {
        min-height: 250px;
        border-radius: 18px;
    }

    .preview-thumb {
        flex-basis: 44px;
        width: 44px;
        height: 34px;
    }

    .solutions-cta-wrapper {
        margin-top: 50px;
    }
}



/* ========================================== */
/* WHY CHOOSE ALFATH SECTION                  */
/* ========================================== */
.why-choose-alfath {
    position: relative;
    width: 100%;
    background-color: #07131F; /* Very Dark Navy */
    color: var(--primary-white);
    padding: 130px 0;
    overflow: hidden;
    z-index: 9;
}

/* ========================================== */
/* SOFT AMBIENT GRADIENT GLOBS                */
/* ========================================== */
.why-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.why-choose-alfath .glow-blue {
    top: -10%;
    left: 15%;
    width: 500px;
    height: 500px;
    background: #1A5DAC;
    opacity: 0.08;
}

.why-choose-alfath .glow-purple {
    top: 40%;
    right: 10%;
    width: 450px;
    height: 450px;
    background: #8D1EA4;
    opacity: 0.06;
}

.why-choose-alfath .glow-magenta {
    bottom: -10%;
    left: 30%;
    width: 480px;
    height: 480px;
    background: #9F1850;
    opacity: 0.06;
}

/* Container */
.why-choose-container {
    position: relative;
    z-index: 2;
    max-width: 1000px; /* Clean vertical reading width */
    margin: 0 auto;
    padding: 0 4vw;
}

/* Header Typography */
.why-choose-header {
    margin-bottom: 64px;
}

.why-choose-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A5DAC;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-block;
}

.why-choose-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.05;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 18px;
    letter-spacing: 0.01em;
}

.why-choose-subheading {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    color: #A09FA3;
    max-width: 600px;
}

/* ========================================== */
/* REASONS STACK & TYPOGRAPHY ROWS            */
/* ========================================== */
.reasons-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.reason-row {
    position: relative;
    width: 100%;
    cursor: pointer;
    outline: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Thin Horizontal Divider */
.reason-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(160, 159, 163, 0.18);
    transition: background-color 0.4s ease, height 0.3s ease;
}

.reason-inner {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding: 28px 12px;
}

.reason-number {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    line-height: 1;
    color: #A09FA3;
    opacity: 0.4;
    transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    flex-shrink: 0;
}

.reason-text-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #A09FA3; /* Default inactive tone */
    transition: color 0.35s ease;
}

.reason-description {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    font-weight: 300;
    line-height: 1.5;
    color: #A09FA3;
    max-width: 680px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
}

/* ========================================== */
/* HOVER & ACTIVE REASON STATES               */
/* ========================================== */
.reason-row:hover,
.reason-row.active-reason,
.reason-row:focus-visible {
    transform: scale(1.01); /* Very subtle scaling */
}

.reason-row:hover .reason-title,
.reason-row.active-reason .reason-title {
    color: #FFFFFF; /* Title becomes bright white */
}

.reason-row:hover .reason-number,
.reason-row.active-reason .reason-number {
    opacity: 1;
    transform: scale(1.05);
}

.reason-row:hover .reason-description,
.reason-row.active-reason .reason-description {
    opacity: 1;
    max-height: 80px; /* Smooth description fade-in */
    transform: translateY(0);
}

/* Accent Color Overrides for Number and Divider */
.reason-row[data-accent="blue"]:hover .reason-number,
.reason-row[data-accent="blue"].active-reason .reason-number {
    color: #1A5DAC;
}
.reason-row[data-accent="blue"]:hover .reason-divider,
.reason-row[data-accent="blue"].active-reason .reason-divider {
    background-color: #1A5DAC;
    height: 2px;
}

.reason-row[data-accent="purple"]:hover .reason-number,
.reason-row[data-accent="purple"].active-reason .reason-number {
    color: #8D1EA4;
}
.reason-row[data-accent="purple"]:hover .reason-divider,
.reason-row[data-accent="purple"].active-reason .reason-divider {
    background-color: #8D1EA4;
    height: 2px;
}

.reason-row[data-accent="magenta"]:hover .reason-number,
.reason-row[data-accent="magenta"].active-reason .reason-number {
    color: #9F1850;
}
.reason-row[data-accent="magenta"]:hover .reason-divider,
.reason-row[data-accent="magenta"].active-reason .reason-divider {
    background-color: #9F1850;
    height: 2px;
}

/* ========================================== */
/* SECTION BUTTON & SPACING                   */
/* ========================================== */
.why-choose-cta {
    margin-top: 56px; /* 40px-60px separation from last reason item */
    display: flex;
    justify-content: flex-start;
}

.btn-why-services {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #1A5DAC;
    text-decoration: none;
    padding: 16px 38px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 6px 20px rgba(26, 93, 172, 0.28);
}

.btn-why-services .btn-arrow {
    transition: transform 0.3s ease;
}

.btn-why-services:hover {
    background-color: #236bc2; /* Slightly lighter blue */
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(26, 93, 172, 0.4);
}

.btn-why-services:hover .btn-arrow {
    transform: translateX(6px);
}

/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */

/* Tablets */
@media (max-width: 900px) {
    .why-choose-alfath {
        padding: 90px 0;
    }

    .why-choose-header {
        margin-bottom: 48px;
    }

    .reason-inner {
        gap: 24px;
        padding: 22px 8px;
    }

    .why-choose-cta {
        margin-top: 48px;
    }
}

/* Mobile Devices */
@media (max-width: 600px) {
    .why-choose-alfath {
        padding: 70px 0;
    }

    .why-choose-container {
        text-align: center;
    }

    .why-choose-header {
        margin-bottom: 36px;
    }

    .why-choose-subheading {
        margin: 0 auto;
    }

    .reason-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 20px 0;
    }

    .reason-description {
        max-height: 100px; /* Always easily accessible on mobile */
    }

    .why-choose-cta {
        margin-top: 40px;
        justify-content: center;
    }

    .btn-why-services {
        width: 100%;
        justify-content: center;
    }
}



/* ========================================== */
/* OUR CLIENTS SECTION (PREMIUM WHITE MARQUEE) */
/* ========================================== */
.our-clients {
    position: relative;
    width: 100%;
    /* Clean pure white background replacing grey */
    background: #FFFFFF !important;
    color: #000000;
    padding: 180px 0; /* Increased vertical padding for spaciousness */
    overflow: hidden;
    z-index: 9;
}

/* Organic Section Edge Transitions (Curves) */
.section-curve {
    position: absolute;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 4;
}

.curve-top {
    top: -1px;
    color: #080808; /* Matches the dark navy of preceding section */
}

.curve-bottom {
    bottom: -1px;
    color: #F9EFE8; /* Matches the warm cream of the CTA Section */
}

.section-curve svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Very Subtle Ambient Color Glows (5–8% Opacity) */
.clients-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.glow-top-left {
    top: -12%;
    left: -10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(26, 93, 172, 0.07) 0%, transparent 70%); /* Soft Blue Glow @ ~7% opacity */
    filter: blur(140px);
    animation: slowGlowFloatLeft 28s ease-in-out infinite alternate;
}

.glow-bottom-right {
    bottom: -12%;
    right: -10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(159, 24, 80, 0.06) 0%, transparent 70%); /* Soft Magenta Glow @ ~6% opacity */
    filter: blur(140px);
    animation: slowGlowFloatRight 30s ease-in-out infinite alternate;
}

@keyframes slowGlowFloatLeft {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 30px); }
}

@keyframes slowGlowFloatRight {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-40px, -30px); }
}

/* Container */
.clients-container {
    position: relative;
    z-index: 3;
    max-width: 1440px;
    margin: 0 auto;
}

/* Header */
.clients-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 80px auto;
    padding: 0 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.clients-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A5DAC;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-block;
}

.clients-heading {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: clamp(2.5rem, 4.2vw, 4.5rem);
    line-height: 1.05;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 18px;
    letter-spacing: 0.01em;
}

/* Thin Gradient Divider (Blue -> Purple -> Magenta @ 50% opacity) */
.clients-gradient-divider {
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, #1A5DAC 0%, #8D1EA4 50%, #9F1850 100%);
    opacity: 0.5;
    margin-bottom: 22px;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    will-change: transform;
}

.clients-subheading {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1rem, 1.15vw, 1.25rem);
    font-weight: 400;
    line-height: 1.6;
    color: #444444;
    max-width: 650px;
}

/* ========================================== */
/* DUAL MARQUEE CAROUSEL CANVAS               */
/* ========================================== */
.clients-marquee-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
    overflow: hidden;
    
    /* Soft Edge Fades (Mask Gradient) */
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.marquee-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0; /* Fade entrance handled via GSAP */
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 72px; /* Balanced spacing between marquee items */
    width: max-content;
    will-change: transform;
}

/* Infinite Scrolling Keyframes */
.marquee-row.is-scrolling .track-left {
    animation: marqueeScrollLeft 32s linear infinite;
}

.marquee-row.is-scrolling .track-right {
    animation: marqueeScrollRight 32s linear infinite;
}

@keyframes marqueeScrollLeft {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes marqueeScrollRight {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* NOTE: this section used to pause each row's scroll animation on desktop
   hover (min-width: 993px). Removed — on a desktop-size screen the mouse
   is very often resting somewhere over this section while a visitor
   reads the page, which made the marquee look permanently stuck instead
   of continuously scrolling the way it does on mobile (no hover there).
   The rows now scroll continuously on every screen size. */

/* ========================================== */
/* CLIENT LOGO STYLING (WITHOUT CARDS)        */
/* ========================================== */
.client-logo-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 85px;
    padding: 12px 20px;
    cursor: default;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Clean Logo Layer directly on White Canvas */
.client-logo {
    height: 54px; /* Consistent visual height */
    width: auto;
    max-width: 150px;
    object-fit: contain;
    /* Soft elevation shadow + slight brightness & contrast boost for white BG */
    filter: brightness(1.05) contrast(1.05) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), filter 0.35s ease;
    will-change: transform, filter;
}

/* Smooth Non-Flashy Desktop Hover Interaction */
@media (min-width: 993px) {
    .client-logo-item {
        cursor: pointer;
    }

    .client-logo-item:hover .client-logo {
        transform: scale(1.04); /* Subtle scale (1.04x) */
        /* Increased brightness + slightly richer drop shadow on hover */
        filter: brightness(1.15) contrast(1.08) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.14));
    }
}

/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */

/* Tablets */
@media (max-width: 900px) {
    .our-clients {
        padding: 130px 0;
    }

    .clients-header {
        margin-bottom: 55px;
    }

    .clients-marquee-wrapper {
        gap: 36px;
    }

    .marquee-track {
        gap: 48px;
    }

    .client-logo-item {
        height: 70px;
        padding: 8px 12px;
    }

    .client-logo {
        height: 42px;
        max-width: 120px;
    }
}

/* Mobile Devices */
@media (max-width: 600px) {
    .our-clients {
        padding: 100px 0;
    }

    .clients-header {
        margin-bottom: 40px;
    }

    .clients-marquee-wrapper {
        gap: 28px;
        mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    }

    .marquee-track {
        gap: 32px;
    }

    .client-logo-item {
        height: 55px;
        padding: 6px 8px;
    }

    .client-logo {
        height: 34px;
        max-width: 95px;
        filter: brightness(1.05) contrast(1.05) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .clients-glow {
        animation: none !important;
    }
    .marquee-track {
        animation: none !important;
    }
    .marquee-row {
        opacity: 1 !important;
    }
}

/* ========================================== */
/* FINAL CALL-TO-ACTION (CTA) SECTION         */
/* ========================================== */
.final-cta {
    position: relative;
    width: 100%;
    /* Dark Premium Gradient using Official Brand Black & Deep Blue */
    background: linear-gradient(135deg, #000000 0%, #071526 50%, #1A5DAC 100%);
    color: #FFFFFF;
    padding: 120px 0;
    overflow: hidden;
    z-index: 10;
}

/* Subtle Accent Glows (Magenta & Purple @ 5-10% Opacity) */
.cta-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 1;
}

.final-cta .glow-purple {
    top: -10%;
    right: -5%;
    width: 450px;
    height: 450px;
    background: #8D1EA4;
    opacity: 0.08;
}

.final-cta .glow-magenta {
    bottom: -10%;
    left: -5%;
    width: 450px;
    height: 450px;
    background: #9F1850;
    opacity: 0.07;
}

/* Section Container */
.cta-container {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
}

/* ========================================== */
/* LEFT COLUMN: COPY & TRUST BADGES           */
/* ========================================== */
.cta-content-left {
    flex: 0 0 52%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.cta-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-block;
}

.cta-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.05;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 0.01em;
}

.cta-subheading {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 32px;
}

/* Trust Points Badges Group */
.cta-trust-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(26, 93, 172, 0.35);
    border-radius: 50px;
    width: fit-content;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(26, 93, 172, 0.25);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
}

.trust-text {
    font-family: var(--font-body);
    font-size: 0.925rem;
    font-weight: 500;
    color: #FFFFFF;
}

/* ========================================== */
/* RIGHT COLUMN: FLOATING FORM CARD           */
/* ========================================== */
.cta-form-card {
    position: relative;
    flex: 0 0 44%;
    max-width: 500px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(26, 93, 172, 0.22);
    border-radius: 24px;
    padding: 40px 36px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35),
                0 0 35px rgba(26, 93, 172, 0.12);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform, box-shadow;
}

/* Corner Glow Overlays */
.card-glow-corner {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

.glow-corner-top {
    top: -40px;
    right: -40px;
    background: rgba(141, 30, 164, 0.08);
}

.glow-corner-bottom {
    bottom: -40px;
    left: -40px;
    background: rgba(159, 24, 80, 0.06);
}

.cta-form-card:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 93, 172, 0.45);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45),
                0 0 45px rgba(26, 93, 172, 0.22);
}

.cta-form {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.form-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: #000000;
}

.label-optional {
    font-weight: 400;
    color: #A09FA3;
    font-size: 0.8rem;
}

.form-input {
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 13px 16px;
    background-color: #FFFFFF;
    border: 1px solid rgba(160, 159, 163, 0.35);
    border-radius: 10px;
    color: #000000;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Matching Textarea Styling */
.form-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
}

.form-input::placeholder {
    color: #A09FA3;
}

.form-input:focus {
    border-color: #1A5DAC;
    box-shadow: 0 0 0 4px rgba(26, 93, 172, 0.15);
}

/* Primary Button (#1A5DAC -> Darker Blue Hover) */
.btn-primary-cta {
    margin-top: 8px;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    background-color: #1A5DAC;
    border: none;
    border-radius: 12px;
    padding: 16px 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 6px 20px rgba(26, 93, 172, 0.32);
}

.btn-primary-cta .btn-arrow {
    transition: transform 0.3s ease;
}

.btn-primary-cta:hover {
    background-color: #144988;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26, 93, 172, 0.45);
}

.btn-primary-cta:hover .btn-arrow {
    transform: translateX(4px);
}

.btn-primary-cta:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Status Messages */
.form-status-msg {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
    border-radius: 8px;
    padding: 0;
    margin-top: 0;
    transition: all 0.3s ease;
}

.form-status-msg.success {
    color: #1B5E20;
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
    padding: 12px 16px;
    margin-top: 6px;
}

.form-status-msg.error {
    color: #C62828;
    background-color: #FFEBEE;
    border: 1px solid #EF9A9A;
    padding: 12px 16px;
    margin-top: 6px;
}

/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */

@media (max-width: 1024px) {
    .final-cta {
        padding: 100px 0;
    }

    .cta-container {
        gap: 3vw;
    }

    .cta-form-card {
        padding: 32px 28px;
    }
}

/* Mobile & Tablet Stacked View */
@media (max-width: 868px) {
    .final-cta {
        padding: 80px 0;
    }

    .cta-container {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    .cta-content-left,
    .cta-form-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cta-content-left {
        align-items: flex-start;
        text-align: left;
    }

    .trust-badge {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .final-cta {
        padding: 60px 0;
    }

    .cta-form-card {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .form-input {
        padding: 12px 14px;
    }

    .btn-primary-cta {
        padding: 15px 20px;
    }
}


/* ========================================== */
/* REFINED NATIONWIDE COVERAGE SECTION        */
/* ========================================== */

/* Main Section Wrapper */
.coverage-section {
    position: relative;
    width: 100%;
    background-color: #080808; /* Dark theme matching Solutions section */
    color: #FFFFFF;
    padding: 110px 0;
    overflow: hidden;
    z-index: 5;
}

/* Background Ambient Radial Glow */
.coverage-bg-glow {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(26, 93, 172, 0.22) 0%, rgba(26, 93, 172, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* Container Expanded for Maximum Feature Size */
.coverage-container {
    position: relative;
    z-index: 2;
    max-width: 1440px; /* Expanded max-width so the map can grow larger */
    margin: 0 auto;
    padding: 0 4vw;
}

/* Section Header */
.coverage-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 60px auto;
}

.coverage-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A5DAC; /* Deep Blue */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-block;
}

.coverage-heading {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.2rem, 3.8vw, 3.5rem);
    line-height: 1.15;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 18px;
    letter-spacing: 0.01em;
}

.coverage-description {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    line-height: 1.65;
    color: #A09FA3; /* Brand Grey */
}

/* Section Grid Layout - Map Occupies ~70% Width */
.coverage-layout {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr;
    gap: 30px;
    align-items: center;
}

/* ========================================== */
/* EXPANDED MAP & PINS STYLING               */
/* ========================================== */

.coverage-map-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Removed padding constraints */
}

.coverage-map-frame {
    position: relative;
    width: 100%;
    max-width: 750px; /* Scaled map frame for high visual dominance */
}

/* Subtle Blue Ambient Glow directly behind map image */
.map-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background: radial-gradient(circle, rgba(26, 93, 172, 0.35) 0%, rgba(26, 93, 172, 0) 72%);
    filter: blur(35px);
    pointer-events: none;
    z-index: 1;
}

/* Pakistan Silhouette Map Image */
.coverage-map-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* Glowing blue border outline around map border */
    filter: drop-shadow(0 0 12px rgba(26, 93, 172, 0.45)) drop-shadow(0 0 2px rgba(26, 93, 172, 0.8));
}

.coverage-pins-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* City Pins Base Style */
.city-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Default Blue Pin Dot (#1A5DAC) */
.pin-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #1A5DAC; 
    box-shadow: 0 0 10px rgba(26, 93, 172, 0.85);
    border: 2px solid #080808;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Default White Labels */
.pin-label {
    position: absolute;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.825rem;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Label Orientation Helpers (Prevents label overlap) */
.city-pin.label-right .pin-label {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.city-pin.label-left .pin-label {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.city-pin.label-bottom .pin-label {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

/* ACTIVE STATE (Karachi or Selected City) */
.city-pin.active {
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 25;
}

/* Active Pink Marker (#9F1850) with Pink Glow */
.city-pin.active .pin-dot {
    background-color: #9F1850;
    box-shadow: 0 0 18px rgba(159, 24, 80, 0.95), 0 0 6px rgba(255, 255, 255, 0.8);
    border-color: #FFFFFF;
}

/* Active Bold White Label */
.city-pin.active .pin-label {
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.875rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 8px rgba(159, 24, 80, 0.6);
}

.city-pin:hover:not(.active) {
    transform: translate(-50%, -50%) scale(1.12);
}

/* ========================================== */
/* COMPACT INFORMATION CARD STYLING          */
/* ========================================== */

.coverage-card-wrapper {
    width: 100%;
    max-width: 420px; /* Clamped width to ensure map dominates */
    justify-self: end;
}

.city-info-card {
    position: relative;
    background: rgba(18, 18, 20, 0.85); /* Dark glass background */
    backdrop-filter: blur(16px);
    border: 1px solid rgba(26, 93, 172, 0.3); /* Thin blue border */
    border-left: 4px solid #9F1850; /* Magenta vertical accent line */
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.city-info-card.is-updating {
    opacity: 0;
    transform: translateY(8px);
}

.card-tag {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: #A09FA3;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.card-city-title {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.card-description {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.65;
    color: #D1D5DB;
    margin-bottom: 24px;
    min-height: 68px;
}

.card-divider {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.card-services-title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A5DAC; /* Deep Blue Header */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.card-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.card-services-list li {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-icon {
    color: #9F1850; /* Magenta Checkmarks */
    font-weight: 700;
}

/* ========================================== */
/* RESPONSIVE BEHAVIOR                        */
/* ========================================== */

@media (max-width: 992px) {
    .coverage-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .coverage-card-wrapper {
        max-width: 100%;
        justify-self: center;
    }

    .coverage-map-frame {
        max-width: 750px;
    }
}

@media (max-width: 576px) {
    .coverage-section {
        padding: 70px 0;
    }

    .city-info-card {
        padding: 26px 22px;
    }

    .card-services-list {
        grid-template-columns: 1fr;
    }

    .pin-dot {
        width: 10px;
        height: 10px;
    }

    .pin-label {
        font-size: 0.7rem;
    }

    .city-pin.label-right .pin-label { left: 15px; }
    .city-pin.label-left .pin-label { right: 15px; }
    .city-pin.label-bottom .pin-label { top: 15px; }
}

/* ========================================== */
/* FREQUENTLY ASKED QUESTIONS (FAQ) STYLES    */
/* ========================================== */
.faq-section {
    position: relative;
    width: 100%;
    background-color: #F9EFE8; /* Company Official Cream Background */
    color: #000000;
    padding: 120px 0;
    overflow: hidden;
    z-index: 9;
}

/* Subtle Blurred Circles */
.faq-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
}

.blur-top-left {
    top: -5%;
    left: -5%;
    width: 450px;
    height: 450px;
    background: rgba(26, 93, 172, 0.08); /* Primary Blue Blur */
}

.blur-bottom-right {
    bottom: -5%;
    right: -5%;
    width: 450px;
    height: 450px;
    background: rgba(159, 24, 80, 0.06); /* Accent Magenta Blur */
}

/* Container */
.faq-container {
    position: relative;
    z-index: 2;
    max-width: 900px; /* Centered 900px Column */
    margin: 0 auto;
    padding: 0 4vw;
}

/* Header */
.faq-header {
    text-align: center;
    margin-bottom: 54px;
}

.faq-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A5DAC; /* Primary Blue */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-block;
}

.faq-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 3.8vw, 3.75rem);
    line-height: 1.1;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 18px;
    letter-spacing: 0.01em;
}

.faq-subheading {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    line-height: 1.6;
    color: #555555;
    max-width: 680px;
    margin: 0 auto;
}

/* Accordion Wrapper */
.faq-accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px; /* 18px spacing between cards */
}

/* Individual FAQ Card */
.faq-card {
    background: #FFFDF9; /* Off-White Cream Card Background */
    border: 1px solid rgba(26, 93, 172, 0.12); /* Subtle Primary Blue Border */
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.35s ease, 
                box-shadow 0.35s ease;
    will-change: transform;
}

.faq-card:hover {
    border-color: #1A5DAC; /* Primary Blue on Hover */
    transform: translateY(-3px); /* Slight lift */
    box-shadow: 0 16px 40px rgba(26, 93, 172, 0.12);
}

.faq-card.is-open {
    border-color: rgba(26, 93, 172, 0.3);
}

/* Card Clickable Trigger */
.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: left;
}

.faq-question {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 600;
    color: #000000;
    line-height: 1.45;
    transition: color 0.3s ease;
}

.faq-trigger:hover .faq-question,
.faq-card.is-open .faq-question {
    color: #1A5DAC;
}

/* Plus / Minus Expand Icon */
.faq-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(26, 93, 172, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.35s ease, transform 0.35s ease;
}

.faq-icon-plus {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 500;
    color: #1A5DAC;
    line-height: 1;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.35s ease;
}

/* Active Open Icon State */
.faq-card.is-open .faq-icon-box {
    background-color: #9F1850; /* Active Company Magenta Background */
}

.faq-card.is-open .faq-icon-plus {
    color: #FFFFFF; /* White Icon on Open */
    transform: rotate(45deg); /* Rotates '+' into '× / −' smoothly */
}

/* Collapsible Body */
.faq-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-answer-body {
    padding: 0 28px 24px 28px;
    font-family: var(--font-body);
    font-size: 0.975rem;
    font-weight: 400;
    line-height: 1.7;
    color: #444444;
}

/* ========================================== */
/* RESPONSIVE BREAKPOINTS                     */
/* ========================================== */
@media (max-width: 768px) {
    .faq-section {
        padding: 90px 0;
    }

    .faq-trigger {
        padding: 20px 22px;
    }

    .faq-answer-body {
        padding: 0 22px 20px 22px;
    }

    .faq-icon-box {
        width: 32px;
        height: 32px;
    }

    .faq-icon-plus {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding: 70px 0;
    }

    .faq-header {
        margin-bottom: 38px;
    }

    .faq-trigger {
        padding: 18px 18px;
    }

    .faq-answer-body {
        padding: 0 18px 18px 18px;
        font-size: 0.925rem;
    }
}

/* ========================================== */
/* ULTRA-WIDE / LARGE MONITORS (1600px+)      */
/* Same 1440px cap as the live production site through normal laptop and
   desktop widths. On wide/ultra-wide monitors (1920px+) that left visible
   empty space either side of every band, so the six full-width section
   containers stretch further out there. The narrower, reading-width
   containers (Why Choose ALFath, FAQ) are deliberately left alone so
   paragraph line length stays comfortable. */
@media screen and (min-width: 1600px) {
    .hero-container,
    .who-we-are-container,
    .solutions-container,
    .clients-container,
    .cta-container,
    .coverage-container {
        max-width: 1680px;
    }
}