/* ============================================================
   Charsutra — Section headings & homepage bands
   ------------------------------------------------------------
   Loaded after style.css and qbit-bms-style.css, so it overrides
   both. No blade changes are needed: everything here targets the
   existing .title-area / .sub-title / .sec-title / .space markup
   that every section already uses, so shop, about and the rest
   inherit the same treatment.
   ============================================================ */

:root {
    --csx-navy: #0F1E33;
    --csx-navy-soft: #1B2E48;
    --csx-gold: #A9825A;
    --csx-gold-light: #C39C72;
    --csx-cream: #E9DCC8;
    --csx-line: #E7E2DA;
    --csx-muted: #6B7688;
}

/* ============================================================
   1. Breadcrumb banner
   ============================================================ */
/* The banner height does NOT come from .breadcumb-wrapper — that element
   has no padding at all. It comes from style.css:8876:

       .breadcumb-wrapper .breadcumb-content {
           --space: 100px;
           padding: calc(var(--space) + 30px) 0 var(--space);
       }

   i.e. 130px top + 100px bottom before any content, and the theme raises
   --space to 140px below 1199px, so it got TALLER on tablets. My previous
   padding rule was on the wrapper, which is why it did nothing.
   Overriding the variable is enough — the theme's own formula still
   applies, just at a sane scale. */
.breadcumb-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
}

.breadcumb-wrapper .breadcumb-content {
    --space: 40px !important;
    padding: calc(var(--space) + 18px) 0 var(--space) !important;
}

.breadcumb-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 18, 32, .74) 0%, rgba(10, 18, 32, .86) 100%);
    z-index: 0;
}

.breadcumb-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* A 60-character product name at the theme's banner size produced a
   headline taller than the banner itself. Clamped, and capped to two
   lines so the banner height never depends on the product name. */
