/* =========================================
   HOME PAGE (INDEX) STYLES
   ========================================= */

/* =========================================
   HOME PAGE HERO (BULLETPROOF LAYERING)
   ========================================= */
.home-hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    isolation: isolate; /* Forces a new, strict layering context */
    background-color: var(--color-navy); /* Instant paint while everything else loads */
    /* Static fallback photo: this is a plain CSS background-image, so the browser
       requests and paints it immediately, with zero dependency on JavaScript.
       If the slider script never runs (slow connection, JS error, disabled JS),
       this image is what visitors see, permanently, instead of a blank hero. */
    /* background-image: url('Images/landing page/loading-page.png'); */
    background-size: cover;
    background-position: center;
}

/* Four dots, centered at the bottom of the hero, showing which of
   the 4 slides is active and letting the visitor jump to any one. */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.65rem;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot:hover {
    border-color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.5);
}

.hero-dot.is-active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    width: 28px;
    border-radius: 6px;
}

@media (max-width: 640px) {
    .hero-dots { bottom: 1.1rem; }
}

/* 1. Slide stack (sits above the fallback background-image) */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Photo layer: cover-fit background image with a slow Ken Burns zoom while active */
.hero-slide-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
}

/* Slides 1-2: photo starts at normal scale and slowly zooms IN while active. */
.hero-slide.is-active.hero-zoom-in .hero-slide-img {
    animation: heroZoomIn 7s ease-out forwards;
}

/* Slides 3-4: photo starts zoomed in and slowly zooms OUT to normal scale. */
.hero-slide.is-active.hero-zoom-out .hero-slide-img {
    animation: heroZoomOut 7s ease-out forwards;
}

@keyframes heroZoomIn {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

@keyframes heroZoomOut {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}

/* Scrim so the title/sentence/CTA stay legible over any photo — some of the
   slide photos are very light, so this leans a little darker than a typical
   hero scrim would need to. */
.hero-slide-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(24, 38, 74, 0.45) 0%, rgba(24, 38, 74, 0.35) 45%, rgba(24, 38, 74, 0.72) 100%);
}

/* Title + sentence + CTA, per slide.
   Default/base layout is centered; .hero-align-left / .hero-align-right
   modifiers (below) shift specific slides to alternate the composition. */
.hero-slide-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    text-align: center;
}

/* Each piece animates in on its own, slightly after the one before it, so a
   slide's arrival reads as a small orchestrated sequence rather than one
   flat fade. Everything resets (and is ready to replay) when a slide
   deactivates, since opacity/transform live on the elements, not the slide. */
.hero-slide-title,
.hero-slide-text,
.hero-slide-cta {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-slide.is-active .hero-slide-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

.hero-slide.is-active .hero-slide-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

.hero-slide.is-active .hero-slide-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.65s;
}

.hero-slide-title {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 18px rgba(14, 23, 48, 0.45);
    margin-top: 5%;
}

.hero-slide-text {
    max-width: 46rem;
    color: var(--color-white);
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    text-shadow: 0 2px 16px rgba(14, 23, 48, 0.4);
}

.hero-slide-cta {
    display: inline-flex;
}

/* All 4 hero slides now use .hero-align-center. The .hero-align-left /
   .hero-align-right modifiers below are kept for potential future use but
   are no longer applied in the HTML. */
.hero-align-left .hero-slide-content {
    left: 5%;
    right: auto;
    align-items: flex-start;
    text-align: left;
    max-width: 40rem;
}

.hero-align-right .hero-slide-content {
    left: auto;
    right: 5%;
    align-items: flex-end;
    text-align: right;
    max-width: 40rem;
}

.hero-align-left .hero-slide-text,
.hero-align-right .hero-slide-text {
    max-width: 100%;
}

/* On narrower viewports, collapse every slide back to a centered,
   full-width layout so the sentence and button always have room. */
