/* This file name is site.css*/

/* ============================================================
   GLOBAL RESET & BASE    File name is Site
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fafc;
}

/* ============================================================
   SHARED COMPONENTS (eyebrow, heading, etc.)
   ============================================================ */
.sv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a488a;
    background: rgba(10, 72, 138, 0.10);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    border: 1px solid rgba(10, 72, 138, 0.08);
    backdrop-filter: blur(4px);
    margin-bottom: 1rem;
}

    .sv-eyebrow .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sv-orange, #FF6A3D);
        flex: none;
    }

.sv-heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0b1e33;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

    .sv-heading span {
        color: #0a488a;
        position: relative;
    }

        .sv-heading span::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 4px;
            width: 100%;
            height: 6px;
            background: rgba(10, 72, 138, 0.15);
            border-radius: 4px;
            z-index: -1;
        }

.sv-subhead {
    font-size: 1.1rem;
    color: #4a5b6e;
    max-width: 540px;
    margin: 0.75rem auto 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ============================================================
   WHY CHOOSE US SECTION
   ============================================================ */
.sv-choose-section {
    padding: 5rem 0;
    background: linear-gradient(145deg, #f0f4f9 0%, #e6edf5 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .sv-choose-section::before,
    .sv-choose-section::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .sv-choose-section::before {
        top: -30%;
        right: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(10, 72, 138, 0.07) 0%, transparent 70%);
    }

    .sv-choose-section::after {
        bottom: -20%;
        left: -8%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(0, 173, 181, 0.06) 0%, transparent 70%);
    }

.sv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}

.sv-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

/* ---- card grid ---- */
.sv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
}

/* ---- individual card ---- */
.sv-card {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 2rem 1.5rem 1.8rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: 0 8px 32px rgba(0, 20, 40, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.40s ease, background 0.30s ease;
    position: relative;
    cursor: default;
}

    .sv-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .sv-card:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 24px 60px rgba(10, 72, 138, 0.10), 0 8px 24px rgba(0, 0, 0, 0.04);
        background: rgba(255, 255, 255, 0.88);
    }

/* ---- icon wrapper (large for cards) ---- */
.sv-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0a488a 0%, #1a6bb0 100%);
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 8px 18px rgba(10, 72, 138, 0.20);
    transition: transform 0.40s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.sv-card:hover .sv-icon-wrap {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 12px 28px rgba(10, 72, 138, 0.30);
}

    .sv-card:hover .sv-icon-wrap i {
        animation: iconPulse 0.8s ease infinite alternate;
    }

@keyframes iconPulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

.sv-card h5 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b1e33;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.sv-card p {
    font-size: 0.92rem;
    color: #4a5b6e;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

.sv-card .sv-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a488a;
    margin-top: 1rem;
    opacity: 0.30;
    transition: opacity 0.30s ease, transform 0.30s ease;
}

.sv-card:hover .sv-dot {
    opacity: 0.80;
    transform: scale(1.4);
}

/* ============================================================
   SMALL ICON FIX (for .sv-feature, .sv-why-item)
   ============================================================ */
.sv-why-item,
.sv-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* prevents overlap */
}

.sv-why-item__icon,
.sv-feature__icon {
    flex: 0 0 44px; /* fixed width, never shrinks */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #003A66; /* primary navy */
    color: #fff;
    font-size: 1.1rem; /* small icon */
    transition: transform 0.3s ease;
}

    .sv-feature__icon.pink {
        background: #E02454; /* secondary pink */
    }

    .sv-why-item__icon:hover,
    .sv-feature__icon:hover {
        transform: scale(1.04);
    }

/* ============================================================
   HERO (modern home)
   ============================================================ */
.carousel-header .carousel-inner .carousel-item .carousel-caption.sv-hero-caption {
    background: linear-gradient(120deg, rgba(10,42,67,.82), rgba(10,42,67,.45));
    justify-content: flex-start;
    text-align: left;
}

.sv-hero-caption .container {
    width: 100%;
}

.sv-hero-card {
    max-width: 640px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 2.25rem 2.5rem;
}

.sv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    padding: .45rem 1rem;
    margin-bottom: 1.25rem;
}

