@font-face {
    font-family: 'Matter';
    src: url('../font/Matter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Matter';
    src: url('../font/Matter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Matter';
    src: url('../font/Matter-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Radial';
    src: url('../Radial-Bold.0422ec.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

.progress,
.progress-stacked {
    height: 0.8rem;
}

/* ===== Vars ===== */
:root {
    --brand: #2353D0;
    --brand-2: #456ACB;
    --text-dark: #0b1530;
    --text-muted: #6b7692;
    --border-light: #e9eef7;
    --primary-background: #D7E2FF;
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, .06);
    --snap-threshold: 100px;

}

.radiant {
    font-family: Radial, sans-serif;
}

/* ===== Base ===== */
html,
body {

    background: var(--primary-background);
    margin: 0;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* ===== Banner & Curve ===== */
.banner {
    background: radial-gradient(at bottom center, rgba(69, 106, 203, 0.9) 37%, rgba(35, 83, 208, 0.9) 65%),
        url('../img/EXC-09.jpg') bottom/cover no-repeat;
    color: #fff;
    height: clamp(640px, 100vh, 850px);
    display: flex;
    align-items: start;
    padding-top: 7rem !important;
    position: relative;
    overflow: hidden;
}

.banner::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 250px;
    background: var(--primary-background);
    clip-path: ellipse(80% 60% at 50% 100%);
    z-index: 1;
}

h2 {
    font-size: 50px;
}

@media (max-width:768px) {
    .banner::after {
        height: 180px;
    }
}

/* ===== Enhanced Smooth Sticky Navbar ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
    transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 25px 0;
}

.navbar.scrolled {
    background: #D7E2FF;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);

    padding: 15px 0px 15px 0;
}

.navbar .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.4rem;
    transition: all 0.4s ease;
}

.navbar.scrolled .navbar-brand {
    color: var(--brand) !important;
}

.navbar .navbar-brand img {
    width: 250px;
    transition: all 0.3s ease;
}

/* .navbar.scrolled .navbar-brand img {
            filter: brightness(0) saturate(100%) invert(16%) sepia(89%) saturate(3102%) hue-rotate(216deg) brightness(93%) contrast(101%);
            width: 180px;
        } */

/* .navbar.scrolled .navbar-brand img {
            width: 180px;
        }
        .navbar.scrolled .navbar-brand .logo-default {
            display: none
        }
        .navbar .navbar-brand .logo-scrolled {
            display: none
        }
        .navbar.scrolled .navbar-brand .logo-scrolled {
            display: inline
        } */

.navbar .navbar-brand img {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    transform-origin: center center;
}

.navbar.scrolled .navbar-brand img {
    transform: scale(1);
    opacity: 0.9;
}

.navbar .navbar-brand .logo-scrolled {
    display: none;
}

.navbar.scrolled .navbar-brand .logo-default {
    display: none;
}

.navbar.scrolled .navbar-brand .logo-scrolled {
    width: 200px;
    display: inline;
}




.navbar.scrolled .contact-btn {

    font-size: 15px;
}

@media (max-width:768px) {
    .navbar .navbar-brand img {
        width: 180px;
    }

    .navbar.scrolled .navbar-brand img {
        width: 160px;
    }
}

.contact-btn {
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 500;
    letter-spacing: .5px;
    background: transparent;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.contact-btn:hover {
    background: #fff;
    color: var(--brand);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.navbar.scrolled .contact-btn {
    color: var(--brand);
    border-color: var(--brand);
    background: transparent;
}

.navbar.scrolled .contact-btn:hover {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(35, 83, 208, 0.3);
}

/* ===== Hero image (smaller on mobile) ===== */
.banner .col-md-5 img {
    width: clamp(240px, 40vw, 520px);
    height: auto;
    object-fit: contain;
}

.form-control,
.form-select {
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 14px;
    background-color: #fff;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

@media (max-width:768px) {
    .banner .col-md-5 img {
        width: 240px;
        margin-bottom: -10px;
    }
}

.banner {
    background-position: center;
}

/* ===== Product Dock Container ===== */
.product-dock-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 3;
    pointer-events: none;
}

.product-dock {
    pointer-events: auto;
    background: #fff;
    ;
    border-radius: 9999px;
    padding: 10px 56px;
    margin: 0 auto;
    max-width: 1100px;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .3s ease;
}

.product-dock:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}

/* ===== Track: 4 on desktop, 3 on large tablets, grid(2x3) on mobile ===== */
.product-link {
    text-decoration: none;
}

.product-track {
    --gap: 18px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (3 * var(--gap))) / 4);
    /* 4 visible */
    gap: var(--gap);
    padding: 8px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.product-track::-webkit-scrollbar {
    display: none;
}

/* 3 visible cards on ≤1200px */
@media (max-width:1200px) {
    .product-track {
        grid-auto-columns: calc((100% - (2 * var(--gap))) / 3);
        /* 3 visible */
    }
}

/* Mobile: show ALL 6 without horizontal scroll — 2 rows × 3 cols */
@media (max-width:768px) {
    .product-dock {
        max-width: 96%;
        padding: 12px 16px;
        border-radius: 24px;
    }

    .product-track {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 6px 0;
    }

    .dock-btn {
        display: none !important;
    }

    /* hide arrows on mobile */
}

/* Very small phones: 2 columns to keep items readable */
@media (max-width:576px) {
    .product-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Card: center icon + title, smooth hover (no movement) ===== */
.product-card {
    height: 120px;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;

    background: #fff;
    color: var(--text-dark);
    border: 3 px solid var(--brand);
    border-radius: 18px;
    box-shadow: none;

    transition:
        background-color .55s ease,
        color .55s ease,
        border-color .55s ease;
}

.product-card:hover {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.product-icon {
    font-size: 30px;
    line-height: 1;
    color: var(--brand);
    margin: 0;
    transition: color .55s ease;
}

.product-title {
    font-size: 18px;
    margin: 0;
    color: var(--text-dark);
    transition: color .55s ease;
}

.product-card:hover .product-icon,
.product-card:hover .product-title {
    color: #fff;
}

/* Compact cards on mobile so all 6 fit above the fold */
@media (max-width:768px) {
    .product-card {
        height: 92px;
        padding: 0 10px;
    }

    .product-icon {
        font-size: 22px;
    }

    .product-title {
        font-size: 14px;
    }
}

/* No movement on hover */
.product-card,
.product-card:hover {
    transform: none;
}

/* ===== Arrows (desktop/tablet only) ===== */
.dock-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
    ;
}

.dock-btn:hover {
    transform: translateY(-50%) scale(1.08);
    background-color: var(--brand-2);
    color: #fff;
    box-shadow: 0 6px 12px rgba(35, 83, 208, .2);
}

.dock-prev {
    left: 15px;
}

.dock-next {
    right: 15px;
}

/* ===== Next section demo ===== */
.next-section {
    padding: 120px 0;
}

p {
    font-size: 18px;
    color: #505665;
}



/* ===== Bubble Section (Exactly theme) ===== */
.text-brand {
    color: var(--brand);
}

.text-brand-2 {
    color: var(--brand-2);
}

.ins-bubble {
    margin: 0;
    padding-bottom: 50px;
    background: transparent;
    /* sits on your primary background */
}

.ins-bubble__container {
    max-width: 1100px;
    margin: 0 auto;
}

.ins-bubble__inner {
    position: relative;
    background: #fff;
    border-radius: 50px;
    padding: clamp(22px, 4vw, 38px);
    box-shadow: var(--shadow-soft);
}

.ins-bubble__content {
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
}

.ins-bubble__title {
    line-height: 1.15;
    margin: 0 0 14px 0;
}

.ins-bubble__lead {
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--text-dark);
    margin: 0 0 10px 0;
}

.ins-bubble__para {
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--text-muted);
    margin: 0 0 18px 0;
}

/* Buttons */
.ins-bubble__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 10px 0;
}

.btn-primary {
    background: var(--brand-2) !important;
    border-color: var(--brand-2) !important;
    color: white !important;


}

.btn-primary:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;


}


.ins-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 500;
    letter-spacing: .5px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--brand);
    border: 2px solid var(--brand);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.ins-btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);

}