@media (max-width: 760px) {
    .hero-align-left .hero-slide-content,
    .hero-align-right .hero-slide-content {
        left: 0;
        right: 0;
        align-items: center;
        text-align: center;
        max-width: none;
    }

    .hero-slide-title { font-size: clamp(1.4rem, 5.5vw, 2rem); }
    .hero-slide-text { font-size: clamp(1.15rem, 4.5vw, 1.6rem); }
}

@media (max-width: 480px) {
    .hero-slide-content { padding: 0 1.25rem; gap: 1.2rem; }
    .hero-slide-cta { padding: 0.7rem 1.4rem; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-active .hero-slide-img,
    .hero-slide.is-active.hero-zoom-in .hero-slide-img,
    .hero-slide.is-active.hero-zoom-out .hero-slide-img { animation: none; }
    .hero-slide { transition: opacity 0.3s ease; }
    .hero-slide-title,
    .hero-slide-text,
    .hero-slide-cta { transition: opacity 0.3s ease; transform: none; }
}

/* =========================================
   WHO WE ARE (new intro section)
   ========================================= */
.who-we-are {
    background-color: var(--color-white);
    padding: 4.5rem 0;
}

/* The 50/50 split + stretch alignment come from the `.media-split`
   class on this element (see main.css) so the carousel column always
   matches the exact height of the text column beside it. */
.who-we-are-grid {
    gap: 3.5rem;
}

.wwa-content .desc-text {
    color: var(--color-gray);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    max-width: 560px;
}

.wwa-content .wwa-cta {
    background-color: var(--color-navy);
    color: var(--color-white);
    margin-top: 0.5rem;
}

.wwa-content .wwa-cta:hover {
    background-color: #2841a2;
    color: var(--color-white);
}

.wwa-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-blue);
    font-weight: 700;
    font-size: 0.95rem;
    transition: gap 0.3s ease, color 0.3s ease;
}

.wwa-link:hover {
    gap: 1rem;
    color: var(--color-navy);
}

/* =========================================
   WHO WE ARE — 3-IMAGE INTERACTIVE CAROUSEL
   One image centered up front; the other two
   sit behind it, offset left/right, scaled up
   ("zoomed in") and faded. Clicking a side image,
   the arrows, or a swipe rotates the stack in an
   infinite loop.
   ========================================= */
.wwa-carousel-col {
    width: 100%;
    height: 100%;
}

.wwa-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
}

/* No fixed aspect-ratio here: `align-self: stretch` lets the stage take
   its height from the carousel column, which itself stretches (via
   `.media-split` in main.css) to the full height of the text column
   beside it — so the photo box starts level with the first line of
   copy and ends level with the last. Mobile falls back to a fixed
   ratio below, since the columns stack and there's no text height
   to match at that width. */
.wwa-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    align-self: stretch;
}

.wwa-slide {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s ease,
                filter 0.6s ease,
                z-index 0s 0.3s;
    background-color: var(--color-light);
}

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

.wwa-slide[data-pos="center"] {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0) brightness(1);
    z-index: 3;
    cursor: default;
}

.wwa-slide[data-pos="left"] {
    transform: translateX(-30%) scale(1) rotate(-3.5deg);
    opacity: 0.4;
    filter: blur(1.5px) brightness(0.85);
    z-index: 1;
}

.wwa-slide[data-pos="right"] {
    transform: translateX(30%) scale(1) rotate(3.5deg);
    opacity: 0.4;
    filter: blur(1.5px) brightness(0.85);
    z-index: 1;
}

.wwa-slide[data-pos="left"]:hover,
.wwa-slide[data-pos="right"]:hover {
    opacity: 0.65;
    filter: blur(0.5px) brightness(0.95);
}

.wwa-carousel-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(40, 65, 162, 0.14);
    background-color: var(--color-white);
    color: var(--color-navy);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.wwa-carousel-nav:hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
    transform: scale(1.08);
}