.sv-hero-title {
    font-family: "Fraunces", serif;
    font-weight: 600;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

    .sv-hero-title span {
        color: var(--sv-orange, #FF6A3D);
    }

.sv-hero-text {
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    max-width: 560px;
    margin-bottom: 2rem;
}

.sv-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* scroll cue */
.sv-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: 50px;
    z-index: 5;
}

    .sv-scroll-cue span {
        position: absolute;
        top: 6px;
        left: 50%;
        width: 4px;
        height: 8px;
        background: var(--sv-orange, #FF6A3D);
        border-radius: 2px;
        transform: translateX(-50%);
        animation: sv-scroll 1.6s infinite;
    }

@keyframes sv-scroll {
    0% {
        top: 6px;
        opacity: 1;
    }

    70% {
        top: 20px;
        opacity: 0;
    }

    100% {
        top: 20px;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .sv-scroll-cue {
        display: none;
    }
}

/* floating stats bar */
.sv-hero {
    position: relative;
}

.sv-hero-stats-wrap {
    position: relative;
    z-index: 6;
    margin-top: -70px;
    
}

.sv-hero-stats {
    background: #F8F6F0;
    
    border-radius: 5px;
    border-block-color: aliceblue;
    box-shadow: 0 24px 48px -20px rgba(10,42,67,.55);
    display: flex;
    flex-wrap: wrap;
}

    .sv-hero-stats .item {
        flex: 1;
        text-align: center;
        color: #fff;
        padding: 1.75rem 1rem;
        border-right: 1px solid rgb(12 1 1 / 50%); /* White border */
    }

        /* Remove border from the last item */
        .sv-hero-stats .item:last-child {
            border-right: none;
        }

    .sv-hero-stats .num {
        font-family: "Fraunces", serif;
        font-size: 2rem;
        font-weight: 500;
        color: var(--sv-orange, #FF6A3D);
    }

    .sv-hero-stats .label {
        font-family: "IBM Plex Mono", monospace;
        font-size: .75rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .8;
        color:black;
    }

@media (max-width: 768px) {
    .sv-hero-stats .item {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .sv-hero-card {
        padding: 1.5rem 1.5rem;
    }
}

/* ============================================================
   FIX — Stats card overlapping "Welcome" CTA on mobile/tablet
   ============================================================ */
@media (max-width: 991.98px) {
    .sv-welcome .sv-hero-stats-wrap,
    .sv-welcome + .sv-hero-stats-wrap {
        margin-top: 2rem;
    }
}
/* ============================================================
   FIX — Floating stats card overlapping the Welcome section below
   (sv-hero-stats-wrap is a SIBLING before .sv-welcome, not nested)
   ============================================================ */
.sv-welcome {
    position: relative;
    z-index: 1;
}

/* Desktop/tablet: keep the floating overlap look */
@media (min-width: 768px) {
    .sv-hero-stats-wrap {
        margin-top: -70px;
    }
}

/* Mobile: card is too tall for any negative-overlap math to be safe —
   drop the overlap entirely and give clean positive spacing instead */
@media (max-width: 767.98px) {
    .sv-hero-stats-wrap {
        margin-top: 1.25rem; /* no overlap at all */
        margin-bottom: 1.25rem;
        position: relative;
        z-index: 5;
    }

    .sv-hero-stats {
        border-radius: 12px;
    }

        .sv-hero-stats .item {
            padding: 1rem .5rem;
        }

        .sv-hero-stats .num {
            font-size: 1.4rem;
        }

    .sv-welcome {
        padding-top: 3rem;
    }
}

@media (max-width: 575.98px) {
    .sv-hero-stats .item {
        flex: 1 1 50%;
    }
}

/* ============================================================
   FIX — .sv-hero-stats consolidated small-mobile rule (≤430px)
   This is the SINGLE source of truth for this breakpoint —
   duplicate rules exist in site.css (lines ~653, ~778) causing
   unpredictable cascade conflicts; this rule wins because
   About.css loads last in _Layout.
   ============================================================ */
@media (max-width: 430px) {
    .sv-hero-stats-wrap {
        margin-top: 1.25rem !important;
       /* margin-bottom: 1.25rem !important;*/
    }

    .sv-hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        border-radius: 12px !important;
        overflow: hidden;
    }

        .sv-hero-stats .item {
            border-right: 1px solid rgba(0,0,0,.08) !important;
            border-bottom: 1px solid rgba(0,0,0,.08) !important;
            padding: .9rem .4rem !important;
        }

            .sv-hero-stats .item:nth-child(2n) {
                border-right: none !important;
            }

            .sv-hero-stats .item:nth-child(3),
            .sv-hero-stats .item:nth-child(4) {
                border-bottom: none !important;
            }

        .sv-hero-stats .num {
            font-size: 1.35rem !important;
        }

        .sv-hero-stats .label {
            font-size: .62rem !important;
        }

    .sv-hero-stats-wrap {
        margin-bottom: 2rem;
    }

    .sv-welcome {
        padding-top: 3rem;
    }

}


/* ============================================================
   .sv-hero-stats — SINGLE CONSOLIDATED RESPONSIVE BLOCK
   (Desktop → Tablet → Mobile → Small Mobile)
   ============================================================ */

/* Tablet (≤991.98px) — reduce the floating overlap a bit */
@media (max-width: 991.98px) {
    .sv-hero-stats-wrap {
        margin-top: -45px;
    }

    .sv-hero-stats .item {
        padding: 1.4rem .75rem;
    }

    .sv-welcome {
        padding-top: 3.5rem;
    }
}

/* Large mobile (≤767.98px) — drop overlap entirely, clean stacked spacing */
@media (max-width: 767.98px) {
    .sv-hero-stats-wrap {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        z-index: 5;
    }

    .sv-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 12px;
        overflow: hidden;
    }

        .sv-hero-stats .item {
            border-right: 1px solid rgba(0,0,0,.08);
            border-bottom: 1px solid rgba(0,0,0,.08);
            padding: 1rem .5rem;
        }

            .sv-hero-stats .item:nth-child(2n) {
                border-right: none;
            }

            .sv-hero-stats .item:nth-child(3),
            .sv-hero-stats .item:nth-child(4) {
                border-bottom: none;
            }

        .sv-hero-stats .num {
            font-size: 1.45rem;
        }

        .sv-hero-stats .label {
            font-size: .65rem;
        }

    .sv-welcome {
        padding-top: 3rem;
    }
}

/* Small mobile (≤430px) — tighter numbers, same 2x2 grid */
@media (max-width: 430px) {
    .sv-hero-stats .item {
        padding: .9rem .4rem;
    }

    .sv-hero-stats .num {
        font-size: 1.3rem;
    }

    .sv-hero-stats .label {
        font-size: .6rem;
    }
}

/* ============================================================
   FORCE FIX — .sv-hero-stats must never overlap .sv-welcome content
   ============================================================ */
@media (max-width: 991.98px) {
    .sv-hero-stats-wrap {
        margin-top: 1.25rem !important;
        margin-bottom: 2rem !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .sv-welcome {
        padding-top: 3rem !important;
        margin-top: 0 !important;
    }

        .sv-welcome h2,
        .sv-welcome p,
        .sv-welcome__actions {
            position: relative !important;
            z-index: 2 !important;
        }
}