/* compact on mobile */

.ins-btn--ghost {
    color: var(--brand);
    background: #fff;
    border: 2px solid var(--brand);
}

.ins-btn--ghost:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

/* Badges */
.ins-bubble__badges {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    color: var(--text-muted);
    font-size: 14px;
}

.ins-bubble__badges i {
    color: var(--brand);
    margin-right: 6px;
}

/* Tail shape under the bubble */
.ins-bubble__shape {
    display: flex;
    justify-content: center;
}

.ins-bubble__shape-svg {
    display: block;
    margin: -2px auto 0 auto;
    /* overlap bubble border slightly */
}

/* Mobile polish */

/* === 3-up grid === */
.exact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
}

@media (max-width: 992px) {
    .exact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .exact-cards {
        grid-template-columns: 1fr;
    }
}

/* === Card === */
.exact-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    background: #fff;
    border: 1px solid lightgrey;
    border-radius: 26px;
    padding: clamp(18px, 2.2vw, 28px);
    min-height: 360px;
    /* bigger height as requested */
    /*  box-shadow: 0 8px 26px rgba(0,0,0,.06);*/
    /*  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;*/
}

/*.exact-card:hover{
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0,0,0,.09);
        border-color: color-mix(in oklab, var(--brand,#2353D0), white 70%);
        }*/