.breadcumb-title {
    margin: 0 auto 12px !important;
    max-width: 900px;
    font-family: var(--title-font, "Playfair Display", serif);
    font-size: clamp(19px, 2.5vw, 34px) !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.4px;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.breadcumb-menu {
    margin: 10px 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcumb-menu li {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
}

.breadcumb-menu li:not(:last-child)::after {
    content: '>';
    margin: 0 9px;
    font-weight: 700;
    color: var(--csx-gold);
    opacity: .85;
}

.breadcumb-menu li a {
    color: var(--csx-gold-light);
    text-decoration: none;
    transition: color .2s ease;
}

.breadcumb-menu li a:hover { color: #fff; }

/* The trailing crumb repeats the product name — truncate it rather than
   letting it wrap under the title. */
.breadcumb-menu li:last-child {
    max-width: 46ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* The theme bumps --space to 140px here, so this override has to exist
   at the same breakpoint or the banner grows on tablets. */
@media (max-width: 1199.98px) {
    .breadcumb-wrapper .breadcumb-content {
        --space: 34px !important;
    }
}

@media (max-width: 767.98px) {
    .breadcumb-wrapper .breadcumb-content {
        --space: 22px !important;
        padding: 30px 0 22px !important;
    }

    .breadcumb-title { margin-bottom: 9px !important; }

    .breadcumb-menu {
        margin: 0 !important;
    }

    .breadcumb-menu li,
    .breadcumb-menu a,
    .breadcumb-menu span {
        font-size: 11.5px !important;
    }

    .breadcumb-menu li:last-child { max-width: 24ch; }
}

/* ============================================================
   1. Section headings
   ============================================================ */

/* The eyebrow was rendering as purple handwriting: qbit-bms-style.css
   sets --qbit-base-80 to #927FF7 and .sub-title used --caveat-font
   ("Caveat", cursive). Both are leftovers from the BMS template palette
   and had nothing to do with the Charsutra brand. It is now a small
   uppercase gold label. */
.sub-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 14px;
    font-family: var(--body-font, "Nunito Sans", sans-serif);
    font-size: 10.5px;
    font-weight: 700;
    /* wide tracking is what separates a label from body text at this size */
    letter-spacing: 3.4px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--csx-gold);
}

/* The old 60px dashed rules only disappeared where the markup happened to
   carry .before-none / .after-none, so several sections showed a naked
   "------" tail. Replaced with hairlines that fade INTO the text from both
   sides — same idea, but it frames the label instead of trailing off it.
   The .before-none / .after-none classes in the markup are overridden on
   purpose so every section gets the same frame. */
.sub-title::before,
.sub-title::after,
.sub-title.before-none::before,
.sub-title.after-none::after,
.sub-title.text-theme::before,
.sub-title.text-theme::after {
    display: block !important;
    content: '' !important;
    width: 40px;
    height: 1px;
    border: none !important;
    background: linear-gradient(90deg, transparent, var(--csx-gold)) !important;
    opacity: .8;
}

.sub-title::after,
.sub-title.after-none::after {
    background: linear-gradient(90deg, var(--csx-gold), transparent) !important;
}

/* Left-aligned blocks only get the trailing hairline */
.title-area:not(.text-center) .sub-title::before {
    display: none !important;
}

.sub-title i {
    font-size: 13px;
    color: var(--csx-gold);
}

.sec-title {
    position: relative;
    margin: 0;
    font-family: var(--title-font, "Playfair Display", serif);
    /* was a flat 35px — scales cleanly and goes noticeably larger on wide
       screens, where 35px looked timid against a 1290px container */
    font-size: clamp(25px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.8px;
    text-transform: none;
    color: var(--csx-navy);
}

/* The gold half of a two-tone heading, as brushed metal rather than flat
   gold: a vertical gradient clipped to the glyphs. */
.text-theme2 {
    background: linear-gradient(180deg, #CDA274 0%, #A9825A 52%, #85643D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

/* Older browsers with no background-clip: text keep flat gold */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .text-theme2 {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--csx-gold) !important;
    }
}

/* A very soft warm glow behind centred headings. Barely visible on its
   own — it stops the heading from sitting on flat grey. */
.title-area.text-center {
    position: relative;
}

.title-area.text-center::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    width: 420px;
    height: 170px;
    max-width: 100%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(169, 130, 90, .10) 0%,
        rgba(169, 130, 90, .04) 42%,
        transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.title-area.text-center .sub-title,
.title-area.text-center .sec-title {
    position: relative;
    z-index: 1;
}

/* --- Title block rhythm --- */
.title-area {
    margin-bottom: 34px;
}

.title-area.text-center {
    /* stops long headings from stretching the full container width */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.title-area.text-center .sub-title {
    justify-content: center;
}

/* Ornament under centred headings: a hairline that fades out from both
   sides of a small gold diamond. The diamond is an inline SVG so it stays
   crisp at any zoom and needs no icon font. A plain 3px bar was what made
   the last version read as a stock template. */
.title-area.text-center .sec-title::after {
    content: '';
    display: block;
    width: 132px;
    height: 9px;
    margin: 20px auto 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0L9 4.5 4.5 9 0 4.5z' fill='%23A9825A'/%3E%3C/svg%3E") center center / 9px 9px no-repeat,
        linear-gradient(90deg,
            transparent 0%,
            rgba(169, 130, 90, .55) 26%,
            rgba(169, 130, 90, .55) 40%,
            transparent 46%) center / 100% 1px no-repeat,
        linear-gradient(90deg,
            transparent 54%,
            rgba(169, 130, 90, .55) 60%,
            rgba(169, 130, 90, .55) 74%,
            transparent 100%) center / 100% 1px no-repeat;
}

/* Left-aligned title blocks (e.g. "Our Top Selling Products") get the
   rule on the left rather than centred. */
.title-area:not(.text-center) .sub-title {
    justify-content: flex-start;
}

/* Left-aligned headings: the same diamond, but the rule runs one way */
.title-area:not(.text-center) .sec-title::after {
    content: '';
    display: block;
    width: 96px;
    height: 9px;
    margin: 16px 0 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0L9 4.5 4.5 9 0 4.5z' fill='%23A9825A'/%3E%3C/svg%3E") left center / 9px 9px no-repeat,
        linear-gradient(90deg,
            rgba(169, 130, 90, .55) 0%,
            rgba(169, 130, 90, .55) 62%,
            transparent 100%) left center / 100% 1px no-repeat;
    background-position: left center, 16px center;
    background-size: 9px 9px, calc(100% - 16px) 1px;
}

/* Where the markup already tightens the gap, don't fight it */
.title-area.mb-4 {
    margin-bottom: 30px !important;
}

/* ============================================================
   2. Section rhythm
   ============================================================ */

/* 75px top AND bottom meant 150px of dead space between two stacked
   sections — the big empty band above the stats strip. Tightened, and
   tightened much further on phones where vertical space is scarce. */
.space,
.space-top {
    padding-top: 64px;
}

.space,
.space-bottom {
    padding-bottom: 64px;
}

@media (max-width: 991.98px) {
    .space,
    .space-top {
        padding-top: 46px;
    }

    .space,
    .space-bottom {
        padding-bottom: 46px;
    }

    .title-area {
        margin-bottom: 26px;
    }

    .title-area.mb-4 {
        margin-bottom: 22px !important;
    }
}

@media (max-width: 575.98px) {
    .space,
    .space-top {
        padding-top: 34px;
    }

    .space,
    .space-bottom {
        padding-bottom: 34px;
    }

    .sub-title {
        font-size: 9.5px;
        letter-spacing: 2.4px;
        gap: 10px;
        margin-bottom: 10px;
    }

    .sub-title::before,
    .sub-title::after,
    .sub-title.before-none::before,
    .sub-title.after-none::after {
        width: 22px;
    }

    .title-area {
        margin-bottom: 20px;
    }

    .title-area.text-center .sec-title::after {
        width: 104px;
        margin-top: 14px;
    }

    .title-area:not(.text-center) .sec-title::after {
        width: 78px;
        margin-top: 12px;
    }

    .title-area.text-center::before {
        width: 300px;
        height: 130px;
    }
}

/* ============================================================
   3. Heading + arrows row ("Our Top Selling Products")
   ============================================================ */
.sec-btn .icon-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-btn .slider-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--csx-line);
    background-color: #fff;
    color: var(--csx-navy);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease;
}

.sec-btn .slider-arrow:hover {
    background-color: var(--csx-navy);
    border-color: var(--csx-navy);
    color: #fff;
    transform: translateY(-2px);
}

/* On phones the arrows crowd the heading; the sliders are swipeable
   anyway, so the row centres and the arrows step down in size. */
@media (max-width: 767.98px) {
    #donation-sec .row.justify-content-between {
        row-gap: 14px;
    }

    #donation-sec .title-area {
        margin-bottom: 6px;
        text-align: center;
    }

    #donation-sec .title-area .sub-title {
        justify-content: center;
    }

    #donation-sec .title-area .sec-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    #donation-sec .col-auto {
        margin: 0 auto;
    }

    .sec-btn .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }
}

