/* ======
============------> Responsive-Css
====== */


/* ======
============------> Extra-Large-Screens
============------> 1400px and below
====== */
@media only screen and (max-width: 1399.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(2.25rem, 4vw, var(--text-4xl)); /* 36px to 42px */
        --heading-h2: clamp(1.875rem, 3.5vw, var(--text-3xl)); /* 30px to 36px */
        --heading-h3: clamp(1.5rem, 3vw, var(--text-2xl)); /* 24px to 30px */
        --heading-h4: clamp(1.25rem, 2.5vw, var(--text-xl)); /* 20px to 24px */
        --heading-h5: clamp(1.125rem, 2vw, var(--text-lg)); /* 18px to 20px */
        --heading-h6: var(--text-base); /* 16px */
    }

}




/* ======
============------> Large-Screens
============------> 1200px and below
====== */
@media only screen and (max-width: 1199.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(2.125rem, 4vw, 2.5rem); /* 34px to 40px */
        --heading-h2: clamp(1.75rem, 3.5vw, 2.125rem); /* 28px to 34px */
        --heading-h3: clamp(1.5rem, 3vw, 1.75rem); /* 24px to 28px */
        --heading-h4: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px to 24px */
        --heading-h5: clamp(1.125rem, 2vw, 1.25rem); /* 18px to 20px */
        --heading-h6: var(--text-base); /* 16px */
    }

    svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

}


/* ======
============------> Medium-Screens
============------> 992px and below
====== */
@media only screen and (max-width: 991.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.875rem, 4vw, 2.25rem); /* 30px to 36px */
        --heading-h2: clamp(1.625rem, 3.5vw, 2rem); /* 26px to 32px */
        --heading-h3: clamp(1.375rem, 3vw, 1.625rem); /* 22px to 26px */
        --heading-h4: clamp(1.25rem, 2.5vw, 1.375rem); /* 20px to 22px */
        --heading-h5: clamp(1.0625rem, 2vw, 1.1875rem); /* 17px to 19px */
        --heading-h6: var(--text-base); /* 16px */

        /* === Body Text Scale === */
        --body-text: 0.9375rem; /* 15px */
        --small-text: 0.875rem; /* 14px */
        --caption-text: 0.75rem; /* 12px */
        --overline-text: 0.625rem; /* 10px */
    }

    header {
        z-index: 9999;
    }

}

@media (max-width: 991px) {
    :root {
        --container-padding: 20px;
        --section-padding-y: 70px;
    }
}


/* ======
============------> Tablet-Screens
============------> 768px and below
====== */
@media only screen and (max-width: 767.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.75rem, 6vw, 2rem); /* 28px to 32px */
        --heading-h2: clamp(1.5rem, 5vw, 1.75rem); /* 24px to 28px */
        --heading-h3: clamp(1.25rem, 4vw, 1.5rem); /* 20px to 24px */
        --heading-h4: clamp(1.125rem, 3vw, 1.25rem); /* 18px to 20px */
        --heading-h5: clamp(1rem, 2.5vw, 1.125rem); /* 16px to 18px */
        --heading-h6: 0.9375rem; /* 15px */

        /* === Body Text Scale === */
        --body-text: 0.9375rem; /* 15px */
        --small-text: 0.8125rem; /* 13px */
        --caption-text: 0.75rem; /* 12px */
        --overline-text: 0.625rem; /* 10px */
    }

    body :where(h1, h2, h3, h4, h5, h6, p) {
        line-height: var(--leading-normal) !important;
    }

    svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

}