.exact-card__title {
    font-weight: 800;
    margin: 10px 0 6px;
    color: var(--text-dark, #0b1530);
}

.exact-card__text {
    color: var(--text-muted, #6b7692);
    margin: 0 0 12px;
}

/* === Hero-style icon tile with curved bottom === */
.hero-icon {
    text-align: center;
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 22px;
    color: black;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    /* keep pseudo elements clipped */
}



/* a faint highlight from top-left for premium feel */
.hero-icon::before {
    content: "";
    position: absolute;
    inset: -10% -10% 40% 40%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.hero-icon i {
    font-size: 38px;
    /* bigger icon */
    line-height: 1;
}

/* Button keeps theme */
#how-we-work .btn.btn-primary {
    background: var(--brand-2, #456ACB) !important;
    border-color: var(--brand-2, #456ACB) !important;
    border-radius: 999px;
    padding: 10px 26px;
    font-weight: 600;
}

#how-we-work .btn.btn-primary:hover {
    background: var(--brand, #2353D0) !important;
    border-color: var(--brand, #2353D0) !important;
}

/* === Video Block: theme-consistent === */
.hover-video {
    background: #fff;

    will-change: transform;
}

/* image zoom on hover */
.hover-video .media-poster {

    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: scale(1);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
    will-change: transform;
}

.hover-video:hover .media-poster,
.hover-video.is-hover .media-poster {
    transform: scale(1.035);
}

/* bottom curve (kept) */
.hover-video .media-curve {
    position: absolute;
    left: 50%;
    bottom: -70px;
    transform: translateX(-50%);
    width: 140%;
    height: 160px;
    background: #fff;
    /* stays white */
    clip-path: ellipse(70% 55% at 50% 100%);
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .06));
    transition: filter .35s ease;
}

.hover-video:hover .media-curve,
.hover-video.is-hover .media-curve {
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .10));
}

.media-card {
    position: absolute;
    z-index: 2;
    top: 12%;
    left: 10%;
    width: clamp(340px, 42%, 500px);
    background: #fff;
    color: var(--text-dark);
    border-radius: 20px 120px 50px 80px;
    /* distinct, flowing asymmetric corners */
    padding: 55px 48px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

/* subtle hover lift */
.hover-video:hover .media-card {
    transform: translateY(-8px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
    border-color: color-mix(in oklab, var(--brand, #2353D0), white 70%);
}

/* typography */
.media-card__title {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
    color: black;
    text-align: left;
}

.media-card__text {
    font-size: clamp(15px, 1.1vw, 17px);
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
    margin: 0;
    max-width: 90%;
}

/* responsive */
@media (max-width: 768px) {
    .media-card {
        top: 6%;
        left: 6%;
        width: 88%;
        border-radius: 30px;
        padding: 30px 25px;
    }

    .media-card__title,
    .media-card__text {
        text-align: center;
    }
}

/* play hint (optional) */
.media-playhint {
    position: absolute;
    left: 22px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(35, 83, 208, .25);
    transition: transform .2s ease, box-shadow .2s ease, opacity .35s ease;
    z-index: 2;
}

.media-playhint i {
    font-size: 22px;
    line-height: 1;
}

.hover-video:hover .media-playhint,
.hover-video.is-hover .media-playhint {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 16px 34px rgba(35, 83, 208, .3);
}

/* responsive: keep card readable */
@media (max-width: 768px) {
    .media-card {
        max-width: 92%;
        left: 12px;
        right: 12px;
    }

    .media-card::after {
        left: 18px;
    }
}

#learn-exactly {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* === FAQ (Exactly theme) === */

#faq-exactly {
    background: white;
}

#faq-exactly .faq-card {
    background: #fff;
    border-radius: 28px;
    padding: clamp(18px, 3vw, 28px);
    position: sticky;
    top: 110px;
    /* sits under your sticky navbar nicely */
}

#faq-exactly .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#faq-exactly .faq-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    border: 0;
    padding: 16px 18px;
    background: var(--primary-background);
    /* warm, soft like the screenshot */
    color: var(--text-dark);
    border-radius: 22px;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background-color .25s ease, box-shadow .25s ease, transform .08s ease;
}

#faq-exactly .faq-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

#faq-exactly .faq-item:active {
    transform: translateY(1px);
}

#faq-exactly .faq-item.active {
    background: #fff;
    outline: 2px solid black;
}