/* ============================================================
   4. Stats band
   ============================================================ */
.counter-wrap.style2 {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding: 34px 20px;
    border-radius: 22px;
    /* was a flat sage panel; navy with a gold hairline reads as part of
       the brand rather than a stray block */
    background: linear-gradient(135deg, var(--csx-navy) 0%, var(--csx-navy-soft) 100%) !important;
    box-shadow: 0 18px 40px rgba(15, 30, 51, .18);
    position: relative;
    overflow: hidden;
}

.counter-wrap.style2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--csx-gold), var(--csx-cream), var(--csx-gold));
}

.counter-wrap.style2 .counter-card {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 4px 12px;
}

.counter-wrap.style2 .counter-card .box-number {
    margin: 0 0 4px;
    font-family: var(--title-font, "Playfair Display", serif);
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    color: #fff !important;
}

.counter-wrap.style2 .counter-card .box-number .counter-number {
    color: #fff;
}

.counter-wrap.style2 .counter-card .box-text {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72) !important;
    line-height: 1.4;
}

.counter-wrap.style2 .divider {
    flex: 0 0 auto;
    width: 1px;
    margin: 6px 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, .22),
        rgba(255, 255, 255, 0));
}

@media (max-width: 767.98px) {
    /* 2x2 grid instead of four squeezed columns */
    .counter-wrap.style2 {
        flex-wrap: wrap;
        padding: 22px 10px;
        border-radius: 18px;
        row-gap: 20px;
    }

    .counter-wrap.style2 .counter-card {
        flex: 0 0 50%;
        padding: 4px 8px;
    }

    /* The vertical rules make no sense once it wraps */
    .counter-wrap.style2 .divider {
        display: none;
    }

    .counter-wrap.style2 .counter-card .box-text {
        font-size: 10.5px;
        letter-spacing: .4px;
    }
}