/* ======
============------> Mobile-Screens
============------> 576px and below
====== */
@media only screen and (max-width: 575.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.625rem, 7vw, 1.875rem); /* 26px to 30px */
        --heading-h2: clamp(1.375rem, 6vw, 1.625rem); /* 22px to 26px */
        --heading-h3: clamp(1.1875rem, 5vw, 1.375rem); /* 19px to 22px */
        --heading-h4: clamp(1.0625rem, 4vw, 1.1875rem); /* 17px to 19px */
        --heading-h5: 1rem; /* 16px */
        --heading-h6: 0.9375rem; /* 15px */

        /* === Body Text Scale === */
        --body-text: 0.875rem; /* 14px */
        --small-text: 0.8125rem; /* 13px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

    html,
    body {
        overflow-x: hidden;
    }

    body :where(a, button, input, textarea, select, option) {
        font-size: var(--small-text) !important;
    }

    .web_imagebox {
        min-height: 16px;
    }

}

@media (max-width: 575px) {
    :root {
        --container-padding: 16px;
        --section-padding-y: 56px;
    }

    .btn_primary,
    .btn_secondary {
        min-height: 44px;
        padding: 13px 20px;
        font-size: var(--text-xs);
    }
}


/* ======
============------> Small-Mobile-Screens
============------> 480px and below
====== */
@media only screen and (max-width: 479.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.5rem, 7vw, 1.75rem); /* 24px to 28px */
        --heading-h2: clamp(1.25rem, 6vw, 1.5rem); /* 20px to 24px */
        --heading-h3: clamp(1.125rem, 5vw, 1.25rem); /* 18px to 20px */
        --heading-h4: 1.0625rem; /* 17px */
        --heading-h5: 1rem; /* 16px */
        --heading-h6: 0.875rem; /* 14px */

        /* === Body Text Scale === */
        --body-text: 0.875rem; /* 14px */
        --small-text: 0.8125rem; /* 13px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

    svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

}


/* ======
============------> Extra-Small-Mobile-Screens
============------> 390px and below
====== */
@media only screen and (max-width: 389.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.375rem, 7vw, 1.625rem); /* 22px to 26px */
        --heading-h2: clamp(1.1875rem, 6vw, 1.375rem); /* 19px to 22px */
        --heading-h3: clamp(1.0625rem, 5vw, 1.1875rem); /* 17px to 19px */
        --heading-h4: 1rem; /* 16px */
        --heading-h5: 0.9375rem; /* 15px */
        --heading-h6: 0.875rem; /* 14px */

        /* === Body Text Scale === */
        --body-text: 0.8125rem; /* 13px */
        --small-text: 0.75rem; /* 12px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

}


/* ======
============------> Very-Small-Mobile-Screens
============------> 360px and below
====== */
@media only screen and (max-width: 359.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: 1.375rem; /* 22px */
        --heading-h2: 1.1875rem; /* 19px */
        --heading-h3: 1.0625rem; /* 17px */
        --heading-h4: 1rem; /* 16px */
        --heading-h5: 0.9375rem; /* 15px */
        --heading-h6: 0.875rem; /* 14px */

        /* === Body Text Scale === */
        --body-text: 0.8125rem; /* 13px */
        --small-text: 0.75rem; /* 12px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

    svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

}








/* ============================================================
   COUPONS RESPONSIVE CSS
   Header + Hero + Featured Guides + Latest Blogs + Editor's Picks + Disclaimer + Footer
   Paste this at the END of media.css
   ============================================================ */


/* ============================================================
   DESKTOP POLISH
   1200px and above
   Purpose:
   - Hero ko desktop par thora premium spacing dena
   - Hero image card ko balanced rakhna
   ============================================================ */

@media only screen and (min-width: 1200px) {
    /* ===== Hero ===== */

    .sbx2-hero {
        padding-top: 40px !important;
        padding-bottom: 76px !important;
    }

    .hero-slide-wrapper {
        min-height: 590px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(2.55rem, 4.25vw, 4rem) !important;
    }

    .sbx2-hero-visual-card {
        max-width: 580px !important;
        min-height: 490px !important;
    }

    .sbx2-hero-img-wrap,
    .sbx2-hero-img {
        min-height: 462px !important;
    }
}


/* ============================================================
   LARGE SCREENS
   1199px and below
   Purpose:
   - Hero columns ko slightly compact karna
   - Featured Guides cards ka spacing/image height adjust karna
   - Latest Blogs 2-column list ko balanced rakhna
   - Editor's Picks dark cards ko compact rakhna
   - Disclaimer card spacing adjust karna
   - Footer spacing aur columns ko balanced rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    /* ===== Header + Hero ===== */

    .hero-slide-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 0.86fr) !important;
        gap: 38px !important;
        min-height: 540px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(2.25rem, 4.6vw, 3.45rem) !important;
        line-height: 1.06 !important;
    }

    .sbx2-hero-visual-card {
        min-height: 435px !important;
        max-width: 520px !important;
    }

    .sbx2-hero-img-wrap,
    .sbx2-hero-img {
        min-height: 407px !important;
    }

    .sbx2-hero-float.float-guide {
        left: -18px !important;
    }

    .sbx2-hero-float.float-editor {
        right: -16px !important;
    }

    /* ===== Featured Guides ===== */

    .sbx2-blog-grid {
        gap: 24px !important;
    }

    .sbx2-blog-thumb {
        height: 215px !important;
    }

    .sbx2-blog-title {
        font-size: 18px !important;
    }

    /* ===== Latest Blogs ===== */

    .sbx2-latest-grid {
        gap: 24px 30px !important;
    }

    .sbx2-latest-card {
        grid-template-columns: 155px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .sbx2-latest-img-link {
        height: 138px !important;
    }

    .sbx2-latest-title {
        font-size: 19px !important;
    }

    /* ===== Editor's Picks ===== */

    .sbx2-band,
    .editor-picks-section {
        padding: 82px 0 92px !important;
    }

    .sbx2-band-grid {
        gap: 24px !important;
    }

    .sbx2-band-img-wrap {
        height: 210px !important;
    }

    .sbx2-band-card-title {
        font-size: 18px !important;
    }

    /* ===== Disclaimer ===== */

    .sbx-disclaimer-section {
        padding: 78px 0 86px !important;
    }

    .sbx-disclaimer-inner {
        padding: 46px 48px !important;
        gap: 32px !important;
    }

    .sbx-disclaimer-illustration {
        min-height: 235px !important;
    }

    .sbx-disclaimer-img {
        max-width: 220px !important;
    }

    /* ===== Footer ===== */

    .sbx2-footer {
        padding: 70px 0 28px !important;
    }

    .sbx2-footer-top {
        gap: 42px !important;
    }

    .sbx2-footer-menus {
        gap: 28px !important;
    }
}


/* ============================================================
   TABLET SCREENS
   991px and below
   Purpose:
   - Header desktop nav hide
   - Mobile burger show
   - Hero single column layout
   - Featured Guides 2-column grid
   - Latest Blogs single-column list
   - Editor's Picks 2-column grid
   - Disclaimer 1-column layout
   - Footer stacked layout
   ============================================================ */