.wwa-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.wwa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(40, 65, 162, 0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.wwa-dot.active {
    background-color: var(--color-blue);
    width: 22px;
    border-radius: 4px;
}

@media (max-width: 900px) {
    .who-we-are-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .wwa-content .desc-text { max-width: 100%; }
    .wwa-carousel-col { height: auto; }
    .wwa-carousel { height: auto; }
    .wwa-stage {
        max-width: 360px;
        aspect-ratio: 4 / 5;
        align-self: auto;
    }
}

@media (max-width: 480px) {
    .wwa-stage { max-width: 280px; }
    .wwa-carousel-nav { width: 38px; height: 38px; font-size: 0.85rem; }
    .wwa-slide[data-pos="left"] { transform: translateX(-30%) scale(1.1) rotate(-4deg); }
    .wwa-slide[data-pos="right"] { transform: translateX(30%) scale(1.1) rotate(4deg); }
}

/* 2. White Gradient Overlay (Sandwiched between video and text) */
.hero-white-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0.95) 100%
    );
    z-index: -1; /* Stays above the video, but below the text */
    pointer-events: none;
}

/* 3. Text Container (Forced to the absolute front) */
.home-hero .hero-container {
    position: relative;
    z-index: 10; /* MASSIVE z-index to guarantee it stays on top */
}

.hero-text-box {
    max-width: 900px;
    margin: 0 auto;
}

/* 4. Line Text (Eyebrow) Styling */
.hero-overline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px; 
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-blue, #2841a2);
    margin-bottom: 1.5rem;
}

.hero-overline::before,
.hero-overline::after {
    content: "";
    display: inline-block;
    width: 50px; 
    height: 2px; 
    background-color: var(--color-accent, #5ec8e5);
}

/* 5. Main Headline Styling */
.hero-dark-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-navy, #18264a);
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.9); 
    margin: 0;
}

.highlight-blue {
    color: var(--color-blue, #2841a2);
}

.badge {
    background: var(--color-white);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--color-light);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.badge i {
    color: var(--color-blue);
}

.badge:hover {
    transform: translateX(-5px);
    border-color: var(--color-blue);
}

/* Base Cards */
.card {
    background: var(--color-white);
    border: 2px solid #2f57d95e;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}

.card p {
    color: var(--color-gray);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    transition: color 0.4s ease;
}

.card:hover p {
    color: var(--color-navy, #18264a); /* Or use var(--color-blue) if you want it slightly lighter */
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: rgba(40, 65, 162, 0.08); 
    color: var(--color-blue); 
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0; /* Prevents the icon box from squishing */
    margin-bottom: 0; /* Removed because card-header handles spacing now */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(24, 38, 74, 0.1);
    border-color: var(--color-accent);
    color: var(--color-dark);
}

.card:hover .icon-wrapper {
    background-color: var(--color-blue);
    color: var(--color-white);
    transform: translateY(-5px) scale(1.05); 
    box-shadow: 0 10px 20px rgba(40, 65, 162, 0.2);
}

.card:hover .icon-wrapper i {
    animation: iconBounce 0.4s ease forwards;
}

@keyframes iconBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.card-link {
    color: var(--color-blue);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.card:hover .card-link {
    color: var(--color-navy);
    transform: translateX(8px);
}


/* Gray Cards (Value Section) */
.gray-card {
    background-color: var(--color-light); 
    border: none;
    position: relative;
    z-index: 1;
    overflow: hidden; 
}

.gray-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--color-navy);
    transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
}

.gray-card:hover::before {
    height: 100%;
}

.gray-card .card-icon,
.gray-card h3,
.gray-card p {
    transition: color 0.4s ease, transform 0.4s ease;
}

.gray-card:hover h3, 
.gray-card:hover p {
    color: var(--color-white);
}

.card-icon {
    font-size: 1.5rem;
    color: var(--color-blue);
    margin-bottom: 1rem;
}


.card-header {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* Space between icon and text */
    margin-bottom: 1rem;
}

.card-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-subtitle {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-gray);
    margin: 0;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 0; /* Removed because card-header handles spacing now */
    margin-top: 0;
}

/* CTA buttons inside the "What We Do" cards, each linking to its own service page */
.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-blue);
    font-weight: 700;
    font-size: 0.88rem;
    margin-top: 0.25rem;
    transition: gap 0.3s ease, color 0.3s ease;
}