/* ============================================================
   5. Category tabs
   ============================================================ */
#categoryTab {
    gap: 10px;
    flex-wrap: wrap;
}

#categoryTab .nav-item {
    margin: 0;
}

#categoryTab .select-btn-teal {
    height: auto !important;
    padding: 10px 22px !important;
    border: 1.5px solid var(--csx-line) !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    color: var(--csx-navy) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    margin-right: 0 !important;
    transition: background-color .22s ease, border-color .22s ease,
                color .22s ease, transform .18s ease;
}

#categoryTab .select-btn-teal:hover {
    border-color: var(--csx-gold) !important;
    color: var(--csx-gold) !important;
    transform: translateY(-1px);
}

#categoryTab .select-btn-teal.active {
    background-color: var(--csx-navy) !important;
    border-color: var(--csx-navy) !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    #categoryTab {
        gap: 7px;
    }

    #categoryTab .select-btn-teal {
        padding: 8px 15px !important;
        font-size: 11.5px !important;
    }
}

/* ============================================================
   6. Trusted partners strip
   ============================================================ */
.brand-area-1 {
    background-color: #FAF8F5 !important;
}

.brand-area-1 .sec-title {
    margin-bottom: 6px;
}

/* This heading has no .title-area wrapper in the markup, so give it the
   same accent rule the others get. */
.brand-area-1 .sec-title::after {
    content: '';
    display: block;
    width: 132px;
    height: 9px;
    margin: 20px auto 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0L9 4.5 4.5 9 0 4.5z' fill='%23A9825A'/%3E%3C/svg%3E") center center / 9px 9px no-repeat,
        linear-gradient(90deg,
            transparent 0%,
            rgba(169, 130, 90, .55) 26%,
            rgba(169, 130, 90, .55) 40%,
            transparent 46%) center / 100% 1px no-repeat,
        linear-gradient(90deg,
            transparent 54%,
            rgba(169, 130, 90, .55) 60%,
            rgba(169, 130, 90, .55) 74%,
            transparent 100%) center / 100% 1px no-repeat;
}

.brand-area-1 .sec-title.mb-4 {
    margin-bottom: 28px !important;
}

.brand-area-1 .brand-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 18px 22px;
    border: 1px solid var(--csx-line);
    border-radius: 14px !important;
    background-color: #fff !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.brand-area-1 .brand-box:hover {
    border-color: var(--csx-gold);
    box-shadow: 0 12px 26px rgba(15, 30, 51, .1);
    transform: translateY(-3px);
}

.brand-area-1 .brand-box img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    /* Partner logos arrive in clashing colours (green, purple, orange).
       Muting them at rest keeps the strip calm and lets each one come
       forward on hover. */
    filter: grayscale(100%);
    opacity: .62;
    transition: filter .3s ease, opacity .3s ease;
}

.brand-area-1 .brand-box:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 767.98px) {
    .brand-area-1 .brand-box {
        height: 82px;
        padding: 14px 16px;
    }
}

/* ============================================================
   7. Testimonials
   ============================================================ */

/* Card. The theme gave it border-radius: 100px 0 50px 25px (a lopsided
   blob), a pale teal fill (--qbit-teal-10: #E6EFF0) that belongs to
   neither the navy nor the gold, and 40px of padding growing to
   60px 60px 100px on tablets. All replaced. */
