/* ============================================================
   VARIABLES.CSS — Global Stylesheet
   Sections:
   1.  Root Variables
   2.  Normalize / Base Reset
   3.  Typography & Utility Classes
   4.  Buttons
   5.  Spacing Utilities
   6.  Grid & Layout Utilities
   7.  Breadcrumb
   8.  Accordion
   9.  Table
   10. Form Elements (Range, Select, File, Switch)
   11. Review / Testimonial Section
   12. FAQ Section
   13. Product Card (List Style)
   14. How It Works Section
   15. Why Choose Section
   16. Trust Cards & Stats Strip
   17. Brand Collaborators Section
   18. Title Center Component
   19. Responsive
   ============================================================ */


/* ============================================================
   1. ROOT VARIABLES
   ============================================================ */
:root {
    --primary:          #333333;
    --secondary:        #E89A0E;
    --black:            #000000;
    --steel-blue:       #2C3E50;
    --coffee-brown:     #52340b;
    --green:            #21a544;
    --Lgray:            #b3b3b3;
    --Dgray:            #666666;
    --white:            #ffffff;
    --disabled:         #aaaaaa;
    --Light-bg:         #e3e3e3;
    --color-success:    #2ecc71;
    --color-warning:    #f39c12;
    --color-error:      #e74c3c;
    --color-info:       #3498db;
    --shadow-soft:      0 4px 12px rgba(0, 0, 0, 0.4);
    --card-shadow:      0 2px 16px rgba(44, 62, 80, 0.09);
    --card-hover-shadow:0 8px 36px rgba(232, 154, 14, 0.18),
                        0 2px 16px rgba(44, 62, 80, 0.13);
}


/* ============================================================
   2. NORMALIZE / BASE RESET
   ============================================================ */
   
html { -webkit-text-size-adjust: 100%; }

*     { box-sizing: border-box; }
*:focus { outline: none !important; }

body {
    font-family: "Poppins", sans-serif;
    font-size:   15px;
    font-style:  normal;
    padding:     0;
    margin:      0;
    color:       var(--primary);
    background:  #ffffff;
}

article, aside, figcaption, figure,
footer, header, hgroup, main, nav, section { display: block; }

h1, h2, h3, h4, h5, h6,
p, li, label, td { margin: inherit; }