.card-cta i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.card-cta:hover {
    gap: 0.85rem;
    color: var(--color-navy);
}

.card:hover .card-cta {
    color: var(--color-navy);
}

.gray-card:hover .card-icon {
    color: var(--color-accent);
    transform: translateY(-5px) scale(1.15); 
}

.value-section .gray-card:hover .card-icon {
    color: var(--color-navy);
}

/* =========================================
   INDUSTRIES + PARTNERS & REFERENCES
   (merged section — two interactive cards,
   each with a media header and a bulleted list)
   ========================================= */
.industries-partners-section {
    background-color: var(--color-light);
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.industries-partners-section .overline {
    color: var(--color-blue);
}

.industries-partners-section .section-title{
    color: var(--color-navy);
}

.industries-partners-section > .container > p {
    color: #18264a;
}

.ip-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: left;
    align-items: stretch;
}

.ip-card {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    border: 2px solid #2f57d95e;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease; display: flex;
    flex-direction: column;
}

.ip-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: #5ec8e5;
}

.ip-card-media {
    position: relative;
    height: 84px;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-light);
}

/* The reveal photo — fills the whole media box behind the caption row,
   fading in on hover instead of sliding out from beside the icon. */
.ip-media-expand {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease;
}

/* Scrim so the caption row stays legible over the photo */
.ip-media-expand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(24, 38, 74, 0.6) 0%, rgba(24, 38, 74, 0.35) 60%, rgba(24, 38, 74, 0.15) 100%);
}

.ip-card:hover .ip-media-expand {
    opacity: 1;
}

/* Icon + title row, overlaid on top of the (eventual) photo */
.ip-media-caption {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 0.9rem;
    width: 100%;
    height: 100%;
    padding: 0 1.1rem;
}

/* The small square icon — fixed size, never changes ("fits the icon's length") */
.ip-media-icon-box {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.ip-media-photo .ip-media-icon-box,
.ip-media-icon .ip-media-icon-box {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
}

.ip-media-photo .ip-media-icon-box i,
.ip-media-icon .ip-media-icon-box i {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
}

.ip-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
    transition: color 0.4s ease;
}

.ip-card:hover .ip-media-photo .ip-media-icon-box i,
.ip-card:hover .ip-media-icon .ip-media-icon-box i {
    color: var(--color-white);
}

.ip-card:hover .ip-media-photo .ip-media-icon-box,
.ip-card:hover .ip-media-icon .ip-media-icon-box {
    background: #7e8a96a4 ;
}

/* Title turns white on hover for contrast against the revealed photo */
.ip-card:hover h2 {
    color: var(--color-white);
}

.ip-list {
    margin-bottom: 1.25rem;
}

.ip-list li {
    border-bottom: 1px solid rgba(40, 65, 162, 0.15);
}

.ip-list li:last-child {
    border-bottom: none;
}

.ip-list li a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.4rem;
    color: #7e8a96;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 8px;
}

.ip-list li a i {
    width: 16px;
    text-align: center;
    color: var(--color-blue);
    font-size: 0.95rem;
}

/* Bullets no longer have their own hover state — only the card
   itself, its title, and the "Explore" button react on hover. */

.ip-read-more {
    display: inline-flex;
    align-items: center;
    color: var(--color-blue);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: auto;
    align-self: flex-start;
    padding-bottom: 3px;
    position: relative;
}

.ip-read-more-line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--color-blue);
    transform: scaleX(0.55);
    transform-origin: left;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.ip-read-more:hover {
    color: var(--color-navy);
}

.ip-read-more:hover .ip-read-more-line {
    transform: scaleX(1);
    background-color: var(--color-navy);
}