#faq-exactly .faq-item__num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--brand);
    color: white;
    font-weight: 700;
    font-size: 14px;
}

#faq-exactly .faq-item i {
    opacity: 1 !important;
    transition: transform .25s ease, opacity .25s ease;
    color: black !important
}

#faq-exactly .faq-item.active i {
    transform: translateX(4px);
    opacity: 1;
}

#faq-exactly .notice-pill {
    border: 2px solid black;
    background: #fff;
    border-radius: 22px;
    padding: 14px 22px;
    text-align: center;
    color: var(--text-dark);
    margin-top: 80px;
}

/* subtle fade when the left text changes */
.faq-fade {
    animation: faqFade .28s ease;
}

@keyframes faqFade {
    from {
        opacity: .35;
        transform: translateY(2px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (max-width: 992px) {
    #faq-exactly .faq-card {
        position: static;
    }
}

/* === CONTACT — Polished, split background & better alignment === */
#contact {
    scroll-margin-top: 110px;
    /* avoids being hidden under sticky navbar on jump */
}

.contact-section {
    --split: 52%;
    /* how much of the section is white before brand kicks in */
    position: relative;
    padding-top: clamp(90px, 10vw, 140px);
    /* more spacing to top */
    padding-bottom: clamp(90px, 10vw, 140px);
    background:
        linear-gradient(to bottom, #fff 0 var(--split), var(--primary-background) var(--split) 100%);
}


/* the white pane that holds both columns; sits across the split */
.contact-pane {
    background: #fff;
    border-radius: 50px;
    box-shadow: var(--shadow-soft);
    padding: clamp(22px, 3vw, 34px);
    position: relative;

}

/* tidy grid spacing */
.contact-pane .row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 18px;
}

/* headline & copy alignment */
.contact-info h2 {
    margin-bottom: 10px;
}

.contact-info .lead {
    color: #30364a;
    margin-bottom: 18px;
}

/* KPI chips under the intro */
.contact-kpis {
    display: flex;
    gap: 10px 12px;
    flex-wrap: wrap;
    margin: 12px 0 8px;
}

.contact-kpis .kpi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 14px;
    color: #2d3446;
}

.contact-kpis .kpi i {
    color: var(--brand);
}

/* keep your existing form card styling, just harmonize radius/outline */
.contact-card {
    background: #fff;
    border-radius: 22px;
    padding: clamp(18px, 3vw, 26px);
}

/* Make inputs feel roomy and consistent */
.contact-card .form-control,
.contact-card .form-select {
    border-radius: 12px;
    border: 1px solid var(--border-light);
    padding: 12px 14px;
}

/* mobile polish: stack and keep margins correct */
@media (max-width: 992px) {
    .contact-pane {
        padding: 18px;
        border-radius: 24px;
    }
}