.testi-card3 {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 30px 28px !important;
    background: #fff !important;
    border: 1px solid var(--csx-line);
    border-radius: 18px !important;
    box-shadow: 0 2px 10px rgba(15, 30, 51, .04);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1),
                box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
}

.testi-card3:hover {
    transform: translateY(-5px);
    border-color: #DED7CB;
    box-shadow: 0 16px 34px rgba(15, 30, 51, .11);
}

/* Oversized serif quote mark, watermarked behind the content. The theme's
   masked background shape is hidden — it was drawing nothing useful. */
/* Watermark quote. Sized and offset to sit fully INSIDE the card — the
   card clips overflow, so a negative top just chopped the glyph in half. */
.testi-card3::before {
    content: '\201C';
    position: absolute;
    /* Bottom-left, not top-right: the rating pill lives top-right, and a
       120px quote glyph behind it read as two stray grey blobs. */
    bottom: -6px;
    left: 16px;
    font-family: var(--title-font, "Playfair Display", serif);
    font-size: 110px;
    line-height: .58;
    color: rgba(169, 130, 90, .10);
    pointer-events: none;
    z-index: 0;
}

.testi-card3 .testi-card-shape {
    display: none !important;
}

/* Rating: was an absolutely positioned block with radius 50px 0 50px 50px
   and 27px padding, which hung off the top-right corner looking detached
   from the card. Now a compact pill that sits inside it. */
.testi-card3 .testi-card_review {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: var(--csx-navy) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1;
    z-index: 2;
}

.testi-card3 .testi-card_review i {
    font-size: 11px;
    color: var(--csx-gold) !important;
}

/* Profile row */
.testi-card3 .testi-card_profile,
.testi-card3 .testi-card_text {
    position: relative;
    z-index: 1;
}

.testi-card3 .testi-card_profile {
    display: flex !important;
    align-items: center;
    gap: 14px !important;
    margin-bottom: 18px !important;
    padding-right: 74px; /* clears the rating pill */
}

.testi-card3 .testi-card_profile .box-thumb {
    flex: none;
}

/* 140x100 made every avatar a squashed oval. Square it off. */
.testi-card3 .testi-card_profile .box-thumb img {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--csx-cream);
}

.testi-card3 .testi-card_profile .testi-card_name {
    font-family: var(--title-font, "Playfair Display", serif);
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 3px !important;
    color: var(--csx-navy);
}

.testi-card3 .testi-card_profile .testi-card_desig {
    display: block;
    margin: 0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--csx-gold);
}

.testi-card3 .testi-card_text {
    flex: 1 1 auto;
    margin: 0 !important;
    padding-top: 16px;
    border-top: 1px solid #F2EFEA;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.8;
    color: #4A5568;
}

/* --- Arrows ---
   The theme parks these at left/right: -120px, i.e. outside the
   container — which is why the left one was clipped by the viewport and
   the right one collided with the scroll-to-top button. Anchored inside
   the slider instead. */
.testi-slider3 {
    position: relative;
    padding: 0 0 4px;
}

.testi-slider3 .slider-arrow {
    --pos-x: -6px;
    --icon-size: 44px;
    width: 44px;
    height: 44px;
    line-height: 42px;
    border-radius: 50%;
    background-color: #fff !important;
    border: 1.5px solid var(--csx-line) !important;
    color: var(--csx-navy) !important;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(15, 30, 51, .1);
    transition: background-color .22s ease, color .22s ease,
                border-color .22s ease, transform .22s ease;
}