@media (max-width: 900px) {
    .ip-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

@media (max-width: 480px) {
    .ip-card { padding: 1.5rem; }
    .ip-card-media { height: 72px; }
    .ip-media-icon-box { flex-basis: 40px; width: 40px; height: 40px; }
}

/* Stats Section */
.stats {
    background-color: #18264a;
    padding: 3rem 0;
}

.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-item h2 {
    font-size: 3rem;
    color: var(--color-white);
    margin-bottom: 0.2rem;
}

.stat-item p {
    color: #f3f6fa;
    font-size: 0.9rem;
}

.stat-divider {
    width: 2px;
    height: 80px;
    background-color: #d1d5db;
}

/* Solutions Section (Dark) */
.solutions-section {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.solutions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
}

.solutions-desc {
    max-width: 400px;
    color: var(--color-gray);
    font-size: 0.9rem;
}

.dark-card {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dark-card h3 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.dark-card a {
    color: var(--color-gray);
    font-size: 0.85rem;
}

.dark-icon {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}

.dark-card:hover {
    background-color: rgba(255,255,255,0.05);
    border-color: var(--color-accent);
    transform: translateY(-5px);
}

.dark-card:hover a {
    color: var(--color-white);
}

/* =========================================
   WHY DATA CONSULT (background image)
   ========================================= */
.value-section {
    position: relative;
    background-image: url('Images/backgrounds/home_bgs/how-we-create-value.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--color-white);
}

.value-section .overline {
    color: var(--color-accent);
}

.value-section .section-title {
    color: var(--color-white);
}

.value-section .gray-card {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
}

.value-section .gray-card h3,
.value-section .gray-card p {
    color: var(--color-white);
}

.value-section .gray-card p {
    color: rgba(255, 255, 255, 0.75);
}

.value-section .gray-card::before {
    background-color: #f3f6fa;
}

.value-section .gray-card:hover h3,
.value-section .gray-card:hover p {
    color: var(--color-navy);
}

.value-section .card-icon {
    color: var(--color-accent);
}

@media (max-width: 900px) {
    .value-section { background-attachment: scroll; }

    /* Icon sits beside the title instead of stacked above it */
    .value-section .card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.85rem;
    }

    .value-section .card-icon {
        margin-bottom: 0;
        font-size: 1.4rem;
    }

    .value-section .card h3 {
        margin: 0;
        flex: 1;
    }

    /* Paragraph drops to its own full-width row below the icon+title row */
    .value-section .card p {
        flex-basis: 100%;
        margin-top: 0.6rem;
    }
}

/* =========================================
   CALL TO ACTION (ROUNDED BOX)
   Box look now lives in main.css (.cta-rounded-box,
   .cta-button-group, .btn-solid-navy) so every CTA
   across the site matches. This section only sets
   the surrounding section padding/background.
   ========================================= */
.contact-cta {
    padding: 4rem 0 4rem 0; /* Creates breathing room above the footer */
    background-color: #ffffff;
}


/* =========================================
   SERVICES & SOLUTIONS SCROLLER (COMPACT)
   ========================================= */
.services-scroller-section {
    background-color: var(--color-navy, #18264a);
    padding: 4rem 0 5rem; /* Minimized height for a compact effect */
    color: #ffffff;
    overflow: hidden; 
}

/* Split Header Layout */
.scroller-header-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
    margin-bottom: 0.4rem; /* Padding above the boxes */
}

.header-left {
    flex: 1;
}

.header-right {
    flex: 1;
    max-width: 450px;
}

.header-right p {
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.5rem 0; /* Aligns visually with the bottom of the title */
}

.scroller-overline {
    font-family: 'Inter', sans-serif;
    color: var(--color-accent, #5ec8e5);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.scroller-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

/* Carousel Container & Arrows
   The wrapper now reserves side gutters for the arrows so they never
   overlap the first/last card, on desktop or mobile. */
.scroller-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 56px; /* gutter reserved for the nav buttons */
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    flex-shrink: 0;
}

.carousel-nav-btn:hover {
    background-color: var(--color-accent, #5ec8e5);
    color: var(--color-navy, #18264a);
    border-color: var(--color-accent, #5ec8e5);
}

/* Sit inside the reserved gutter — clear of the card track on every breakpoint */
.prev-btn { left: 0; }
.next-btn { right: 0; }

/* The Track */
.scroller-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 1rem 0; /* Breathing room for box-shadows */
    width: 100%;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}
.scroller-track::-webkit-scrollbar { display: none; }

/* The Cards — sized so exactly 4 sit fully in view on desktop; each one
   snaps cleanly into place as you scroll (no half-visible cards). */
.scroller-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
    min-height: 210px;
    background-color: transparent; 
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.scroller-icon {
    font-size: 1.6rem;
    color: var(--color-accent, #5ec8e5);
    margin-bottom: 0.8rem; /* Reduced margin */
    transition: transform 0.3s ease;
}

.scroller-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem; 
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
    transition: color 0.3s ease;
}

.scroller-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #b7c0cc;
    margin: 0 0 1rem 0;
    transition: color 0.3s ease;
}

.explore-link {
    font-family: 'Inter', sans-serif;
    margin-top: auto; 
    font-size: 0.85rem;
    color: #f3f6fac8; 
    font-weight: 700;
    transition: color 0.3s ease;
}

/* Hover Effects — card turns light grey, all text turns navy blue */
.scroller-card:hover {
    background-color: var(--color-light, #f3f6fa);
    border-color: var(--color-accent, #5ec8e5);
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.scroller-card:hover .scroller-icon {
    transform: scale(1.1);
    color: var(--color-blue, #2841a2);
}

.scroller-card:hover h3 {
    color: var(--color-navy, #18264a);
}

.scroller-card:hover .scroller-desc {
    color: var(--color-navy, #18264a);
}

.scroller-card:hover .explore-link {
    color: var(--color-navy, #18264a);
}

/* Responsive */
@media (max-width: 900px) {
    .scroller-header-split {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .scroller-carousel-wrapper { padding: 0 44px; }
    .carousel-nav-btn { width: 38px; height: 38px; font-size: 0.85rem; }

    /* Exactly 2 cards fully in view */
    .scroller-card { flex: 0 0 calc((100% - 1.25rem) / 2); }
}

@media (max-width: 640px) {
    .scroller-carousel-wrapper { padding: 0 34px; }
    .carousel-nav-btn { width: 32px; height: 32px; font-size: 0.75rem; }

    /* Exactly 1 card fully in view */
    .scroller-card { flex: 0 0 100%; }
}

/* =========================================
   Final CTA — reuses main.css cta-rounded-box
   ========================================= */
/* Full-bleed band — same edge-to-edge treatment as the homepage
   statistics strip, but with the banner video running behind it
   instead of a flat navy fill. */
.home-cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-white);
    padding: 3.5rem 0;
    text-align: center;
}

.home-cta-section .cta-bg-image,
.home-cta-section .cta-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
    pointer-events: none;
}


.home-cta-section .cta-video-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
                rgba(126, 138, 150, 0.13) 0%,
                rgba(243, 246, 250, 0.58) 50%,
                rgba(126, 138, 150, 0.13) 100%);
} 

.home-cta-section .cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

/* Dark type now that the band behind it is light */
.cta-justify-heading {
    font-size: clamp(1.5rem, 2.9vw, 2.15rem) !important;
    color: var(--color-navy);
    text-align: center;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* main.css turns this button transparent-with-white-text on hover, which
   would vanish against the light band — flip it to navy instead. */
.home-cta-section .btn-solid-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.home-cta-section .btn-solid-navy:hover {
    background-color: transparent;
    color: #18264a;
    border-color: #18264a;
}

.home-cta-section .cta-button-group {
    margin: 0;
}

@media (max-width: 700px) {
    .home-cta-section { padding: 2.75rem 0; }
}


/* Footer CSS now lives sitewide in main.css (see the 3-row footer rules). */