@media only screen and (max-width: 991.98px) {
    /* ===== Header ===== */

    .sbx2-hdr .sbx2-hdr-inner {
        min-height: 70px !important;
        padding: 10px 0 !important;
    }

    .sbx2-hdr-logo-img {
        height: 36px !important;
        max-width: 170px !important;
    }

    .sbx2-hdr-nav {
        display: none !important;
    }

    .sbx2-hdr-burger {
        display: inline-flex !important;
    }

    .sbx2-search-toggle,
    .sbx2-hdr-burger {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    .sbx2-hdr-btn,
    .sbx2-hdr .btn-primary {
        display: none !important;
    }

    .sbx2-hdr-mobile-nav {
        top: 70px !important;
        height: calc(100vh - 70px) !important;
        background: var(--site-bg) !important;
        opacity: 0 !important;
        z-index: 10040 !important;
        box-shadow: 0 30px 60px rgba(16, 32, 51, 0.12) !important;
    }

    .sbx2-hdr-mobile-nav.sbx2-mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    .sbx2-hdr-mobile-link {
        background: var(--white) !important;
        border: 1px solid var(--border-light) !important;
        box-shadow: var(--shadow-xs) !important;
    }

    .sbx2-search-panel {
        position: fixed !important;
        top: 76px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        z-index: 10060 !important;
        border-radius: var(--radius-lg) !important;
    }

    /* ===== Hero ===== */

    .hero-slide-wrapper {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        min-height: auto !important;
        padding: 36px 0 52px !important;
    }

    .sbx2-hero-body {
        max-width: 760px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .sbx2-hero-kicker,
    .sbx2-hero-ctas,
    .sbx2-hero-chips {
        justify-content: center !important;
    }

    .sbx2-hero-para {
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .sbx2-hero-search {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.045em !important;
    }

    .sbx2-hero-col-image {
        max-width: 620px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .sbx2-hero-visual-card {
        min-height: 420px !important;
        max-width: 620px !important;
        border-radius: 30px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sbx2-hero-img-wrap,
    .sbx2-hero-img {
        min-height: 392px !important;
        border-radius: 24px !important;
    }

    .sbx2-hero-float.float-guide {
        left: 18px !important;
        top: 22px !important;
    }

    .sbx2-hero-float.float-editor {
        right: 18px !important;
        bottom: 28px !important;
    }

    /* ===== Featured Guides ===== */

    .featured-section {
        padding: 70px 0 78px !important;
    }

    .featured-section .sbx2-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ===== Latest Blogs ===== */

    .latest-section {
        padding: 74px 0 82px !important;
    }

    .sbx2-latest-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .sbx2-latest-card {
        grid-template-columns: 190px minmax(0, 1fr) !important;
        gap: 22px !important;
        padding: 14px !important;
        border: 1px solid var(--border-light) !important;
        box-shadow: 0 10px 28px rgba(16, 32, 51, 0.06) !important;
    }

    .sbx2-latest-img-link {
        height: 150px !important;
    }

    /* ===== Editor's Picks ===== */

    .sbx2-band,
    .editor-picks-section {
        padding: 74px 0 84px !important;
    }

    .sbx2-band-hdr {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-bottom: 32px !important;
    }

    .sbx2-band-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ===== Disclaimer ===== */

    .sbx-disclaimer-section {
        padding: 72px 0 80px !important;
    }

    .sbx-disclaimer-inner {
        grid-template-columns: 1fr !important;
        padding: 42px !important;
        text-align: left !important;
    }

    .sbx-disclaimer-inner .sbx-disclaimer-left {
        max-width: 100% !important;
    }

    .sbx-disclaimer-inner .sbx-disclaimer-right {
        max-width: 320px !important;
        margin-left: 0 !important;
    }

    .sbx-disclaimer-illustration {
        min-height: 220px !important;
    }

    /* ===== Footer ===== */

    .sbx2-footer-top {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
        padding-bottom: 44px !important;
    }

    .sbx2-footer-brand {
        max-width: 520px !important;
    }

    .sbx2-footer-desc {
        max-width: 480px !important;
    }

    .sbx2-footer-menus {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    }

    .sbx2-footer-newsletter-col {
        grid-column: 1 / -1 !important;
    }

    .sbx2-newsletter-input-group {
        max-width: 460px !important;
    }
}


/* ============================================================
   MOBILE / TABLET SMALL
   767px and below
   Purpose:
   - Hero mobile layout polish
   - Search button full width
   - Featured Guides 1-column grid
   - Latest Blogs compact list
   - Editor's Picks 1-column grid
   - Disclaimer mobile spacing
   - Footer mobile stacked layout
   - Section headers stacked
   - Mobile aur small screens par floating back-to-top button compact rakhna
   ============================================================ */

@media only screen and (max-width: 767.98px) {

    /* ===== Header ===== */

    .sbx2-hdr-logo-img {
        height: 34px !important;
        max-width: 155px !important;
    }

    .sbx2-search-panel {
        position: fixed !important;
        top: 76px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        border-radius: var(--radius-lg) !important;
    }

    /* ===== Hero ===== */

    .sbx2-hero {
        padding: 20px 0 56px !important;
    }

    .hero-slide-wrapper {
        gap: 28px !important;
        padding: 28px 0 42px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(1.95rem, 9vw, 2.65rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.045em !important;
    }

    .sbx2-hero-para {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .sbx2-hero-search {
        max-width: 100% !important;
        border-radius: 24px !important;
        flex-wrap: wrap !important;
        padding: 10px !important;
        margin-bottom: 14px !important;
    }

    .sbx2-hero-search-icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    .sbx2-hero-search input {
        min-height: 42px !important;
        flex: 1 1 calc(100% - 56px) !important;
    }

    .sbx2-hero-search button {
        width: 100% !important;
        min-height: 44px !important;
    }

    .sbx2-hero-ctas {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .sbx2-hero-ctas .sbx2-btn-hero-primary,
    .sbx2-hero-ctas .btn-secondary,
    .sbx2-btn-hero-ghost {
        width: 100% !important;
    }

    .sbx2-hero-chips {
        gap: 8px !important;
    }

    .sbx2-hero-chip {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .sbx2-hero-visual-card {
        min-height: 350px !important;
        padding: 12px !important;
        border-radius: 26px !important;
    }

    .sbx2-hero-img-wrap,
    .sbx2-hero-img {
        min-height: 326px !important;
        border-radius: 20px !important;
    }

    .sbx2-hero-float {
        min-width: 160px !important;
        padding: 11px 12px !important;
        border-radius: 16px !important;
    }

    .sbx2-hero-float-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    .sbx2-hero-float strong {
        font-size: 12px !important;
    }

    .sbx2-hero-float small {
        font-size: 9px !important;
    }

    .sbx2-hero-float.float-guide {
        left: 14px !important;
        top: 16px !important;
    }

    .sbx2-hero-float.float-editor {
        right: 14px !important;
        bottom: 18px !important;
    }

    .sbx2-hero-dots {
        bottom: 18px !important;
    }

    /* ===== Featured Guides ===== */

    .featured-section {
        padding: 58px 0 66px !important;
    }

    .featured-section .sbx2-section-hdr {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin-bottom: 26px !important;
    }

    .featured-section .sbx2-section-title {
        font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    }

    .featured-section .sbx2-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .featured-section .sbx2-blog-thumb {
        height: 230px !important;
    }

    .featured-section .sbx2-blog-body {
        padding: 20px 20px 22px !important;
    }

    .featured-section .sbx2-blog-title {
        font-size: 18px !important;
    }

    .featured-section .sbx2-blog-card::before,
    .featured-section .sbx2-blog-card::after {
        display: none !important;
    }

    /* ===== Latest Blogs ===== */

    .latest-section {
        padding: 62px 0 70px !important;
    }

    .sbx2-latest-card {
        grid-template-columns: 150px minmax(0, 1fr) !important;
        gap: 16px !important;
        border-radius: var(--radius-md) !important;
    }

    .sbx2-latest-img-link {
        height: 138px !important;
        border-radius: var(--radius-sm) !important;
    }

    .sbx2-latest-title {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }

    .sbx2-latest-excerpt {
        display: none !important;
    }

    /* ===== Editor's Picks ===== */

    .sbx2-band,
    .editor-picks-section {
        padding: 64px 0 72px !important;
    }

    .sbx2-band .sbx2-band-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    }

    .sbx2-band-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .sbx2-band-img-wrap {
        height: 230px !important;
    }

    .sbx2-band-body {
        padding: 18px 4px 4px !important;
    }

    .sbx2-band-card-title {
        font-size: 18px !important;
    }

    /* ===== Disclaimer ===== */

    .sbx-disclaimer-section {
        padding: 60px 0 68px !important;
    }

    .sbx-disclaimer-inner {
        padding: 32px 26px !important;
        gap: 26px !important;
        border-radius: 26px !important;
    }

    .sbx2-disclaimer-title {
        font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    }

    .sbx-disclaimer-left .sbx2-disclaimer-desc {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .sbx-disclaimer-inner .sbx-disclaimer-right {
        max-width: 280px !important;
    }

    .sbx-disclaimer-illustration {
        min-height: 200px !important;
        padding: 22px !important;
        border-radius: 24px !important;
    }

    .sbx-disclaimer-img {
        max-width: 200px !important;
    }

    /* ===== Footer ===== */

    .sbx2-footer {
        padding: 58px 0 24px !important;
    }

    .sbx2-footer-top {
        gap: 36px !important;
        padding-bottom: 38px !important;
    }

    .sbx2-footer-logo img {
        height: 44px !important;
    }

    .sbx2-footer-menus {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .sbx2-newsletter-input-group {
        max-width: 100% !important;
    }

    .sbx2-footer-bottom {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
    }


    /* ===== Back To Top ===== */

    .sbx-frap {
        right: 18px !important;
        bottom: 18px !important;
        width: 46px !important;
        height: 46px !important;
    }

    .sbx-frap i {
        font-size: 20px !important;
    }

}


/* ============================================================
   SMALL MOBILE
   575px and below
   Purpose:
   - Header icons compact
   - Hero image compact
   - Latest Blogs full card layout
   ============================================================ */

@media only screen and (max-width: 575.98px) {
    /* ===== Header ===== */

    .sbx2-hdr-logo-img {
        height: 30px !important;
        max-width: 135px !important;
    }

    .sbx2-search-toggle,
    .sbx2-hdr-burger {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
    }

    /* ===== Hero ===== */

    .sbx2-hero-h1 {
        font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
    }

    .sbx2-hero-visual-card {
        min-height: 300px !important;
    }

    .sbx2-hero-img-wrap,
    .sbx2-hero-img {
        min-height: 276px !important;
    }

    /* ===== Latest Blogs ===== */

    .sbx2-latest-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    .sbx2-latest-img-link {
        height: 220px !important;
    }

    .sbx2-latest-body {
        padding: 2px 2px 4px !important;
    }

    .sbx2-latest-title {
        font-size: 18px !important;
    }

    .sbx2-latest-excerpt {
        display: -webkit-box !important;
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
}


/* ============================================================
   EXTRA SMALL MOBILE
   479px and below
   Purpose:
   - Hero compact title
   - Hide hero floating cards
   - Featured cards tighter
   - Latest cards tighter
   - Editor's Picks cards tighter
   - Disclaimer compact
   - Footer newsletter stacked
   - Mobile aur small screens par floating back-to-top button compact rakhna
   ============================================================ */

@media only screen and (max-width: 479.98px) {

    /* ===== Header ===== */

    .sbx2-hdr .sbx2-hdr-inner {
        gap: 10px !important;
    }

    .sbx2-search-toggle,
    .sbx2-hdr-burger {
        width: 38px !important;
        height: 38px !important;
    }

    /* ===== Hero ===== */

    .sbx2-hero-kicker {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-hero-h1 {
        font-size: clamp(1.7rem, 10vw, 2.15rem) !important;
    }

    .sbx2-hero-visual-card {
        min-height: 300px !important;
    }

    .sbx2-hero-img-wrap,
    .sbx2-hero-img {
        min-height: 276px !important;
    }

    .sbx2-hero-float {
        display: none !important;
    }

    /* ===== Featured Guides ===== */

    .featured-section .sbx2-blog-thumb {
        height: 205px !important;
    }

    .featured-section .sbx2-blog-body {
        padding: 18px !important;
    }

    .featured-section .sbx2-blog-title {
        font-size: 17px !important;
    }

    .featured-section .sbx2-blog-excerpt {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .featured-section .sbx2-inline-cta {
        width: 100% !important;
    }

    /* ===== Latest Blogs ===== */

    .sbx2-latest-img-link {
        height: 200px !important;
    }

    .latest-section .sbx2-latest-read {
        width: 100% !important;
    }

    /* ===== Editor's Picks ===== */

    .sbx2-band-img-wrap {
        height: 205px !important;
    }

    .sbx2-band-card {
        padding: 12px !important;
    }

    .sbx2-band-excerpt {
        font-size: 13px !important;
    }

    .sbx2-band-read {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* ===== Disclaimer ===== */

    .sbx-disclaimer-inner {
        padding: 26px 20px !important;
        border-radius: 22px !important;
    }

    .sbx-disclaimer-inner .sbx-disclaimer-right {
        max-width: 100% !important;
    }

    .sbx-disclaimer-illustration {
        min-height: 180px !important;
    }

    .sbx-disclaimer-img {
        max-width: 175px !important;
    }

    /* ===== Footer ===== */

    .sbx2-footer {
        padding: 50px 0 22px !important;
    }

    .sbx2-footer-logo img {
        height: 40px !important;
        max-width: 190px !important;
    }

    .sbx2-footer-desc,
    .sbx2-newsletter-desc {
        font-size: 13px !important;
    }

    .sbx2-newsletter-input-group {
        flex-direction: column !important;
        border-radius: 24px !important;
    }

    .sbx2-newsletter-input-group input {
        width: 100% !important;
        height: 48px !important;
        text-align: left !important;
    }

    .sbx2-newsletter-input-group button {
        width: 100% !important;
        height: 46px !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .sbx2-footer-social a {
        width: 38px !important;
        height: 38px !important;
    }

    
    
    /* ===== Back To Top ===== */

    .sbx-frap {
        right: 16px !important;
        bottom: 16px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .sbx-frap i {
        font-size: 19px !important;
    }

}






/* ============================================================
   BLOG LISTING PAGE RESPONSIVE
   Purpose:
   - Blog listing hero, cards, sidebar aur pagination ko tablet/mobile par clean rakhna
   - Sirf main Blog Listing Page ko target karna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    /* ===== Blog Listing ===== */

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 64px !important;
        padding-bottom: 84px !important;
    }

    .sbx2-blog-view-grid {
        grid-template-columns: minmax(0, 1fr) 310px !important;
        gap: 28px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb,
    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 225px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 28px 30px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: 1.6rem !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    /* ===== Blog Listing Hero ===== */

    .sbx2-blog-hero-index {
        padding: 78px 0 74px !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-blog-subtitle-index {
        font-size: 15px !important;
    }

    /* ===== Blog Listing Layout ===== */

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 60px !important;
        padding-bottom: 80px !important;
    }

    .sbx2-blog-view-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .sbx2-blog-sidebar {
        position: relative !important;
        top: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    /* ===== Blog Listing Hero ===== */

    .sbx2-blog-hero-index {
        padding: 66px 0 62px !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-blog-subtitle-index {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .sbx2-badge-gold {
        font-size: 11px !important;
        padding: 8px 13px !important;
    }

    /* ===== Blog Listing Cards ===== */

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 52px !important;
        padding-bottom: 72px !important;
    }

    .sbx2-blog-list-row {
        gap: 22px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        grid-template-columns: 1fr !important;
        border-radius: 24px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb,
    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 240px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 24px 22px 26px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
        line-height: 1.18 !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-excerpt {
        font-size: 13px !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }

    .sbx2-blog-view-grid .sbx2-read-more {
        min-height: 42px !important;
    }

    /* ===== Blog Sidebar ===== */

    .sbx2-blog-sidebar {
        grid-template-columns: 1fr !important;
    }

    .sbx2-blog-sidebar .sbx2-side-panel {
        border-radius: 24px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    /* ===== Blog Listing ===== */

    .sbx2-blog-hero-index {
        padding: 60px 0 58px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb,
    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 220px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 22px 20px 24px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-meta {
        font-size: 10px !important;
        gap: 8px 12px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-title {
        font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
    }

    .sbx2-blog-view-grid .sbx2-read-more {
        width: 100% !important;
    }
}

@media only screen and (max-width: 479.98px) {
    /* ===== Blog Listing Hero ===== */

    .sbx2-blog-hero-index {
        padding: 58px 0 56px !important;
    }

    .sbx2-badge-gold {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-blog-title-index {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-blog-subtitle-index {
        font-size: 13px !important;
    }

    /* ===== Blog Listing Cards ===== */

    .sbx2-blog-hero-index + .container.section-padding {
        padding-top: 44px !important;
        padding-bottom: 64px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-card {
        border-radius: 22px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-thumb,
    .sbx2-blog-view-grid .sbx2-blog-wide-thumb img {
        min-height: 210px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-body {
        padding: 22px 18px 24px !important;
    }

    .sbx2-blog-view-grid .sbx2-blog-wide-excerpt {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    /* ===== Blog Sidebar ===== */

    .sbx2-blog-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-item {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-img {
        width: 64px !important;
        height: 58px !important;
    }

    .sbx2-blog-sidebar .sbx2-mini-title {
        font-size: 13px !important;
    }

    .sbx2-blog-sidebar .sbx2-side-category-list a {
        min-height: 44px !important;
        padding: 11px 13px !important;
        font-size: 13px !important;
    }
}





/* ============================================================
   SINGLE CATEGORY BLOG LIST RESPONSIVE
   Purpose:
   - Single category page ko tablet/mobile par clean rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-cat-view-grid {
        grid-template-columns: minmax(0, 1fr) 310px !important;
        gap: 28px !important;
    }

    .sbx2-cat-blog-card {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    .sbx2-cat-blog-thumb,
    .sbx2-cat-blog-thumb img {
        min-height: 225px !important;
    }

    .sbx2-cat-blog-body {
        padding: 28px 30px !important;
    }

    .sbx2-cat-blog-title {
        font-size: 1.6rem !important;
    }

    .sbx2-cat-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-cat-hero {
        padding: 78px 0 74px !important;
    }

    .sbx2-cat-hero-inner {
        grid-template-columns: 110px minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .sbx2-cat-hero-logo {
        width: 110px !important;
        height: 110px !important;
    }

    .sbx2-cat-hero-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-cat-view-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .sbx2-cat-sidebar {
        position: relative !important;
        top: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-cat-hero {
        padding: 66px 0 62px !important;
    }

    .sbx2-cat-hero-inner {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        justify-items: center !important;
    }

    .sbx2-cat-hero-content {
        align-items: center !important;
    }

    .sbx2-cat-hero-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-cat-hero-desc {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .sbx2-single-cat-section {
        padding: 56px 0 72px !important;
    }

    .sbx2-cat-blog-card {
        grid-template-columns: 1fr !important;
        border-radius: 24px !important;
    }

    .sbx2-cat-blog-thumb,
    .sbx2-cat-blog-thumb img {
        min-height: 240px !important;
    }

    .sbx2-cat-blog-body {
        padding: 24px 22px 26px !important;
    }

    .sbx2-cat-blog-title {
        font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
        line-height: 1.18 !important;
    }

    .sbx2-cat-blog-excerpt {
        font-size: 13px !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }

    .sbx2-cat-sidebar {
        grid-template-columns: 1fr !important;
    }

    .sbx2-cat-sidebar .sbx2-side-panel {
        border-radius: 24px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-cat-hero {
        padding: 60px 0 58px !important;
    }

    .sbx2-cat-hero-logo {
        width: 96px !important;
        height: 96px !important;
    }

    .sbx2-cat-blog-thumb,
    .sbx2-cat-blog-thumb img {
        min-height: 220px !important;
    }

    .sbx2-cat-blog-body {
        padding: 22px 20px 24px !important;
    }

    .sbx2-cat-blog-body .sbx2-blog-meta {
        font-size: 10px !important;
        gap: 8px 12px !important;
    }

    .sbx2-cat-blog-title {
        font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
    }

    .sbx2-cat-blog-body .sbx2-read-more {
        width: 100% !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-cat-hero {
        padding: 58px 0 56px !important;
    }

    .sbx2-cat-eyebrow {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-cat-hero-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-cat-hero-desc {
        font-size: 13px !important;
    }

    .sbx2-cat-blog-card {
        border-radius: 22px !important;
    }

    .sbx2-cat-blog-thumb,
    .sbx2-cat-blog-thumb img {
        min-height: 210px !important;
    }

    .sbx2-cat-blog-body {
        padding: 22px 18px 24px !important;
    }

    .sbx2-cat-blog-excerpt {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .sbx2-cat-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-cat-sidebar .sbx2-mini-item {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    .sbx2-cat-sidebar .sbx2-mini-img {
        width: 64px !important;
        height: 58px !important;
    }

    .sbx2-cat-sidebar .sbx2-mini-title {
        font-size: 13px !important;
    }
}






/* ============================================================
   SINGLE BLOG DETAIL RESPONSIVE
   Purpose:
   - Single blog article page ko tablet/mobile par readable rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-single-blog-grid {
        grid-template-columns: minmax(0, 1fr) 310px !important;
        gap: 28px !important;
    }

    .sbx2-article-content {
        padding: 46px 48px 38px !important;
    }

    .sbx2-blog-footer {
        padding: 24px 48px 38px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-single-blog-hero {
        min-height: auto !important;
        padding: 86px 0 128px !important;
    }

    .sbx2-single-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .sbx2-single-blog-sidebar {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-single-blog-hero {
        padding: 70px 0 110px !important;
    }

    .sbx2-blog-title-xl {
        font-size: clamp(2rem, 9vw, 2.9rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-blog-meta-row {
        gap: 10px !important;
    }

    .sbx2-blog-meta-sep {
        display: none !important;
    }

    .sbx2-blog-meta-item {
        width: 100% !important;
        font-size: 13px !important;
    }

    .sbx2-blog-main-card {
        margin-top: -74px !important;
        border-radius: 26px !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 260px !important;
        max-height: 320px !important;
    }

    .sbx2-article-content {
        padding: 34px 26px 28px !important;
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    .sbx2-blog-footer {
        padding: 20px 26px 32px !important;
    }

    .sbx2-share-box {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .sbx2-post-nav-wrapper {
        grid-template-columns: 1fr !important;
    }

    .sbx2-single-blog-sidebar {
        grid-template-columns: 1fr !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-single-blog-hero {
        padding: 60px 0 96px !important;
    }

    .sbx2-blog-badge-alt {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-blog-title-xl {
        font-size: clamp(1.8rem, 10vw, 2.35rem) !important;
    }

    .sbx2-blog-main-card {
        margin-top: -64px !important;
        border-radius: 22px !important;
    }

    .sbx2-featured-image,
    .sbx2-featured-image-wrap {
        min-height: 220px !important;
    }

    .sbx2-article-content {
        padding: 28px 20px 24px !important;
        font-size: 14px !important;
    }

    .sbx2-blog-footer {
        padding: 18px 20px 28px !important;
    }

    .sbx2-share-icons {
        width: 100% !important;
    }

    .sbx2-p-social-btn {
        flex: 1 !important;
    }

    .sbx2-nav-link {
        min-height: auto !important;
        align-items: flex-start !important;
    }

    .sbx2-nav-thumb,
    .sbx2-nav-icon-wrap {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
        border-radius: 16px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-item {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    .sbx2-single-blog-sidebar .sbx2-mini-img {
        width: 64px !important;
        height: 58px !important;
    }
}





/* ============================================================
   CATEGORIES LISTING PAGE RESPONSIVE
   Purpose:
   - Categories page ko tablet/mobile par clean grid layout dena
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-categories-grid {
        gap: 24px !important;
    }

    .sbx2-category-card {
        padding: 24px !important;
    }

    .sbx2-category-title {
        font-size: 18px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-categories-page-hero {
        padding: 78px 0 126px !important;
    }

    .sbx2-categories-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-categories-subtitle {
        font-size: 15px !important;
    }

    .sbx2-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: -64px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-categories-page-hero {
        padding: 66px 0 108px !important;
    }

    .sbx2-categories-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-categories-subtitle {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .sbx2-categories-badge {
        font-size: 11px !important;
        padding: 8px 13px !important;
    }

    .sbx2-categories-list-section {
        padding-bottom: 72px !important;
    }

    .sbx2-categories-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: -54px !important;
    }

    .sbx2-category-card {
        min-height: auto !important;
        border-radius: 24px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-categories-page-hero {
        padding: 60px 0 98px !important;
    }

    .sbx2-category-card {
        padding: 22px !important;
    }

    .sbx2-category-icon {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px !important;
    }

    .sbx2-category-card-top {
        gap: 15px !important;
    }

    .sbx2-category-title {
        font-size: 17px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-categories-page-hero {
        padding: 58px 0 92px !important;
    }

    .sbx2-categories-badge {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-categories-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-categories-subtitle {
        font-size: 13px !important;
    }

    .sbx2-category-card {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    .sbx2-category-icon {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
    }

    .sbx2-category-title {
        font-size: 16px !important;
    }

    .sbx2-category-children a {
        font-size: 12px !important;
    }
}






/* ============================================================
   STORES LISTING PAGE RESPONSIVE
   Purpose:
   - Stores directory ko tablet/mobile par clean rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-stores-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 20px !important;
    }

    .sbx2-store-card {
        min-height: 170px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-stores-page-hero {
        padding: 78px 0 126px !important;
    }

    .sbx2-stores-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-stores-subtitle {
        font-size: 15px !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 10px 48px !important;
    }

    .sbx2-alpha-btn {
        min-width: 40px !important;
        height: 40px !important;
        font-size: 11px !important;
    }

    .sbx2-store-group-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .sbx2-search-container {
        width: 100% !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-stores-page-hero {
        padding: 66px 0 108px !important;
    }

    .sbx2-stores-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-stores-subtitle {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .sbx2-stores-badge {
        font-size: 11px !important;
        padding: 8px 13px !important;
    }

    .sbx2-stores-directory-section {
        padding-bottom: 72px !important;
    }

    .sbx2-alpha-nav-wrapper {
        margin-top: -32px !important;
        margin-bottom: 42px !important;
    }

    .sbx2-alpha-filter {
        border-radius: 24px !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 10px 44px !important;
    }

    .sbx2-store-group {
        margin-bottom: 46px !important;
    }

    .sbx2-stores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .sbx2-store-card {
        min-height: 162px !important;
        padding: 20px 14px !important;
        border-radius: 22px !important;
    }

    .sbx2-store-logo-wrapper {
        width: 68px !important;
        height: 68px !important;
        border-radius: 18px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-stores-page-hero {
        padding: 60px 0 98px !important;
    }

    .sbx2-store-group-title {
        font-size: clamp(1.55rem, 8vw, 2.1rem) !important;
    }

    .sbx2-alpha-filter .swiper {
        padding: 10px 40px !important;
    }

    .sbx2-alpha-filter .swiper .swiper-button-prev,
    .sbx2-alpha-filter .swiper .swiper-button-next {
        width: 40px !important;
    }

    .sbx2-store-logo-wrapper {
        width: 62px !important;
        height: 62px !important;
    }

    .sbx2-store-name {
        font-size: 13px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-stores-page-hero {
        padding: 58px 0 92px !important;
    }

    .sbx2-stores-badge {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-stores-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-stores-subtitle {
        font-size: 13px !important;
    }

    .sbx2-stores-grid {
        gap: 14px !important;
    }

    .sbx2-store-card {
        min-height: 154px !important;
        padding: 18px 12px !important;
    }

    .sbx2-store-logo-wrapper {
        width: 58px !important;
        height: 58px !important;
        padding: 8px !important;
    }

    .sbx2-store-count {
        font-size: 9px !important;
        padding: 5px 8px !important;
    }
}







/* ============================================================
   SINGLE STORE COUPONS RESPONSIVE
   Purpose:
   - Store hero, coupon cards, filters aur sidebar ko mobile par clean rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-store-hero-card {
        grid-template-columns: 132px minmax(0, 1fr) auto !important;
        gap: 24px !important;
        padding: 32px !important;
    }

    .sbx2-store-hero-logo {
        width: 122px !important;
        height: 122px !important;
    }

    .sbx2-store-layout {
        grid-template-columns: minmax(0, 1fr) 310px !important;
        gap: 28px !important;
    }

    .sbx2-coupon-card {
        grid-template-columns: 160px minmax(0, 1fr) !important;
    }

    .sbx2-coupon-label span {
        font-size: 24px !important;
    }

    .sbx2-store-sidebar .sbx2-side-panel {
        padding: 20px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-single-store-hero {
        padding: 70px 0 110px !important;
    }

    .sbx2-store-hero-card {
        grid-template-columns: 118px minmax(0, 1fr) !important;
    }

    .sbx2-store-hero-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    .sbx2-store-hero-logo {
        width: 110px !important;
        height: 110px !important;
    }

    .sbx2-single-store-title {
        font-size: clamp(2.1rem, 7vw, 3.35rem) !important;
    }

    .sbx2-store-layout {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .sbx2-store-sidebar {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-single-store-hero {
        padding: 20px 0px 40px !important;
    }

    .sbx2-store-hero-card {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        justify-items: center !important;
        padding: 28px 24px !important;
        border-radius: 28px !important;
    }

    .sbx2-store-hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .sbx2-store-hero-stats {
        display: none !important;
    }

    .sbx2-store-hero-actions {
        justify-content: center !important;
        width: 100%;
    }

    .sbx2-btn-visit-store {
        width: 100% !important;
        padding: 10px 30px !important;
        min-height: auto !important;
    }

    .sbx2-coupons-feed {
        margin-top: 0px;
    }

    .sbx2-offer-title {
        font-size: clamp(1.75rem, 8vw, 2.4rem) !important;
    }

    .sbx2-coupon-filters {
        border-radius: 24px !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .sbx2-coupon-card {
        grid-template-columns: 1fr !important;
        border-radius: 24px !important;
    }

    .sbx2-coupon-label {
        min-height: auto !important;
        padding: 20px !important;
        border-right: 0 !important;
        border-bottom: 1px dashed var(--border-light, #F1DED7) !important;
    }

    .sbx2-coupon-label::before,
    .sbx2-coupon-label::after {
        display: none !important;
    }

    .sbx2-coupon-content {
        padding: 24px 22px !important;
    }

    .sbx2-coupon-action-row {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .sbx2-coupon-cta {
        width: 100% !important;
    }

    .sbx2-store-sidebar {
        grid-template-columns: 1fr !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-store-hero-card {
        padding: 24px 20px !important;
        border-radius: 24px !important;
        gap: 10px !important;
    }

    .sbx2-store-hero-logo {
        width: 96px !important;
        height: 96px !important;
        padding: 14px !important;
    }

    .sbx2-single-store-title {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }

    .sbx2-store-verified-badge {
        font-size: 13px !important;
    }

    .sbx2-store-hero-stats span {
        width: 100% !important;
        justify-content: center !important;
    }

    .sbx2-coupon-content {
        padding: 22px 18px !important;
    }

    .sbx2-coupon-title {
        font-size: 1.25rem !important;
    }

    .sbx2-coupon-stats {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .sbx2-store-sidebar .sbx2-side-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }
}






/* ============================================================
   REDIRECT PAGE RESPONSIVE
   Purpose:
   - Redirect page ko mobile/tablet par clean rakhna
   ============================================================ */

@media only screen and (max-width: 767.98px) {
    .sbx2-redirect-wrap {
        padding: 20px !important;
    }

    .sbx2-redirect-card {
        padding: 46px 28px 38px !important;
        border-radius: 26px !important;
    }

    .sbx2-redirect-spinner {
        width: 66px !important;
        height: 66px !important;
        margin-bottom: 24px !important;
        border-width: 5px !important;
    }

    .sbx2-redirect-title {
        font-size: clamp(1.85rem, 8vw, 2.25rem) !important;
    }

    .sbx2-redirect-desc {
        font-size: 15px !important;
    }

    .sbx2-redirect-cancel {
        width: 100% !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-redirect-wrap {
        padding: 14px !important;
    }

    .sbx2-redirect-card {
        padding: 40px 22px 32px !important;
        border-radius: 22px !important;
    }

    .sbx2-redirect-badge {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-redirect-spinner {
        width: 58px !important;
        height: 58px !important;
    }

    .sbx2-redirect-desc {
        font-size: 14px !important;
    }

    .sbx2-redirect-hint {
        font-size: 13px !important;
    }
}





/* ============================================================
   COUPON MODAL RESPONSIVE
   Purpose:
   - Coupon modal ko mobile par clean aur usable rakhna
   ============================================================ */

@media only screen and (max-width: 767.98px) {
    .coupon-modal-backdrop {
        align-items: flex-end !important;
        padding: 16px !important;
    }

    .coupon-modal-card {
        width: 100% !important;
        border-radius: 26px !important;
    }

    .modal-brand-header {
        padding: 38px 26px 28px !important;
    }

    .modal-copy-zone {
        padding: 26px 26px 32px !important;
    }

    .modal-close {
        top: 14px !important;
        right: 14px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .coupon-modal-backdrop {
        padding: 10px !important;
    }

    .coupon-modal-card {
        border-radius: 22px !important;
    }

    .modal-logo-wrap {
        width: 70px !important;
        height: 70px !important;
        border-radius: 20px !important;
    }

    .modal-brand-header {
        padding: 34px 20px 24px !important;
    }

    .modal-brand-header h3 {
        font-size: 1.55rem !important;
    }

    .modal-brand-header p {
        font-size: 13px !important;
    }

    .modal-copy-zone {
        padding: 24px 20px 28px !important;
    }

    .code-box {
        grid-template-columns: 1fr !important;
        border-radius: 18px !important;
    }

    .code-text {
        min-height: 58px !important;
        font-size: 1.25rem !important;
    }

    .btn-copy-code {
        width: calc(100% - 16px) !important;
        min-height: 46px !important;
        margin: 0 8px 8px !important;
        border-radius: 14px !important;
    }
}





/* ============================================================
   CONTACT PAGE RESPONSIVE
   Purpose:
   - Contact page ko tablet/mobile par clean rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-contact-grid {
        grid-template-columns: minmax(0, 1fr) 450px !important;
        gap: 34px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 34px !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-contact-hero {
        padding: 78px 0 126px !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-contact-hero-subtitle {
        font-size: 15px !important;
    }

    .sbx2-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        margin-top: -64px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-contact-hero {
        padding: 66px 0 108px !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-contact-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .sbx2-contact-badge {
        font-size: 11px !important;
        padding: 8px 13px !important;
    }

    .sbx2-contact-section {
        padding-bottom: 72px !important;
    }

    .sbx2-contact-grid {
        margin-top: -54px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 28px !important;
        border-radius: 26px !important;
    }

    .sbx2-contact-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    }

    .sbx2-contact-item {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .sbx2-contact-icon {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-contact-hero {
        padding: 60px 0 98px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 24px !important;
    }

    .sbx2-contact-item {
        gap: 12px !important;
    }

    .sbx2-contact-text strong {
        font-size: 16px !important;
    }

    .sbx2-contact-text small {
        font-size: 13px !important;
    }

    .sbx2-contact-form-header h3 {
        font-size: 24px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-contact-hero {
        padding: 58px 0 92px !important;
    }

    .sbx2-contact-badge {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-contact-hero-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-contact-hero-subtitle {
        font-size: 13px !important;
    }

    .sbx2-contact-info,
    .sbx2-contact-form-card {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .sbx2-contact-item {
        flex-direction: column !important;
    }

    .sbx2-form-group :is(input, textarea) {
        border-radius: 16px !important;
    }

    .sbx2-form-group textarea {
        border-radius: 18px !important;
    }
}







/* ============================================================
   ABOUT PAGE RESPONSIVE
   Purpose:
   - About page ko tablet/mobile par clean rakhna
   ============================================================ */

@media only screen and (max-width: 1199.98px) {
    .sbx2-about-intro-card {
        grid-template-columns: minmax(0, 1fr) 300px !important;
        padding: 36px !important;
    }

    .sbx2-about-values {
        gap: 22px !important;
    }

    .sbx2-about-value-card {
        padding: 26px !important;
    }

    .sbx2-about-promise-card {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .sbx2-about-hero {
        padding: 78px 0 126px !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(2.2rem, 8vw, 3.35rem) !important;
    }

    .sbx2-about-hero-subtitle {
        font-size: 15px !important;
    }

    .sbx2-about-intro-card {
        grid-template-columns: 1fr !important;
        margin-top: -64px !important;
    }

    .sbx2-about-intro-right {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sbx2-about-values {
        grid-template-columns: 1fr !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .sbx2-about-hero {
        padding: 66px 0 108px !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    .sbx2-about-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .sbx2-about-badge {
        font-size: 11px !important;
        padding: 8px 13px !important;
    }

    .sbx2-about-section {
        padding-bottom: 72px !important;
    }

    .sbx2-about-intro-card {
        margin-top: -54px !important;
        padding: 28px !important;
        border-radius: 26px !important;
    }

    .sbx2-about-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    }

    .sbx2-about-content {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .sbx2-about-intro-right {
        grid-template-columns: 1fr !important;
    }

    .sbx2-about-promise-card {
        padding: 30px 28px !important;
        border-radius: 26px !important;
    }

    .sbx2-about-promise-actions {
        width: 100% !important;
    }

    .sbx2-about-primary-btn,
    .sbx2-about-secondary-btn {
        width: 100% !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .sbx2-about-hero {
        padding: 60px 0 98px !important;
    }

    .sbx2-about-intro-card,
    .sbx2-about-value-card {
        padding: 24px !important;
    }

    .sbx2-about-stat-card {
        padding: 22px !important;
    }

    .sbx2-about-promise-card {
        padding: 28px 24px !important;
    }
}

@media only screen and (max-width: 479.98px) {
    .sbx2-about-hero {
        padding: 58px 0 92px !important;
    }

    .sbx2-about-badge {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    .sbx2-about-hero-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    }

    .sbx2-about-hero-subtitle {
        font-size: 13px !important;
    }

    .sbx2-about-intro-card,
    .sbx2-about-value-card,
    .sbx2-about-promise-card {
        border-radius: 22px !important;
    }

    .sbx2-about-value-card h3 {
        font-size: 19px !important;
    }

    .sbx2-about-promise-content h2 {
        font-size: clamp(1.55rem, 8vw, 2.1rem) !important;
    }
}