/* === Professional Focus States for Form Fields === */
.contact-card .form-control,
.contact-card .form-select {
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 14px;
    background-color: #fff;
    box-shadow: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* focus state: calm blue border + subtle inner glow */
.contact-card .form-control:focus,
.contact-card .form-select:focus {
    border-color: var(--brand);

    outline: none;
}

/* make labels react when field focused */
.contact-card .form-label {
    font-weight: 600;
    color: #0b1530;
    transition: color 0.25s ease;
}

.contact-card .form-control:focus+.form-label,
.contact-card .form-select:focus+.form-label {
    color: var(--brand);
}

/* textarea feel the same */
.contact-card textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

/* focus ring for checkbox / radio (consistent look) */
.contact-card .form-check-input:focus {
    border-color: var(--brand);
}

/* smooth placeholder fade on focus */
.contact-card .form-control::placeholder {
    color: #9ba3b6;
    transition: color 0.25s ease;
}

.contact-card .form-control:focus::placeholder {
    color: #c4c9d3;
}

.contact-card .form-control:focus,
.contact-card .form-select:focus {
    border-color: var(--brand);
    background: linear-gradient(white, #f8faff);

}

/* === CTA Final Section === */
#cta-final {
    border-radius: 0;
    padding: 120px;
}


#cta-final .btn.ins-btn {
    margin-top: 10px;
}

/* === Footer === */
#footer-exactly {
    background: var(--brand);
    color: #fff;
    border-radius: 50px 50px 0 0;
    box-shadow: var(--shadow-soft);
    font-size: 15px;
    line-height: 1.6;
    margin-top: 120px;
}

#footer-exactly h6 {
    color: #fff;
    font-weight: 700;
}

#footer-exactly p {
    color: rgba(255, 255, 255, 0.9);
}

#footer-exactly .footer-link {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color .25s ease;
    font-weight: 500;
}

#footer-exactly .footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

#footer-exactly hr {
    border-color: rgba(255, 255, 255, 0.2);
}

#footer-exactly small {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* mobile tweaks */
@media (max-width: 768px) {
    #footer-exactly {
        border-radius: 28px 28px 0 0;
    }

    #footer-exactly .footer-link {
        display: inline-block;

    }
}

@media only screen and (max-width:1000px) {
    .banner {
        padding-top: 150px;
        align-items: start;

        height: clamp(640px, 100vh, 750px);
    }

    .contact-btn {
        font-size: 12px;
        padding: 10px 18px;
    }

    .ins-bubble__inner {
        border-radius: 22px;
        padding: 18px;
    }

    .ins-btn {
        height: 40px;
        font-size: 12px;
        padding: 10px 18px;
    }

    .ins-bubble__badges {
        font-size: 12px;
    }

    .navbar.scrolled .contact-btn {
        font-size: 12px;
        padding: 10px 15px;
    }

    .navbar-brand img {
        width: 150px !important;
    }

    .display-2 {
        font-size: 30px;
    }

    p {
        font-size: 14.5px;
    }

    /* .dock-btn {
                display: none;
            } */

    .next-section {
        padding: 80px 0px;
    }

    h2 {

        font-size: 25px;
    }

    .exact-card {
        min-height: 100px;

    }

    .hover-video .media-poster {}

    .contact-section {
        padding-top: 30px !important;
        padding-bottom: 80px;
    }

    .hover-video .media-curve {
        display: none;
    }

    #learn-exactly {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hover-video .media-poster {
        height: 500px;
    }

    #footer-exactly {
        margin-top: 80px;
        padding-left: 30px;
        padding-right: 30px;

    }
}

#step-count {
    font-size: 12px;
}

.mt--5 {
    margin-top: -5px
}

.mt--2 {
    margin-top: -2px
}

.radio-wrapper-26 label {
    display: flex;
    align-items: flex-start;
    text-align: left;
    min-width: 140px;
    justify-content: space-between;
    padding-right: 11px;
    padding-top: 11px;
    padding-bottom: 11px;
    transition: all 0.2s ease;
    font-size: .875rem;
    height: 52px;
}

.radio-wrapper-26 label:not(:has(input:disabled)):hover {
    background: #f5f6f8;
}

.radio-wrapper-26 label:has(input:disabled) {
    opacity: .8;
    cursor: not-allowed;
    background: #f5f6f8;
}