.testi-slider3 .slider-arrow:hover {
    background-color: var(--csx-navy) !important;
    border-color: var(--csx-navy) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Below 1400px there is no room beside the cards, so the arrows move under
   the slider. Rather than juggling absolute offsets against the parent's
   padding, they are taken out of absolute positioning entirely and laid
   out as flex items — the slider takes a full-width row, the two buttons
   follow it, centred. Nothing to recompute when the card height changes. */
@media (max-width: 1399.98px) {
    .testi-slider3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px;
        padding-bottom: 0;
    }

    .testi-slider3 > .swiper {
        flex: 0 0 100%;
        min-width: 0;
        margin-bottom: 20px;
    }

    .testi-slider3 .slider-arrow {
        position: static !important;
        flex: 0 0 auto;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .testi-card3 {
        padding: 24px 22px 22px !important;
        border-radius: 16px !important;
    }

    .testi-card3::before {
        font-size: 84px;
        left: 12px;
    }

    .testi-card3 .testi-card_profile {
        display: flex !important;
        gap: 12px !important;
        margin-bottom: 15px !important;
        padding-right: 66px;
    }

    /* The theme switched this to display:block under 575px, which stacked
       the avatar above the name and added 20px of margin. Kept as a row. */
    .testi-card3 .box-thumb {
        margin-bottom: 0 !important;
    }

    .testi-card3 .testi-card_profile .box-thumb img {
        width: 52px !important;
        height: 52px !important;
    }

    .testi-card3 .testi-card_profile .testi-card_name {
        font-size: 16px !important;
    }

    .testi-card3 .testi-card_text {
        font-size: 13.5px !important;
        line-height: 1.75;
        padding-top: 13px;
    }

    .testi-slider3 {
        padding-bottom: 56px;
    }

    .testi-slider3 .slider-arrow {
        --icon-size: 40px;
        width: 40px;
        height: 40px;
        line-height: 38px;
    }

    .testi-slider3 .slider-arrow.slider-prev { margin-left: -46px; }
    .testi-slider3 .slider-arrow.slider-next { margin-right: -46px; }
}

/* Equal-height cards regardless of quote length */
.testi-slider3 .swiper-slide {
    height: auto;
    display: flex;
}

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .sec-btn .slider-arrow,
    .brand-area-1 .brand-box,
    .brand-area-1 .brand-box img,
    #categoryTab .select-btn-teal {
        transition: none;
    }

    .sec-btn .slider-arrow:hover,
    .brand-area-1 .brand-box:hover,
    #categoryTab .select-btn-teal:hover {
        transform: none;
    }
}

/* ============================================================
   8. Scroll reveals
   ------------------------------------------------------------
   `cs-anim` is added by sections.js, never by this file alone, so
   without JS everything is visible at full opacity. The parts of a
   heading arrive a beat apart, which is what makes it feel composed
   rather than just faded in.
   ============================================================ */
.title-area.cs-anim .sub-title,
.title-area.cs-anim .sec-title,
.counter-wrap.cs-anim,
.brand-box.cs-anim,
.testi-card3.cs-anim {
    opacity: 0;
    transform: translateY(16px);
}

.title-area.cs-anim .sub-title {
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}

.title-area.cs-anim .sec-title {
    transition: opacity .6s ease .1s, transform .6s cubic-bezier(.2, .7, .3, 1) .1s;
}

.counter-wrap.cs-anim,
.brand-box.cs-anim,
.testi-card3.cs-anim {
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

.title-area.cs-anim.cs-in .sub-title,
.title-area.cs-anim.cs-in .sec-title,
.counter-wrap.cs-anim.cs-in,
.brand-box.cs-anim.cs-in,
.testi-card3.cs-anim.cs-in {
    opacity: 1;
    transform: translateY(0);
}

/* The ornament draws itself outward from the diamond */
.title-area.cs-anim .sec-title::after {
    clip-path: inset(0 46% 0 46%);
    transition: clip-path .8s cubic-bezier(.2, .7, .3, 1) .28s;
}

.title-area.cs-anim.cs-in .sec-title::after {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .title-area.cs-anim .sub-title,
    .title-area.cs-anim .sec-title,
    .counter-wrap.cs-anim,
    .brand-box.cs-anim,
    .testi-card3.cs-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .testi-card3:hover {
        transform: none;
    }

    .title-area.cs-anim .sec-title::after {
        clip-path: none;
        transition: none;
    }
}