[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

abbr[title],
abbr[data-original-title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

address       { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
ol, ul, dl    { margin-top: 0; margin-bottom: 1rem; padding-left: 0; }
ol ol, ul ul,
ol ul, ul ol  { margin-bottom: 0; }

dt            { font-weight: 700; }
dd            { margin-bottom: .5rem; margin-left: 0; }
blockquote    { margin: 0 0 1rem; }
b, strong     { font-weight: 600; }
small         { font-size: 80%; }

sub, sup      { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub           { bottom: -.25em; }
sup           { top: -.5em; }

a:not([href]):not([class])       { color: inherit; text-decoration: none; }
a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }

pre     { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; }
figure  { margin: 0 0 1rem; }

img     { vertical-align: middle; border-style: none; width: 100%; }
svg     { overflow: hidden; vertical-align: middle; }

table         { border-collapse: collapse; }
caption       { padding-top: .75rem; padding-bottom: .75rem; color: #6c757d; text-align: left; caption-side: bottom; }
th            { text-align: inherit; }

label         { display: inline-block; margin-bottom: .5rem; width: 100%; }

button        { border-radius: 0; }
button:focus  { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }

input, button, select, optgroup, textarea {
    margin:      0;
    font-family: inherit;
    font-size:   inherit;
    line-height: inherit;
}
button, input   { overflow: visible; }
button, select  { text-transform: none; }
[role="button"] { cursor: pointer; }
select          { word-wrap: normal; }

button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) { cursor: pointer; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }

input[type="radio"],
input[type="checkbox"] { box-sizing: border-box; padding: 0; max-width: 20px; }

textarea  { overflow: auto; resize: vertical; }
fieldset  { min-width: 0; padding: 0; margin: 0; border: 0; }

legend {
    display:       block;
    width:         100%;
    max-width:     100%;
    padding:       0;
    margin-bottom: .5rem;
    font-size:     1.5rem;
    line-height:   inherit;
    color:         inherit;
    white-space:   normal;
}

progress { vertical-align: baseline; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"]                      { outline-offset: -2px; -webkit-appearance: none; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button         { font: inherit; -webkit-appearance: button; }

output  { display: inline-block; }
summary { display: list-item; cursor: pointer; }
template { display: none; }
[hidden]  { display: none !important; }

input, optgroup, select, textarea {
    width:         100%;
    border:        1px solid var(--form);
    padding:       8px 12px;
    border-radius: 2px;
}
textarea {
    border:           1px solid #ccc;
    border-radius:    4px;
    background-color: #fff;
    padding:          4px 12px;
    color:            #444;
}

ul { list-style-type: none; }

p a    { color: var(--secondary); }
a:hover { color: var(--primary); }
p b    { font-weight: 600; }


/* ============================================================
   3. TYPOGRAPHY & UTILITY CLASSES
   ============================================================ */
.normalize-css ul,
.pro-dec ul         { padding-top: 12px; }

.normalize-css ul li,
.pro-dec ul li      { position: relative; padding-left: 20px; margin-bottom: 12px; }

.normalize-css ul li::before,
.pro-dec ul li::before {
    content:          "";
    position:         absolute;
    left:             0;
    top:              6px;
    width:            11px;
    height:           11px;
    background-color: var(--secondary);
    border-radius:    50%;
}

.normalize-css p { margin-bottom: 12px; }
.normalize-css img { width: auto; max-width: 100%; margin-top: 8px; margin-bottom: 8px; }

.center        { text-align: center; }
.align-center  { align-items: center; }
.flex          { display: flex; }
.inline-block  { display: inline-block; }
.green         { color: var(--dgreen); }
.bg-green      { background-color: var(--dgreen) !important; }
.fontW-600     { font-weight: 600 !important; }
.disc          { list-style: disc; padding-left: 20px; }

.two-line, .three-line, .four-line,
.five-line, .six-line, .seven-line {
    overflow:          hidden;
    display:           -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow:     ellipsis;
}
.two-line   { -webkit-line-clamp: 2; }
.three-line { -webkit-line-clamp: 3; }
.four-line  { -webkit-line-clamp: 4; }
.five-line  { -webkit-line-clamp: 5; }
.six-line   { -webkit-line-clamp: 6; }
.seven-line { -webkit-line-clamp: 7; }

.check { padding: 0 0 12px 0; }
.check li::before {
    font-family:    'icomoon' !important;
    margin-right:   8px;
    font-size:      16px;
    display:        inline-block;
    vertical-align: middle;
    content:        "\e90d";
}

.check-radio {
    display:               grid;
    grid-template-columns: 20px 1fr;
    align-items:           center;
    gap:                   6px;
}
.check-radio input  { width: 20px; height: 20px; }
.check-radio label  { margin: 0; font-weight: 400; cursor: pointer; }
.check-inline       { display: flex; align-items: center; gap: 24px; }

/* Star / rating */
.rating      { display: flex; gap: 12px; }
.star-rating { color: var(--yellow); font-size: 24px; display: flex; align-items: center; }

/* Price */
.amount       { display: flex; column-gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 6px; padding-bottom: 3px; }
.offer-price  { font-size: 36px; color: var(--green); font-weight: 600; margin-left: -8px; }
.dollar       { font-size: 32px; opacity: 0.7; }
.normal-price { opacity: 0.5; text-decoration: line-through; }
.discount     { color: var(--green); font-weight: 600; }

/* Slick arrows */
body .slick-prev,
body .slick-next              { height: 30px; border: 1px solid #ccc; width: 30px; border-radius: 30px; }
body .slick-prev::before,
body .slick-next::before      { font-size: 0; }

.scroll-to       { color: var(--secondary); }
.scroll-to:hover { color: var(--primary); }

/* Section eyebrow / headline / subline */
.section-eyebrow {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--secondary);
    margin-bottom:  8px;
}
.section-headline {
    font-size:     clamp(26px, 4vw, 40px);
    font-weight:   700;
    color:         var(--steel-blue);
    line-height:   1.18;
    margin-bottom: 10px;
}
.section-subline {
    color:         var(--Dgray);
    font-size:     14.5px;
    max-width:     560px;
    margin:        0 auto 48px;
}


/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
    border:          none;
    border-radius:   4px;
    display:         inline-block;
    text-decoration: none;
    cursor:          pointer;
    transition:      all 0.3s ease;
}
.btn-lg { padding: 12px 28px; font-size: 20px; font-weight: 400; border-radius: 2px; letter-spacing: 0.3px; }
.btn-md { padding: 10px 24px; font-size: 15px; font-weight: 400; border-radius: 4px; }
.btn-sm { padding: 8px 20px;  font-size: 14px; font-weight: 400; border-radius: 4px; }

.btn-primary      { background-color: var(--black);       color: var(--white); }
.btn-secondary    { background-color: var(--secondary);   color: var(--white); }
.btn-green        { background-color: var(--green);       color: var(--secondary); }
.btn-white        { background-color: var(--white);       color: var(--secondary); }
.btn-steel-blue   { background-color: var(--steel-blue);  color: var(--white); }
.btn-coffee-brown { background-color: var(--coffee-brown);color: var(--white); }

.btn-border            { border-width: 1px; border-style: solid; }
.btn-border-white      { border-color: #ffffff;         color: #ffffff;         text-decoration: none; }
.btn-border-Lgray      { border-color: var(--Lgray);    color: var(--Lgray); }
.btn-border-Dgray      { border-color: var(--Dgray);    color: var(--Dgray); }
.btn-border-secondary  { border-color: var(--secondary);color: var(--secondary);background-color: var(--white); }

.btnH-primary:hover  { background-color: var(--primary);  border-color: var(--primary);  color: var(--white); }
.btnH-secondary:hover{ background-color: var(--secondary);border-color: var(--secondary);color: var(--white); }
.btnH-white:hover    { background-color: var(--white);    border-color: var(--white);    color: var(--secondary); }


/* ============================================================
   5. SPACING UTILITIES
   ============================================================ */
.gap-48 { gap: 48px; } .gap-32 { gap: 32px; } .gap-24 { gap: 24px; }
.gap-20 { gap: 20px; } .gap-16 { gap: 16px; } .gap-12 { gap: 12px; }

.mt-24 { margin-top: 24px; }    .mt-16 { margin-top: 16px; }
.mt-12 { margin-top: 12px; }    .mt-8  { margin-top: 8px; }
.mt-4  { margin-top: 4px; }

.mb-24 { margin-bottom: 24px; } .mb-16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; } .mb-8  { margin-bottom: 8px; }
.mb-4  { margin-bottom: 4px; }  .mb-0  { margin-bottom: 0; }

.pt-48 { padding-top: 48px; }   .pt-24 { padding-top: 24px; }
.pt-16 { padding-top: 16px; }   .pt-12 { padding-top: 12px; }
.pt-8  { padding-top: 8px; }


/* ============================================================
   6. GRID & LAYOUT UTILITIES
   ============================================================ */
.grid { display: grid; }


/* ============================================================
   7. BREADCRUMB
   ============================================================ */
.cs-breadcrumb {
    padding:          0;
    position:         relative;
    background-color: #f4f4f4;
}

.cs-breadcrumb .container {
    height:      30px;
    display:     flex;
    align-items: center;
}

/* Always ONE line: items never wrap inside themselves; when the trail is wider
   than the screen, the middle links shorten with "…" first, the current page
   keeps the most room, and "Home" stays whole. */
.breadcrumb {
    display:     flex;
    align-items: center;
    font-size:   13px;
    padding:     0;
    margin:      0;
    flex-wrap:   nowrap;
    min-width:   0;
    max-width:   100%;
}

/* block (not flex) so the text can ellipsize; the separator chevron sits in the
   right padding (absolutely positioned), so shortening never clips it */
.breadcrumb a {
    position:        relative;
    display:         block;
    flex:            0 3 auto;
    min-width:       0;
    padding-right:   31px;           /* = old gap 6 + chevron margins 10 + 10 + chevron 5 */
    overflow:        hidden;
    white-space:     nowrap;
    text-overflow:   ellipsis;
    color:           #888888;
    text-decoration: none;
    transition:      color 0.2s;
    font-size:       13px;
    font-weight:     400;
}

.breadcrumb a:first-child { flex-shrink: 0; }   /* "Home" stays whole */

.breadcrumb a:hover { color: var(--secondary); }

.breadcrumb a::after {
    content:      '';
    position:     absolute;
    top:          50%;
    right:        10px;
    margin-top:   -2.5px;
    width:        5px;
    height:       5px;
    border-right: 1.5px solid #cccccc;
    border-top:   1.5px solid #cccccc;
    transform:    rotate(45deg);
    background:   none;
    border-radius: 0;
}

.breadcrumb .current {
    display:        block;
    flex:           0 1 auto;
    min-width:      0;
    overflow:       hidden;
    white-space:    nowrap;
    text-overflow:  ellipsis;
    color:          var(--primary);
    font-weight:    600;
    font-size:      13px;
    pointer-events: none;
}

.breadcrumb .current::before {
    content:        '';
    display:        inline-block;
    vertical-align: middle;
    width:          5px;
    height:         5px;
    margin:         0 6px 0 0;
    background:     var(--secondary);
    border-radius:  50%;
}

/* Phones: a long trail collapses its middle to a single "…" (still a link), so
   Home, the immediate parent and the current page stay readable instead of every
   crumb shrinking to a letter. A one-middle-level trail is untouched. */
@media (max-width: 575px) {
    .breadcrumb a:first-child + a:not(:nth-last-child(2)) {
        flex-shrink: 0;
        font-size:   0;
    }

    .breadcrumb a:first-child + a:not(:nth-last-child(2))::before {
        content:        '…';
        display:        inline-block;
        vertical-align: top;   /* the zero-size text's baseline would otherwise stretch the row */
        font-size:      13px;
    }

    .breadcrumb a:first-child + a ~ a:not(:nth-last-child(2)) {
        display: none;
    }
}


/* ============================================================
   8. ACCORDION
   ============================================================ */
.accordion           { background: #f9f9f9; }
.accordion-tabs      { display: none; }
.accordion-tabs:focus { outline: none; }

.accordion-item {
    border:        1px solid #dcdcdc;
    border-radius: 4px;
}

.accordion-item__label {
    margin:     0;
    padding:    1.25rem;
    cursor:     pointer;
    transition: padding 0.2s ease;
    position:   relative;
}

.accordion-item__label::after {
    content:       "";
    height:        4px;
    width:         4px;
    position:      absolute;
    top:           -4px;
    right:         1.25rem;
    bottom:        0;
    margin:        auto;
    border:        3px solid transparent;
    border-radius: 2px;
    transform:     rotate(45deg);
    border-color:  transparent #447fff #447fff transparent;
    opacity:       1;
    transition:    opacity 0.1s ease;
}

.accordion-item__label:hover { background: #d3e1ff; }

.accordion-item__container {
    padding:    0 1.25em;
    height:     0;
    opacity:    0;
    transition: padding 0.2s ease, opacity 0.5s 0.15s ease;
}

.accordion-active .accordion-item__label         { padding-bottom: 0; cursor: inherit; }
.accordion-active .accordion-item__label:hover   { background: none; }
.accordion-active .accordion-item__container     { padding: 1.25em; height: auto; opacity: 1; }

.accordion-active .accordion-item__container p:first-child,
.accordion-active .accordion-item__container h1:first-child,
.accordion-active .accordion-item__container h2:first-child,
.accordion-active .accordion-item__container h3:first-child,
.accordion-active .accordion-item__container h4:first-child,
.accordion-active .accordion-item__container h5:first-child,
.accordion-active .accordion-item__container h6:first-child { margin-top: 0; }

.accordion-active .accordion-item__container p:last-child,
.accordion-active .accordion-item__container h1:last-child,
.accordion-active .accordion-item__container h2:last-child,
.accordion-active .accordion-item__container h3:last-child,
.accordion-active .accordion-item__container h4:last-child,
.accordion-active .accordion-item__container h5:last-child,
.accordion-active .accordion-item__container h6:last-child { margin-bottom: 0; }

.accordion-tabs .accordion-tab {
    padding:         10px 14px;
    min-height:      54px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    line-height:     1.2;
}

.tab-title { font-size: 15px; font-weight: 500; }
.tab-count { font-size: 13px; opacity: 0.7; margin-top: 1px; }

.accordion {
    border-width:  1px;
    border-style:  solid;
    border-color:  #ccc;
    border-radius: 4px;
    width:         100%;
}

.accordion + p { color: rgba(255,255,255,0.8); font-weight: 300; font-size: 0.9rem; margin-top: 2rem; }

.category-products           { margin-bottom: 0; }
.accordion-item:last-child .category-products { margin-bottom: 0; }


/* ============================================================
   9. TABLE
   ============================================================ */
table {
    width:           100%;
    max-width:       100%;
    border-collapse: collapse;
    overflow:        hidden;
}

table tr:first-child { border-top: none; }
table th, table td   { text-align: left; }
table tr             { border-color: #bfbfbf; }


/* ============================================================
   10. FORM ELEMENTS
   ============================================================ */

/* ── Range slider ── */
.range {
    background:    linear-gradient(to left, #e2e2ea 100%, #e2e2ea 0%);
    height:        12px;
    max-width:     100%;
    width:         100%;
    position:      relative;
    border:        none;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.range [type=range] {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    background:         transparent;
    width:              100%;
    position:           absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin:             auto;
    height:             30px;
    padding:            0;
}

.range [type=range]:focus { outline: none; }

.range [type=range]::-webkit-slider-runnable-track,
.range [type=range]::-moz-range-track { background: transparent; }

.range [type=range]::-webkit-slider-thumb,
.range [type=range]::-moz-range-thumb,
.range [type=range]::-ms-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              20px;
    height:             20px;
    border-radius:      50%;
    background:         var(--dgreen);
    cursor:             pointer;
    border:             none;
}

.range [type=range]::-ms-fill-lower { background: #999; }
.range [type=range]::-ms-fill-upper { background: #e2e2ea; }
.range [type=range]::-ms-track      { color: transparent; border: 0 solid transparent; background: transparent; }
.range [type=range]::-ms-tooltip    { display: none; }

/* ── Custom select ── */
.select {
    border:        1px solid #ccc;
    display:       inline-block;
    padding:       0;
    border-radius: 4px;
    position:      relative;
}

.select li {
    display:     none;
    cursor:      pointer;
    padding:     8px 10px;
    border-top:  1px solid rgb(226, 226, 226);
    margin:      0;
    line-height: 1;
}

.select li:first-child { display: block; border-top: 0; pointer-events: none; }
.select li:hover       { background-color: #ddd; }
.select li:first-child:hover { background-color: transparent; }
.select.open li        { display: block; }

.select span::before {
    position: absolute;
    top:      5px;
    right:    15px;
    content:  "\e910";
    font-family: 'icomoon' !important;
}

/* ── File placeholder ── */
.file-placeholder {
    position: relative;
    cursor:   pointer;
    width:    400px;
    height:   40px;
}

.file-placeholder label {
    display:  block;
    position: absolute;
    z-index:  2;
    top: 0; left: 0;
    width:    100%;
    max-width: 400px;
    height:   40px;
}

.file-placeholder input[type=file] {
    position:  absolute;
    z-index:   3;
    top: 0; left: 0;
    width:     100%;
    max-width: 400px;
    height:    40px;
    opacity:   0;
}

.file-placeholder .file-browse {
    width:   100%;
    height:  40px;
    display: flex;
}

.file-placeholder .file-browse .file-browse-txt {
    display:       block;
    float:         left;
    line-height:   40px;
    width:         100%;
    padding-left:  10px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    border:        1px solid #ccc;
    border-right:  0;
    border-radius: 4px 0 0 4px;
}

.file-placeholder .file-browse .file-browse-txt.hasValue { background-color: #ededed; }

.file-placeholder .file-browse .browse {
    display:          block;
    float:            left;
    background-color: var(--secondary);
    color:            #fff;
    height:           40px;
    line-height:      40px;
    padding:          0 20px;
    border-radius:    0 4px 4px 0;
}

.file-placeholder .file-browse .browse:hover { background-color: var(--primary); }

/* ── Toggle switch ── */
.switch {
    display:  inline-block;
    height:   24px;
    position: relative;
    width:    49px;
    margin:   0;
}

.switch input { display: none; }

.switch-slider {
    background-color: #ccc;
    bottom:     0;
    cursor:     pointer;
    left:       0;
    position:   absolute;
    right:      0;
    top:        0;
    transition: 0.4s;
}

.switch-slider::before {
    background-color: #fff;
    bottom:     3px;
    content:    "";
    height:     18px;
    left:       4px;
    position:   absolute;
    transition: 0.4s;
    width:      18px;
}

input:checked + .switch-slider                  { background-color: #66bb6a; }
input:checked + .switch-slider::before          { transform: translateX(22px); }
.switch-slider.round                            { border-radius: 34px; }
.switch-slider.round::before                    { border-radius: 50%; }


/* ============================================================
   11. REVIEW / TESTIMONIAL SECTION
   ============================================================ */

   /* =========================================
   TESTIMONIAL SLIDER
========================================= */

.review-slider-wrap {
    position: relative;
    width: 100%;
    padding: 0 55px;
}

.review-carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.review-carousel-track {
    display: flex;
    transition: transform .55s ease;
    will-change: transform;
}

.review-card-item {
    flex-shrink: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.review-card {
    height: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-top: 4px solid var(--secondary);
    border-radius: 10px;
    padding: 24px;
}

/* equal heights */
.review-carousel-track {
    align-items: stretch;
}

.review-card {
    display: flex;
    flex-direction: column;
}

.review-body {
    flex: 1;
}

/* arrows */
.review-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--secondary);
    background: #fff;
    color: var(--secondary);
    z-index: 20;
}

.review-nav-prev {
    left: 0;
}

.review-nav-next {
    right: 0;
}

/* dots */
.review-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.review-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d0d0d0;
}

.review-dot.active {
    background: var(--secondary);
}

/* mobile */
@media (max-width: 767px) {

    .review-slider-wrap {
        padding: 0 45px;
    }

    .review-card {
        padding: 18px;
    }
}
.review-card {
    background:    #ffffff;
    border-top:    5px solid var(--secondary) !important;
    border:        1px solid #efefef;
    border-radius: 12px;
    padding:       20px;
}

.review-card-header {
    display:     flex;
    align-items: flex-start;
    gap:         15px;
}

.review-body {
    font-size:   0.95rem;
    color:       #555;
    font-style:  italic;
    margin-top:  20px !important;
    padding-top: 15px !important;
    border-top:  1px solid #f0f0f0;
    padding-bottom: 15px !important;
}

.reviewer-meta {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    align-items:    flex-start;
    line-height:    1.3;
}

.reviewer-name  { font-weight: 700; color: var(--primary); font-size: 1.05rem; margin: 0; }
.review-date    { font-size: 0.85rem; color: #888; margin: 0; }

.reviewer-avatar-initials {
    width:           45px;
    height:          45px;
    background:      #333;
    color:           var(--secondary);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     800;
}

.reviewer-avatar {
    width:      45px;
    height:     45px;
    border-radius: 50%;
    object-fit: cover;
}

.review-source-icon { display: flex; align-items: center; }

/* Stars */
.star-filled   { color: var(--secondary); }
.star-empty    { color: #ddd; }

.review-stars-row {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.review-stars-unicode { display: flex; align-items: center; gap: 1px; }

.star-filled-u { color: #FBBC05; font-size: 1.1rem; line-height: 1; }
.star-empty-u  { color: #ddd;    font-size: 1.1rem; line-height: 1; }

.google-rating-number { font-size: 0.9rem; font-weight: 700; color: #555; line-height: 1; }

/* ── Slider layout ── */
.review-slider-outer {
    position:     relative;
    overflow:     visible !important;
    margin-left:  -16px !important;
    margin-right: -16px !important;
    width:        calc(100% + 32px) !important;
    padding:      0 44px !important;
}

.review-slider-viewport {
    overflow: hidden;
    width:    100%;
}

.review-slider-track {
    display:    flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
}

.review-slider-outer{
    position:relative;
    padding:0 50px;
}

.review-slider-viewport{
    overflow:hidden;
    width:100%;
}

.review-slider-track{
    display:flex;
    transition:transform .5s ease;
    will-change:transform;
}

.review-card-item{
    flex-shrink:0;
    padding:0 10px;
    box-sizing:border-box;
}

.review-card{
    height:100%;
}

@media(max-width:767px){
    .review-slider-outer{
        padding:0 40px;
    }
}
/* ── Nav buttons ── */
.slider-nav-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           44px;
    height:          44px;
    background:      #ffffff;
    border:          1.5px solid #E89A0E;
    border-radius:   50%;
    color:           #E89A0E;
    font-size:       1.4rem;
    font-weight:     300;
    cursor:          pointer;
    z-index:         99;
    display:         flex !important;
    visibility:      visible !important;
    opacity:         1 !important;
    align-items:     center;
    justify-content: center;
    line-height:     1;
}

.nav-left  { left:  -8px; }
.nav-right { right: -8px; }

.slider-nav-btn:hover,
.slider-nav-btn:focus,
.slider-nav-btn:active {
    transform:    translateY(-50%) !important;
    background:   #E89A0E !important;
    color:        #ffffff !important;
    border-color: #E89A0E !important;
    outline:      none !important;
    box-shadow:   none !important;
}


/* ============================================================
   12. FAQ SECTION
   ============================================================ */
.faq-item {
    background:  #fff;
    border-bottom: 1px solid #eee;
    transition:  all 0.3s ease;
    position:    relative;
    overflow:    hidden;
}

.faq-item::before {
    content:    "";
    position:   absolute;
    left: 0; top: 0; bottom: 0;
    width:      3px;
    background: var(--secondary);
    transform:  scaleY(0);
    transition: transform 0.3s ease;
}

.faq-question {
    display:     flex;
    align-items: center;
    padding:     24px 20px;
    cursor:      pointer;
    user-select: none;
}

.faq-question-text {
    flex:        1;
    font-size:   16px;
    font-weight: 600;
    color:       var(--primary);
    transition:  all 0.3s ease;
    padding-right: 15px;
}

/* +/− icon */
.faq-icon {
    position: relative;
    width:    16px;
    height:   16px;
    display:  flex;
    align-items:     center;
    justify-content: center;
}

.faq-icon span {
    position:      absolute;
    background-color: #bbbbbb;
    border-radius: 2px;
    transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.h-line { width: 16px; height: 2px; }
.v-line { width: 2px; height: 16px; }

/* Open state */
.faq-item.open               { background: #fafafa; border-bottom-color: transparent; }
.faq-item.open::before       { transform: scaleY(1); }
.faq-item.open .faq-question-text { color: var(--secondary); }
.faq-item.open .v-line       { transform: rotate(90deg); background-color: var(--secondary); }
.faq-item.open .h-line       { background-color: var(--secondary); }

.faq-answer {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
    padding:     0 20px 25px 20px;
    font-size:   14.5px;
    color:       #555;
    line-height: 1.7;
}


/* ============================================================
   13. PRODUCT CARD (List / Sidebar Style)
   ============================================================ */
.product-card {
    background:    var(--white);
    border-radius: 14px;
    box-shadow:    var(--card-shadow);
    border:        1px solid rgba(227, 227, 227, 0.7);
    overflow:      hidden;
    transition:    transform 0.28s cubic-bezier(.22, .68, 0, 1.2),
                   box-shadow 0.28s ease;
    display:       flex;
    flex-direction: row;
    align-items:   stretch;
    margin-bottom: 14px;
    cursor:        pointer;
    position:      relative;
}

.product-card:hover {
    transform:    translateY(-4px) scale(1.012);
    box-shadow:   var(--card-hover-shadow);
    border-color: rgba(232, 154, 14, 0.22);
}

.product-img-wrap {
    width:      110px;
    min-width:  110px;
    height:     auto;
    align-self: stretch;
    overflow:   hidden;
    flex-shrink: 0;
    position:   relative;
    background: var(--Light-bg);
}

.product-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.42s cubic-bezier(.22, .68, 0, 1.2);
    display:    block;
}

.product-card:hover .product-img-wrap img { transform: scale(1.1); }

.product-badge { display: none; }

.product-body {
    padding:        13px 16px 13px 15px;
    display:        flex;
    flex-direction: column;
    justify-content: space-between;
    flex:           1;
    min-width:      0;
}

.product-name {
    font-size:     13.5px;
    font-weight:   600;
    color:         var(--steel-blue);
    margin:        0 0 4px;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.product-desc {
    font-size:   11.5px;
    color:       var(--Dgray);
    margin:      0 0 7px;
    line-height: 1.45;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.product-stars { display: flex; align-items: center; gap: 3px; margin-bottom: 8px; }
.product-stars i    { font-size: 10.5px; color: var(--secondary); }
.product-stars span { font-size: 11px; color: var(--Dgray); margin-left: 3px; }

.product-foot {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.product-price  { display: flex; align-items: baseline; gap: 6px; }
.price-current  { font-size: 15px; font-weight: 700; color: var(--steel-blue); }
.price-old      { font-size: 12px; color: var(--Lgray); text-decoration: line-through; }

.btn-add {
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.3px;
    padding:         6px 14px;
    border-radius:   8px;
    background:      var(--steel-blue);
    color:           var(--white);
    border:          none;
    transition:      background 0.2s, transform 0.18s;
    white-space:     nowrap;
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
}

.btn-add:hover { background: #1a252f; color: var(--white); transform: scale(1.05); }

.view-more-wrap { text-align: center; }

.btn-view-more {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         11px 28px;
    border-radius:   10px;
    border:          2px solid var(--secondary);
    background:      transparent;
    color:           var(--secondary);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.4px;
    text-decoration: none;
    transition:      background 0.22s, color 0.22s, transform 0.18s;
    font-family:     "Poppins", sans-serif;
    cursor:          pointer;
}

.btn-view-more:hover { background: var(--secondary); color: var(--white); transform: translateY(-2px); }

.col-divider {
    border:     none;
    border-top: 1.5px solid var(--Light-bg);
    margin:     36px 0 32px;
    display:    none;
}


/* ============================================================
   14. HOW IT WORKS SECTION
   ============================================================ */
.how-it-works { background: #f4f4f4; }

.section-sub {
    font-size:   14px;
    color:       var(--Dgray);
    text-align:  center;
    max-width:   540px;
    margin:      10px auto 10px;
    line-height: 1.7;
    font-weight: 400;
}

.steps-row { display: flex; align-items: flex-start; gap: 0; position: relative; }

.steps-connector {
    position:   absolute;
    top:        36px;
    left:       calc(12.5% + 0px);
    right:      calc(12.5% + 0px);
    height:     1px;
    border-top: 1.5px dashed #E89A0E;
    opacity:    0.4;
    z-index:    0;
}

.step-col {
    flex:      1;
    padding:   0 12px;
    text-align: center;
    position:  relative;
    z-index:   1;
}

.step-icon-wrap {
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      var(--white);
    border:          2px solid var(--Light-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 16px;
    font-size:       1.55rem;
    color:           var(--secondary);
    box-shadow:      var(--shadow-soft);
    position:        relative;
    z-index:         2;
}

.step-icon-wrap img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 50%;
    display:       block;
}

.step-num {
    position:        absolute;
    top:             -6px;
    right:           -6px;
    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      var(--black);
    color:           var(--white);
    font-size:       10px;
    font-weight:     600;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
}

.step-title { font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 8px; line-height: 1.4; }
.step-desc  { font-size: 13px; color: var(--Dgray); line-height: 1.65; font-weight: 400; margin-bottom: 10px; }

.step-tag {
    display:       inline-block;
    padding:       3px 12px;
    border-radius: 50px;
    font-size:     11px;
    font-weight:   500;
    letter-spacing: 0.3px;
    background:    var(--secondary);
    color:         var(--white);
}

.step-arrow {
    flex-shrink: 0;
    width:       48px;
    height:      72px;
    display:     flex;
    align-items: center;
    justify-content: center;
    align-self:  flex-start;
    position:    relative;
    z-index:     3;
}


/* ============================================================
   15. WHY CHOOSE SECTION
   ============================================================ */
.why-choose { background: var(--white); padding: 0; }

.wc-layout { display: flex; gap: 0; align-items: stretch; min-height: 380px; }

.wc-sidebar {
    width:          300px;
    flex-shrink:    0;
    display:        flex;
    flex-direction: column;
    background:     var(--primary);
    border-radius:  4px 0 0 4px;
    overflow:       hidden;
}

.wc-nav-item {
    display:      flex;
    align-items:  center;
    gap:          14px;
    padding:      16px 20px;
    cursor:       pointer;
    border-left:  4px solid transparent;
    border-bottom: 1px solid var(--Dgray);
}
.wc-nav-item:last-child { border-bottom: none; }

.wc-nav-item .nav-icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--Dgray);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.95rem;
    color:           var(--Lgray);
    flex-shrink:     0;
}

.wc-nav-item .nav-label { font-size: 13px; font-weight: 500; color: var(--Lgray); line-height: 1.35; }

.wc-nav-item.active             { background: var(--Dgray); border-left-color: var(--secondary); }
.wc-nav-item.active .nav-icon   { background: var(--secondary); color: var(--white); }
.wc-nav-item.active .nav-label  { color: var(--white); font-weight: 600; }

.wc-content {
    flex:           1;
    background:     var(--white);
    border-radius:  0 4px 4px 0;
    padding:        36px 40px;
    display:        flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wc-pane        { display: none; }
.wc-pane.active { display: block; }

.wc-pane-heading {
    font-size:     18px;
    font-weight:   600;
    color:         var(--primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--secondary);
    display:       inline-block;
}

.wc-pane p             { font-size: 14px; color: var(--Dgray); line-height: 1.78; font-weight: 400; margin-bottom: 14px; }
.wc-pane p:last-child  { margin-bottom: 0; }


/* ============================================================
   16. TRUST CARDS & STATS STRIP
   ============================================================ */
.trust-section { background: var(--white); }

.trust-card {
    background:     var(--white);
    border:         1px solid var(--Light-bg);
    border-top:     3px solid var(--secondary);
    border-radius:  6px;
    padding:        28px 24px;
    text-align:     center;
    height:         100%;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

.trust-card-icon {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 18px;
    font-size:       1.5rem;
    color:           var(--secondary);
}

.trust-card-title   { font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
.trust-card-divider { width: 32px; height: 2px; background: var(--secondary); margin: 0 auto 12px; }
.trust-card-desc    { font-size: 13px; color: var(--Dgray); line-height: 1.7; font-weight: 400; margin: 0; }

.stats-strip { background: var(--primary); border-radius: 6px; margin-top: 28px; padding: 0; overflow: hidden; }
.stats-inner { display: flex; align-items: stretch; }

.stat-item {
    flex:         1;
    display:      flex;
    align-items:  center;
    gap:          14px;
    padding:      20px 24px;
    border-right: 1px solid var(--Dgray);
}
.stat-item:last-child { border-right: none; }

.stat-icon  { font-size: 1.5rem; color: var(--secondary); flex-shrink: 0; }
.stat-value { font-size: 16px; font-weight: 700; color: var(--white); line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--Lgray); font-weight: 400; line-height: 1.3; }


/* ============================================================
   17. BRAND COLLABORATORS SECTION
   ============================================================ */
.bc-section {
    padding:  72px 0 80px;
    background: var(--Light-bg);
    position: relative;
}

.bc-section::before {
    content:   '';
    position:  absolute;
    top:       0;
    left:      50%;
    transform: translateX(-50%);
    width:     56px;
    height:    3px;
    background: var(--secondary);
    border-radius: 0 0 4px 4px;
}

.bc-eyebrow  { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--secondary); margin-bottom: 8px; }
.bc-heading  { font-size: clamp(1.45rem, 3.5vw, 2rem); font-weight: 700; color: var(--steel-blue); line-height: 1.2; margin-bottom: 12px; letter-spacing: -.01em; }
.bc-subheading { font-size: .85rem; font-weight: 400; color: var(--Dgray); line-height: 1.75; margin: 0; }

.bc-stats-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: var(--white); border-radius: 12px; padding: 18px 12px; box-shadow: var(--shadow-soft); }
.bc-stat      { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 8px 20px; min-width: 100px; }
.bc-stat-num  { font-size: 1.55rem; font-weight: 700; color: var(--steel-blue); line-height: 1; }
.bc-stat-accent { color: var(--secondary); font-size: 1rem; }
.bc-stat-label  { font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--Lgray); margin-top: 4px; white-space: nowrap; }
.bc-stat-divider { width: 1px; height: 30px; background: var(--Light-bg); flex-shrink: 0; }

.bc-logo-card {
    position:        relative;
    background:      var(--white);
    border:          1.5px solid transparent;
    border-radius:   14px;
    padding:         28px 14px 18px;
    text-align:      center;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    box-shadow:      0 2px 10px rgba(0,0,0,.06);
    transition:      transform .26s cubic-bezier(.34,1.56,.64,1),
                     box-shadow .26s ease, border-color .26s ease;
}

.bc-logo-card:hover          { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--secondary); }
.bc-logo-card--featured      { border-color: rgba(232,154,14,.4); box-shadow: 0 4px 18px rgba(232,154,14,.15); }

.bc-featured-pill {
    position:      absolute;
    top:           -11px;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--secondary);
    color:         var(--white);
    font-size:     .55rem;
    font-weight:   600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding:       3px 12px;
    border-radius: 100px;
    white-space:   nowrap;
}

.bc-logo-wrap {
    width:           76px;
    height:          76px;
    border-radius:   50%;
    overflow:        hidden;
    background:      var(--Light-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .22s;
}

.bc-logo-card:hover .bc-logo-wrap { background: #d8d8d8; }

.bc-logo-wrap img {
    width:      58%;
    height:     58%;
    object-fit: contain;
    filter:     grayscale(100%);
    transition: filter .25s ease;
}
.bc-logo-card:hover .bc-logo-wrap img { filter: grayscale(0%); }

.bc-tag {
    display:        inline-block;
    font-size:      .58rem;
    font-weight:    500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--Lgray);
    background:     var(--Light-bg);
    border-radius:  100px;
    padding:        3px 10px;
    transition:     color .22s, background .22s;
}
.bc-logo-card:hover .bc-tag { color: var(--secondary); background: rgba(232,154,14,.12); }

.bc-cta-hint { font-size: .8rem; font-weight: 400; color: var(--Dgray); margin-bottom: 14px; }

.bc-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-size:       .78rem;
    font-weight:     600;
    letter-spacing:  .1em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--white);
    background:      var(--steel-blue);
    border:          2px solid var(--steel-blue);
    border-radius:   8px;
    padding:         13px 32px;
    transition:      background .22s, border-color .22s, box-shadow .22s;
}

.bc-btn:hover       { background: var(--secondary); border-color: var(--secondary); color: var(--white); box-shadow: 0 6px 24px rgba(232,154,14,.28); }
.bc-btn-icon        { width: 17px; height: 17px; flex-shrink: 0; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.bc-btn:hover .bc-btn-icon { transform: translateX(5px); }


/* ============================================================
   18. TITLE CENTER COMPONENT
   ============================================================ */
.title-center {
    text-align:      center;
    display:         flex;
    justify-content: center;
    align-items:     center;
}

.title-center .title {
    font-size:   34px;
    width:       auto;
    margin:      auto;
    font-weight: 500;
    position:    relative;
    padding-bottom: 12px;
}



/* ============================================================
   19. RESPONSIVE
   ============================================================ */

/* ── Container sizing ── */
@media screen and (min-width: 1440px) { .container { max-width: 1400px; } }
@media screen and (min-width: 1300px) {
    .container        { max-width: 1300px; }
    .four-col         { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media screen and (min-width: 1200px) {
    .three-col { grid-template-columns: 1fr 1fr 1fr; }
    .four-col  { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media screen and (min-width: 1024px) {
    .accordion-active   { background: rgba(68, 127, 255, 0.1); }
    .accordion-item__label { display: none; }
}

@media screen and (min-width: 768px) {
    .three-col       { grid-template-columns: 1fr 1fr; }
    .four-col        { grid-template-columns: 1fr 1fr 1fr; }
    .dgap-48         { gap: 48px; }
    .dgap-32         { gap: 32px; }
    .dgap-24         { gap: 24px; }
    .dgap-12         { gap: 12px; }
    .Dspace-between  { justify-content: space-between; }
    .Dflex           { display: flex; }
    .accordion-tabs  { display: flex; background: rgba(68, 127, 255, 0.1); }
    .accordion-tabs .accordion-tab { background: #ebebeb; padding: 16px 12px; font: inherit; flex: 1; border: none; cursor: pointer; transition: background 0.1s ease; }
    .accordion-item  { padding: 24px; display: none; border: none; background: #fff; min-height: 260px; }
    .overview-section .accordion-item { min-height: fit-content; }
    .accordion-item__label, .accordion-item__container { padding: 0; transition: inherit; }
    .accordion-item__label { margin-bottom: 1.5rem; }
    .accordion-item.accordion-active { display: block; }
    .accordion-item.accordion-active .accordion-item__container { padding: 0; }
    .accordion { max-width: 100%; }
}

@media screen and (max-width: 1280px) {
    body            { overflow-x: hidden; }
    .container      { margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: 16px; padding-right: 16px; }
    .title-center .title { font-size: 30px; }
}

/* ── Tablet (max 991px) ── */
@media (max-width: 991px) {
    .col-divider      { display: block; }
    .products-section { padding: 40px 0px 60px; }
    .stat-item        { padding: 16px; gap: 10px; }
    .stat-value       { font-size: 14px; }
    .wc-sidebar       { width: 240px; }
    .wc-content       { padding: 28px 24px; }
    .step-arrow       { display: none; }
    .steps-connector  { display: none; }
    .steps-row        { flex-wrap: wrap; gap: 20px 0; }
    .step-col         { flex: 0 0 50%; max-width: 50%; }

    /* Reviews: 2 per slide */
    .review-slide .row      { flex-wrap: wrap !important; }
    .review-slide .col-12   { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ── Small tablet (max 768px) ── */
@media (max-width: 768px) {
    .slider-nav-btn   { font-size: 2.5rem; }
    .nav-left         { left:  -8px; }
    .nav-right        { right: -8px; }
    .review-card      { display: flex !important; flex-direction: column !important; justify-content: center !important; height: auto !important; min-height: 0 !important; }
    .reviewer-name    { font-size: 0.95rem; }
    .review-body      { display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; max-height: none !important; height: auto !important; margin-top: 15px !important; font-size: 0.9rem !important; line-height: 1.5 !important; }
    .bc-section       { padding: 52px 0 60px; }
    .bc-stat          { padding: 6px 12px; }
    .bc-stat-num      { font-size: 1.3rem; }
}

/* ── Mobile (max 767px) ── */
@media screen and (max-width: 767px) {
    .title-center .title::after,
    .title-center .title::before { display: none; }
    .title-center .title         { font-size: 30px; padding: 5px 0; font-weight: 600; letter-spacing: 1px; line-height: 36px; }
    .container                   { padding-left: 10px; padding-right: 10px; }
    .cs-breadcrumb               { padding-top: 2px; padding-bottom: 2px; }
    .breadcrumb                  { font-size: 14px; line-height: 20px; }
    .accordion-item__label       { font-size: 16px; font-weight: 600; background: #dcdcdc; padding: 19px 12px 12px; line-height: 1; border-radius: 0; height: auto; width: auto; min-width: 100%; text-align: left; position: relative; }
    .accordion-active .accordion-item__label { padding-bottom: 20px; }
    .stats-inner                 { flex-wrap: wrap; }
    .stat-item                   { flex: 0 0 50%; border-right: 1px solid var(--Dgray); border-bottom: 1px solid var(--Dgray); }
    .stat-item:nth-child(even)   { border-right: none; }
    .stat-item:nth-last-child(-n+2) { border-bottom: none; }
    .stat-item.stat-featured     { flex: 0 0 100%; border-right: none; }
    .wc-layout                   { flex-direction: column; }
    .wc-sidebar                  { width: 100%; border-radius: 4px 4px 0 0; flex-direction: row; flex-wrap: wrap; }
    .wc-nav-item                 { flex: 1 0 50%; border-left: none; border-bottom: 1px solid rgba(255,255,255,.07); border-top: 3px solid transparent; padding: 12px 14px; }
    .wc-nav-item.active          { border-top-color: var(--secondary); border-left-color: transparent; }
    .wc-content                  { border-radius: 0 0 4px 4px; padding: 24px 20px; }
    .faq-question                { padding: 18px 15px; }
    .faq-answer-inner            { padding: 0 15px 20px 15px; }
    .bc-stat-divider             { display: none; }
}

/* ── Small mobile (max 576px) ── */
@media (max-width: 576px) {
    /* Reviews: 1 per slide */
    .reviews-section,
    .reviews-section .section-header,
    .review-slider-outer             { overflow: visible !important; }
    .review-slider-viewport          { overflow: hidden !important; width: 100%; position: relative; }
    .review-slider-track             { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; will-change: transform; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important; }
    .review-slide                    { display: block !important; min-width: 100% !important; flex: 0 0 100% !important; width: 100% !important; box-sizing: border-box !important; }
    .review-slide .row               { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; width: 100% !important; margin: 0 !important; }
    .review-slide .col-12            { flex: 0 0 100% !important; max-width: 100% !important; min-width: 100% !important; width: 100% !important; padding: 0 4px !important; box-sizing: border-box !important; }
    .review-slider-outer             { padding: 0 60px !important; }
    .nav-left                        { left: 20px !important; right: auto !important; }
    .nav-right                       { right: 20px !important; left: auto !important; }
    .slider-nav-btn                  { width: 34px !important; height: 34px !important; font-size: 1.2rem !important; z-index: 999 !important; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .review-card                     { padding: 15px !important; height: auto !important; min-height: 0 !important; }
    .review-body                     { display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; max-height: none !important; height: auto !important; margin-top: 15px !important; padding-top: 10px !important; font-size: .88rem !important; line-height: 1.5 !important; color: #555 !important; white-space: normal !important; word-break: break-word !important; }
    .reviewer-avatar,
    .reviewer-avatar-initials        { width: 40px !important; height: 40px !important; }
    .step-col                        { flex: 0 0 100%; max-width: 100%; }
    .section-sub                     { font-size: 13px; }
    .product-img-wrap                { width: 90px; min-width: 90px; }
    .product-name                    { font-size: 12.5px; }
    .product-body                    { padding: 10px 12px; }
    .price-current                   { font-size: 13.5px; }
    .bc-stat                         { width: 50%; border-bottom: 1px solid var(--Light-bg); padding: 10px 0; }
    .bc-stat:nth-last-child(-n+3)    { border-bottom: none; }
    .bc-logo-wrap                    { width: 62px; height: 62px; }
    .bc-logo-card                    { padding: 22px 10px 14px; }
    .title-center .title             { font-size: 22px; padding: 5px 0; }
}