/* ===================================================================
   GOOGLE FONT (must be at the very top)
   =================================================================== */
@import url('https://fonts.googleapis.com/css?family=STIX+Two+Text:400,500,600,700,400i,500i,600i,700i&display=swap');

/* ===================================================================
   YOUR ORIGINAL APP.CSS (kept exactly as given)
   =================================================================== */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===================================================================
   SITE DESIGN TOKENS & LIGHT UTILITIES (reusable, non-invasive)
   =================================================================== */

:root {
    /* Colors */
    --brand-teal: 0 146 150; /* #009296 */
    --brand-teal-hex: #009296;
    --accent-aqua: 72 225 220; /* #48e1dc */

    --bg-color: 255 255 255 / 1.0;
    --heading-color: 0 59 60;
    --text-color: 0 59 60;
    /* Match your global link color (#006bb7) */
    --link-color: 0 107 183;
    /* Type */
    --heading-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --heading-font-style: normal;
    --heading-font-weight: 500;
    --body-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --body-font-style: normal;
    --body-font-weight: 400;
    --body-font-size: 16;
    /* Rhythm */
    --space-unit: .4rem;
    --heading-gap: calc(8 * var(--space-unit));
    --grid-column-gap: 20px;
    --gutter-sm: 20px;
    --gutter-md: 32px;
    --gutter-lg: 64px;
    /* Fluid sizing */
    --fluid-vw: 100vw;
    --fluid-max-vw: 1536;
    --fluid-calc: (var(--fluid-vw) - 32rem) / (var(--fluid-max-vw) / 10 - 32) + .1rem;
    --fluid-1-065: ((1.065/10 - .1) * var(--fluid-calc));
    --fluid-1-125: ((1.125/10 - .1) * var(--fluid-calc));
    --fluid-1-2: ((1.2  /10 - .1) * var(--fluid-calc));
    --fluid-1-25: ((1.25 /10 - .1) * var(--fluid-calc));
    --fluid-1-3: ((1.3  /10 - .1) * var(--fluid-calc));
    --fluid-1-4: ((1.4  /10 - .1) * var(--fluid-calc));
    --fluid-1-5: ((1.5  /10 - .1) * var(--fluid-calc));
    /* Derived */
    --column-gap: var(--grid-column-gap);
    --gutter: var(--gutter-sm, 20px);
    --row-gap: calc(10 * var(--space-unit));
    --viewport-width: calc(100vw - var(--scrollbar-width, 0));
    /* Heading scale */
    --heading-type-scale: 1.2;
    --h6: calc(var(--body-font-size) + 4);
    --h5: calc(var(--h6) * var(--heading-type-scale));
    --h4: calc(var(--h5) * var(--heading-type-scale));
    --h3: calc(var(--h4) * var(--heading-type-scale));
    --h2: calc(var(--h3) * var(--heading-type-scale));
    --h1: calc(var(--h2) * var(--heading-type-scale));
    --h0: calc(var(--h1) * var(--heading-type-scale));
    --h6-font-size: calc((var(--h6)/1.065) * var(--fluid-1-065));
    --h5-font-size: calc((var(--h5)/1.125) * var(--fluid-1-125));
    --h4-font-size: calc((var(--h4)/1.2) * var(--fluid-1-2));
    --h3-font-size: calc((var(--h3)/1.3) * var(--fluid-1-3));
    --h2-font-size: calc((var(--h2)/1.4) * var(--fluid-1-4));
    --h1-font-size: calc((var(--h1)/1.5) * var(--fluid-1-5));
    --h0-font-size: calc((var(--h0)/1.5) * var(--fluid-1-5));
}

@media (min-width: 1536px) {
    :root {
        --fluid-vw: calc(var(--fluid-max-vw) * 1px);
    }
}

@media (min-width: 600px ) {
    :root {
        --column-gap: calc(var(--grid-column-gap) * 1.6);
        --gutter: var(--gutter-md, 32px);
    }
}

@media (min-width: 1280px) {
    :root {
        --gutter: var(--gutter-lg, 80px);
    }
}

/* Light utilities */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.mobile-only {
    display: none !important;
}

.mobile-hide {
    display: inline !important;
}

@media (max-width: 600px) {
    .mobile-only {
        display: inline-flex !important;
    }

    .mobile-hide {
        display: none !important;
    }
}

/* Optional site-wide container cap */
@media (min-width: 1700px) {
    .container-cap {
        max-width: 1536px;
        margin-inline: auto;
        padding-inline: var(--gutter, 32px);
    }
}