.check-label:has(input:checked) {
    border-color: #2353D0;
}

.check-label:has(input:focus) {
    border-color: #2353D0;
}

.radio-wrapper-26 label .inputAndLeftText {
    display: flex;
    gap: .75em;
    align-self: center;
    align-items: center;
}

.radio-wrapper-26 label .inputAndLeftText div {
    color: rgb(55, 65, 81);
    display: flex;
    flex-direction: column;
}

.radio-wrapper-26 label .title,
.radio-wrapper-26 label .price {
    font-weight: 500;
}

.radio-wrapper-26 label .desc {
    color: rgb(107, 114, 128);
}

.radio-wrapper-26 input,
.radio-wrapper-26 label .price {
    color: rgb(3, 171, 131);
}

.radio-wrapper-26 input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 2px solid #E6E8EB;
    box-shadow: 0 1px 2px 0 #2353D0;
    border-radius: 9999px;
    width: 1rem;
    height: 1rem;
    /* margin: 2px 0 0; */
}

.radio-wrapper-26 input:checked {
    border-color: #0000;
    background-color: #2353D0;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjMiLz48L3N2Zz4=);
}


.radio-wrapper-26 input:disabled,
.radio-wrapper-26 label:has(input:disabled) .price {
    color: rgb(156, 163, 175);
}

.progress-bar {
    background-color: #2353D0;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: var(--brand);
    pointer-events: none;
    background-color: white;
    border-color: var(--brand);
    opacity: var(--bs-btn-disabled-opacity);
}

.min-vh-50 {
    min-height: 50vh
}

.product-name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--accent-color) !important;
}


.swiper-pagination-bullet-active {
    background: var(--accent-color) !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    position: absolute;
    top: auto;
    bottom: 10px;
    background: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mySwiper {
    position: relative !important;
    padding-bottom: 40px !important;
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
}

.mySwiper .swiper-button-next {
    right: 40%;
}

.mySwiper .swiper-button-prev {
    left: 40%;
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    color: #000;
    width: 30px;
    height: 30px;
}

.product-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.border-primary-2 {
    border: 2px solid #2353D0 !important;
}

.spinner-border {
    color: #2353D0;
    height: 50px;
    width: 50px
}

.loading {
    text-align: center
}

.cursor-pointer {
    cursor: pointer;
}

.multi-form {
    box-shadow: var(--shadow-soft);
    border-color: transparent;
    border-width: inherit;
}

.ti-warning {
    color: #FADB14;
}

.ti-secondary {
    color: #F0F0F0;
}

.fs-9 {
    font-size: .9rem !important
}

.fs-12 {
    font-size: 12px !important
}

.table {
    --bs-table-hover-bg: #F7F7F7;
}

.text-primary {
    color: #2353D0 !important;
}

.btn-table {
    font-size: 12px;
    border: .75px solid #D9D9D9;
    color: #575555;
    border-radius: 4px;
    padding: 3px;
    background: transparent;
    text-align: left;
    text-align: center
}

.btn-table:not(.btn-success-c):hover {
    border: .75px solid #456ACB !important;
    color: #456ACB !important;
}

.bg-primary {
    background: #2353D0 !important;
}

.btn-selection {
    font-size: 9px;
    width: 14px;
    text-align: center;
    border-radius: 50px;
    background: #2353D0 !important;
    color: white;
}

.btn-table.disabled,
.btn-table:disabled,
fieldset:disabled .btn-table {
    border: .75px solid #D9D9D9 !important;
    color: #575555 !important;
}

.btn-success-c {
    border: .75px solid #67E271 !important;
    color: #67E271 !important;
}

.btn-table-2 {
    border: 1.5px solid var(--border-light);
    color: #575555;
    background: transparent;
    text-align: left
}

.nice-select ul li {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.popover {
    max-width: 240px !important;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.popover-header {
    font-weight: 700;
    background: var(--brand);
    color: #fff;
}

.popover p {
    font-size: 14px !important;
    color: var(--text-dark);
}

.quote-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
    background: #f9f9f9;
}

.offer-card {
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    background: #f0f8ff;
}

.error-message {
    color: #dc3545;
    background: #f8d7da;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.truncate-text p {
    display: inline;
    margin-right: 5px;
}