/* --Phone-- */
@media only screen and (max-width : 974px) {
    body {
        overflow-x: hidden;
    }
}

    /* ===================================================================
   SHOPIFY PROMO (two hero cards) — SCOPED
   =================================================================== */

    .shopify-promo h1, .shopify-promo h2, .shopify-promo h3,
    .shopify-promo h4, .shopify-promo h5, .shopify-promo h6 {
        font-family: "STIX Two Text", serif;
        font-weight: var(--heading-font-weight);
        font-style: var(--heading-font-style);
        text-transform: var(--heading-text-transform);
        line-height: 1.3;
    }

    .shopify-promo h2 {
        font-size: var(--h2-font-size);
    }

    @media (min-width:1024px) {
        .shopify-promo h2 {
            font-size: 60px;
            line-height: 120%;
            letter-spacing: -1.2px;
        }
    }

    .shopify-promo h1 i, .shopify-promo h2 i, .shopify-promo h3 i,
    .shopify-promo h4 i, .shopify-promo h5 i, .shopify-promo h6 i {
        color: rgb(var(--heading-alt-color, 72 225 220));
    }

    .shopify-promo .wrapper-xk3 {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        gap: 20px;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
        box-sizing: content-box;
        transform: translate3d(0,0,0);
    }

    .shopify-promo .slide-o78 {
        flex-shrink: 0;
        width: 100%;
        height: unset;
        position: relative;
        transition-property: transform;
        display: block;
    }

    .shopify-promo .column-39c {
        flex: 1 1 48%;
        background: url(https://cdn.shopify.com/s/files/1/0881/6168/1693/files/img_promo1_desktop.png?v=1755694436);
        padding: 60px 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 825px;
        box-sizing: border-box;
    }

        .shopify-promo .column-39c.rig-rwa {
            background: url(https://cdn.shopify.com/s/files/1/0881/6168/1693/files/img_promo2_desktop.png?v=1755694437) center/cover no-repeat;
        }

    .shopify-promo .column-ldt {
        margin-bottom: 25px;
        font-size: 34px;
    }

    .shopify-promo .lef-szw .column-ldt {
        max-width: 530px;
        margin: 0 auto;
    }

    .shopify-promo .column-39c.rig-rwa h2 {
        color: #fff;
        margin: 0 auto;
    }

    /* Headline accent overrides per card */
    .shopify-promo .lef-szw .column-ldt i {
        color: var(--brand-teal-hex);
    }

    .shopify-promo .column-39c.rig-rwa h2 i {
        color: #48e1dc;
    }

    /* ----------------- CTA button fixes ----------------- */
    /* Hide the arrow span by default (desktop/tablet) */
    .shopify-promo .mobile-3vc {
        display: none;
    }

    /* Base CTA: centered content, no arrow on desktop */
    .shopify-promo .column-ijj {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 24px;
        border-radius: 999px;
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 207px;
        margin: 0 auto;
        text-align: center;
        background: var(--brand-teal-hex);
        color: #fff;
        font-weight: 700;
    }

    .shopify-promo .lef-szw .column-ijj {
        width: 233px;
    }

    .shopify-promo .column-39c.rig-rwa .column-ijj {
        background: #fff;
        color: var(--brand-teal-hex);
    }

    /* Body copy (if used) */
    .shopify-promo .column-aca {
        font-size: 20px;
        margin-bottom: 45px;
    }

    .shopify-promo .column-aca-2 {
        margin-bottom: 5px;
    }

    .shopify-promo p:empty {
        display: none;
    }

    /* Responsive & mobile scroll-snap */
    @media (max-width:1260px) {
        .shopify-promo .wrapper-xk3 {
            align-items: stretch;
        }

        .shopify-promo .slide-o78 {
            display: flex;
        }
    }

    @media (max-width:1024px) {
        .shopify-promo .column-39c {
            min-height: 486px;
            padding: 40px 0;
        }
    }

    @media (max-width:768px) {
        .shopify-promo .wrapper-xk3 {
            gap: 10px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .shopify-promo .column-39c {
            justify-content: space-between;
            background-size: contain;
            background-color: #f5f2ec;
            padding: 40px 0 0 0;
            min-height: 500px;
            flex: 0 0 90%;
            min-width: 100%;
            scroll-snap-align: start;
            box-sizing: border-box;
        }

        .shopify-promo .column-39c {
            padding: 40px 10px 0 10px;
        }

            .shopify-promo .column-39c.lef-szw .column-aca {
                display: none;
            }

        /* Show the arrow and space label/arrow on mobile */
        .shopify-promo .mobile-3vc {
            display: inline-flex;
        }

        .shopify-promo .column-ijj {
            background: transparent;
            color: var(--brand-teal-hex);
            justify-content: space-between;
            font-weight: 500;
        }

        .shopify-promo .lef-szw .column-ijj {
            width: 207px;
            font-size: 20px;
            text-transform: unset;
        }

        .shopify-promo .column-39c.lef-szw .column-ijj {
            margin-bottom: 40px;
        }

        .shopify-promo .column-39c.rig-rwa .column-aca {
            display: none;
        }

        .shopify-promo .rig-rwa .column-ijj {
            color: #fff;
            width: 100%;
            margin-bottom: 40px;
            font-size: 20px;
            background: transparent;
            justify-content: space-around;
        }
    }

    /* Ultra-wide cap like Shopify */
    /*@media (min-width:1700px) {
    .shopify-promo .wrapper-xk3 {
        max-width: 1600px;
        margin-inline: auto;
        padding-inline: var(--gutter, 32px);
    }
}*/

    @media (min-width:2000px) {
        .shopify-promo .wrapper-xk3 {
            max-width: 1840px;
            margin-inline: auto;
            /*padding-inline: var(--gutter, 32px);*/
        }
    }

    /* ===================================================================
   SHOPIFY COLLECTIONS (icons/cards row) — SCOPED
   =================================================================== */

    .shopify-collections h1, .shopify-collections h2, .shopify-collections h3,
    .shopify-collections h4, .shopify-collections h5, .shopify-collections h6 {
        font-family: "STIX Two Text", serif;
        font-weight: var(--heading-font-weight);
        font-style: var(--heading-font-style);
        text-transform: var(--heading-text-transform);
        line-height: 1.3;
    }

    .shopify-collections h2 {
        font-size: var(--h2-font-size);
    }

    @media (min-width:1024px) {
        .shopify-collections h2 {
            font-size: 60px;
            line-height: 120%;
            letter-spacing: -1.2px;
        }
    }
    /* Accent <i> */
    .shopify-collections h1 i, .shopify-collections h2 i, .shopify-collections h3 i,
    .shopify-collections h4 i, .shopify-collections h5 i, .shopify-collections h6 i {
        color: rgb(var(--heading-alt-color, 72 225 220));
    }

    .shopify-collections .wrapper-t4w {
        text-align: center;
        padding: 0 20px;
        position: relative;
        padding-bottom: 60px;
    }

        .shopify-collections .wrapper-t4w::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            width: 80%;
            height: 1px;
            background: #D9E2E2;
        }

    .shopify-collections .circle-fq6 {
        line-height: 110% !important;
        letter-spacing: -2% !important;
        margin: 0 auto 20px;
        font-size: 54px;
        margin-bottom: 45px;
    }

        .shopify-collections .circle-fq6 i {
            color: var(--brand-teal-hex);
        }

    .shopify-collections .text-ssw {
        font-size: 20px;
        margin-bottom: 45px;
        margin: 0 auto 60px;
    }

    /* Grid list */
    .shopify-collections .grid-8j2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .shopify-collections .grid-8j2 li {
            width: 250px;
        }

    .shopify-collections .rel-ai1 {
        position: relative;
    }

    .shopify-collections .fle-ovk {
        display: flex;
    }

    .shopify-collections .col-zwo {
        flex-direction: column;
    }

    .shopify-collections .card-1o3 {
        flex-direction: column;
        max-width: 768px;
        margin: 0 auto;
        gap: 30px;
    }

    .shopify-collections .text-xpq {
        text-align: center;
    }

    .shopify-collections .card-axp {
        padding-top: calc(4 * var(--space-unit));
    }

    /* ---- MEDIA CONTAINER & IMAGE FIXES ---- */
    .shopify-collections .media-ni2 {
        position: relative;
        display: block;
        overflow: hidden;
        background-color: var(--coll-card-bg-color, #f7f5ef);
    }
    /* Default tile shape (non-circular): gentle rounded rectangle. */
    .shopify-collections .image-tqm {
        display: block;
        aspect-ratio: 1 / 1;
        background-color: var(--blend-bg-color, #f6f2ec) !important;
        border-radius: 12px; /* overridden by circle variant below */
    }
    /* Absolutely place the image and show it fully */
    .shopify-collections .img-5xe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* ----- CIRCLE VARIANT (no tan squares) ----- */
    .shopify-collections .media-dif .media-ni2,
    .shopify-collections .media-dif .image-tqm {
        border-radius: 50% !important;
        background-color: transparent !important;
    }

    /* Hover effects (desktop only) */
    @media (hover:hover) and (pointer:fine) {
        .shopify-collections .media-6gi .media-8cs {
            overflow: hidden;
        }

        .shopify-collections .media-6gi .media-ni2 {
            transition: transform .4s cubic-bezier(.38,.41,.27,1), border-color .4s;
            will-change: transform;
        }

        .shopify-collections .media-6gi:hover .media-ni2 {
            transform: scale(1.03);
            border-color: transparent;
        }
    }

    /* Text link sizing */
    .shopify-collections .custom-collections-list a {
        font-size: 20px;
    }

    .shopify-collections .title-sop a {
        color: #003B3C;
        text-align: center;
        font-family: "STIX Two Text";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 22px */
        letter-spacing: -0.2px;
    }

    .shopify-collections .joqoe {
        margin: 0 0 .5em;
        color: rgb(var(--heading-color));
        font-family: "STIX Two Text", var(--heading-font-family), serif;
        font-weight: var(--heading-font-weight);
        line-height: 1.4;
        font-size: var(--h6-font-size);
    }

    /* Responsive for collections */
    @media (max-width:1190px) {
        .shopify-collections .wrapper-t4w {
            padding: 0;
        }

        .shopify-collections .grid-8j2 {
            flex-wrap: nowrap;
            scroll-snap-type: x mandatory;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 35px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

            .shopify-collections .grid-8j2::-webkit-scrollbar {
                display: none;
            }

        .shopify-collections .card-1o3 {
            gap: 20px;
        }

        .shopify-collections .custom-collections-list a {
            font-size: 16px;
        }
    }

    @media (max-width:1024px) {
        .shopify-collections .text-ssw {
            text-align: center;
        }

        .shopify-collections .grid-8j2 {
            justify-content: center;
            margin-right: 0;
        }

            .shopify-collections .grid-8j2 li {
                width: 140px;
            }
    }

    @media (max-width:1280px) {
        .shopify-collections .circle-fq6 {
            font-size: 54px;
        }
    }

    @media (max-width:1219px) {
        .shopify-collections .circle-fq6 {
            font-size: 48px;
            margin-bottom: 45px;
        }
    }

    @media (max-width:1141px) {
        .shopify-collections .text-ssw {
            font-size: 16px;
        }
    }

    @media (max-width:1024px) {
        .shopify-collections .circle-fq6 {
            font-size: 32px !important;
            max-width: 350px;
            margin-bottom: 30px;
        }

        .shopify-collections .circle-fq6 {
            margin: 0 auto 10px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .shopify-collections .joqoe {
            font-size: 15px;
            line-height: 120%;
            letter-spacing: -.3px;
        }
    }

    @media (max-width:767px) {
        .shopify-collections .wrapper-t4w::before {
            bottom: 0;
            left: 0;
            width: 90%;
            right: 0;
            margin: 0 auto;
        }

        .shopify-collections .grid-8j2 {
            padding-left: 20px;
            padding-right: 20px;
            justify-content: left;
            margin-right: 0;
        }

        .shopify-collections .card-1o3 {
            width: 148px;
        }
    }

    @media (max-width:560px) {
        .shopify-collections .title-sop a {
            font-size: 20px;
        }
    }

    /* Keep the old inline-style padding-top trick as a fallback (safe to leave) */
    .shopify-collections #style-psBUy.style-psBUy,
    .shopify-collections #style-EW54p.style-EW54p,
    .shopify-collections #style-Y8tnP.style-Y8tnP,
    .shopify-collections #style-sMGSw.style-sMGSw,
    .shopify-collections #style-6rB4D.style-6rB4D {
        padding-top: 100%;
    }


    /* Custom spacer utility */
    .custom-spacer {
        display: block;
        width: 100%;
        height: var(--desktop-space, 120px); /* default for desktop */
        pointer-events: none; /* it's decorative */
    }

    @media (max-width: 600px) {
        .custom-spacer {
            height: var(--mobile-space, var(--desktop-space, 60px)); /* mobile fallback */
        }
    }

    /* ==============================
   Collections section (wrapper-t4w)
   ============================== */

    .wrapper-t4w {
        /* a little narrower than before so circles never feel huge */
        max-width: min(1840px, 92vw);
        margin: 0 auto;
    }

        /* Base grid container */
        .wrapper-t4w .grid-8j2 {
            --g: clamp(10px, 1.6vw, 22px); /* smaller gap overall */
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Circle media shell */
        .wrapper-t4w .media-8cs,
        .wrapper-t4w .image-tqm,
        .wrapper-t4w .media-dif .media-ni2 {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            overflow: hidden;
            background: var(--coll-card-bg-color, transparent);
        }

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

        /* Titles under circles: smaller & responsive */
        .wrapper-t4w .title-sop,
        .wrapper-t4w .title-sop a,
        .wrapper-t4w .joqoe {
            font-size: 20px;
            line-height: 1.25;
            letter-spacing: -0.2px;
            font-weight: 500;
            text-align: center;
            margin-top: 10px;
        }

    /* ---------- Tablet & up: 5 equal columns, scale only (no wrap) ---------- */
    @media (min-width: 600px) {
        .wrapper-t4w .grid-8j2 {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: var(--g);
            padding-inline: clamp(6px, 1.4vw, 14px);
            box-sizing: border-box;
        }

            .wrapper-t4w .grid-8j2 > li {
                min-width: 0; /* allows tracks to shrink safely */
            }
    }

    /* ---------- Phones: swipe horizontally, one card per “page” ---------- */
    @media (max-width: 599px) {
        .wrapper-t4w .grid-8j2 {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: clamp(12px, 4vw, 18px);
            padding: 0 12px 12px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
        }

            .wrapper-t4w .grid-8j2::-webkit-scrollbar {
                display: none;
            }
            /* WebKit */

            .wrapper-t4w .grid-8j2 > li {
                flex: 0 0 86%;
                max-width: none;
                scroll-snap-align: center;
                min-width: 0;
            }
    }

    /* --- FIX: stop overlap in Collections (wrapper-t4w) --- */
    /* Kill any legacy fixed widths and let items shrink with the grid */
    .wrapper-t4w .grid-8j2 > li,
    .wrapper-t4w .card-1o3 {
        width: auto !important;
        min-width: 0 !important; /* allow shrinking inside small grid tracks */
        flex: 1 1 auto;
    }

    /* Desktop/tablet: exactly 5 equal columns that just scale (no wrap, no overlap) */
    @media (min-width: 600px) {
        .wrapper-t4w .grid-8j2 {
            --g: clamp(10px, 1.6vw, 22px);
            display: grid !important; /* beat any old flex rule */
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: var(--g);
            padding-inline: clamp(6px, 1.4vw, 14px);
            box-sizing: border-box;
            overflow: visible;
        }
    }

    /* Phones: swipe one at a time (keep your carousel behavior) */
    @media (max-width: 599px) {
        .wrapper-t4w .grid-8j2 {
            display: flex !important;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            gap: clamp(12px, 4vw, 18px);
            padding: 0 12px 12px;
        }

            .wrapper-t4w .grid-8j2 > li {
                flex: 0 0 86%;
                max-width: none;
                scroll-snap-align: center;
            }
    }

    /* Ensure circles stay inside their slot */
    .wrapper-t4w .media-8cs,
    .wrapper-t4w .image-tqm,
    .wrapper-t4w .media-dif .media-ni2 {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        overflow: hidden;
    }

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



    /* FOR THE TOP SECTION OF THE HOMEPAGE*/

    .text-dz9 {
        text-align: center;
    }

    @media all {
        .overlay-pl7 {
            position: relative;
            z-index: 2;
            max-width: 100%;
            border-radius: var(--overlay-border-radius, 0);
            color: rgb(var(--text-color));
        }
    }

    @media (min-width: 600px) {
        .overlay-pl7 {
            max-width: 582px;
        }
    }

    @media (min-width: 769px) {
        .overlay-pl7 {
            max-width: 65%;
        }

        .overlay-pl7 {
            margin-right: 0;
            margin-left: 0;
        }
    }

    @media (min-width: 1024px) {
        .overlay-pl7 {
            max-width: 50%;
        }
    }

    .overlay-pl7 {
        position: relative;
        z-index: 2;
        max-width: 100%;
        border-radius: var(--overlay-border-radius, 0);
        color: rgb(var(--text-color));
    }

    @media all {
        .overlay-pl7 {
            margin-bottom: var(--ctrl-bottom);
            transform: translateY(30px);
            opacity: 0;
        }

        .overlay-pl7 {
            transform: translateY(0);
            transition: var(--transition-in, transform 1s cubic-bezier(.165, .84, .44, 1), opacity .7s ease-out .3s);
            opacity: 1;
        }
    }

    .overlay-pl7 {
        margin-bottom: var(--ctrl-bottom);
        transform: translateY(30px);
        opacity: 0;
    }

    .overlay-pl7 {
        transform: translateY(0);
        transition: var(--transition-in, transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.7s ease-out 0.3s);
        opacity: 1;
    }


    .text-dz9 {
        text-align: center;
    }

    @media all {
        .overlay-o19 {
            max-width: 100%;
            margin-bottom: calc(4 * var(--space-unit));
        }
    }

    .overlay-o19 {
        max-width: 100%;
        margin-bottom: calc(4 * var(--space-unit));
    }

        .overlay-o19 p {
            color: #003b3c;
        }

        .overlay-o19 p {
            font-size: 20px;
        }

    @media (max-width: 1024px) {
        .overlay-4pt {
            font-size: 32px;
        }

        .overlay-o19.thsap.text-5fs {
            display: none;
        }

        .overlay-o19 p {
            font-size: 16px;
        }
    }


    .overlay-4pt {
        font-size: 54px;
    }

    .overlay-4pt {
        color: rgb(var(--heading-color));
    }

    .overlay-4pt {
        color: #003b3c;
    }

        .overlay-4pt i {
            color: #009296;
        }

    @media (max-width: 1440px) {
        .overlay-4pt {
            font-size: 48px;
        }
    }

    h2, .jypag {
        margin: 0 0 .5em;
        color: rgb(var(--heading-color));
        font-family: var(--heading-font-family);
        font-style: var(--heading-font-style);
        font-weight: var(--heading-font-weight);
        line-height: calc(4px + 2.4ex);
        text-transform: var(--heading-text-transform);
    }

    h2, .jypag {
        font-size: var(--h2-font-size);
        line-height: 1.3;
    }

    h2, .jypag {
        font-family: STIX Two Text,serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }

    @media (min-width: 1024px) {
        h2, .jypag {
            font-size: 60px;
            line-height: 120%;
            letter-spacing: -1.2px;
        }
    }

    /*SECTION FOR MIDDLE VIDEO HOME PAGE*/
    @import url('https://fonts.googleapis.com/css?family=STIX+Two+Text:400,500,600,700,400i,500i,600i,700i&display=swap');

    @font-face {
        font-family: 'STIXTwoText';
    }



    .section-2yl {
        position: relative;
        display: flex;
        align-items: center;
        padding: 70px 0px 70px 0px;
        background-size: cover;
        background-position: center;
    }

    *, :before, :after {
        box-sizing: border-box;
    }

    .hero-left-content-video .section-2yl::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: #F6F2EC;
    }

    .content-fsz {
        position: relative;
        z-index: 2;
        width: 95vw;
        max-width: 1840px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    @media (max-width: 1560px) {
        .content-fsz {
            width: 95vw;
        }
    }

    .content-msq {
        flex: 1;
        min-width: 300px;
        padding-right: 2rem;
    }

    .desktop-3r8 {
        display: block;
    }

    .content-ppf {
        flex: 1;
        min-width: 180px;
        display: flex;
        justify-content: right;
        display: inline-block;
    }

    h1 {
        font-family: 'STIXTwoText', serif;
        font-weight: 400;
    }

    h1 {
        margin: 0 0 .5em;
        color: rgb(var(--heading-color));
        font-family: var(--heading-font-family);
        font-style: var(--heading-font-style);
        font-weight: var(--heading-font-weight);
        line-height: calc(4px + 2.4ex);
        text-transform: var(--heading-text-transform);
    }

    h1 {
        font-size: var(--h1-font-size);
        line-height: 1.25;
    }

    h1 {
        font-family: STIX Two Text,serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }

    @media (min-width: 1024px) {
        h1 {
            font-size: 80px;
            line-height: 120%;
            letter-spacing: -1.6px;
        }
    }

    .big-avi {
        line-height: 110% !important;
        letter-spacing: -2% !important;
    }

    .big-avi {
        margin-bottom: 45px;
    }

    .big-avi {
        font-size: 54px;
    }

    .big-avi {
        max-width: 530px;
        line-height: 1.2;
    }

    .content-ppf.mobile-2fg {
        display: none;
    }

    .text-22p {
        font-size: 34px;
        margin-bottom: 20px;
        max-width: 530px;
    }

    img {
        max-width: 100%;
        height: auto;
        vertical-align: top;
    }

    .image-dax {
        max-width: 350px;
        width: 321px;
        margin-bottom: 35px;
    }

    p {
        margin: 0 0 1em;
    }

    .text-nyb {
        font-size: .875em;
    }

    .text-nyb {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .section-ahc {
        position: relative;
        max-width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    h1 i {
        color: rgb(var(--heading-alt-color));
    }

    .big-avi i {
        color: #009296;
    }

    .text-22p p {
        margin: 0px;
    }

    .container-q5l {
        width: 790px;
        height: 910px;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        max-width: 100%;
    }

    .container-q5l {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        background-color: #000;
        overflow: hidden;
    }

    @media (max-width: 1679px) and (min-width: 1440px) {
        .container-q5l {
            height: calc(770px + (140 * (100vw - 1440px) / 240));
            width: auto;
        }
    }

    .video-xzq {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        display: block;
        object-position: right;
    }

    .video-41h {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .container-q5l video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
    }

    button {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font-family: inherit;
        font-size: 1em;
        text-decoration: none;
        text-shadow: none;
        cursor: pointer;
    }

    .button-mde {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 2;
        color: #fff;
    }

    .icon {
        vertical-align: top;
        pointer-events: none;
    }

    @media (max-width: 768px) {
        .section-2yl {
            min-height: unset;
            padding: 80px 0px 45px 0px;
        }

        .section-2yl {
            min-height: auto;
        }

        .content-msq {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .content-msq {
            padding-right: 0;
            margin-bottom: 2rem;
        }

        .content-ppf.desktop-3r8 {
            display: none;
        }

        .content-ppf {
            margin-top: 40px;
            margin-bottom: 40px;
        }

        .content-ppf {
            margin-bottom: 20px;
        }
    }

    @media (max-width: 1219px) {
        .big-avi {
            font-size: 48px;
            margin-bottom: 45px;
        }
    }

    @media (max-width: 1024px) {
        .big-avi {
            margin-bottom: 30px;
        }

        .big-avi {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }
    }

    @media (max-width: 1280px) {
        .big-avi {
            font-size: 48px;
        }
    }

    @media (max-width: 1024px) {
        .big-avi {
            font-size: 32px !important;
            line-height: 42px;
            max-width: 350px;
        }
    }

    @media (max-width: 768px) {
        .big-avi {
            text-align: center;
        }

        .big-avi {
            margin-bottom: 0px;
        }

        .big-avi {
            padding-left: 40px;
            padding-right: 40px;
        }

        .content-ppf.mobile-2fg {
            display: block;
        }
    }

    @media (max-width: 1024px) {
        .text-22p {
            font-size: 20px !important;
        }
    }

    @media (max-width: 1280px) {
        .text-22p {
            font-size: 30px;
        }
    }

    @media (max-width: 1141px) {
        .text-22p {
            font-size: 24px;
        }
    }

    @media (max-width: 1024px) {
        .text-22p {
            font-size: 20px;
        }

        .text-22p {
            max-width: 370px;
        }
    }

    @media (max-width: 768px) {
        .text-22p {
            margin-bottom: 0px;
        }
    }

    @media (max-width: 1024px) {
        .image-dax {
            max-width: 210px !important;
            margin-bottom: 30px !important;
        }

        .image-dax {
            width: 250px;
            margin-bottom: 20px;
        }

        .text-nyb {
            font-size: 16px !important;
        }
    }

    @media (max-width: 1280px) {
        .text-nyb {
            font-size: 16px;
        }
    }

    @media (max-width: 768px) {
        .text-nyb {
            margin-bottom: 0px;
        }

        .text-22p p {
            text-align: center;
        }

        .text-22p p {
            padding-right: 20px;
            padding-left: 20px;
        }
    }

    @media (max-width: 1024px) {
        .container-q5l {
            height: 530px;
        }
    }

    @media (max-width: 768px) {
        .container-q5l {
            width: 90vw;
            height: 405px;
            max-width: 100%;
        }
    }


    #style-Ajef6.style-Ajef6 {
        background-color: #f6f2ec;
    }


    /*Phact Section on Homepage*/

    .wrapper-bih {
        display: flex;
        position: relative;
        margin: 0 auto;
        justify-content: center;
        height: 920px;
        max-width: 1840px;
    }

    @media (max-width: 1679px) and (min-width: 1440px) {
        .wrapper-bih {
            height: calc(720px + (100 * (100vw - 1440px) / 240));
        }
    }

    .split-aoi {
        min-height: 500px;
        box-sizing: border-box;
    }

    .split-aoi {
        background-color: #7ECECF;
        text-align: center;
        display: flex;
        justify-content: space-between;
        border-radius: 20px 0 0 20px;
        flex-direction: column;
        width: 50%;
    }

    .split-5vf {
        min-height: 500px;
        box-sizing: border-box;
    }

    .split-5vf {
        width: 60% !important;
    }

    .split-5vf {
        background-color: #F6F2EC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 120px 80px 120px 140px;
        border-radius: 0px 20px 20px 0px;
    }


    .split-aoi h2 {
        letter-spacing: -2% !important;
        line-height: 130% !important;
    }

    .split-aoi h2 {
        font-size: 24px;
        font-family: Inter, sans-serif;
        margin: 0 auto;
        color: #009296;
        margin-top: 60px;
        margin-bottom: 50px;
        text-transform: uppercase;
        letter-spacing: unset;
    }

    .logo-146 {
        max-width: 100px;
        margin-bottom: 50px;
    }

    .split-right-ka6 {
        line-height: 110% !important;
        letter-spacing: -2% !important;
    }

    .split-right-ka6 {
        margin-bottom: 25px;
    }

    .split-right-ka6 {
        font-size: 38px;
    }

    .text-mqm {
        font-size: 20px;
        margin-bottom: 45px;
    }

    .split-5vf p {
        margin-bottom: 60px;
        max-width: 90%;
    }

    .button-jg9 {
        display: inline-block;
        padding: 13px 0px;
        background: #009296;
        color: #fff;
        text-align: center;
        text-decoration: none;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 1px;
        width: 207px;
        margin: 0 auto;
    }

    .button-jg9 {
        margin: unset;
    }

    .image-cbx {
        max-width: 780px;
        position: relative;
        width: 100%;
        margin: auto;
        z-index: 2;
    }

    .image-cbx img {
        position: relative;
        bottom: 0;
        left: 120px;
        height: auto;
        width: 100%;
        display: block;
        top: 38px;
    }

    .split-right-ka6 i {
        color: #009296;
    }

    @media (max-width: 1024px) {
        .wrapper-bih {
            position: relative;
        }
    }

    @media (max-width: 1180px) {
        .wrapper-bih {
            height: auto;
        }
    }

    @media (max-width: 990px) {
        .wrapper-bih {
            flex-direction: column;
        }

        .wrapper-bih {
            flex-direction: column;
            height: unset;
            align-items: center;
        }
    }

    @media (max-width: 1024px) {
        .split-aoi {
            border-radius: 20px;
        }
    }

    @media (max-width: 990px) {
        .split-aoi {
            width: 100%;
            text-align: center;
            padding: 0;
            min-height: auto;
            border-radius: 20px;
            align-items: center;
            overflow: hidden;
        }
    }

    @media (max-width: 1440px) {
        .split-5vf {
            padding: 80px 80px 80px 110px;
        }
    }

    @media (max-width: 1180px) {
        .split-5vf {
            padding: 40px 20px 40px 80px;
        }
    }

    @media (max-width: 990px) {
        .split-5vf {
            width: 100%;
            text-align: center;
            padding: 30px;
        }

        .split-5vf {
            padding: 0px;
        }

        .split-5vf {
            background-color: transparent;
        }

        .split-5vf {
            padding: 60px 20px 0px 20px;
            align-items: center;
        }

        .split-5vf {
            width: 100%;
        }

        .split-5vf {
            width: unset !important;
        }
    }


    @media (max-width: 1440px) {
        .split-aoi h2 {
            font-size: 20px;
        }
    }

    @media (max-width: 1280px) {
        .split-aoi h2 {
            margin-bottom: unset;
        }

        .split-aoi h2 {
            font-size: 18px;
        }
    }

    @media (max-width: 1180px) {
        .split-aoi h2 {
            font-size: 16px;
        }
    }

    @media (max-width: 1024px) {
        .split-aoi h2 {
            font-size: 16px;
        }
    }

    @media (max-width: 990px) {
        .split-aoi h2 {
            font-size: 22px;
            max-width: 380px;
            margin-top: 50px;
        }

        .split-aoi h2 {
            font-size: 16px;
        }
    }

    @media (max-width: 490px) {
        .split-aoi h2 {
            max-width: 340px;
        }
    }

    @media (max-width: 1440px) {
        .image-cbx {
            width: 100%;
        }
    }

    @media (max-width: 1180px) {
        .image-cbx {
            width: auto;
            position: relative;
            left: unset;
        }
    }

    @media (max-width: 990px) {
        .image-cbx {
            max-width: 500px;
            position: relative;
            left: unset;
            margin-top: 25px;
        }
    }

    @media (max-width: 1440px) {
        .logo-146 {
            margin-bottom: 40px;
        }
    }

    @media (max-width: 1280px) {
        .logo-146 {
            max-width: 90px;
        }
    }

    @media (max-width: 1180px) {
        .logo-146 {
            max-width: 70px;
        }
    }

    @media (max-width: 990px) {
        .logo-146 {
            max-width: 70px;
        }
    }

    @media (max-width: 1440px) {
        .split-right-ka6 {
            margin-bottom: 35px;
        }
    }

    @media (max-width: 1024px) {
        .split-right-ka6 {
            line-height: 42px !important;
            margin-bottom: 20px !important;
        }
    }

    @media (max-width: 1280px) {
        .split-right-ka6 {
            font-size: 34px;
        }
    }

    @media (max-width: 1180px) {
        .split-right-ka6 {
            font-size: 24px;
        }

        .split-right-ka6 {
            font-size: 32px;
        }

        .split-right-ka6 {
            max-width: 530px;
        }
    }

    @media (max-width: 990px) {
        .split-right-ka6 {
            font-size: 32px;
        }

        .split-right-ka6 {
            font-size: 24px;
        }

        .split-right-ka6 {
            font-size: 32px;
            text-align: center;
        }

        .split-right-ka6 {
            max-width: 530px;
        }
    }

    @media (max-width: 1180px) {
        .text-mqm {
            max-width: 530px;
        }
    }

    @media (max-width: 990px) {
        .text-mqm {
            max-width: 530px;
        }
    }

    @media (max-width: 1440px) {
        .text-mqm {
            font-size: 18px;
        }
    }

    @media (max-width: 1141px) {
        .text-mqm {
            font-size: 16px;
        }
    }

    @media (max-width: 1024px) {
        .text-mqm {
            text-align: center;
        }

        .split-5vf p {
            margin-bottom: 30px !important;
        }
    }

    @media (max-width: 1280px) {
        .split-5vf p {
            font-size: 16px;
        }
    }

    @media (max-width: 1180px) {
        .split-5vf p {
            text-align: left;
        }
    }

    @media (max-width: 990px) {
        .split-5vf p {
            text-align: center;
        }
    }

    @media (max-width: 1024px) {
        .button-jg9 {
            width: 190px;
        }
    }

    @media (max-width: 990px) {
        .button-jg9 {
            margin: 0 auto;
        }
    }

    @media (max-width: 1780px) {
        .image-cbx img {
            top: 45px;
        }
    }

    @media (max-width: 1680px) {
        .image-cbx img {
            top: 0;
        }
    }

    @media (max-width: 1540px) {
        .image-cbx img {
            top: 0;
            left: 80px;
        }

        .wrapper-bih {
            height: 750px;
        }
    }

    @media (max-width: 1480px) {
        .image-cbx img {
            left: 80px;
        }
        .wrapper-bih {
            height: 730px;
        }
    }

    @media (max-width: 1440px) {
        .image-cbx img {
            
        }
        .wrapper-bih {
            height: 710px;
        }
    }

    @media (max-width: 1380px) {
        .image-cbx img {

        }

        .wrapper-bih {
            height: 680px;
        }
    }

    @media (max-width: 1280px) {
        .image-cbx img {
            height: 100%;
        }
        .wrapper-bih {
            height: 600px;
        }
    }

    @media (max-width: 1180px) {
        .image-cbx img {
            left: 65px;
        }
        .wrapper-bih {
            height: 550px;
        }
    }

    @media (max-width: 1080px) {
        .image-cbx img {
            
        }

        .wrapper-bih {
            height: 500px;
        }
    }

    @media (max-width: 990px) {
        .image-cbx img {
            left: 0px;
            width: 100%;
        }

        .wrapper-bih {
            flex-direction: column;
        }

        .wrapper-bih {
            flex-direction: column;
            height: unset;
            align-items: center;
        }

        .mobile-k34 {
            display: none;
        }
    }


    /*PROCAPS DIFFERENCE HOMEPAGE*/

    .procapsDif {
        color: #009296;
        text-align: center;
        font-family: Inter;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 47.6px */
        letter-spacing: -0.34px;
        padding-bottom: 50px;
    }

    .evolving {
        color: #003B3C;
        text-align: center;
        font-family: "STIX Two Text";
        font-size: 72px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 79.2px */
        letter-spacing: -1.44px;
        max-width: 960px;
    }

    .atProcaps {
        color: #003B3C;
        text-align: center;
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 28px */
        letter-spacing: -0.4px;
        max-width: 960px;
        padding: 30px 0 50px 0;
    }

    .wrapper-6bo {
        max-width: 960px;
        max-height: 528px;
        margin-left: auto;
        margin-right: auto;
        vertical-align: central;
    }

    @media only screen and (min-width : 1440px) and (max-width : 1680px) {
        .evolving {
            font-size: 54px;
        }

        .wrapper-6bo {
            max-width: 720px;
        }
    }

    @media only screen and (min-width : 974px) and (max-width : 1440px) {
        .evolving {
            font-size: 38px;
            letter-spacing: -0.76px;
        }

        .wrapper-6bo {
            max-width: 680px;
        }
    }

    /* --Phone-- */
    @media only screen and (max-width : 974px) {
        .procapsDif {
            font-size: 20px;
        }

        .evolving {
            font-size: 28px;
            letter-spacing: -0.56px;
        }

        .wrapper-6bo {
            padding: 0 20px 0 20px;
        }
    }

    /* --Tablet-- */
    @media only screen and (min-width : 768px) and (max-width : 974px) and (orientation : landscape) {
        .wrapper-6bo {
            padding: 0 50px 0 50px;
        }
    }


    /*BOTTOM VIDEO SECTION ON HOMEPAGE*/

    .videoBoxHome {
        max-width: 1300px;
        max-height: 800px;
        margin-left: auto;
        margin-right: auto;
        vertical-align: central;
    }

    .videoHome2 {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 20px;
        margin: 1.25rem 0;
        background: #000;
    }

    .videoHome2 iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    @media only screen and (min-width : 1440px) and (max-width : 1680px) {
        .videoBoxHome {
            max-width: 1060px;
            max-height: 660px;
        }
    }

    @media only screen and (min-width : 974px) and (max-width : 1440px) {
        .videoBoxHome {
            max-width: 1060px;
            max-height: 660px;
        }
    }

    /* --Phone-- */
    @media only screen and (max-width : 974px) {
        .videoBoxHome {
            padding: 0 20px 0 20px;
        }
    }

    /* --Tablet-- */
    @media only screen and (min-width : 768px) and (max-width : 974px) and (orientation : landscape) {
        .videoBoxHome {
            padding: 0 50px 0 50px;
        }
    }










    .container-1ss {
        max-width: 1680px !important;
    }

    .container-1ss {
        width: 100%;
        max-width: calc(var(--page-width, 1320px) + var(--gutter) * 2);
        margin: 0 auto;
        padding: 0 var(--gutter);
    }

    @media (min-width: 1025px) {
        .container-1ss {
            max-width: none;
            width: 100%;
            padding-left: 40px;
            padding-right: 40px;
        }
    }

    .section-e8j {
        display: block;
        width: 100%;
        margin: calc(var(--section-gap) * var(--fluid-1-5)) auto;
        padding-bottom: .02px;
    }

    .section-e8j {
        margin: 0px;
    }

    .rel-x55 {
        position: relative;
    }

    .mx-518 {
        margin-left: auto;
        margin-right: auto;
    }

    .fle-phc {
        display: flex;
    }

    .max-w-screen-aco {
        max-width: 1024px;
    }

    .col-nlw {
        flex-direction: column;
    }

    .overflow-o7v {
        overflow: hidden;
    }

    .max-w-screen-aco {
        max-width: 1125px;
    }

    .block-m1z {
        display: block;
    }

    .w-cn2 {
        width: 100%;
    }

    @media all {
        .section-ihm {
            padding-top: 56.3%;
        }

        .section-ihm {
            overflow: hidden;
        }
    }

    .section-6lo .section-ihm {
        border-radius: 14px;
    }

    .cc-animate-ozp.cc-animate-kq7 {
        max-width: 100% !important;
    }

    [data-cc-animate] {
        opacity: 0;
    }

    [data-cc-animate=""].cc-animate-kq7 {
        animation: fade-in calc(var(--aos-animate-duration, 1s) * 0.8) 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }

    .abs-1le {
        position: absolute;
    }

    .left-4od {
        left: 0;
    }

    .top-obd {
        top: 0;
    }

    .h-bgd {
        height: 100%;
    }

    @media all {
        .section-ihm .height-8vf {
            height: calc(100% - 2px);
        }
    }

    .media-tiq {
        overflow: hidden;
    }

    .overlay-am5:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    button {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font-family: inherit;
        font-size: 1em;
        text-decoration: none;
        text-shadow: none;
        cursor: pointer;
    }

    .item-rt9 {
        align-items: center;
    }

    .justify-z6c {
        justify-content: center;
    }

    @media all {
        .section-q6z {
            z-index: 1;
            color: #fff;
            cursor: pointer;
        }

        .section-q6z {
            transition: opacity .4s;
            filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
        }
    }



    .object-xiy {
        object-position: center;
    }

    [loading="lazy"] {
        transition: opacity .5s ease-out;
        opacity: 1;
    }

    .img-sm9 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .visually-8wz {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border-width: 0;
    }

    .icon {
        vertical-align: top;
        pointer-events: none;
    }

    @media all {
        .section-q6z > .icon {
            width: calc(40px + 5%);
            height: auto;
        }
    }

    @media (max-width: 1024px) {
        .container-1ss {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        #sho-a38 {
            display: none;
        }

        .section-ihm {
            margin-top: 50px;
            margin-bottom: 50px;
        }
    }


    @keyframes fade-in {
        0% {
            opacity: 0;
            opacity: 0;
        }

        100% {
            opacity: 1;
            opacity: 1;
        }
    }


    /* Fractional star rating */
    .frating {
        display: inline-flex;
        gap: 4px; /* space between stars */
        vertical-align: middle;
    }

    .frating-star {
        position: relative;
        display: inline-block;
        overflow: hidden; /* ensures the clip width respects the star box */
    }

    .frating-base {
        display: block; /* empty outline behind */
    }

    .frating-clip {
        position: absolute;
        inset: 0;
        overflow: hidden; /* clip the filled star horizontally */
    }

    .frating-fill {
        display: block; /* filled star on top, clipped by .frating-clip width */
    }

/* Default: hidden when connected */
#components-reconnect-modal {
    display: none;
}

    /* Show our indicator when there's a connection issue
   (attempting, failed, or rejected) */
    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: block;
    }

/* Tiny blinking pixel in bottom-right of viewport */
@keyframes blazor-conn-blink {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

#blazor-conn-indicator {
    position: fixed;
    width: 4px;
    height: 4px;
    bottom: 6px;
    right: 6px;
    background-color: red;
    border-radius: 1px;
    pointer-events: none;
    z-index: 10001;
    animation: blazor-conn-blink 1s infinite;
}