/* ============================================================
   responsive.css — Kalon MedSpa
   Device-specific media queries for all target screens

   DEVICE REFERENCE:
   iPhone SE           → 375 × 667
   iPhone 12 Pro       → 390 × 844
   Pixel 7             → 412 × 915
   iPhone 14 Pro Max   → 430 × 932
   Samsung Galaxy S8+  → 360 × 740
   iPad Mini           → 768 × 1024
   iPad Pro            → 1024 × 1366
   Surface Duo         → 540 × 720  (dual-screen)
   Galaxy Z Fold 5     → 344 × 882 (folded) / 882 × 1080 (unfolded)
   Nest Hub            → 1024 × 600
   Nest Hub Max        → 1280 × 800
   Asus Zenbook Fold   → 1920 × 1280 / 853 × 1280 (folded)
   Samsung S20 Ultra   → 412 × 915
   Surface Pro 7       → 912 × 1368
============================================================ */

/* ============================================================
   CRITICAL GLOBAL FIXES — overflow & slider
   ============================================================ */

/* Prevent any horizontal overflow on ALL screens */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Every section must stay within viewport */
section,
.hero-section,
.brand-intro,
.hero-with-cta,
.treatments-section,
.featured-section,
.reviews-section,
.events-section-full,
.trust-section,
.before-after-section,
.testimonials-section,
.awards-section,
.locations-section,
.faq-section {
    overflow-x: hidden;
    max-width: 100%;
}



/* Mobile: collapse menu styles */
@media (max-width: 991.98px) {

    .navbar {
        min-height: 62px;
        padding: 6px 0 !important;
    }

    .navbar-brand .logo-circle {
        width: 44px;
        height: 44px;
    }

    /* Hamburger toggler styling */
    .navbar-toggler {
        border: 1.5px solid #e0e0e0;
        border-radius: 8px;
        padding: 5px 9px;
        box-shadow: none !important;
        outline: none !important;
    }

    .navbar-toggler:focus {
        box-shadow: none !important;
    }

    .navbar-toggler-icon {
        width: 20px;
        height: 20px;
    }

    /* Collapse menu panel */
    .navbar-collapse {
        background: #fff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
        padding: 14px 20px 20px;
        margin-top: 6px;
        border-top: 1px solid #f0f0f0;
    }

    /* Nav links in mobile */
    .navbar-nav {
        gap: 2px;
        margin-bottom: 14px !important;
    }

    .navbar-nav .nav-link {
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 10px 12px !important;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active {
        background: #fff3f3;
        color: #e579ad !important;
    }

    /* Buttons row in mobile collapse */
    .navbar .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
        gap: 10px !important;
    }

    .navbar .btn-signin {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 8px;
    }

    .navbar .btn-primary-custom.book-btn {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 10px 20px;
    }
}


/* ============================================================
   GOOGLE REVIEW BUTTON — FIXED
   ============================================================ */

/* Fix the review button layout properly */
.review-btn {
    background-color: #e579ad;
    color: white;
    border: none;
    border-radius: 26px;
    padding: 6px 10px 6px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 40px;
    min-width: 160px;
    max-width: 170px;
    white-space: nowrap;
}

.review-btn .google-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    padding: 2px;
}

/* Google rating card layout fix */
.google-rating-card {
    background: transparent;
    text-align: left;
    max-width: 280px;
    margin: 0;
    padding: 16px;
}

.google-rating-card .d-flex.align-items-cente {
    align-items: flex-start !important;
    gap: 14px !important;
}

.profile-image-wrapper {
    flex-shrink: 0;
    margin-bottom: 0;
}

.profile-image {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.reviewer-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px !important;
}

.rating-number {
    font-size: 18px;
    font-weight: 700;
    margin: 0 !important;
    line-height: 1;
}

.large-stars .star {
    font-size: 16px;
    color: #FFA500;
    line-height: 1;
}

.review-count {
    font-size: 13px;
    font-weight: 600;
    margin: 0 !important;
    line-height: 1.3;
}

.powered-by {
    font-size: 13px;
    font-weight: 500;
    margin: 0 !important;
    line-height: 1.3;
}

/* Mobile: google card center align */
@media (max-width: 767.98px) {

    .google-rating-card {
        max-width: 100%;
        text-align: left;
        padding: 0 0 20px 0;
    }

    .review-btn {
        min-width: 150px;
        font-size: 15px;
        height: 36px;
        padding: 5px 8px 5px 14px;
    }

    .review-btn .google-icon {
        width: 25px;
        height: 25px;
    }

    .faq-title {
        margin-bottom: 10px !important;
    }
}

/* Small phones */
@media (max-width: 430px) {

    .google-rating-card {
        padding: 0 0 16px 0;
    }

    .review-btn {
        min-width: 140px;
        font-size: 15px;
        height: 34px;
        gap: 8px;
    }

    .profile-image {
        width: 50px;
        height: 50px;
    }

    .reviewer-name {
        font-size: 14px;
    }
}


/* ============================================================
   0. GLOBAL MOBILE BASE — applies to all phones ≤ 430px
   ============================================================ */
@media (max-width: 430px) {

    /* --- Navbar --- */
    .navbar {
        padding: 6px 0 !important;
        min-height: 56px !important;
    }

    .navbar-brand .logo-circle,
    .logo-circle {
        width: 38px !important;
        height: 38px !important;
    }

    /* Collapse menu full width on small phones */
    .navbar-collapse {
        padding: 12px 16px 16px !important;
        border-radius: 0 0 12px 12px !important;
    }

    .navbar-nav .nav-link {
        font-size: 15px !important;
        padding: 9px 10px !important;
    }

    .navbar .btn-primary-custom.book-btn {
        font-size: 13px !important;
        padding: 9px 16px !important;
    }

    .navbar .btn-signin {
        font-size: 13px !important;
    }

    /* --- Hero --- */
    .hero-section {
        height: auto;
        min-height: 420px;
        margin-top: 60px;
        padding-bottom: 30px;
        background-position: center top;
    }

    .mt-350px {
        margin-top: 200px;
    }

    .hero-title {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: -0.3px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    /* --- Brand Intro / Gallery --- */
    .brand-intro {
        padding: 2rem 0;
    }

    .gallery-card {
        height: 180px;
        border-radius: 12px;
    }

    .brand-intro h2 {
        font-size: 22px;
    }

    /* --- CTA Hero --- */
    .hero-with-cta {
        min-height: 380px;
    }

    .hero-with-cta .cta-card {
        margin-top: 260px;
        padding: 20px !important;
        border-radius: 16px !important;
        max-width: 100%;
        position: relative;
    }

    .hero-with-cta .cta-card h2 {
        font-size: 20px;
    }

    .hero-with-cta .cta-card p {
        font-size: 13px;
    }

    /* --- Buttons --- */
    .btn-primary-custom,
    .book-btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* --- Treatments --- */
    .treatments-section {
        padding-top: 40px !important;
        margin-top: 0;
        border-radius: 24px;
    }

    .treatments-section h2 {
        font-size: 20px;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 200px !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }

    .treatment-overlay h4 {
        font-size: 16px;
    }

    /* --- Featured Cards --- */
    .featured-section {
        padding: 30px 0;
        border-radius: 24px;
    }

    .featured-card .row {
        flex-direction: column;
    }

    .featured-card .col-7,
    .featured-card .col-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .featured-card img {
        height: 160px;
        margin-left: 0;
        width: 100%;
        object-fit: cover;
    }

    .featured-card h5 {
        font-size: 15px;
    }

    /* --- Reviews --- */
    .reviews-section {
        padding: 24px 0;
    }

    .google-rating-card {
        max-width: 100%;
        padding: 16px;
        text-align: left;
    }

    .reviewer-name {
        font-size: 15px;
    }

    .review-count,
    .powered-by {
        font-size: 13px;
    }

    /* Mobile slider — tight padding so arrows don't overflow */
    .review-slider-container {
        overflow: hidden !important;
    }

    .slider-prev {
        left: 2px !important;
    }

    .slider-next {
        right: 2px !important;
    }

    .review-card {
        padding: 16px;
        min-height: 170px;
    }

    .review-text {
        font-size: 12px;
    }

    .slider-nav {
        width: 30px;
        height: 30px;
    }

    .slider-nav i {
        font-size: 13px;
    }

    /* --- Events --- */
    .events-section-full {
        background: #DCC5B4;
    }

    .events-container {
        flex-direction: column;
        min-height: auto;
    }

    .events-content {
        position: relative;
        width: 100%;
        padding: 32px 20px;
    }

    .events-heading {
        font-size: 26px;
    }

    .events-description {
        font-size: 13px;
    }

    .events-btn {
        width: 100%;
        justify-content: center;
        font-size: 14px;
    }

    .events-image-wrapper {
        position: relative;
        width: 100%;
        height: 240px;
    }

    /* --- Logo Marquee --- */
    .logo-track {
        gap: 36px;
        animation-duration: 12s;
    }

    .partner-logo {
        height: 28px;
    }

    /* --- Trust --- */
    .trust-section {
        border-radius: 30px;
        padding: 40px 0;
    }

    .trust-heading {
        font-size: 20px;
        letter-spacing: 0.3px;
    }

    .trust-heading br {
        display: none;
    }

    /* --- Before/After --- */
    .before-after-section {
        border-radius: 30px;
        padding: 20px 0;
    }

    .before-after-title {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .before-after-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 12px;
    }

    .before-after-slider {
        height: 220px;
    }

    /* --- Testimonials --- */
    .testimonials-section {
        padding: 24px 0;
        border-radius: 30px;
    }

    .testimonials-heading {
        font-size: 20px;
        margin-bottom: 28px;
    }

    .testimonial-card {
        padding: 14px;
    }

    .testimonial-text {
        font-size: 12px;
    }

    .btn-see-all {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        /* top: -175px; */
    }

    /* --- Awards --- */
    .awards-section {
        padding: 2rem 0;
    }

    .awards-section h2 {
        font-size: 20px;
    }

    .awards-section .col-lg-6:last-child img {
        margin-top: 20px;
    }

    /* --- Footer --- */
    .site-footer {
        border-radius: 20px 20px 0 0;
    }

    .footer-top {
        padding: 24px 16px 16px;
        flex-direction: column;
        gap: 16px;
    }

    .footer-logo-img {
        width: 54px;
        height: 54px;
    }

    .footer-nav-cols {
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .footer-nav-head,
    .footer-nav-sub {
        font-size: 13px;
    }

    .footer-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-qr-img {
        width: 60px;
        height: 60px;
    }

    .footer-book-btn {
        font-size: 13px;
        padding: 9px 16px;
        width: 100%;
        justify-content: center;
    }

    .footer-divider {
        margin: 0 16px;
    }

    .footer-bottom {
        padding: 14px 16px 18px;
        flex-direction: column;
        gap: 12px;
    }

    .footer-copy {
        font-size: 11px;
        white-space: normal;
        text-align: left;
    }

    .footer-policy-links {
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-policy-links a {
        font-size: 11px;
    }

    .footer-made-badge span {
        font-size: 12px;
    }

    /* --- bg-light-pink border-radius mobile --- */
    .bg-light-pink {
        border-radius: 24px;
    }
}


/* ============================================================
   1. iPHONE SE  —  375 × 667
   ============================================================ */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (max-device-height: 667px) {

    .hero-section {
        height: auto;
        min-height: 380px;
        margin-top: 58px;
    }

    .mt-350px {
        margin-top: 190px;
    }

    .hero-title {
        font-size: 17px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .gallery-card {
        height: 160px;
    }

    .hero-with-cta {
        min-height: 350px;
    }

    .hero-with-cta .cta-card {
        margin-top: 240px;
        padding: 18px !important;
    }

    .hero-with-cta .cta-card h2 {
        font-size: 18px;
    }

    .before-after-slider {
        height: 200px;
    }

    .events-image-wrapper {
        height: 210px;
    }

    .trust-heading {
        font-size: 18px;
    }

    .testimonials-heading {
        font-size: 18px;
    }

    .footer-top {
        padding: 20px 14px 14px;
    }
}


/* ============================================================
   2. iPHONE 12 PRO  —  390 × 844
   ============================================================ */
@media only screen and (min-device-width: 390px) and (max-device-width: 390px) and (-webkit-min-device-pixel-ratio: 3) {

    .hero-section {
        min-height: 400px;
        margin-top: 60px;
    }

    .mt-350px {
        margin-top: 210px;
    }

    .hero-title {
        font-size: 19px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .gallery-card {
        height: 170px;
    }

    .hero-with-cta {
        min-height: 370px;
    }

    .hero-with-cta .cta-card {
        margin-top: 250px;
    }

    .events-image-wrapper {
        height: 230px;
    }

    .before-after-slider {
        height: 210px;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 210px !important;
    }
}


/* ============================================================
   3. PIXEL 7  —  412 × 915
   ============================================================ */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 2.6) {

    .hero-section {
        min-height: 410px;
        margin-top: 62px;
    }

    .mt-350px {
        margin-top: 215px;
    }

    .hero-title {
        font-size: 20px;
    }

    .gallery-card {
        height: 175px;
    }

    .hero-with-cta {
        min-height: 380px;
    }

    .hero-with-cta .cta-card {
        margin-top: 255px;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 215px !important;
    }

    .before-after-slider {
        height: 215px;
    }

    .events-image-wrapper {
        height: 240px;
    }
}


/* ============================================================
   4. iPHONE 14 PRO MAX  —  430 × 932
   ============================================================ */
@media only screen and (min-device-width: 430px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {

    .hero-section {
        min-height: 420px;
        margin-top: 64px;
    }

    .mt-350px {
        margin-top: 220px;
    }

    .hero-title {
        font-size: 21px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .gallery-card {
        height: 185px;
    }

    .hero-with-cta {
        min-height: 390px;
    }

    .hero-with-cta .cta-card {
        margin-top: 260px;
        padding: 22px !important;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 220px !important;
    }

    .before-after-slider {
        height: 220px;
    }

    .events-image-wrapper {
        height: 250px;
    }

    .trust-heading {
        font-size: 22px;
    }
}


/* ============================================================
   5. SAMSUNG GALAXY S8+  —  360 × 740
   ============================================================ */
@media only screen and (min-device-width: 360px) and (max-device-width: 360px) and (-webkit-min-device-pixel-ratio: 4) {

    .hero-section {
        min-height: 370px;
        margin-top: 58px;
    }

    .mt-350px {
        margin-top: 195px;
    }

    .hero-title {
        font-size: 18px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .gallery-card {
        height: 165px;
    }

    .hero-with-cta {
        min-height: 360px;
    }

    .hero-with-cta .cta-card {
        margin-top: 245px;
        padding: 18px !important;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 205px !important;
    }

    .before-after-slider {
        height: 205px;
    }

    .events-image-wrapper {
        height: 220px;
    }

    .trust-heading {
        font-size: 19px;
    }

    .testimonials-heading {
        font-size: 19px;
    }

    .btn-primary-custom,
    .book-btn {
        font-size: 13px;
        padding: 7px 14px;
    }
}


/* ============================================================
   6. iPAD MINI  —  768 × 1024
   ============================================================ */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .hero-section {
        height: 520px;
        margin-top: 80px;
    }

    .mt-350px {
        margin-top: 280px;
    }

    /* Navbar — iPad Mini shows hamburger */
    .navbar {
        min-height: 68px !important;
        padding: 8px 0 !important;
    }

    .navbar-brand .logo-circle {
        width: 48px !important;
        height: 48px !important;
    }

    .navbar-collapse {
        padding: 16px 24px 22px !important;
    }

    .navbar-nav .nav-link {
        font-size: 15px !important;
        padding: 11px 14px !important;
    }

    .navbar .btn-primary-custom.book-btn,
    .navbar .btn-signin {
        font-size: 14px !important;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .gallery-card {
        height: 280px;
    }

    /* CTA hero */
    .hero-with-cta {
        min-height: 600px;
    }

    .hero-with-cta .cta-card {
        position: relative;
        margin-top: 360px;
        max-width: 100%;
    }

    /* Treatments */
    .treatments-section {
        padding-top: 60px !important;
        border-radius: 40px;
    }

    .treatment-card,
    .treatment-card.sugaring {
        height: 260px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 320px !important;
    }

    .mt--94px {
        margin-top: -60px !important;
    }

    .treatment-overlay h4 {
        font-size: 22px;
    }

    /* Featured */
    .featured-card img {
        height: 160px;
        margin-left: 10px;
    }

    /* Before/After */
    .before-after-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .before-after-slider {
        height: 240px;
    }

    /* Events */
    .events-content {
        width: 55%;
        padding: 40px 28px 40px 40px;
    }

    .events-heading {
        font-size: 34px;
    }

    .events-description {
        font-size: 14px;
    }

    .events-image-wrapper {
        width: 72%;
    }

    /* Trust */
    .trust-section {
        border-radius: 40px;
        padding: 50px 0;
    }

    .trust-heading {
        font-size: 30px;
    }

    /* Testimonials */
    .testimonials-heading {
        font-size: 30px;
    }

    /* Footer */
    .footer-top {
        padding: 36px 32px 24px;
        flex-wrap: wrap;
        gap: 18px;
    }

    .footer-spacer {
        display: none;
    }

    .footer-actions {
        width: 100%;
        gap: 16px;
    }

    /* bg-light-pink */
    .bg-light-pink {
        border-radius: 36px;
    }
}


/* ============================================================
   7. iPAD PRO  —  1024 × 1366
   ============================================================ */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

    .hero-section {
        height: 600px;
        margin-top: 90px;
    }

    .hero-btn .btn-icon {
        margin-bottom: -5px !important;
    }

    .ipad-pro {
        display: none !important;
    }

    .mt-350px {
        margin-top: 320px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-subtitle {
        font-size: 22px;
    }

    .gallery-card {
        height: 360px;
    }

    .hero-with-cta {
        min-height: 750px;
    }

    .hero-with-cta .cta-card {
        margin-top: 280px;
        max-width: 560px;
    }

    .treatment-card {
        height: 300px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 380px !important;
    }

    .treatment-card.sugaring {
        height: 270px !important;
    }

    .mt--94px {
        margin-top: -80px !important;
    }

    .before-after-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .before-after-slider {
        height: 260px;
    }

    .events-content {
        width: 42%;
    }

    .events-heading {
        font-size: 48px;
    }

    .trust-heading {
        font-size: 38px;
    }

    .testimonials-heading {
        font-size: 38px;
    }

    .featured-card img {
        height: 180px;
    }

    /* Footer */
    .footer-top {
        padding: 40px 50px 28px;
    }

    .footer-divider {
        margin: 0 50px;
    }

    .footer-bottom {
        padding: 16px 50px 22px;
    }
}


/* ============================================================
   8. SURFACE DUO  —  540 × 720
   ============================================================ */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    .hero-section {
        height: auto;
        min-height: 450px;
        margin-top: 68px;
    }

    .mt-350px {
        margin-top: 240px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .gallery-card {
        height: 220px;
    }

    .hero-with-cta {
        min-height: 500px;
    }

    .hero-with-cta .cta-card {
        margin-top: 300px;
        max-width: 100%;
        padding: 24px !important;
    }

    .hero-with-cta .cta-card h2 {
        font-size: 22px;
    }

    .treatment-card,
    .treatment-card.sugaring {
        height: 230px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 290px !important;
    }

    .mt--94px {
        margin-top: -50px !important;
    }

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .before-after-slider {
        height: 220px;
    }

    .events-container {
        flex-direction: column;
        min-height: auto;
    }

    .events-content {
        position: relative;
        width: 100%;
        padding: 40px 28px;
    }

    .events-heading {
        font-size: 30px;
    }

    .events-image-wrapper {
        position: relative;
        width: 100%;
        height: 280px;
    }

    .trust-heading {
        font-size: 24px;
    }

    .testimonials-heading {
        font-size: 24px;
    }

    .featured-card .row {
        flex-direction: row;
    }

    .featured-card img {
        height: 160px;
        margin-left: 10px;
    }

    .bg-light-pink {
        border-radius: 30px;
    }
}


/* ============================================================
   9. GALAXY Z FOLD 5 — FOLDED  —  344 × 882
   ============================================================ */
@media only screen and (min-device-width: 344px) and (max-device-width: 344px) {

    .hero-section {
        min-height: 360px;
        margin-top: 56px;
    }

    .mt-350px {
        margin-top: 185px;
    }

    .hero-title {
        font-size: 16px;
        line-height: 1.35;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .gallery-card {
        height: 155px;
    }

    .hero-with-cta {
        min-height: 340px;
    }

    .hero-with-cta .cta-card {
        margin-top: 230px;
        padding: 16px !important;
    }

    .hero-with-cta .cta-card h2 {
        font-size: 17px;
    }

    .hero-with-cta .cta-card p {
        font-size: 12px;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 195px !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }

    .treatment-overlay h4 {
        font-size: 14px;
    }

    .before-after-slider {
        height: 195px;
    }

    .events-image-wrapper {
        height: 200px;
    }

    .events-heading {
        font-size: 24px;
    }

    .trust-heading {
        font-size: 17px;
    }

    .testimonials-heading {
        font-size: 17px;
    }

    .btn-primary-custom,
    .book-btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    .footer-top {
        padding: 18px 12px 12px;
    }

    .footer-nav-head,
    .footer-nav-sub {
        font-size: 12px;
    }

    .footer-copy {
        font-size: 10px;
    }
}

/* Galaxy Z Fold 5 — UNFOLDED  —  882 × 1080 */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {

    .hero-section {
        height: 520px;
        margin-top: 80px;
    }

    .mt-350px {
        margin-top: 280px;
    }

    .hero-title {
        font-size: 28px;
    }

    .gallery-card {
        height: 290px;
    }

    .hero-with-cta {
        min-height: 620px;
    }

    .hero-with-cta .cta-card {
        margin-top: 370px;
        max-width: 100%;
    }

    .treatment-card {
        height: 270px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 340px !important;
    }

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .before-after-slider {
        height: 245px;
    }

    .events-content {
        width: 50%;
    }

    .events-heading {
        font-size: 36px;
    }

    .trust-heading {
        font-size: 32px;
    }

    .testimonials-heading {
        font-size: 32px;
    }
}


/* ============================================================
   10. NEST HUB  —  1024 × 600  (landscape, no touch)
   ============================================================ */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {

    .hero-section {
        height: 380px;
        margin-top: 0;
    }

    .mt-350px {
        margin-top: 180px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-btn .btn-icon {
        margin-bottom: 0px !important;
    }

    /* Reduced heights because screen is short */
    .gallery-card {
        height: 200px;
    }

    .hero-with-cta {
        min-height: 600px;
    }

    .hero-with-cta .cta-card {
        margin-top: 160px;
        max-width: 480px;
        padding: 24px !important;
    }

    .treatment-card {
        height: 200px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 260px !important;
    }

    .treatment-card.sugaring {
        height: 190px !important;
    }

    .mt--94px {
        margin-top: -47px !important;
    }

    .before-after-slider {
        height: 180px;
    }

    /* Events — keep side by side but compress */
    .events-container {
        min-height: 400px;
    }

    .events-content {
        width: 42%;
        padding: 40px 32px 40px 50px;
    }

    .events-heading {
        font-size: 36px;
    }

    .events-description {
        font-size: 14px;
    }

    .trust-section {
        padding: 40px 0;
    }

    .trust-heading {
        font-size: 28px;
    }

    .testimonials-heading {
        font-size: 28px;
    }

    /* Footer compress */
    .footer-top {
        padding: 24px 40px 16px;
    }

    .footer-bottom {
        padding: 12px 40px 16px;
    }
}


/* ============================================================
   11. NEST HUB MAX  —  1280 × 800
   ============================================================ */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {

    .hero-section {
        height: 500px;
        margin-top: 0;
    }

    .mt-350px {
        margin-top: 260px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 22px;
    }

    .gallery-card {
        height: 280px;
    }

    .hero-with-cta {
        min-height: 670px;
    }

    .hero-with-cta .cta-card {
        margin-top: 220px;
        max-width: 560px;
    }

    .treatment-card {
        height: 270px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 340px !important;
    }

    .treatment-card.sugaring {
        height: 240px !important;
    }

    .mt--94px {
        margin-top: -76px !important;
    }

    .before-after-slider {
        height: 240px;
    }

    .events-container {
        min-height: 480px;
    }

    .events-content {
        width: 42%;
        padding: 60px 50px 60px 70px;
    }

    .events-heading {
        font-size: 46px;
    }

    .trust-section {
        padding: 60px 0;
    }

    .trust-heading {
        font-size: 36px;
    }

    .testimonials-heading {
        font-size: 36px;
    }
}


/* ============================================================
   12. ASUS ZENBOOK FOLD — UNFOLDED  —  1920 × 1280
   ============================================================ */


/* Asus Zenbook Fold — FOLDED / HALF  —  853 × 1280 */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .hero-section {
        height: 560px;
        margin-top: 82px;
    }

    .mt-350px {
        margin-top: 300px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .gallery-card {
        height: 310px;
    }

    .hero-with-cta {
        min-height: 680px;
    }

    .hero-with-cta .cta-card {
        margin-top: 400px;
        max-width: 100%;
        padding: 30px !important;
    }

    .treatment-card {
        height: 280px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 360px !important;
    }

    .treatment-card.sugaring {
        height: 255px !important;
    }

    .mt--94px {
        margin-top: -80px !important;
    }

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .before-after-slider {
        height: 250px;
    }

    .events-content {
        width: 50%;
        padding: 50px 32px 50px 50px;
    }

    .events-heading {
        font-size: 40px;
    }

    .trust-heading {
        font-size: 34px;
    }

    .testimonials-heading {
        font-size: 34px;
    }
}


/* ============================================================
   13. SAMSUNG S20 ULTRA  —  412 × 915
       (same viewport as Pixel 7, slightly denser DPR)
   ============================================================ */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3.5) {

    /* Inherits global 430px mobile base, tiny tweaks */
    .hero-section {
        min-height: 415px;
        margin-top: 62px;
    }

    .mt-350px {
        margin-top: 218px;
    }

    .hero-title {
        font-size: 20px;
    }

    .gallery-card {
        height: 178px;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 215px !important;
    }

    .before-after-slider {
        height: 215px;
    }

    .events-image-wrapper {
        height: 240px;
    }

    .trust-heading {
        font-size: 20px;
    }

    .testimonials-heading {
        font-size: 20px;
    }
}


/* ============================================================
   14. SURFACE PRO 7  —  912 × 1368
   ============================================================ */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .hero-section {
        height: 560px;
        margin-top: 84px;
    }

    .hero-btn .btn-icon {
        margin-bottom: -3px !important;
    }

    /* Navbar — Surface Pro 7 shows hamburger at 912px */
    .navbar {
        min-height: 72px !important;
    }

    .navbar-brand .logo-circle {
        width: 50px !important;
        height: 50px !important;
    }

    .navbar-nav .nav-link {
        font-size: 15px !important;
        padding: 11px 14px !important;
    }

    .navbar-collapse {
        padding: 16px 28px 24px !important;
    }

    .mt-350px {
        margin-top: 300px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 22px;
    }

    .gallery-card {
        height: 330px;
    }

    .hero-with-cta {
        min-height: 700px;
    }

    .hero-with-cta .cta-card {
        margin-top: 360px;
        max-width: 540px;
        padding: 36px !important;
    }

    .treatments-section {
        padding-top: 70px !important;
        border-radius: 50px;
    }

    .treatment-card {
        height: 290px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 370px !important;
    }

    .treatment-card.sugaring {
        height: 265px !important;
    }

    .mt--94px {
        margin-top: -80px !important;
    }

    .treatment-overlay h4 {
        font-size: 26px;
    }

    /* Featured */
    .featured-card img {
        height: 180px;
        margin-left: 12px;
    }

    /* Before/After */
    .before-after-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .before-after-slider {
        height: 255px;
    }

    .before-after-title {
        font-size: 34px;
    }

    /* Events */
    .events-container {
        min-height: 600px;
    }

    .events-content {
        width: 44%;
        padding: 60px 40px 60px 60px;
    }

    .events-heading {
        font-size: 48px;
    }

    .events-description {
        font-size: 16px;
    }

    /* Trust */
    .trust-section {
        border-radius: 56px;
        padding: 70px 0;
    }

    .trust-heading {
        font-size: 36px;
    }

    /* Testimonials */
    .testimonials-section {
        border-radius: 50px;
    }

    .testimonials-heading {
        font-size: 36px;
    }


    /* Footer */
    .footer-top {
        padding: 40px 48px 26px;
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-spacer {
        display: none;
    }

    .footer-actions {
        width: 100%;
        gap: 18px;
    }

    .footer-divider {
        margin: 0 48px;
    }

    .footer-bottom {
        padding: 16px 48px 22px;
    }

    .bg-light-pink {
        border-radius: 40px;
    }
}


/* ============================================================
   15. GENERAL TABLET RANGE  —  540px – 767px
       (catches Surface Duo + any mid-size tablets not above)
   ============================================================ */
@media (min-width: 541px) and (max-width: 767px) {

    .hero-section {
        height: auto;
        min-height: 440px;
        margin-top: 70px;
    }

    .mt-350px {
        margin-top: 240px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .gallery-card {
        height: 220px;
    }

    .hero-with-cta {
        min-height: 500px;
    }

    .hero-with-cta .cta-card {
        position: relative;
        margin-top: 300px;
        max-width: 100%;
        padding: 26px !important;
    }

    .treatment-card,
    .treatment-card.sugaring {
        height: 230px !important;
    }

    .treatment-card.weight-loss,
    .last-left-right-card {
        height: 295px !important;
    }

    .mt--94px {
        margin-top: -50px !important;
    }

    .treatment-overlay h4 {
        font-size: 20px;
    }

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .before-after-slider {
        height: 220px;
    }

    .events-container {
        flex-direction: column;
        min-height: auto;
    }

    .events-content {
        position: relative;
        width: 100%;
        padding: 36px 24px;
    }

    .events-heading {
        font-size: 28px;
    }

    .events-image-wrapper {
        position: relative;
        width: 100%;
        height: 260px;
    }

    .trust-heading {
        font-size: 26px;
    }

    .testimonials-heading {
        font-size: 26px;
    }

    .featured-card img {
        height: 150px;
        margin-left: 8px;
    }

    .bg-light-pink {
        border-radius: 30px;
    }
}


/* ============================================================
   17. LANDSCAPE PHONES  —  height ≤ 430px, width > 600px
       (iPhone landscape, Pixel landscape etc.)
   ============================================================ */
@media (max-height: 430px) and (min-width: 600px) and (orientation: landscape) {

    .hero-section {
        height: auto;
        min-height: 320px;
        margin-top: 56px;
    }

    .mt-350px {
        margin-top: 140px;
    }

    .hero-title {
        font-size: 20px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .hero-with-cta {
        min-height: 360px;
    }

    .hero-with-cta .cta-card {
        margin-top: 200px;
        padding: 18px !important;
        max-width: 50%;
    }

    .gallery-card {
        height: 160px;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 190px !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }

    .events-container {
        flex-direction: row;
        min-height: 320px;
    }

    .events-content {
        position: absolute;
        width: 44%;
    }

    .events-image-wrapper {
        position: absolute;
        right: 0;
        width: 70%;
        height: 100%;
    }

    .before-after-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .before-after-slider {
        height: 180px;
    }

    .trust-heading {
        font-size: 22px;
    }

    .testimonials-heading {
        font-size: 22px;
    }
}


/* ============================================================
   18. ACCESSIBILITY — Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .logo-track,
    .treatment-card,
    .gallery-card,
    .featured-card,
    .review-card,
    .testimonial-card,
    .t-card,
    .book-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* Always-visible buttons - desktop par normal size */
@media (min-width: 992px) {
    .navbar-always-btns {
        display: none !important;
        /* desktop par collapse ke andar wale show honge */
    }
}

/* Mobile: dropdown right-aligned, burger se flush */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        /* width: 200px !important; */
        margin-top: 4px !important;
        padding: 10px 14px 14px !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
        background: #fff !important;
        border-top: none !important;
    }

    .navbar .container-xxl {
        position: relative;
    }

    .navbar-nav {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .navbar-nav .nav-link {
        font-size: 15px !important;
        padding: 7px 8px !important;
        font-weight: 600 !important;
    }

    /* Collapse ke andar buttons hide - bahar wale hain */
    .navbar-collapse .d-flex {
        display: none !important;
    }

    /* Always-visible buttons mobile par */
    .navbar-always-btns {
        display: flex !important;
    }
}

/* Small phones - buttons aur chhote */
@media (max-width: 430px) {
    .navbar-always-btns .btn-signin {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .navbar-always-btns .book-btn {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}

/* ============================================================
   KALON MEDSPA — COMPLETE MOBILE FIXES v2
   Paste this entire block at the BOTTOM of responsive.css
   ============================================================ */

/* ============================================================
   FONT FAMILY — Match screenshot text style (clean, rounded sans)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

@media (max-width: 767.98px) {

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    button,
    a,
    input,
    .hero-title,
    .hero-subtitle,
    .brand-intro h2,
    .treatments-section h2,
    .featured-card h5,
    .testimonials-heading,
    .before-after-title,
    .awards-section h2,
    .trust-heading,
    .events-heading,
    .btn-primary-custom,
    .book-btn,
    .review-text,
    .reviewer-name,
    .reviewer-name-small,
    .testimonial-text,
    .author-name,
    .review-count,
    .powered-by,
    .location-filter,
    .accordion-button {
        font-family: 'Nunito', sans-serif !important;
    }
}

/* ============================================================
   FIX 1: brand-intro — padding: 0 !important on mobile
   ============================================================ */
@media (max-width: 767.98px) {
    .brand-intro {
        padding: 0 !important;
    }

    .brand-intro .text-start.mb-4 {
        padding: 16px 12px 8px !important;
        margin-bottom: 8px !important;
    }

    .brand-intro .text-start h2 {
        font-size: 22px !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px !important;
        font-weight: 700 !important;
    }

    .brand-intro .text-start p {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
}

/* ============================================================
   FIX 2: Gallery — show only 5 images, tighten spacing
   ============================================================ */
@media (max-width: 767.98px) {

    .brand-intro .row.g-3>div:nth-child(6),
    .brand-intro .row.g-3>div:nth-child(7) {
        display: none !important;
    }

    .brand-intro .row.g-3 {
        --bs-gutter-y: 6px !important;
        --bs-gutter-x: 6px !important;
    }

    .brand-intro .row.g-3>div {
        padding: 3px !important;
    }

    .gallery-card {
        height: 160px !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   FIX 3: Treatments — show only 4 cards on mobile,
   title one line, reduce top spacing
   ============================================================ */
@media (max-width: 767.98px) {
    .treatments-section .text-center.mb-5 {
        margin-bottom: 14px !important;
        padding-top: 4px !important;
    }

    .treatments-section .text-center.mb-5 h2 {
        font-size: 17px !important;
        white-space: nowrap !important;
        margin-bottom: 12px !important;
        font-weight: 800 !important;
        letter-spacing: -0.2px !important;
    }

    /* Hide the "Book a Appointment" button in treatments header */
    .treatments-section .text-center.mb-5 .btn-primary-custom {
        display: none !important;
    }

    /* Show only 4 treatment cards — hide cards 5 through 9 */
    .treatments-section .row.gy-4>div:nth-child(5),
    .treatments-section .row.gy-4>div:nth-child(6),
    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    /* Reset negative margin for mobile */
    .mt--94px {
        margin-top: 0 !important;
    }

    /* Treatment cards uniform height */
    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 190px !important;
    }

    .treatment-overlay h4 {
        font-size: 16px !important;
    }
}

/* ============================================================
   FIX 4: Reviews Section — fix spacing, center layout on mobile
   ============================================================ */
@media (max-width: 767.98px) {
    .reviews-section {
        padding: 20px 0 10px !important;
        margin-bottom: 12px !important;
    }

    /* Google rating card — remove excess side spacing */
    .google-rating-card {
        max-width: 100% !important;
        padding: 0 4px 16px !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* Rating card container full width */
    .reviews-section .col-lg-3 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Profile row compact */
    .google-rating-card .d-flex.gap-3 {
        gap: 12px !important;
        align-items: center !important;
    }

    .profile-image {
        width: 52px !important;
        height: 52px !important;
    }

    .reviewer-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
    }

    .rating-number {
        font-size: 16px !important;
    }

    .large-stars .star {
        font-size: 14px !important;
    }

    .review-count,
    .powered-by {
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .review-btn {
        min-width: 130px !important;
        font-size: 15px !important;
        height: 32px !important;
        padding: 4px 8px 4px 12px !important;
        gap: 8px !important;
    }

    .review-btn .google-icon {
        width: 25px !important;
        height: 25px !important;
    }

    /* Reduce gap between image & text in review rating block */
    .google-rating-card .d-flex.flex-column.gap-2 {
        gap: 4px !important;
    }

    .slider-prev {
        left: 0px !important;
    }

    .slider-next {
        right: 0px !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 160px !important;
        margin: 6px 2px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-nav i {
        font-size: 12px !important;
    }
}

/* ============================================================
   FIX 5: Image ↔ Text spacing — reduce gap between
   treatment image and text block (before-after cards etc.)
   ============================================================ */
@media (max-width: 767.98px) {

    /* Trust section spacing */
    .trust-section {
        padding: 24px 0 !important;
    }

    .trust-heading {
        font-size: 18px !important;
        margin-bottom: 14px !important;
        line-height: 1.3 !important;
    }

    .trust-heading br {
        display: none !important;
    }

    /* Gap between video/image and its title */
    .trust-section .trust-image-container {
        margin-top: 10px !important;
    }
}

/* ============================================================
   FIX 6: Before/After — 1 card per row on mobile,
   only 4 shown, See All button moved up
   ============================================================ */
@media (max-width: 767.98px) {
    .before-after-section {
        padding: 20px 0 8px !important;
        border-radius: 24px !important;
    }

    .before-after-title {
        font-size: 18px !important;
        margin-bottom: 16px !important;
        font-weight: 800 !important;
    }

    /* 1 column — one card per row */
    .before-after-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
    }

    /* Show only 4, hide 5th and 6th */
    .before-after-grid .before-after-card:nth-child(5),
    .before-after-grid .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 200px !important;
    }

    .before-after-card h4 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
        margin-top: 8px !important;
    }

    .before-after-card p {
        font-size: 12px !important;
    }
}

/* ============================================================
   FIX 7: See All button — move it up (reduce margin above it)
   ============================================================ */
@media (max-width: 767.98px) {
    .testimonials-section .text-center.my-5 {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }

    .btn-see-all {
        width: 100% !important;
        justify-content: center !important;
        font-size: 14px !important;
        padding: 11px 24px !important;
        border-radius: 10px !important;
        /* top: -175px; */
    }
}

/* ============================================================
   FIX 8: Testimonials — top/bottom spacing,
   hide top 5 cards, show last 4 on mobile
   ============================================================ */
@media (max-width: 767.98px) {
    .testimonials-section {
        padding-top: 18px !important;
        padding-bottom: 4px !important;
        border-radius: 24px !important;
    }

    .testimonials-heading {
        font-size: 18px !important;
        margin-bottom: 14px !important;
        font-weight: 800 !important;
    }

    /* Hide first 5, show last 4 (cards 6-9) */
    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3),
    .testimonials-section .row.g-4>div:nth-child(4),
    .testimonials-section .row.g-4>div:nth-child(5) {
        display: none !important;
    }

    .testimonials-section .row.g-4 {
        --bs-gutter-y: 10px !important;
    }

    .testimonial-card {
        padding: 14px !important;
    }

    .testimonial-text {
        font-size: 12px !important;
    }

    .author-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .author-name {
        font-size: 12px !important;
    }
}

/* ============================================================
   FIX 9: Awards (Most Challenging) — reduce bottom spacing
   ============================================================ */
@media (max-width: 767.98px) {
    .awards-section {
        padding-top: 0 !important;
        padding-bottom: 12px !important;
    }

    .awards-section .text-center.my-5 {
        margin-top: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    .awards-section h2.display-5 {
        font-size: 16px !important;
        font-weight: 800 !important;
        margin-bottom: 8px !important;
    }

    .awards-section h1 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .awards-section .fs-5 {
        font-size: 13px !important;
    }

    .awards-section .col-lg-6:last-child img {
        margin-top: 12px !important;
        border-radius: 14px !important;
    }

    .awards-section .row.align-items-center {
        row-gap: 0 !important;
    }
}

/* ============================================================
   FIX 10: Featured Section — hide top button,
   fix card spacing, show centered button after all cards
   ============================================================ */
@media (max-width: 767.98px) {

    /* Fix heading */
    .featured-section .col-lg-5 h2.display-6 {
        font-size: 20px !important;
        font-weight: 800 !important;
        margin-bottom: 4px !important;
    }

    /* Fix col spacers */
    .featured-section .col-lg-1 {
        display: none !important;
        padding: 0 !important;
        flex: none !important;
        max-width: 0 !important;
        width: 0 !important;
    }

    .featured-section .col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .featured-section .row.g-4 {
        --bs-gutter-y: 12px !important;
        row-gap: 12px !important;
    }

    /* Keep cards in horizontal row on mobile */
    .featured-card .row.g-0 {
        flex-direction: row !important;
    }

    .featured-card .col-7 {
        flex: 0 0 58% !important;
        max-width: 58% !important;
    }

    .featured-card .col-5 {
        flex: 0 0 42% !important;
        max-width: 42% !important;
    }

    .featured-card .col-7.p-4 {
        padding: 12px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    .featured-card p.text-muted.small {
        font-size: 10px !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }

    .featured-card p.fw-semibold.text-dark {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    .featured-card img {
        height: 100% !important;
        min-height: 100px !important;
        max-height: 130px !important;
        width: 100% !important;
        object-fit: cover !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   FIX 11: FIXED BOTTOM BUTTON — "Book a Appointment" + "Show Now"
   Shown as fixed bar at bottom on mobile (like Order Online)
   ============================================================ */

/* The fixed bar — inject via CSS, shown on mobile */
.mobile-fixed-bottom-bar {
    display: none;
}

@media (max-width: 767.98px) {

    /* Add padding to body so content isn't hidden behind bar */
    body {
        padding-bottom: 72px !important;
    }

    .mobile-fixed-bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: #fff !important;
        border-top: 1px solid #f0d0e4 !important;
        padding: 10px 14px !important;
        gap: 10px !important;
        box-shadow: 0 -4px 20px rgba(229, 121, 173, 0.18) !important;
    }

    .mobile-fixed-bottom-bar .mob-fixed-btn {
        flex: 1 !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 11px 10px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        font-family: 'Nunito', sans-serif !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }

    .mobile-fixed-bottom-bar .mob-btn-book {
        background: #e579ad !important;
        color: #fff !important;
        box-shadow: 0 2px 10px rgba(229, 121, 173, 0.35) !important;
    }

    .mobile-fixed-bottom-bar .mob-btn-book:hover {
        background: #d66b9f !important;
    }

    .mobile-fixed-bottom-bar .mob-btn-show {
        background: #fff !important;
        color: #e579ad !important;
        border: 2px solid #e579ad !important;
    }

    .mobile-fixed-bottom-bar .mob-btn-show:hover {
        background: #fff3f3 !important;
    }

    /* Scroll-to-top button — push it up above fixed bar */
    .scroll-to-top,
    a[href="#top"],
    button[onclick*="scroll"],
    .back-to-top {
        bottom: 80px !important;
    }
}

/* ============================================================
   FIX 12: Events section — spacing fixes mobile
   ============================================================ */
@media (max-width: 767.98px) {
    .events-section-full {
        margin-bottom: 16px !important;
    }

    .events-content {
        padding: 28px 16px !important;
    }

    .events-heading {
        font-size: 24px !important;
        margin-bottom: 10px !important;
        font-weight: 800 !important;
    }

    .events-description {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }

    .events-btn {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    .events-image-wrapper {
        height: 210px !important;
    }
}

/* ============================================================
   FIX 13: Logo marquee section spacing
   ============================================================ */
@media (max-width: 767.98px) {
    .featured-section.py-1.bg-white.mb-5 {
        margin-bottom: 12px !important;
        padding: 12px 0 !important;
    }

    .featured-title.mb-5 {
        margin-bottom: 16px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   SMALL PHONES ≤ 430px — additional tightening
   ============================================================ */
@media (max-width: 430px) {
    body {
        padding-bottom: 70px !important;
    }

    .brand-intro {
        padding: 0 !important;
    }

    /* Before/After: 1 per row, 4 max */
    .before-after-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .before-after-slider {
        height: 185px !important;
    }

    /* Testimonials: hide top 5 */
    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3),
    .testimonials-section .row.g-4>div:nth-child(4),
    .testimonials-section .row.g-4>div:nth-child(5) {
        display: none !important;
    }

    /* Treatments: show 4 */
    .treatments-section .row.gy-4>div:nth-child(5),
    .treatments-section .row.gy-4>div:nth-child(6),
    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .awards-section {
        padding-bottom: 10px !important;
    }

    .mobile-fixed-bottom-bar {
        padding: 8px 12px !important;
    }

    .mobile-fixed-bottom-bar .mob-fixed-btn {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
}

/* ============================================================
   FEATURED SECTION — MOBILE HORIZONTAL SLIDER
   Pure CSS scroll-snap, no JS, no arrow icons needed.
   Partial cards peek on sides to signal "swipeable slider".
   Desktop (≥992px) stays original grid layout.
   ============================================================ */


/* ============================================================
   DESKTOP — Original layout unchanged
   ============================================================ */
@media (min-width: 992px) {
    .featured-section .featured-slider-track {
        display: contents;
    }
}


/* ============================================================
   BASE MOBILE SLIDER — applies to all phones/tablets ≤991px
   ============================================================ */
@media (max-width: 991.98px) {

    /* Remove padding that would cut the peek effect */
    .featured-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Header row — keep normal padding */
    .featured-section .container>.row:first-child {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Hide col-lg-1 spacer columns completely on mobile */
    .featured-section .col-lg-1 {
        display: none !important;
    }

    /* The cards row becomes a horizontal scroll container */
    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Firefox */
        -ms-overflow-style: none !important;
        /* IE/Edge */
        gap: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Negative BS gutter compensation reset */
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    /* Hide scrollbar in webkit */
    .featured-section .row.g-4::-webkit-scrollbar {
        display: none !important;
    }

    /* Each card column — fixed width so partial next card peeks */
    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 82% !important;
        width: 82% !important;
        max-width: 82% !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 0 !important;
    }

    /* First card — a tiny extra left gap so it starts cleanly */
    .featured-section .row.g-4>.col-lg-5:first-child {
        padding-left: 0 !important;
    }

    /* Last card — extra right padding so it fully scrolls into view */
    .featured-section .row.g-4>.col-lg-5:last-child {
        padding-right: 10px !important;
        margin-right: 6px !important;
    }

    /* Card inner layout — horizontal row (text left, image right) */
    .featured-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
        height: 100% !important;
    }

    .featured-card .row.g-0 {
        flex-direction: row !important;
        height: 130px !important;
    }

    .featured-card .col-7 {
        flex: 0 0 58% !important;
        max-width: 58% !important;
        width: 58% !important;
    }

    .featured-card .col-5 {
        flex: 0 0 42% !important;
        max-width: 42% !important;
        width: 42% !important;
    }

    .featured-card .col-7.p-4 {
        padding: 14px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .featured-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    .featured-card p.text-muted {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .featured-card p.fw-semibold {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }


    .featured-explore-bottom {
        display: flex !important;
        justify-content: center !important;
        padding: 12px 16px 16px !important;
        margin-top: 4px !important;
    }

    /* Scroll indicator dots — subtle visual hint */
    .featured-section .row.g-4::after {
        content: '' !important;
        flex: 0 0 1px !important;
        min-width: 1px !important;
    }
}


/* ============================================================
   iPHONE SE — 375 × 667
   ============================================================ */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (max-device-height: 667px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 84% !important;
        width: 84% !important;
        max-width: 84% !important;
    }

    .featured-card .row.g-0 {
        height: 120px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 14px !important;
    }
}


/* ============================================================
   iPHONE 12 PRO — 390 × 844
   ============================================================ */
@media only screen and (min-device-width: 390px) and (max-device-width: 390px) and (-webkit-min-device-pixel-ratio: 3) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 83% !important;
        width: 83% !important;
        max-width: 83% !important;
    }

    .featured-card .row.g-0 {
        height: 125px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 16px !important;
    }
}


/* ============================================================
   PIXEL 7 — 412 × 915
   ============================================================ */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 2.6) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 82% !important;
        width: 82% !important;
        max-width: 82% !important;
    }

    .featured-card .row.g-0 {
        height: 130px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 16px !important;
    }
}


/* ============================================================
   iPHONE 14 PRO MAX — 430 × 932
   ============================================================ */
@media only screen and (min-device-width: 430px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 81% !important;
        width: 81% !important;
        max-width: 81% !important;
    }

    .featured-card .row.g-0 {
        height: 132px !important;
    }

    .featured-card h5 {
        font-size: 15px !important;
    }

    .featured-card p.text-muted {
        font-size: 11.5px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 18px !important;
    }
}


/* ============================================================
   SAMSUNG GALAXY S8+ — 360 × 740
   ============================================================ */
@media only screen and (min-device-width: 360px) and (max-device-width: 360px) and (-webkit-min-device-pixel-ratio: 4) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 84% !important;
        width: 84% !important;
        max-width: 84% !important;
    }

    .featured-card .row.g-0 {
        height: 118px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 14px !important;
    }
}


/* ============================================================
   SAMSUNG S20 ULTRA — 412 × 915 (DPR 3.5)
   ============================================================ */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3.5) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 82% !important;
        width: 82% !important;
        max-width: 82% !important;
    }

    .featured-card .row.g-0 {
        height: 130px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 16px !important;
    }
}


/* ============================================================
   GALAXY Z FOLD 5 — FOLDED — 344 × 882
   ============================================================ */
@media only screen and (min-device-width: 344px) and (max-device-width: 344px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 86% !important;
        width: 86% !important;
        max-width: 86% !important;
    }

    .featured-card .row.g-0 {
        height: 115px !important;
    }

    .featured-card h5 {
        font-size: 12px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 11px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 12px !important;
    }
}


/* ============================================================
   GALAXY Z FOLD 5 — UNFOLDED — 882 × 1080
   Larger screen — show 2 cards at once with partial 3rd
   ============================================================ */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 46% !important;
        width: 46% !important;
        max-width: 46% !important;
    }

    .featured-card .row.g-0 {
        height: 150px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 24px !important;
    }
}


/* ============================================================
   iPAD MINI — 768 × 1024
   Show 2 cards + partial 3rd
   ============================================================ */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 46% !important;
        width: 46% !important;
        max-width: 46% !important;
    }

    .featured-card .row.g-0 {
        height: 155px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 24px !important;
    }
}


/* ============================================================
   iPAD PRO — 1024 × 1366
   Desktop layout restored — grid, no slider
   ============================================================ */
/* @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 960px !important;
    }

    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --bs-gutter-x: 1.5rem !important;
        --bs-gutter-y: 1.5rem !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        scroll-snap-align: none !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .featured-card .row.g-0 {
        height: auto !important;
        flex-direction: row !important;
    }

    .featured-card img {
        height: 180px !important;
    }

    .featured-section .col-lg-1 {
        display: block !important;
    }
} */


/* ============================================================
   SURFACE DUO — 540 × 720
   Show ~1.2 cards — partial peek on right
   ============================================================ */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 78% !important;
        width: 78% !important;
        max-width: 78% !important;
    }

    .featured-card .row.g-0 {
        height: 145px !important;
    }

    .featured-card h5 {
        font-size: 15px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 20px !important;
    }
}


/* ============================================================
   NEST HUB — 1024 × 600 (landscape, no-touch device)
   Desktop/grid layout
   ============================================================ */
/* @media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {

    .featured-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 960px !important;
    }

    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --bs-gutter-x: 1.5rem !important;
        --bs-gutter-y: 1.5rem !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        scroll-snap-align: none !important;
    }

    .featured-card .row.g-0 {
        height: auto !important;
    }

    .featured-card img {
        height: 160px !important;
    }

    .featured-section .col-lg-1 {
        display: block !important;
    }
} */


/* ============================================================
   NEST HUB MAX — 1280 × 800
   Desktop/grid layout
   ============================================================ */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {

    .featured-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --bs-gutter-x: 1.5rem !important;
        --bs-gutter-y: 1.5rem !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        scroll-snap-align: none !important;
    }

    .featured-card img {
        height: 200px !important;
    }

    .featured-section .col-lg-1 {
        display: block !important;
    }
}


/* ============================================================
   ASUS ZENBOOK FOLD — FOLDED — 853 × 1280
   Show 2 cards + partial 3rd
   ============================================================ */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 46% !important;
        width: 46% !important;
        max-width: 46% !important;
    }

    .hero-btn .btn-icon {
        margin-bottom: -3px !important;
    }

    .featured-card .row.g-0 {
        height: 155px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 24px !important;
    }
}


/* ============================================================
   SURFACE PRO 7 — 912 × 1368
   Show 2 cards + partial 3rd
   ============================================================ */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 44% !important;
        width: 44% !important;
        max-width: 44% !important;
    }

    .featured-card .row.g-0 {
        height: 158px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 12.5px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 24px !important;
    }
}


/* ============================================================
   GENERAL TABLET — 541px–767px
   ============================================================ */
@media (min-width: 541px) and (max-width: 767px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 78% !important;
        width: 78% !important;
        max-width: 78% !important;
    }

    .featured-card .row.g-0 {
        height: 140px !important;
    }

    .featured-card h5 {
        font-size: 15px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 20px !important;
    }
}


/* ============================================================
   SMALL PHONES — ≤380px catch-all (incl. very small androids)
   ============================================================ */
@media (max-width: 380px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 86% !important;
        width: 86% !important;
        max-width: 86% !important;
    }

    .featured-card .row.g-0 {
        height: 115px !important;
    }

    .featured-card h5 {
        font-size: 12px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 11px !important;
    }

    .featured-section .row.g-4 {
        padding-left: 12px !important;
    }
}


/* ============================================================
   LANDSCAPE PHONES — height ≤ 430px, width > 600px
   ============================================================ */
@media (max-height: 430px) and (min-width: 600px) and (orientation: landscape) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 52% !important;
        width: 52% !important;
        max-width: 52% !important;
    }

    .featured-card .row.g-0 {
        height: 110px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-section .row.g-4 {
        padding-left: 18px !important;
    }
}


/* ============================================================
   ACCESSIBILITY — Reduced Motion: disable scroll animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .featured-section .row.g-4 {
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   KALON MEDSPA — FINAL MOBILE FIXES
   Replace your previous mobile fixes block with this entire file
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');


/* ============================================================
   FIXED BOTTOM "Book a Appointment" — full width, mobile only
   ============================================================ */
.mobile-book-fixed {
    display: none;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: 68px !important;
    }

    .mobile-book-fixed {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        padding: 10px 14px !important;
        background: #fff !important;
        border-top: 1px solid #f5c6e0 !important;
        box-shadow: 0 -4px 20px rgba(229, 121, 173, 0.20) !important;
    }

    .mobile-book-fixed button {
        width: 100% !important;
        background: #e579ad !important;
        color: #fff !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 13px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        font-family: 'Nunito', sans-serif !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        box-shadow: 0 3px 12px rgba(229, 121, 173, 0.40) !important;
        transition: background 0.2s !important;
    }

    .mobile-book-fixed button:active {
        background: #d66b9f !important;
    }
}

/* ============================================================
   BRAND INTRO — padding 0, title one line, gallery 5 only
   ============================================================ */
@media (max-width: 767.98px) {
    .brand-intro {
        padding: 0 !important;
    }

    .brand-intro .text-start.mb-4 {
        padding: 14px 12px 6px !important;
        margin-bottom: 8px !important;
    }

    .brand-intro .text-start h2 {
        font-size: 22px !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px !important;
        font-weight: 700 !important;
    }

    .brand-intro .text-start p {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .brand-intro .row.g-3>div:nth-child(6),
    .brand-intro .row.g-3>div:nth-child(7) {
        display: none !important;
    }

    .brand-intro .row.g-3 {
        --bs-gutter-y: 6px !important;
        --bs-gutter-x: 6px !important;
    }

    .brand-intro .row.g-3>div {
        padding: 3px !important;
    }

    .gallery-card {
        height: 160px !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   TREATMENTS — 4 cards, title one line, no header button
   ============================================================ */
@media (max-width: 767.98px) {
    .treatments-section {
        padding-top: 28px !important;
        margin-top: 0 !important;
        border-radius: 22px !important;
    }

    .treatments-section .text-center.mb-5 {
        margin-bottom: 12px !important;
        padding-top: 0 !important;
    }

    .treatments-section .text-center.mb-5 h2 {
        font-size: 17px !important;
        white-space: nowrap !important;
        margin-bottom: 10px !important;
        font-weight: 800 !important;
    }

    .treatments-section .text-center.mb-5 .btn-primary-custom {
        display: none !important;
    }

    .treatments-section .row.gy-4>div:nth-child(5),
    .treatments-section .row.gy-4>div:nth-child(6),
    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 190px !important;
    }

    .treatment-overlay h4 {
        font-size: 15px !important;
    }
}

/* ============================================================
   REVIEWS — fix side spacing, compact layout
   ============================================================ */
@media (max-width: 767.98px) {
    .reviews-section {
        padding: 18px 0 8px !important;
        margin-bottom: 10px !important;
    }

    .reviews-section .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 0 14px 0 !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .google-rating-card .d-flex.gap-3 {
        gap: 10px !important;
        align-items: center !important;
    }

    .google-rating-card .d-flex.flex-column.gap-2 {
        gap: 3px !important;
    }

    .profile-image {
        width: 48px !important;
        height: 48px !important;
    }

    .reviewer-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
    }

    .rating-number {
        font-size: 15px !important;
    }

    .large-stars .star {
        font-size: 13px !important;
    }

    .review-count,
    .powered-by {
        font-size: 11px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .review-btn {
        min-width: 128px !important;
        font-size: 15px !important;
        height: 30px !important;
        padding: 4px 6px 4px 10px !important;
        gap: 6px !important;
    }

    .review-btn .google-icon {
        width: 25px !important;
        height: 25px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }

    .review-card {
        padding: 12px !important;
        min-height: 150px !important;
        margin: 4px 2px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 26px !important;
        height: 26px !important;
    }

    .slider-nav i {
        font-size: 12px !important;
    }
}

/* ============================================================
   TRUST SECTION
   ============================================================ */
@media (max-width: 767.98px) {
    .trust-section {
        padding: 18px 0 !important;
    }

    .trust-heading {
        font-size: 17px !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }

    .trust-heading br {
        display: none !important;
    }

    .trust-section .trust-image-container {
        margin-top: 8px !important;
    }
}

/* ============================================================
   BEFORE/AFTER — 1 per row, 4 only
   ============================================================ */
@media (max-width: 767.98px) {
    .before-after-section {
        padding: 16px 0 8px !important;
        border-radius: 20px !important;
    }

    .before-after-title {
        font-size: 17px !important;
        margin-bottom: 12px !important;
        font-weight: 800 !important;
    }

    .before-after-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 10px !important;
        max-width: 100% !important;
    }

    .before-after-grid .before-after-card:nth-child(5),
    .before-after-grid .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 195px !important;
    }

    .before-after-card h4 {
        font-size: 13px !important;
        margin: 6px 0 3px !important;
    }

    .before-after-card p {
        font-size: 11px !important;
        margin: 0 !important;
    }
}

/* ============================================================
   TESTIMONIALS — hide top 5, show 4, tight spacing
   ============================================================ */
@media (max-width: 767.98px) {
    .testimonials-section {
        padding-top: 16px !important;
        padding-bottom: 4px !important;
        border-radius: 20px !important;
    }

    .testimonials-heading {
        font-size: 17px !important;
        margin-bottom: 12px !important;
        font-weight: 800 !important;
    }

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3),
    .testimonials-section .row.g-4>div:nth-child(4),
    .testimonials-section .row.g-4>div:nth-child(9),
    .testimonials-section .row.g-4>div:nth-child(5) {
        display: none !important;
    }

    .testimonials-section .row.g-4 {
        --bs-gutter-y: 8px !important;
    }

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

    .testimonial-text {
        font-size: 12px !important;
    }

    .author-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .author-name {
        font-size: 11px !important;
    }

    .testimonials-section .text-center.my-5 {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }

    .btn-see-all {
        width: 100% !important;
        justify-content: center !important;
        font-size: 14px !important;
        padding: 12px 24px !important;
        border-radius: 10px !important;
    }
}

/* ============================================================
   AWARDS
   ============================================================ */
@media (max-width: 767.98px) {
    .awards-section {
        padding-top: 0 !important;
        padding-bottom: 10px !important;
    }

    .awards-section .text-center.my-5 {
        margin-top: 14px !important;
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    .awards-section h2.display-5 {
        font-size: 15px !important;
        font-weight: 800 !important;
        margin-bottom: 6px !important;
    }

    .awards-section h1 {
        font-size: 19px !important;
        margin-bottom: 8px !important;
    }

    .awards-section .fs-5 {
        font-size: 13px !important;
    }

    .awards-section .row.align-items-center {
        row-gap: 0 !important;
    }

    .awards-section .col-lg-6:last-child img {
        margin-top: 10px !important;
        border-radius: 12px !important;
    }
}

/* ============================================================
   FEATURED — spacers hidden, consistent gaps, horizontal cards
   ============================================================ */
@media (max-width: 767.98px) {
    .featured-section .col-lg-1 {
        display: none !important;
        padding: 0 !important;
        flex: none !important;
        max-width: 0 !important;
        width: 0 !important;
    }

    .featured-section .col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .featured-section .row.g-4 {
        --bs-gutter-y: 10px !important;
        row-gap: 10px !important;
    }

    .featured-card .row.g-0 {
        flex-direction: row !important;
    }

    .featured-card .col-7 {
        flex: 0 0 58% !important;
        max-width: 58% !important;
    }

    .featured-card .col-5 {
        flex: 0 0 42% !important;
        max-width: 42% !important;
    }

    .featured-card .col-7.p-4 {
        padding: 11px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 3px !important;
    }

    .featured-card p.text-muted.small {
        font-size: 10px !important;
        margin-bottom: 5px !important;
        line-height: 1.4 !important;
    }

    .featured-card p.fw-semibold.text-dark {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    .featured-card img {
        height: 100% !important;
        min-height: 100px !important;
        max-height: 125px !important;
        width: 100% !important;
        object-fit: cover !important;
        margin-left: 0 !important;
    }

    .featured-explore-bottom {
        display: flex !important;
        justify-content: center !important;
        margin-top: 16px !important;
        padding-bottom: 14px !important;
    }
}

/* ============================================================
   EVENTS
   ============================================================ */
@media (max-width: 767.98px) {
    .events-section-full {
        margin-bottom: 14px !important;
    }

    .events-content {
        padding: 22px 14px !important;
    }

    .events-heading {
        font-size: 22px !important;
        margin-bottom: 8px !important;
        font-weight: 800 !important;
    }

    .events-description {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-bottom: 12px !important;
    }

    .events-btn {
        font-size: 13px !important;
        padding: 10px 14px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .events-image-wrapper {
        height: 200px !important;
    }
}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
@media (max-width: 767.98px) {
    .featured-section.py-1.bg-white.mb-5 {
        margin-bottom: 10px !important;
        padding: 10px 0 !important;
    }

    .featured-title.mb-5 {
        margin-bottom: 12px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   SMALL PHONES ≤ 430px
   ============================================================ */
@media (max-width: 430px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-book-fixed {
        padding: 8px 12px !important;
    }

    .mobile-book-fixed button {
        font-size: 14px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
    }

    .brand-intro {
        padding: 0 !important;
    }

    .gallery-card {
        height: 148px !important;
    }

    .before-after-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .before-after-slider {
        height: 178px !important;
    }

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3),
    .testimonials-section .row.g-4>div:nth-child(4),
    .testimonials-section .row.g-4>div:nth-child(9),
    .testimonials-section .row.g-4>div:nth-child(5) {
        display: none !important;
    }

    .treatments-section .row.gy-4>div:nth-child(5),
    .treatments-section .row.gy-4>div:nth-child(6),
    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

}

/* ============================================================
   HERO TEXT — match screenshot style
   Large, bold, uppercase, tight letter-spacing
   ============================================================ */
@media (max-width: 767.98px) {

    .hero-subtitle {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        font-family: 'Nunito', sans-serif !important;
    }

    .hero-title {
        font-size: 31px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
        text-transform: uppercase !important;
        font-family: 'Nunito', sans-serif !important;
    }

    h1 .hero-title {
        margin: 0 !important;
    }
}

/* Extra small phones */
@media (max-width: 390px) {
    .hero-title {
        font-size: 31px !important;
    }
}

/* Galaxy Z Fold folded */
@media (max-width: 344px) {
    .hero-title {
        font-size: 31px !important;
    }
}

/* ============================================================
   TWO BUTTONS — "Book a Appointment" + "Shop Now"
   Side by side, right below hero section on mobile
   Like the "Order pickup / Order delivery" in the screenshot
   ============================================================ */
.mobile-hero-btns {
    display: none;
    /* hidden on desktop */
}

@media (max-width: 767.98px) {

    .mobile-hero-btns {
        display: flex !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        background: #f5e0ec !important;
        border-bottom: 1px solid #f5e0ec !important;
    }

    .mobile-hero-btn {
        flex: 1 !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 13px 10px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        font-family: 'Nunito', sans-serif !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
        letter-spacing: 0.01em !important;
    }

    /* Book a Appointment — filled pink */
    .mobile-hero-btn--book {
        background: #e579ad !important;
        color: #fff !important;
        box-shadow: 0 3px 10px rgba(229, 121, 173, 0.35) !important;
    }

    .mobile-hero-btn--book:active {
        background: #d66b9f !important;
        transform: scale(0.98) !important;
    }

    /* Shop Now — outlined pink */
    .mobile-hero-btn--shop {
        background: #fff3f3 !important;
        color: #e579ad !important;
        border: 2px solid #e579ad !important;
    }

    .mobile-hero-btn--shop:active {
        background: #fce8f3 !important;
        transform: scale(0.98) !important;
    }

    .mobile-hero-btn i {
        font-size: 15px !important;
    }
}

/* Small phones ≤ 430px */
@media (max-width: 430px) {
    .mobile-hero-btns {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .mobile-hero-btn {
        font-size: 13px !important;
        padding: 12px 8px !important;
        border-radius: 9px !important;
    }

    .mobile-hero-btn i {
        font-size: 14px !important;
    }
}

/* Galaxy Z Fold folded ≤ 344px */
@media (max-width: 344px) {
    .mobile-hero-btn {
        font-size: 11px !important;
        padding: 10px 6px !important;
        gap: 5px !important;
    }

    .mobile-hero-btn i {
        font-size: 12px !important;
    }
}

/* ============================================================
   HERO → BUTTONS SPACING FIX
   Add at bottom of responsive.css / mobile-fixes-final.css
   ============================================================ */

@media (max-width: 767.98px) {

    /* Hero section — remove bottom padding so buttons sit flush */
    .hero-section {
        padding-bottom: 0 !important;
    }

    /* Title — no bottom margin, buttons touch it immediately */
    .hero-title {
        margin-bottom: 0 !important;
    }

    /* Subtitle — small gap only */
    .hero-subtitle {
        margin-bottom: 6px !important;
    }

    /* Two buttons bar — no top gap, sits right under hero */
    .mobile-hero-btns {
        margin-top: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Hero section min-height adjustment so image shows properly
       but text + buttons sit at bottom of image like the screenshot */
    .hero-section .container {
        padding-bottom: 0 !important;
    }

    .hero-section .col-lg-8.mt-350px {
        padding-bottom: 14px !important;
    }
}

/* Small phones */
@media (max-width: 430px) {
    .hero-title {
        margin-bottom: 0 !important;
    }

    .hero-subtitle {
        margin-bottom: 4px !important;
    }

    .mobile-hero-btns {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* ============================================================
   GALLERY GRID — Mobile Layout (CSS ONLY, no HTML changes)

   Desktop: keeps original col-md-4 / col-md-8 layout
   Mobile layout:
     Row 1 → col-md-4 (1st child)  = full width
     Row 2 → col-md-8 (2nd child) + col-md-4 (3rd) = 2 side by side
     Row 3 → col-md-4 (4th) + col-md-4 (5th) = 2 side by side
     Row 4 → col-md-8 (6th child) = full width
     (7th hidden on mobile)
   ============================================================ */

@media (max-width: 767.98px) {

    /* Reset all gallery columns to auto sizing on mobile */
    .brand-intro .row.g-3>div {
        padding: 3px !important;
    }

    .brand-intro .row.g-3 {
        --bs-gutter-x: 6px !important;
        --bs-gutter-y: 0px !important;
        row-gap: 6px !important;
    }

    /* ALL columns default: full width */
    .brand-intro .row.g-3>div {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 2nd and 3rd child → 50% (side by side) */
    .brand-intro .row.g-3>div:nth-child(2),
    .brand-intro .row.g-3>div:nth-child(3) {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* 4th and 5th child → 50% (side by side) */
    .brand-intro .row.g-3>div:nth-child(4),
    .brand-intro .row.g-3>div:nth-child(5) {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* 6th child → full width */
    .brand-intro .row.g-3>div:nth-child(6) {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 7th child → hide on mobile */
    .brand-intro .row.g-3>div:nth-child(7) {
        display: none !important;
    }

    /* Gallery card heights */
    .brand-intro .row.g-3 .gallery-card {
        border-radius: 10px !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }

    /* Full width cards (1st, 6th) — taller */
    .brand-intro .row.g-3>div:nth-child(1) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 185px !important;
    }

    /* Side by side cards (2nd, 3rd, 4th, 5th) — shorter */
    .brand-intro .row.g-3>div:nth-child(2) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(3) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(4) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(5) .gallery-card {
        height: 165px !important;
    }

    /* All images fill their card */
    .brand-intro .row.g-3 .gallery-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ── iPhone SE (375px) ── */
@media only screen and (max-width: 375px) {

    .brand-intro .row.g-3>div:nth-child(1) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 165px !important;
    }

    .brand-intro .row.g-3>div:nth-child(2) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(3) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(4) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(5) .gallery-card {
        height: 165px !important;
    }
}

/* ── Galaxy Z Fold folded (344px) ── */
@media only screen and (max-width: 344px) {

    .brand-intro .row.g-3>div:nth-child(1) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 150px !important;
    }

    .brand-intro .row.g-3>div:nth-child(2) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(3) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(4) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(5) .gallery-card {
        height: 108px !important;
    }
}

/* ── Tablets 540px–767px (Surface Duo etc) ── */
@media (min-width: 541px) and (max-width: 767px) {

    .brand-intro .row.g-3>div:nth-child(1) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 210px !important;
    }

    .brand-intro .row.g-3>div:nth-child(2) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(3) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(4) .gallery-card,
    .brand-intro .row.g-3>div:nth-child(5) .gallery-card {
        height: 165px !important;
    }
}

/* ============================================================
   GALLERY FIX — paste this at the very bottom of responsive.css
   Overrides the earlier "display: none" on 6th child
   ============================================================ */

@media (max-width: 767.98px) {

    /* Un-hide 6th child — needed for bottom full-width image */
    .brand-intro .row.g-3>div:nth-child(6) {
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Keep 7th hidden */
    .brand-intro .row.g-3>div:nth-child(7) {
        display: none !important;
    }

    /* 6th card height — full width tall */
    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 185px !important;
    }
}

/* iPhone SE */
@media only screen and (max-width: 375px) {
    .brand-intro .row.g-3>div:nth-child(6) {
        display: block !important;
    }

    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 165px !important;
    }
}

/* Galaxy Z Fold folded */
@media only screen and (max-width: 344px) {
    .brand-intro .row.g-3>div:nth-child(6) {
        display: block !important;
    }

    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 150px !important;
    }
}

/* Tablets 540–767px */
@media (min-width: 541px) and (max-width: 767px) {
    .brand-intro .row.g-3>div:nth-child(6) {
        display: block !important;
    }

    .brand-intro .row.g-3>div:nth-child(6) .gallery-card {
        height: 210px !important;
    }
}

@media (max-width: 767.98px) {
    .hero-with-cta .cta-card {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

/* ============================================================
   REVIEWS SECTION — COMPLETE MOBILE FIX
   Rating card full width + dots position fix
   All target devices covered
   Paste at very bottom of responsive.css
   ============================================================ */

/* ── BASE MOBILE FIX (≤ 767px) ── */
@media (max-width: 767.98px) {

    /* Full width row, no extra side padding */
    .reviews-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .testimonials-section::after {
        background: linear-gradient(to top,
                rgba(255, 243, 243, 1) 2%,
                rgba(255, 243, 243, 0.995) 2%,
                rgba(255, 243, 243, 0.99) 7%,
                rgba(255, 243, 243, 0.975) 10%,
                rgba(255, 243, 243, 0.95) 4%,
                rgba(255, 243, 243, 0.90) 10%,
                rgba(255, 243, 243, 0.78) 20%,
                rgba(255, 243, 243, 0.55) 10%,
                rgba(255, 243, 243, 0.25) 50%,
                rgba(255, 243, 243, 0) 50%) !important;
    }

    /* Rating card — full width, no right gap */
    .reviews-section .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 16px !important;
    }

    .google-rating-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Profile row — left aligned, no overflow */
    .google-rating-card .d-flex.align-items-cente {
        width: 100% !important;
        gap: 12px !important;
    }

    /* Text column — takes remaining space, no overflow to right */
    .google-rating-card .d-flex.flex-column.gap-2 {
        flex: 1 !important;
        min-width: 0 !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    /* Slider column — full width */
    .reviews-section .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Slider container — tight side padding for arrows */
    .review-slider-container {
        padding: 0 32px 0px !important;
        position: relative !important;
    }

    /* Swiper — proper bottom space for dots */
    .reviewSwiper {
        padding-bottom: 36px !important;
    }

    /* Pagination dots — below cards, not overlapping */
    .swiper-pagination {
        bottom: 4px !important;
        position: absolute !important;
    }

    .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
    }

    .swiper-pagination-bullet-active {
        width: 10px !important;
        background-color: #e579ad !important;
    }

    /* Review card */
    .review-card {
        padding: 14px !important;
        min-height: 155px !important;
        margin: 4px 2px !important;
    }

    /* Nav arrows */
    .slider-nav {
        width: 28px !important;
        height: 28px !important;
        top: 40% !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }
}


/* ── iPHONE SE — 375 × 667 ── */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (max-device-height: 667px) {

    .reviews-section .container {
        padding: 0 14px !important;
    }

    .review-slider-container {
        padding: 0 30px 0 !important;
    }

    .review-card {
        padding: 12px !important;
        min-height: 148px !important;
    }

    .review-text {
        font-size: 11px !important;
    }

    .profile-image {
        width: 44px !important;
        height: 44px !important;
    }

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

    .rating-number {
        font-size: 14px !important;
    }

    .large-stars .star {
        font-size: 12px !important;
    }

    .review-count,
    .powered-by {
        font-size: 10px !important;
    }

    .review-btn {
        min-width: 118px !important;
        font-size: 15px !important;
        height: 28px !important;
    }

    .swiper-pagination {
        bottom: 2px !important;
    }
}


/* ── iPHONE 12 PRO — 390 × 844 ── */
@media only screen and (min-device-width: 390px) and (max-device-width: 390px) and (-webkit-min-device-pixel-ratio: 3) {

    .reviews-section .container {
        padding: 0 15px !important;
    }

    .review-slider-container {
        padding: 0 31px 0 !important;
    }

    .review-card {
        padding: 13px !important;
        min-height: 150px !important;
    }

    .profile-image {
        width: 46px !important;
        height: 46px !important;
    }

    .reviewer-name {
        font-size: 14px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .swiper-pagination {
        bottom: 3px !important;
    }
}


/* ── PIXEL 7 — 412 × 915 ── */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 2.6) {

    .reviews-section .container {
        padding: 0 16px !important;
    }

    .review-slider-container {
        padding: 0 32px 0 !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 152px !important;
    }

    .profile-image {
        width: 48px !important;
        height: 48px !important;
    }

    .reviewer-name {
        font-size: 14px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .swiper-pagination {
        bottom: 3px !important;
    }
}


/* ── iPHONE 14 PRO MAX — 430 × 932 ── */
@media only screen and (min-device-width: 430px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {

    .reviews-section .container {
        padding: 0 16px !important;
    }

    .review-slider-container {
        padding: 0 33px 0 !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 155px !important;
    }

    .profile-image {
        width: 50px !important;
        height: 50px !important;
    }

    .reviewer-name {
        font-size: 15px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .swiper-pagination {
        bottom: 4px !important;
    }
}


/* ── SAMSUNG GALAXY S8+ — 360 × 740 ── */
@media only screen and (min-device-width: 360px) and (max-device-width: 360px) and (-webkit-min-device-pixel-ratio: 4) {

    .reviews-section .container {
        padding: 0 14px !important;
    }

    .review-slider-container {
        padding: 0 30px 0 !important;
    }

    .review-card {
        padding: 12px !important;
        min-height: 148px !important;
    }

    .profile-image {
        width: 44px !important;
        height: 44px !important;
    }

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

    .review-text {
        font-size: 11px !important;
    }

    .review-btn {
        min-width: 115px !important;
        font-size: 15px !important;
    }

    .swiper-pagination {
        bottom: 2px !important;
    }
}


/* ── SAMSUNG S20 ULTRA — 412 × 915 DPR 3.5 ── */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3.5) {

    .reviews-section .container {
        padding: 0 16px !important;
    }

    .review-slider-container {
        padding: 0 32px 0 !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 152px !important;
    }

    .profile-image {
        width: 48px !important;
        height: 48px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .swiper-pagination {
        bottom: 3px !important;
    }
}


/* ── GALAXY Z FOLD 5 FOLDED — 344 × 882 ── */
@media only screen and (min-device-width: 344px) and (max-device-width: 344px) {

    .reviews-section .container {
        padding: 0 12px !important;
    }

    .review-slider-container {
        padding: 0 28px 0 !important;
    }

    .review-card {
        padding: 10px !important;
        min-height: 140px !important;
    }

    .profile-image {
        width: 40px !important;
        height: 40px !important;
    }

    .reviewer-name {
        font-size: 12px !important;
    }

    .rating-number {
        font-size: 13px !important;
    }

    .large-stars .star {
        font-size: 11px !important;
    }

    .review-count,
    .powered-by {
        font-size: 9px !important;
    }

    .review-btn {
        min-width: 108px !important;
        font-size: 15px !important;
        height: 26px !important;
    }

    .review-text {
        font-size: 11px !important;
    }

    .slider-nav {
        width: 24px !important;
        height: 24px !important;
    }

    .swiper-pagination {
        bottom: 2px !important;
    }

    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }
}


/* ── GALAXY Z FOLD 5 UNFOLDED — 882px ── */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {

    .reviews-section .col-lg-3 {
        width: 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    .reviews-section .col-lg-9 {
        width: 70% !important;
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }

    .review-slider-container {
        padding: 0 40px 0 !important;
    }

    .review-card {
        min-height: 160px !important;
    }

    .swiper-pagination {
        bottom: 4px !important;
    }
}


/* ── iPAD MINI — 768 × 1024 ── */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .reviews-section .col-lg-3 {
        width: 32% !important;
        flex: 0 0 32% !important;
        max-width: 32% !important;
        padding-left: 0 !important;
        padding-right: 12px !important;
    }

    .reviews-section .col-lg-9 {
        width: 68% !important;
        flex: 0 0 68% !important;
        max-width: 68% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .review-slider-container {
        padding: 0 42px 0 !important;
    }

    .review-card {
        min-height: 165px !important;
    }

    .reviewer-name {
        font-size: 15px !important;
    }

    .swiper-pagination {
        bottom: 5px !important;
    }

    .swiper-pagination-bullet {
        width: 11px !important;
        height: 11px !important;
    }
}


/* ── iPAD PRO — 1024 × 1366 ── */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

    .reviews-section .col-lg-3 {
        width: 28% !important;
        flex: 0 0 28% !important;
        max-width: 28% !important;
    }

    .reviews-section .col-lg-9 {
        width: 72% !important;
        flex: 0 0 72% !important;
        max-width: 72% !important;
    }

    .review-slider-container {
        padding: 0 48px 0 !important;
    }

    .review-card {
        min-height: 175px !important;
        padding: 20px !important;
    }

    .review-text {
        font-size: 14px !important;
    }

    .swiper-pagination {
        bottom: 6px !important;
    }

    .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ── SURFACE DUO — 540 × 720 ── */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    .reviews-section .col-lg-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 14px !important;
    }

    .reviews-section .col-lg-9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .review-slider-container {
        padding: 0 36px 0 !important;
    }

    .review-card {
        min-height: 158px !important;
        padding: 15px !important;
    }

    .swiper-pagination {
        bottom: 4px !important;
    }
}


/* ── GENERAL TABLET 541–767px ── */
@media (min-width: 541px) and (max-width: 767px) {

    .reviews-section .col-lg-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
    }

    .reviews-section .col-lg-9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .review-slider-container {
        padding: 0 38px 0 !important;
    }

    .review-card {
        min-height: 160px !important;
        padding: 16px !important;
    }

    .swiper-pagination {
        bottom: 4px !important;
    }
}


/* ── NEST HUB — 1024 × 600 ── */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {

    .review-slider-container {
        padding: 0 48px 0 !important;
    }

    .review-card {
        min-height: 165px !important;
    }

    .swiper-pagination {
        bottom: 5px !important;
    }
}


/* ── NEST HUB MAX — 1280 × 800 ── */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {

    .review-slider-container {
        padding: 0 50px 0 !important;
    }

    .review-card {
        min-height: 175px !important;
    }

    .swiper-pagination {
        bottom: 6px !important;
    }
}


/* ── ASUS ZENBOOK FOLD (853px) ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .reviews-section .col-lg-3 {
        width: 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    .reviews-section .col-lg-9 {
        width: 70% !important;
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }

    .review-slider-container {
        padding: 0 44px 0 !important;
    }

    .review-card {
        min-height: 165px !important;
    }

    .swiper-pagination {
        bottom: 5px !important;
    }
}


/* ── SURFACE PRO 7 — 912 × 1368 ── */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .reviews-section .col-lg-3 {
        width: 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    .reviews-section .col-lg-9 {
        width: 70% !important;
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }

    .review-slider-container {
        padding: 0 46px 0 !important;
    }

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

    .swiper-pagination {
        bottom: 5px !important;
    }

    .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ============================================================
   FEATURED SECTION — MOBILE FIXES
   1. Button inline with "Featured" heading
   2. Taller cards
   3. Image full card height
   Paste at very bottom of responsive.css
   ============================================================ */

@media (max-width: 991.98px) {

    /* ── Header row — Featured title + button on same line ── */
    .featured-section .container>.row:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Hide col-lg-1 spacer in header */
    .featured-section .container>.row:first-child .col-lg-1 {
        display: none !important;
    }

    /* "Featured" heading column — shrink to content */
    .featured-section .container>.row:first-child .col-lg-5.mb-4 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        /* padding: 0 !important; */
        margin-bottom: 0 !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* Button column — shrink to content, align right */
    .featured-section .container>.row:first-child .col-lg-5.text-end {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        /* padding: 0 !important; */
        margin-bottom: 0 !important;
        justify-content: flex-end !important;
    }

    /* Show the button (override any previous display:none) */
    .featured-section .container>.row:first-child .col-lg-5.text-end {
        display: flex !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        display: inline-flex !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }

    /* ── Cards — taller height ── */
    .featured-card .row.g-0 {
        height: 160px !important;
        flex-direction: row !important;
    }

    /* Text column */
    .featured-card .col-7 {
        flex: 0 0 55% !important;
        max-width: 55% !important;
        width: 55% !important;
    }

    /* Image column — full card height */
    .featured-card .col-5 {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        width: 45% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .featured-card .col-7.p-4 {
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Image fills full height of card */
    .featured-card .col-5 img,
    .featured-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
        min-height: 160px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }

    .featured-card p.text-muted {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .featured-card p.fw-semibold {
        font-size: 13px !important;
        margin-bottom: 0 !important;
        font-weight: 700 !important;
    }

    /* Hide the separate bottom explore button since button is now in header */
    .featured-explore-bottom {
        display: none !important;
    }
}


/* ── iPHONE SE — 375px ── */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (max-device-height: 667px) {

    .featured-card .row.g-0 {
        height: 148px !important;
    }

    .featured-card img {
        min-height: 148px !important;
    }

    .featured-card h5 {
        font-size: 12px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 12px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 19px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 7px 11px !important;
    }
}


/* ── iPHONE 12 PRO — 390px ── */
@media only screen and (min-device-width: 390px) and (max-device-width: 390px) and (-webkit-min-device-pixel-ratio: 3) {

    .featured-card .row.g-0 {
        height: 155px !important;
    }

    .featured-card img {
        min-height: 155px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 20px !important;
        padding-left: 15px;
    }
}


/* ── PIXEL 7 — 412px ── */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 2.6) {

    .featured-card .row.g-0 {
        height: 158px !important;
    }

    .featured-card img {
        min-height: 158px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 21px !important;
        padding-left: 15px;
    }
}


/* ── iPHONE 14 PRO MAX — 430px ── */
@media only screen and (min-device-width: 430px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {

    .featured-card .row.g-0 {
        height: 162px !important;
    }

    .featured-card img {
        min-height: 162px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 22px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}


/* ── SAMSUNG GALAXY S8+ — 360px ── */
@media only screen and (min-device-width: 360px) and (max-device-width: 360px) and (-webkit-min-device-pixel-ratio: 4) {

    .featured-card .row.g-0 {
        height: 145px !important;
    }

    .featured-card img {
        min-height: 145px !important;
    }

    .featured-card h5 {
        font-size: 12px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 12px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 19px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }
}


/* ── SAMSUNG S20 ULTRA — 412px DPR 3.5 ── */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3.5) {

    .featured-card .row.g-0 {
        height: 158px !important;
    }

    .featured-card img {
        min-height: 158px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 21px !important;
        padding-left: 15px;
    }
}


/* ── GALAXY Z FOLD 5 FOLDED — 344px ── */
@media only screen and (min-device-width: 344px) and (max-device-width: 344px) {

    .featured-card .row.g-0 {
        height: 135px !important;
    }

    .featured-card img {
        min-height: 135px !important;
    }

    .featured-card h5 {
        font-size: 11px !important;
    }

    .featured-card p.text-muted {
        font-size: 9px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 11px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 17px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 6px 9px !important;
    }
}


/* ── GALAXY Z FOLD 5 UNFOLDED — 882px ── */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {

    .featured-card .row.g-0 {
        height: 170px !important;
    }

    .featured-card img {
        min-height: 170px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 26px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 14px !important;
        padding: 10px 18px !important;
    }
}


/* ── iPAD MINI — 768px ── */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-card .row.g-0 {
        height: 168px !important;
    }

    .featured-card img {
        min-height: 168px !important;
    }

    .featured-card h5 {
        font-size: 15px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 24px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 13px !important;
        padding: 9px 16px !important;
    }
}


/* ── SURFACE DUO — 540px ── */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    .featured-card .row.g-0 {
        height: 162px !important;
    }

    .featured-card img {
        min-height: 162px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
    }

    .featured-card p.text-muted {
        font-size: 11px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 22px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}


/* ── GENERAL TABLET 541–767px ── */
@media (min-width: 541px) and (max-width: 767px) {

    .featured-card .row.g-0 {
        height: 160px !important;
    }

    .featured-card img {
        min-height: 160px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 22px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
    }
}


/* ── SURFACE PRO 7 — 912px ── */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-card .row.g-0 {
        height: 172px !important;
    }

    .featured-card img {
        min-height: 172px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 26px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 14px !important;
        padding: 10px 18px !important;
    }
}


/* ── ASUS ZENBOOK FOLD — 853px ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .featured-card .row.g-0 {
        height: 170px !important;
    }

    .featured-card img {
        min-height: 170px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 26px !important;
        padding-left: 15px;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 14px !important;
        padding: 10px 18px !important;
    }
}

/* ============================================================
   KALON NAVBAR — Pixel Perfect Match to Screenshots
   Desktop: unchanged grid layout
   Mobile: transparent → white on scroll/open, Sign in + Hamburger
   ============================================================ */


/* ── BASE NAVBAR ── */
.kalon-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 9999;
    background: transparent;
    border-bottom: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}


/* White bg when menu open */
.kalon-navbar.kalon-nav-open {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.kalon-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── LOGO ── */
.kalon-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.kalon-logo img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}


/* ── DESKTOP NAV (≥992px) ── */
.kalon-desktop-nav {
    display: none;
    align-items: center;
    gap: 12px;
}

@media (min-width: 992px) {
    .kalon-desktop-nav {
        display: flex;
    }

    .kalon-navbar {
        height: 68px;
        background: transparent;
    }

    .kalon-mob-right {
        display: none !important;
    }

    .kalon-mob-menu {
        display: none !important;
    }
}

.kalon-desktop-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kalon-desktop-nav ul li a {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.2s;
}

.kalon-desktop-nav ul li a:hover {
    color: #e579ad;
}

.kalon-desktop-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 16px;
}


/* ============================================================
   MOBILE RIGHT SIDE — Sign in + Hamburger / X
   ============================================================ */

.kalon-mob-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 992px) {
    .kalon-mob-right {
        display: none;
    }
}

/* ── Sign in button ── */
.kalon-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Inter', sans-serif;
    /* Pill shadow like screenshot */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.kalon-signin-btn:hover {
    border-color: #999;
    color: #111;
    text-decoration: none;
}

/* ── Hamburger button ── */
.kalon-ham-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 42px;
    height: 38px;
}

.kalon-ham-btn:hover {
    border-color: #999;
}

.kalon-ham-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: #111;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── X / Close button ── */
.kalon-x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    padding: 0;
    width: 42px;
    height: 38px;
    font-size: 18px;
    font-weight: 400;
    color: #111;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    transition: border-color 0.2s;
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

.kalon-x-btn:hover {
    border-color: #999;
}


/* ============================================================
   MOBILE FULL-PAGE MENU
   ============================================================ */

.kalon-mob-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9998;
    overflow-y: auto;
    /* Slide up (hidden) */
    transform: translateY(-110%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Hidden on desktop */
    display: none;
}

@media (max-width: 991.98px) {
    .kalon-mob-menu {
        display: block;
    }
}

/* Slide down (visible) */
.kalon-mob-menu.kalon-menu-open {
    transform: translateY(0);
}

/* Nav links container */
.kalon-mob-links {
    display: flex;
    flex-direction: column;
    padding: 0 24px 32px;
}

/* Each nav link */
.kalon-mob-links a {
    font-size: 18px;
    font-weight: 400;
    color: #111;
    text-decoration: none;
    padding: 20px 0;
    display: block;
    transition: color 0.2s;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.1px;
}

.kalon-mob-links a:last-of-type {
    border-bottom: none;
}

.kalon-mob-links a:hover {
    color: #e579ad;
}

/* Book a Appointment — pink button */
.kalon-mob-links .kalon-book-link {
    background: #e579ad !important;
    color: #fff !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    padding: 17px 20px !important;
    margin-top: 24px !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(229, 121, 173, 0.35) !important;
    transition: background 0.2s !important;
}

.kalon-mob-links .kalon-book-link:hover {
    background: #d66b9f !important;
    color: #fff !important;
}


/* ============================================================
   DEVICE-SPECIFIC TWEAKS
   ============================================================ */

/* Very small — Galaxy Z Fold folded (344px) */
@media (max-width: 344px) {
    .kalon-logo img {
        width: 50px;
        height: 50px;
    }

    .kalon-signin-btn {
        font-size: 16px !important;
        padding: 10px 12px !important;
        letter-spacing: 0.04rem;
    }

    .kalon-ham-btn,
    .kalon-x-btn {
        width: 36px !important;
        height: 34px !important;
    }

    .kalon-ham-btn span {
        width: 15px !important;
    }

    .kalon-mob-links a {
        font-size: 16px !important;
        padding: 16px 0 !important;
    }

    .kalon-mob-links {
        padding: 0 16px 24px !important;
    }

    .kalon-mob-links .kalon-book-link {
        font-size: 15px !important;
        padding: 14px !important;
    }
}

/* iPhone SE (375px) */
@media (min-width: 345px) and (max-width: 375px) {
    .kalon-logo img {
        width: 50px;
        height: 50px;
    }

    .kalon-signin-btn {
        font-size: 16px !important;
        padding: 11px 14px !important;
        letter-spacing: 0.04rem;
    }

    .kalon-mob-links a {
        font-size: 17px !important;
        padding: 18px 0 !important;
    }
}

/* iPhone 12 Pro / 14 Pro Max / Pixel 7 / S8+ / S20 Ultra (376–430px) */
@media (min-width: 376px) and (max-width: 430px) {
    .kalon-logo img {
        width: 50px;
        height: 50px;
    }

    .kalon-signin-btn {
        font-size: 16px !important;
        padding: 11px 16px !important;
        letter-spacing: 0.04rem;
    }

    .kalon-mob-links a {
        font-size: 18px !important;
        padding: 20px 0 !important;
    }

    .kalon-mob-links {
        padding: 0 24px 28px !important;
    }
}

/* Surface Duo + general tablets (540px–767px) */
@media (min-width: 540px) and (max-width: 767.98px) {
    .kalon-logo img {
        width: 50px;
        height: 50px;
    }

    .kalon-signin-btn {
        font-size: 16px !important;
        padding: 11px 20px !important;
        letter-spacing: 0.04rem;
    }

    .kalon-ham-btn,
    .kalon-x-btn {
        width: 46px !important;
        height: 40px !important;
    }

    .kalon-mob-links a {
        font-size: 20px !important;
        padding: 21px 0 !important;
    }

    .kalon-mob-links {
        padding: 0 32px 32px !important;
    }

    .kalon-mob-links .kalon-book-link {
        font-size: 18px !important;
        padding: 18px !important;
    }
}

/* iPad Mini / Z Fold unfolded / Surface Pro (768px–991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .kalon-navbar {
        height: 68px;
    }

    .kalon-mob-menu {
        top: 68px;
    }

    .kalon-logo img {
        width: 70px;
        height: 70px;
    }

    .kalon-signin-btn {
        font-size: 16px !important;
        padding: 11px 22px !important;
        letter-spacing: 0.04rem;
    }

    .kalon-ham-btn,
    .kalon-x-btn {
        width: 50px !important;
        height: 42px !important;
    }

    .kalon-ham-btn span {
        width: 20px !important;
    }

    .kalon-mob-links a {
        font-size: 22px !important;
        padding: 24px 0 !important;
    }

    .kalon-mob-links {
        padding: 0 44px 40px !important;
    }

    .kalon-mob-links .kalon-book-link {
        font-size: 20px !important;
        padding: 20px !important;
        margin-top: 28px !important;
    }
}

/* Landscape phones */
@media (max-height: 430px) and (min-width: 600px) and (orientation: landscape) {
    .kalon-mob-links a {
        font-size: 15px !important;
        padding: 12px 0 !important;
    }

    .kalon-mob-links {
        padding: 0 24px 20px !important;
    }

    .kalon-mob-links .kalon-book-link {
        font-size: 15px !important;
        padding: 13px !important;
        margin-top: 14px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .kalon-mob-menu {
        transition: none !important;
    }

    .kalon-navbar {
        transition: none !important;
    }
}


/* ============================================================
   KALON LOCATIONS — MOBILE (Talkin' Tacos style)
   Pixel-perfect match to provided screenshots
   All target devices covered
   Desktop layout completely unchanged
   ============================================================ */


/* ═══════════════════════════════════════
   MOBILE SECTION WRAPPER
═══════════════════════════════════════ */

.klm-section {
    padding: 28px 0 32px;
    background: #fff;
}

.klm-wrap {
    padding: 0 16px;
    max-width: 100%;
}


/* ═══════════════════════════════════════
   HEADER — title + arrows
═══════════════════════════════════════ */

.klm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.klm-title {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.4px;
    margin: 0;
}

.klm-arrows {
    display: flex;
    gap: 8px;
}

.klm-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.klm-arrow i {
    font-size: 16px;
    color: #333;
    font-weight: 700 !important;
}

.klm-arrow:hover,
.klm-arrow:active {
    background: #e579ad;
    border-color: #e579ad;
}

.klm-arrow:hover i,
.klm-arrow:active i {
    color: #fff;
}


/* ═══════════════════════════════════════
   PILLS — horizontal scroll
═══════════════════════════════════════ */

.klm-pills-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
}

.klm-pills-outer::-webkit-scrollbar {
    display: none;
}

.klm-pills {
    display: flex;
    gap: 8px;
    width: max-content;
    padding-bottom: 2px;
}

.klm-pill {
    background: #f0f0f0;
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    line-height: 1.4;
}

.klm-pill:hover {
    border-color: #ccc;
}

.klm-pill.active {
    background: #f0f0f0;
    border-color: #111;
    font-weight: 600;
}


/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */

.klm-card {
    background: #f6f6f6;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 22px 20px 18px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.klm-card:active {
    cursor: grabbing;
}


/* ═══════════════════════════════════════
   PANELS — Info / Hours
═══════════════════════════════════════ */

.klm-panel {
    display: block;
}

.klm-hidden {
    display: none !important;
}


/* ── Info panel ── */

.klm-spa-name {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin: 0 0 4px;
    line-height: 1.4;
}

.klm-city {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0 0 18px;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.klm-label {
    font-size: 13px;
    font-weight: 500;
    color: #888;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

.klm-address {
    font-size: 15px;
    font-weight: 400;
    color: #111;
    margin: 0 0 20px;
    line-height: 1.55;
}

.klm-contact {
    font-size: 15px;
    font-weight: 400;
    color: #111;
    margin: 0 0 6px;
    line-height: 1.5;
}

.klm-contact:last-of-type {
    margin-bottom: 0;
}


/* ── Hours panel ── */

.klm-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1.5px solid #e5e7eb;
}

.klm-tab {
    background: none;
    border: none;
    padding: 10px 16px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
    margin-bottom: -1.5px;
}

.klm-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #111;
    transform: scaleX(0);
    transition: transform 0.2s;
    border-radius: 2px 2px 0 0;
}

.klm-tab.active {
    color: #111;
    font-weight: 600;
}

.klm-tab.active::after {
    transform: scaleX(1);
}

/* Hours table */
.klm-hours-tbl {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
}

.klm-hours-tbl td {
    padding: 7px 0;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
}

.klm-hours-tbl td:first-child {
    width: 110px;
    color: #555;
}

.klm-hours-tbl td:last-child {
    color: #111;
}

.klm-today-row td {
    font-weight: 700 !important;
    color: #111 !important;
}


/* ═══════════════════════════════════════
   DIVIDER
═══════════════════════════════════════ */

.klm-divider {
    border: none;
    border-top: 1px solid #171819;
    margin: 18px 0 14px;
}


/* ═══════════════════════════════════════
   FOOTER — today hours + toggle
═══════════════════════════════════════ */

.klm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.klm-today-txt {
    font-size: 13.5px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.klm-toggle-hrs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
    flex-shrink: 0;
}

.klm-toggle-hrs:hover {
    color: #e579ad;
}

.klm-toggle-hrs i {
    font-size: 12px;
    transition: transform 0.25s ease;
    display: inline-block;
}

.klm-toggle-hrs i.klm-rotated {
    transform: rotate(90deg);
}


/* ═══════════════════════════════════════
   BOOK BUTTON — full width pink
═══════════════════════════════════════ */

.klm-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #e579ad;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 12px rgba(229, 121, 173, 0.35);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.klm-book-btn:hover {
    background: #d66b9f;
    color: #fff;
    text-decoration: none;
}

.klm-book-btn:active {
    transform: scale(0.98);
    background: #d66b9f;
}


/* ═══════════════════════════════════════
   CARD SWIPE ANIMATION
═══════════════════════════════════════ */

.klm-card.klm-swiping {
    transition: none;
}

@keyframes klmFadeIn {
    from {
        opacity: 0.5;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.klm-card.klm-refresh {
    animation: klmFadeIn 0.2s ease;
}


/* ═══════════════════════════════════════
   DEVICE TWEAKS
═══════════════════════════════════════ */

/* Galaxy Z Fold 5 folded — 344px */
@media (max-width: 344px) {
    .klm-wrap {
        padding: 0 12px;
    }

    .klm-title {
        font-size: 20px;
    }

    .klm-arrow {
        width: 30px;
        height: 30px;
    }

    .klm-arrow i {
        font-size: 13px;
    }

    .klm-pill {
        font-size: 12px;
        padding: 6px 14px;
    }

    .klm-city {
        font-size: 17px;
    }

    .klm-address,
    .klm-contact {
        font-size: 13px;
    }

    .klm-hours-tbl td {
        font-size: 12px;
        padding: 5px 0;
    }

    .klm-hours-tbl td:first-child {
        width: 90px;
    }

    .klm-today-txt,
    .klm-toggle-hrs {
        font-size: 11.5px;
    }

    .klm-book-btn {
        font-size: 13px;
        padding: 12px 16px;
    }

    .klm-card {
        padding: 18px 14px 14px;
    }
}

/* iPhone SE — 375px */
@media (min-width: 345px) and (max-width: 375px) {
    .klm-title {
        font-size: 21px;
    }

    .klm-city {
        font-size: 18px;
    }

    .klm-pill {
        font-size: 13px;
        padding: 7px 16px;
    }

    .klm-hours-tbl td {
        font-size: 13px;
    }

    .klm-book-btn {
        font-size: 14px;
    }
}

/* iPhone 12 Pro / Pixel 7 / S8+ / S20 Ultra — 376–430px */
@media (min-width: 376px) and (max-width: 430px) {
    .klm-title {
        font-size: 22px;
    }

    .klm-city {
        font-size: 19px;
    }

    .klm-book-btn {
        font-size: 15px;
    }
}

/* iPhone 14 Pro Max — 430px */
@media (min-width: 430px) and (max-width: 430px) {
    .klm-city {
        font-size: 20px;
    }

    .klm-book-btn {
        font-size: 15px;
        padding: 15px 20px;
    }
}

/* Surface Duo + general tablets — 540px–767px */
@media (min-width: 540px) and (max-width: 767.98px) {
    .klm-wrap {
        padding: 0 24px;
        max-width: 550px;
        margin: 0 auto;
    }

    .klm-title {
        font-size: 26px;
    }

    .klm-arrow {
        width: 38px;
        height: 38px;
    }

    .klm-pill {
        font-size: 15px;
        padding: 9px 22px;
    }

    .klm-city {
        font-size: 22px;
    }

    .klm-address,
    .klm-contact {
        font-size: 16px;
    }

    .klm-hours-tbl td {
        font-size: 15px;
        padding: 8px 0;
    }

    .klm-hours-tbl td:first-child {
        width: 120px;
    }

    .klm-today-txt,
    .klm-toggle-hrs {
        font-size: 14.5px;
    }

    .klm-book-btn {
        font-size: 16px;
        padding: 15px 24px;
    }
}

/* iPad Mini / Z Fold unfolded / Surface Pro — 768px–991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .klm-wrap {
        padding: 0 32px;
        max-width: 765px;
        margin: 0 auto;
    }

    .klm-title {
        font-size: 28px;
    }

    .klm-arrow {
        width: 40px;
        height: 40px;
    }

    .klm-arrow i {
        font-size: 18px;
    }

    .klm-pill {
        font-size: 15px;
        padding: 10px 24px;
    }

    .klm-city {
        font-size: 24px;
    }

    .klm-address,
    .klm-contact {
        font-size: 17px;
    }

    .klm-hours-tbl td {
        font-size: 16px;
        padding: 9px 0;
    }

    .klm-hours-tbl td:first-child {
        width: 130px;
    }

    .klm-today-txt,
    .klm-toggle-hrs {
        font-size: 15px;
    }

    .klm-book-btn {
        font-size: 17px;
        padding: 16px 24px;
        border-radius: 12px;
    }

    .klm-card {
        padding: 28px 26px 22px;
        border-radius: 20px;
    }

    .klm-tab {
        font-size: 15px;
        padding: 11px 20px 11px;
    }
}

/* Landscape phones */
@media (max-height: 430px) and (min-width: 600px) and (orientation: landscape) {
    .klm-section {
        padding: 16px 0 20px;
    }

    .klm-city {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .klm-hours-tbl td {
        font-size: 12px;
        padding: 5px 0;
    }

    .klm-book-btn {
        font-size: 14px;
        padding: 12px 16px;
    }

    .klm-card {
        padding: 16px 16px 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .klm-card.klm-refresh {
        animation: none;
    }

    .klm-toggle-hrs i {
        transition: none !important;
    }
}

/* ══════════════════════════════════════
   MOBILE/TABLET ONLY
   Sirf existing sfc-* classes use ho rahi hain
   Desktop par zero change
══════════════════════════════════════ */

@media (max-width: 1023.98px) {

    /* ── Card padding ── */
    .sfc-card {
        padding: 0 20px;
        border-radius: 12px 12px 0 0;
    }

    /* ── TOP ROW: stack vertically ── */
    .sfc-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 24px 0 0;
        min-height: auto;
    }

    /* ── Logo ── */
    .sfc-logo-col {
        width: auto;
        padding-bottom: 10px;
    }

    .sfc-logo-img {
        width: 64px;
        height: 64px;
    }

    /* ── Nav: single column list with dividers ── */
    .sfc-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 0;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 15px;
        font-weight: 500;
        color: #111;
        padding: 13px 0;
        /* border-bottom: 1px solid #e0e0e0; */
        display: block;
        text-decoration: none;
        line-height: 1.4;
    }

    .sfc-head {
        font-weight: 500;
    }

    /* Last item border remove */
    .sfc-nav .sfc-nav-col:last-child .sfc-sub:last-child,
    .sfc-nav .sfc-nav-col:last-child .sfc-head:last-child {
        border-bottom: none;
    }

    /* ── Book button: full width ── */
    .sfc-book-btn {
        /* width: 100%; */
        margin: 20px 0 24px;
        justify-content: center;
        font-size: 15px;
        padding: 15px 20px;
        border-radius: 10px;
    }

    /* ── Divider ── */
    .sfc-divider {
        width: 100%;
        margin-left: 0;
        border-top: 1px solid #4b4b4b;
    }

    /* ── BOTTOM ROW: stack ── */
    .sfc-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 20px 0 0;
        min-height: auto;
    }

    /* Hide logo spacer */
    .sfc-logo-spacer {
        display: none;
    }

    /* ── App row ── */
    .sfc-app-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        /* margin-bottom: 4px; */
    }

    /* App Store + Google Play badges */
    .sfc-app-row::after {
        content: '';
        display: block;
    }

    /* Store badges wrapper — inject via existing sfc-app-text */
    .sfc-app-text {
        gap: 8px;
    }

    .sfc-app-label {
        font-size: 12px;
        color: #888;
        text-align: center;
    }

    .sfc-app-desc {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    /* Store badges */
    .sfc-store-badges {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 4px;
    }

    .sfc-store-badge {
        height: 40px;
        width: auto;
        display: block;
        border-radius: 8px;
    }

    /* QR code next to badges */
    .sfc-app-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .sfc-qr {
        width: 88px;
        height: 88px;
        flex-shrink: 0;
        border-radius: 10px;
    }

    /* ── Policy links: column ── */
    .sfc-policy {
        flex-direction: column;
        gap: 8px;
        margin-left: 0;
        padding: 20px 0 24px;
    }

    .sfc-policy a {
        font-size: 14px;
        color: #666;
    }

    /* ── Below card ── */
    .sfc-below {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px 20px;
    }

    .sfc-copy {
        font-size: 13px;
        order: 2;
    }

    .sfc-socials {
        order: 1;
    }

    .sfc-badge {
        order: 3;
    }
}

/* ── iPad Mini / iPad Pro / Nest Hub (768px–1023px) ── */
@media (min-width: 768px) and (max-width: 1023.98px) {

    .sfc-card {
        padding: 0 32px;
    }

    .sfc-logo-img {
        width: 72px;
        height: 72px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 16px;
        padding: 14px 0;
    }

    .sfc-book-btn {
        font-size: 16px;
        padding: 16px 24px;
    }

    .sfc-qr {
        width: 100px;
        height: 100px;
    }

    .sfc-store-badge {
        height: 44px;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 18px 32px 22px;
    }

    .sfc-copy {
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }
}

/* ── iPhone SE (max-width: 375px) ── */
@media (max-width: 375px) {

    .sfc-card {
        padding: 0 14px;
    }

    .sfc-logo-img {
        width: 56px;
        height: 56px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 14px;
        padding: 11px 0;
    }

    .sfc-book-btn {
        font-size: 14px;
        padding: 13px 16px;
    }

    .sfc-qr {
        width: 78px;
        height: 78px;
    }

    .sfc-store-badge {
        height: 36px;
    }

    .sfc-below {
        padding: 14px 14px 18px;
    }
}

/* Desktop par store badges hide */
.sfc-store-badges {
    display: none;
}

@media (max-width: 1023.98px) {
    .sfc-store-badges {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 4px;
    }
}

@media (max-width: 1023.98px) {

    .sfc-wrap {
        width: 95%;
    }

    .sfc-card {
        padding: 20px 20px 0;
        border-radius: 12px 12px 0 0;
    }

    /* ── TOP ROW: stack ── */
    .sfc-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-height: auto;
        padding: 0;
    }

    /* ── Logo ── */
    .sfc-logo-col {
        width: auto;
    }

    .sfc-logo-img {
        width: 80px;
        height: 80px;
    }

    /* ── Book button: auto width, left aligned ── */
    .sfc-book-btn {
        width: auto;
        margin: 0 0 20px 0;
        font-size: 14px;
        padding: 11px 20px;
        border-radius: 8px;
        justify-content: flex-start;
    }

    /* ── Nav: single column, border-bottom on each link ── */
    .sfc-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 0;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 16px;
        padding: 6px 10px;
        font-weight: 600;
        color: #111;
        /* border-bottom: 1px solid #d8d8d8; */
        display: block;
        text-decoration: none;
        line-height: 1.4;
    }

    /* ── BOTTOM ROW ── */
    .sfc-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-height: auto;
        padding: 20px 0 0;
    }

    .sfc-logo-spacer {
        display: none;
    }

    /* ── App row: QR left, badges right ── */
    .sfc-app-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }

    .sfc-qr {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }

    .sfc-app-label {
        font-size: 12px;
        color: #888;
        text-align: center;
    }

    .sfc-app-desc {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        margin-bottom: 4px;
    }

    /* Store badges */
    .sfc-store-badges {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }

    .sfc-store-badge {
        height: 38px;
        width: auto;
        display: block;
        border-radius: 7px;
    }

    /* ── Policy links ── */
    .sfc-policy {
        flex-direction: column;
        gap: 6px;
        margin-left: 0;
        padding: 20px 0 20px;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #666;
        font-weight: 400;
    }

    /* ── Below card ── */
    .sfc-below {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 20px 18px;
    }

    .sfc-copy {
        font-size: 12px;
    }

    .sfc-badge span {
        font-size: 12px;
    }
}

/* iPad Mini / iPad Pro (768–1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sfc-card {
        padding: 28px 32px 0;
    }

    .sfc-logo-img {
        width: 80px;
        height: 80px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 16px;
        padding: 6px 10px;
        font-weight: 600;
    }

    .sfc-book-btn {
        font-size: 15px;
        padding: 12px 22px;
    }

    .sfc-qr {
        width: 95px;
        height: 95px;
    }

    .sfc-store-badge {
        height: 42px;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 16px 32px 20px;
    }
}

/* iPhone SE (max 375px) */
@media (max-width: 375px) {
    .sfc-card {
        padding: 16px 14px 0;
    }

    .sfc-logo-img {
        width: 80px;
        height: 80px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 16px;
        padding: 6px 10px;
        font-weight: 600;
    }

    .sfc-book-btn {
        font-size: 13px;
        padding: 10px 16px;
    }

    .sfc-qr {
        width: 70px;
        height: 70px;
    }

    .sfc-store-badge {
        height: 34px;
    }

    .sfc-below {
        padding: 12px 14px 16px;
    }
}

/* ══════════════════════════════════════
   FOOTER TABLET FIX — Desktop layout restore
   In sab devices par footer desktop jaisa dikhega
   HTML touch nahi hua
══════════════════════════════════════ */

/* ── Surface Duo (540px) ── */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 28px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 140px;
        padding: 24px 0 20px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 80px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 60px;
        height: 60px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 24px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 8px;
    }

    .sfc-head {
        font-size: 13px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1.4;
    }

    .sfc-sub {
        font-size: 13px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1.4;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 12px;
        padding: 10px 14px;
        border-radius: 8px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 80px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 90px;
        padding: 16px 0 18px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 80px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 12px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 16px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 12px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 28px 16px;
    }

    .sfc-copy {
        font-size: 12px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }

    .sfc-badge span {
        font-size: 12px;
    }
}

/* ── Galaxy Z Fold 5 Unfolded (882px) ── */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 40px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 150px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 120px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 70px;
        height: 70px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 32px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 9px;
    }

    .sfc-head {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 14px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 13px;
        padding: 11px 18px;
        border-radius: 9px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 120px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 90px;
        padding: 18px 0 20px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 120px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 20px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 40px 18px;
    }

    .sfc-copy {
        font-size: 13px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }

    .sfc-badge span {
        font-size: 13px;
    }
}

/* ── iPad Mini (768px) ── */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 40px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 150px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 120px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 70px;
        height: 70px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 32px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 9px;
    }

    .sfc-head {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 14px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 13px;
        padding: 11px 18px;
        border-radius: 9px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 120px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 90px;
        padding: 18px 0 20px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 120px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 20px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 40px 18px;
    }

    .sfc-copy {
        font-size: 13px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }
}

/* ── iPad Pro (1024px) ── */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 60px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 160px;
        padding: 30px 0 24px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 180px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 76px;
        height: 76px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 44px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 10px;
    }

    .sfc-head {
        font-size: 15px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 15px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 14px;
        padding: 12px 20px;
        border-radius: 10px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 180px;
        border-top: 2px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 100px;
        padding: 20px 0 22px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 180px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        flex: 1;
    }

    .sfc-qr {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sfc-app-label {
        font-size: 12px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 24px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 14px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 60px 20px;
    }

    .sfc-copy {
        font-size: 14px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }

    .sfc-badge span {
        font-size: 14px;
    }
}

/* ── Nest Hub (1024x600) ── */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 50px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 130px;
        padding: 22px 0 18px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 160px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 66px;
        height: 66px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 36px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 9px;
    }

    .sfc-head {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 14px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 13px;
        padding: 11px 18px;
        border-radius: 9px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 160px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 85px;
        padding: 16px 0 18px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 160px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 20px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 50px 16px;
    }

    .sfc-copy {
        font-size: 13px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }
}

/* ── Nest Hub Max (1280x800) ── */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 80px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 160px;
        padding: 30px 0 24px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 200px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 78px;
        height: 78px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 48px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 10px;
    }

    .sfc-head {
        font-size: 15px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 15px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 15px;
        padding: 13px 22px;
        border-radius: 10px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 200px;
        border-top: 2px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 100px;
        padding: 22px 0 24px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 200px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        flex: 1;
    }

    .sfc-qr {
        width: 62px;
        height: 62px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sfc-app-label {
        font-size: 12px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 26px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 14px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 80px 20px;
    }

    .sfc-copy {
        font-size: 14px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }

    .sfc-badge span {
        font-size: 14px;
    }
}

/* ── Asus Zenbook Fold (853px) ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 50px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 155px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 150px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 72px;
        height: 72px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 36px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 9px;
    }

    .sfc-head {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 14px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 13px;
        padding: 12px 20px;
        border-radius: 9px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 150px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 95px;
        padding: 18px 0 20px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 150px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 58px;
        height: 58px;
        flex-shrink: 0;
        border-radius: 7px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 22px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 50px 18px;
    }

    .sfc-copy {
        font-size: 13px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }
}

/* ── Surface Pro 7 (912px) ── */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 56px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 158px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 170px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 74px;
        height: 74px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 40px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 10px;
    }

    .sfc-head {
        font-size: 15px;
        font-weight: 600;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-sub {
        font-size: 15px;
        font-weight: 400;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 14px;
        padding: 12px 20px;
        border-radius: 10px;
        justify-content: center;
        display: inline-flex;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 170px;
        border-top: 2px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 98px;
        padding: 20px 0 22px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 170px;
        flex-shrink: 0;
        display: block;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 13px;
        flex: 1;
    }

    .sfc-qr {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sfc-app-label {
        font-size: 12px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 24px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 14px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 17px 56px 20px;
    }

    .sfc-copy {
        font-size: 14px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }

    .sfc-badge span {
        font-size: 14px;
    }
}

/* ══════════════════════════════════════
   TABLET FOOTER FIX
   iPad Mini (768) / iPad Air (820) / Surface Pro 7 (912)
   Bootstrap d-lg-none / d-none.d-lg-flex ko override karo
══════════════════════════════════════ */

/* iPad Mini — 768px */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    /* Mobile app row hide */
    .sfc-bottom .sfc-app-row.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-label.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-desc.d-lg-none {
        display: none !important;
    }

    /* Desktop app row show */
    .sfc-bottom .sfc-app-row.d-none.d-lg-flex {
        display: flex !important;
    }

    /* Desktop book button show */
    .sfc-top .sfc-book-btn.d-none.d-lg-flex {
        display: inline-flex !important;
    }

    /* Full desktop layout restore */
    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 40px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 150px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 120px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 70px;
        height: 70px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 32px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 9px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 14px;
        font-weight: 500;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-head {
        font-weight: 600;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 13px;
        padding: 11px 18px;
        border-radius: 9px;
        justify-content: center;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 120px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 90px;
        padding: 18px 0 20px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 120px;
        flex-shrink: 0;
        display: block !important;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 20px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 40px 18px;
    }

    .sfc-copy {
        font-size: 13px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }
}

/* iPad Air — 820px */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {

    .sfc-bottom .sfc-app-row.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-label.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-desc.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-row.d-none.d-lg-flex {
        display: flex !important;
    }

    .sfc-top .sfc-book-btn.d-none.d-lg-flex {
        display: inline-flex !important;
    }

    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 44px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 152px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 130px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 72px;
        height: 72px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 34px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 9px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 14px;
        font-weight: 500;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-head {
        font-weight: 600;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 13px;
        padding: 11px 18px;
        border-radius: 9px;
        justify-content: center;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 130px;
        border-top: 1.5px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 90px;
        padding: 18px 0 20px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 130px;
        flex-shrink: 0;
        display: block !important;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .sfc-qr {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .sfc-app-label {
        font-size: 11px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 20px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 13px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 44px 18px;
    }

    .sfc-copy {
        font-size: 13px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }
}

/* Surface Pro 7 — 912px */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .sfc-bottom .sfc-app-row.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-label.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-desc.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-row.d-none.d-lg-flex {
        display: flex !important;
    }

    .sfc-top .sfc-book-btn.d-none.d-lg-flex {
        display: inline-flex !important;
    }

    .sfc-wrap {
        width: 100%;
    }

    .sfc-card {
        padding: 0 56px;
        border-radius: 16px 16px 0 0;
    }

    .sfc-top {
        flex-direction: row;
        align-items: center;
        min-height: 158px;
        padding: 28px 0 22px;
        gap: 0;
    }

    .sfc-logo-col {
        width: 170px;
        flex-shrink: 0;
        padding-bottom: 0;
    }

    .sfc-logo-img {
        width: 74px;
        height: 74px;
    }

    .sfc-nav {
        flex-direction: row;
        gap: 40px;
        flex: 1;
        align-items: flex-start;
    }

    .sfc-nav-col {
        flex-direction: column;
        gap: 10px;
    }

    .sfc-head,
    .sfc-sub {
        font-size: 15px;
        font-weight: 500;
        color: #111;
        padding: 0;
        border-bottom: none;
        display: block;
        text-decoration: none;
        line-height: 1;
    }

    .sfc-head {
        font-weight: 600;
    }

    .sfc-book-btn {
        width: auto;
        margin: 0 0 0 auto;
        font-size: 14px;
        padding: 12px 20px;
        border-radius: 10px;
        justify-content: center;
    }

    .sfc-divider {
        width: 81%;
        margin-left: 170px;
        border-top: 2px solid #8d8d8d;
    }

    .sfc-bottom {
        flex-direction: row;
        align-items: center;
        min-height: 98px;
        padding: 20px 0 22px;
        gap: 0;
    }

    .sfc-logo-spacer {
        width: 170px;
        flex-shrink: 0;
        display: block !important;
    }

    .sfc-app-row {
        flex-direction: row;
        align-items: center;
        gap: 13px;
        flex: 1;
    }

    .sfc-qr {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .sfc-app-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sfc-app-label {
        font-size: 12px;
        color: #666;
        text-align: left;
    }

    .sfc-app-desc {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row;
        gap: 24px;
        margin-left: auto;
        padding: 0;
    }

    .sfc-policy a {
        font-size: 14px;
        color: #111;
        font-weight: 500;
    }

    .sfc-below {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 17px 56px 20px;
    }

    .sfc-copy {
        font-size: 14px;
        order: unset;
    }

    .sfc-socials {
        order: unset;
    }

    .sfc-badge {
        order: unset;
    }

    .sfc-badge span {
        font-size: 14px;
    }
}

/* General range fix — 768px to 991px jo Bootstrap lg se chhhote hain */
@media (min-width: 768px) and (max-width: 991.98px) {
    .sfc-bottom .sfc-app-row.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-label.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-desc.d-lg-none {
        display: none !important;
    }

    .sfc-bottom .sfc-app-row.d-none.d-lg-flex {
        display: flex !important;
    }

    .sfc-top .sfc-book-btn.d-none.d-lg-flex {
        display: inline-flex !important;
    }
}

/* ══════════════════════════════════════
   TREATMENTS SECTION — TABLET FIX
   iPad Mini (768) / iPad Air (820) / Surface Pro 7 (912)
   Negative margin remove + uniform card heights
══════════════════════════════════════ */

/* iPad Mini — 768px */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .treatments-section {
        padding-top: 60px !important;
        margin-top: 0 !important;
        border-radius: 40px !important;
    }

    /* Remove negative margin completely */
    .mt--94px {
        margin-top: 0 !important;
    }

    /* All cards same height */
    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 260px !important;
    }

    /* 2 column layout */
    .treatments-section .row.gy-4>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .treatment-overlay h4 {
        font-size: 18px !important;
    }
}

/* iPad Air — 820px */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {

    .treatments-section {
        padding-top: 60px !important;
        margin-top: 0 !important;
        border-radius: 40px !important;
    }

    .mt--94px {
        margin-top: 25px !important;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 270px !important;
    }

    /* 2 column layout */
    .treatments-section .row.gy-4>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .treatment-overlay h4 {
        font-size: 19px !important;
    }
}

/* Surface Pro 7 — 912px */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .treatments-section {
        padding-top: 65px !important;
        margin-top: 0 !important;
        border-radius: 44px !important;
    }

    .mt--94px {
        margin-top: 25px !important;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 280px !important;
    }

    /* 2 column layout */
    .treatments-section .row.gy-4>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .treatment-overlay h4 {
        font-size: 20px !important;
    }
}

/* General tablet range 768px–991px — catch all */
@media (min-width: 768px) and (max-width: 991.98px) {

    .mt--94px {
        margin-top: 25px !important;
    }

    .treatment-card,
    .treatment-card.weight-loss,
    .treatment-card.sugaring,
    .last-left-right-card {
        height: 260px !important;
    }

    .treatments-section .row.gy-4>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .treatment-overlay h4 {
        font-size: 18px !important;
    }

    .treatments-section {
        padding-top: 60px !important;
        margin-top: 0 !important;
    }
}

/* ══════════════════════════════════════
   REVIEWS SECTION — TABLET FIX
   Sirf existing classes use ho rahi hain
   Desktop par zero change
══════════════════════════════════════ */

/* ── General tablet range 768px–991px ── */
@media (min-width: 768px) and (max-width: 991.98px) {

    .reviews-section .col-lg-3 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        width: 30% !important;
        padding-right: 12px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        width: 70% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .profile-image {
        width: 44px !important;
        height: 44px !important;
    }

    .reviewer-name {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
    }

    .rating-number {
        font-size: 14px !important;
    }

    .large-stars .star {
        font-size: 12px !important;
    }

    .review-count,
    .powered-by {
        font-size: 11px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .review-btn {
        font-size: 11px !important;
        height: 30px !important;
        padding: 4px 8px 4px 10px !important;
        min-width: 110px !important;
        gap: 6px !important;
    }

    .review-btn .google-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .review-slider-container {
        padding: 0 36px !important;
    }

    .reviewSwiper {
        padding-bottom: 40px !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 160px !important;
        margin: 4px 2px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }

    .swiper-pagination {
        bottom: 4px !important;
    }
}

/* ── iPad Mini — 768px ── */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .reviews-section .col-lg-3 {
        flex: 0 0 32% !important;
        max-width: 32% !important;
        width: 32% !important;
        padding-right: 10px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section {
        padding: 20px 0 !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 68% !important;
        max-width: 68% !important;
        width: 68% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 42px !important;
        height: 42px !important;
    }

    .reviewer-name {
        font-size: 12px !important;
    }

    .rating-number {
        font-size: 13px !important;
    }

    .large-stars .star {
        font-size: 11px !important;
    }

    .review-count,
    .powered-by {
        font-size: 10px !important;
    }

    .review-btn {
        font-size: 10px !important;
        height: 28px !important;
        padding: 3px 7px 3px 9px !important;
        min-width: 100px !important;
        gap: 5px !important;
    }

    .review-btn .google-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .review-slider-container {
        padding: 0 32px !important;
    }

    .review-card {
        padding: 12px !important;
        min-height: 155px !important;
    }

    .review-text {
        font-size: 11px !important;
    }

    .reviewer-name-small {
        font-size: 11px !important;
    }

    .reviewer-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-nav {
        width: 26px !important;
        height: 26px !important;
    }

    .slider-nav i {
        font-size: 11px !important;
    }

}

/* ── iPad Air — 820px ── */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {

    .reviews-section {
        padding: 20px 0 !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-3 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        width: 30% !important;
        padding-right: 12px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        width: 70% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 44px !important;
        height: 44px !important;
    }

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

    .rating-number {
        font-size: 14px !important;
    }

    .large-stars .star {
        font-size: 12px !important;
    }

    .review-count,
    .powered-by {
        font-size: 11px !important;
    }

    .review-btn {
        font-size: 11px !important;
        height: 30px !important;
        padding: 4px 8px 4px 10px !important;
        min-width: 110px !important;
    }

    .review-btn .google-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .review-slider-container {
        padding: 0 34px !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 158px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }
}

/* ── Surface Pro 7 — 912px ── */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .reviews-section .col-lg-3 {
        flex: 0 0 28% !important;
        max-width: 28% !important;
        width: 28% !important;
        padding-right: 14px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 72% !important;
        max-width: 72% !important;
        width: 72% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 46px !important;
        height: 46px !important;
    }

    .reviewer-name {
        font-size: 14px !important;
    }

    .rating-number {
        font-size: 15px !important;
    }

    .large-stars .star {
        font-size: 13px !important;
    }

    .review-count,
    .powered-by {
        font-size: 12px !important;
    }

    .review-btn {
        font-size: 12px !important;
        height: 32px !important;
        padding: 4px 9px 4px 12px !important;
        min-width: 120px !important;
    }

    .review-btn .google-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .review-slider-container {
        padding: 0 36px !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 160px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }

    .reviews-section {
        padding: 20px 0;
        margin: 0 !important;
    }
}

/* ── iPad Pro — 1024px ── */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

    .reviews-section .col-lg-3 {
        flex: 0 0 26% !important;
        max-width: 26% !important;
        width: 26% !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 74% !important;
        max-width: 74% !important;
        width: 74% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 52px !important;
        height: 52px !important;
    }

    .reviewer-name {
        font-size: 15px !important;
    }

    .rating-number {
        font-size: 16px !important;
    }

    .large-stars .star {
        font-size: 14px !important;
    }

    .review-count,
    .powered-by {
        font-size: 13px !important;
    }

    .review-btn {
        font-size: 13px !important;
        height: 34px !important;
        min-width: 130px !important;
    }

    .review-btn .google-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .review-slider-container {
        padding: 0 42px !important;
    }

    .review-card {
        padding: 18px !important;
        min-height: 170px !important;
    }

    .review-text {
        font-size: 13px !important;
    }

    .slider-nav {
        width: 32px !important;
        height: 32px !important;
    }

    .swiper-pagination {
        bottom: 0px !important;
    }
}

/* ── Surface Duo — 540px ── */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {



    .reviews-section .col-lg-3 {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        width: 35% !important;
        padding-right: 10px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        width: 65% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .profile-image {
        width: 38px !important;
        height: 38px !important;
    }

    .reviewer-name {
        font-size: 12px !important;
    }

    .rating-number {
        font-size: 13px !important;
    }

    .large-stars .star {
        font-size: 11px !important;
    }

    .review-count,
    .powered-by {
        font-size: 10px !important;
    }

    .review-btn {
        font-size: 10px !important;
        height: 28px !important;
        padding: 3px 7px 3px 9px !important;
        min-width: 100px !important;
        gap: 5px !important;
    }

    .review-btn .google-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .review-slider-container {
        padding: 0 28px !important;
    }

    .reviewSwiper {
        padding-bottom: 36px !important;
    }

    .review-card {
        padding: 12px !important;
        min-height: 150px !important;
        margin: 4px 2px !important;
    }

    .review-card style {
        min-height: 150px !important;
    }

    .review-text {
        font-size: 11px !important;
    }

    .reviewer-name-small {
        font-size: 10px !important;
    }

    .reviewer-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .slider-nav {
        width: 24px !important;
        height: 24px !important;
    }

    .slider-nav i {
        font-size: 10px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }

    .swiper-pagination {
        bottom: 2px !important;
    }

    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }
}

/* ── Nest Hub — 1024x600 ── */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {

    .reviews-section .col-lg-3 {
        flex: 0 0 26% !important;
        max-width: 26% !important;
        width: 26% !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 74% !important;
        max-width: 74% !important;
        width: 74% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 48px !important;
        height: 48px !important;
    }

    .reviewer-name {
        font-size: 14px !important;
    }

    .rating-number {
        font-size: 15px !important;
    }

    .review-count,
    .powered-by {
        font-size: 12px !important;
    }

    .review-btn {
        font-size: 12px !important;
        height: 32px !important;
        min-width: 120px !important;
    }

    .review-slider-container {
        padding: 0 40px !important;
    }

    .review-card {
        padding: 16px !important;
        min-height: 165px !important;
    }

    .review-text {
        font-size: 13px !important;
    }
}

/* ── Galaxy Z Fold 5 Unfolded — 882px ── */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {

    .reviews-section .col-lg-3 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        width: 30% !important;
        padding-right: 12px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        width: 70% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 44px !important;
        height: 44px !important;
    }

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

    .rating-number {
        font-size: 14px !important;
    }

    .large-stars .star {
        font-size: 12px !important;
    }

    .review-count,
    .powered-by {
        font-size: 11px !important;
    }

    .review-btn {
        font-size: 11px !important;
        height: 30px !important;
        min-width: 110px !important;
        padding: 4px 8px 4px 10px !important;
    }

    .review-btn .google-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .review-slider-container {
        padding: 0 34px !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 158px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }
}

/* ── Asus Zenbook Fold — 853px ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .reviews-section .col-lg-3 {
        flex: 0 0 28% !important;
        max-width: 28% !important;
        width: 28% !important;
        padding-right: 12px !important;
        margin-bottom: 0 !important;
    }

    .reviews-section .col-lg-9 {
        flex: 0 0 72% !important;
        max-width: 72% !important;
        width: 72% !important;
    }

    .reviews-section .row.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .google-rating-card {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .profile-image {
        width: 44px !important;
        height: 44px !important;
    }

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

    .rating-number {
        font-size: 14px !important;
    }

    .review-count,
    .powered-by {
        font-size: 11px !important;
    }

    .review-btn {
        font-size: 11px !important;
        height: 30px !important;
        min-width: 112px !important;
    }

    .review-slider-container {
        padding: 0 36px !important;
    }

    .review-card {
        padding: 14px !important;
        min-height: 200px !important;
    }

    .review-text {
        font-size: 12px !important;
    }

    .slider-nav {
        width: 28px !important;
        height: 28px !important;
    }

    .slider-prev {
        left: 0 !important;
    }

    .slider-next {
        right: 0 !important;
    }
}

/* ══════════════════════════════════════
   FEATURED SECTION — TABLET FIX
   Target: 2 column grid (desktop jaisa)
   iPad Mini, iPad Air, iPad Pro,
   Nest Hub, Nest Hub Max, Surface Pro,
   Z Fold unfolded, Zenbook Fold
══════════════════════════════════════ */

/* ── Hide duplicate mobile row on ALL tablets ── */
@media (min-width: 540px) {
    .featured-section .row.g-4.d-lg-none {
        display: none !important;
    }
}

/* ══════════════════════════════════════
   GENERAL TABLET 768px–1199px
   2 column grid restore
══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199.98px) {

    /* Container normal padding restore */
    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }

    /* Header row normal */
    .featured-section .container>.row:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        margin-bottom: 20px !important;
    }

    .featured-section .container>.row:first-child .col-lg-1 {
        display: none !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 {
        flex: 0 0 auto !important;
        width: auto !important;
        /* padding: 0 !important; */
        margin-bottom: 0 !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 28px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end {
        flex: 0 0 auto !important;
        width: auto !important;
        /* padding: 0 !important; */
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        display: inline-flex !important;
        font-size: 14px !important;
        padding: 10px 18px !important;
        white-space: nowrap !important;
    }

    /* ── Cards row: 2 column grid ── */
    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        gap: 0 !important;
        --bs-gutter-x: 1.5rem !important;
        --bs-gutter-y: 1.5rem !important;
        margin-left: calc(-0.75rem) !important;
        margin-right: calc(-0.75rem) !important;
    }

    /* Spacer columns hide */
    .featured-section .row.g-4>.col-lg-1 {
        display: none !important;
    }

    /* Each card: 2 column = 50% */
    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        scroll-snap-align: none !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    /* Card inner layout */
    .featured-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
        height: 100% !important;
    }

    .featured-card .row.g-0 {
        flex-direction: row !important;
        height: 160px !important;
    }

    .featured-card .col-7 {
        flex: 0 0 58% !important;
        max-width: 58% !important;
        width: 58% !important;
    }

    .featured-card .col-5 {
        flex: 0 0 42% !important;
        max-width: 42% !important;
        width: 42% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .featured-card .col-7.p-4 {
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
        min-height: 160px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .featured-card p.text-muted {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        line-height: 1.5 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .featured-card p.fw-semibold {
        font-size: 15px !important;
        margin-bottom: 0 !important;
        font-weight: 700 !important;
    }

    /* Bottom explore button hide */
    .featured-explore-bottom {
        display: none !important;
    }
}

/* ── iPad Mini (768px) — cards thori manage ── */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 145px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 145px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .featured-card p.text-muted {
        font-size: 11px !important;
        margin-bottom: 5px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 13px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 12px !important;
    }

    /* Header */
    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 22px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

/* ── iPad Air (820px) — thori zyada spacing ── */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {

    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 155px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 155px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        -webkit-line-clamp: 3 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 14px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 14px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 24px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 13px !important;
        padding: 9px 16px !important;
    }
}

/* ── iPad Pro (1024px) ── */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 175px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 175px !important;
    }

    .featured-card h5 {
        font-size: 17px !important;
        margin-bottom: 7px !important;
    }

    .featured-card p.text-muted {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 15px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 20px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 32px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 15px !important;
        padding: 11px 22px !important;
    }
}

/* ── Nest Hub (1024x600) ── */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {

    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 160px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 160px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .featured-card p.text-muted {
        font-size: 13px !important;
        margin-bottom: 7px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 15px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 18px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 30px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
}

/* ── Nest Hub Max (1280x800) ── */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 180px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 180px !important;
    }

    .featured-card h5 {
        font-size: 18px !important;
    }

    .featured-card p.text-muted {
        font-size: 14px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 16px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 22px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 36px !important;
    }
}

/* ── Surface Pro 7 (912px) ── */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 168px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 168px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .featured-card p.text-muted {
        font-size: 13px !important;
        margin-bottom: 7px !important;
    }

    .featured-card p.fw-semibold {
        font-size: 15px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 18px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 28px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
}

/* ── Galaxy Z Fold 5 Unfolded (882px) ── */
@media only screen and (min-device-width: 882px) and (max-device-width: 882px) {

    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 165px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 165px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 13px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 16px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 26px !important;
    }
}

/* ── Asus Zenbook Fold (853px) ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .featured-section .container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .featured-card .row.g-0 {
        height: 165px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 165px !important;
    }

    .featured-card h5 {
        font-size: 16px !important;
    }

    .featured-card p.text-muted {
        font-size: 13px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 16px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 27px !important;
    }
}

/* ══════════════════════════════════════
   FEATURED SECTION — FINAL FIX
   iPad Mini, iPad Air, Surface Pro 7,
   Asus Zenbook Fold, Nest Hub Max,
   Surface Duo
   PASTE AT VERY BOTTOM of responsive.css
══════════════════════════════════════ */

/* ── Hide ALL col-lg-1 spacers in cards row ── */
@media (min-width: 540px) and (max-width: 1199.98px) {
    .featured-section .row.g-4>.col-lg-1 {
        display: none !important;
        flex: none !important;
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* ══════════════════════════════════════
   GENERAL TABLET 768px–1199px
   Strict 2-column grid
══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }

    /* Cards row — normal wrap grid */
    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: auto !important;
        padding: 0 !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        gap: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    /* EVERY col-lg-5 = exactly 50% */
    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 12px !important;
        scroll-snap-align: none !important;
        margin-bottom: 0 !important;
    }

    /* Card styling */
    .featured-card {
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09) !important;
        background: #fff !important;
        height: 100% !important;
    }

    .featured-card .row.g-0 {
        flex-direction: row !important;
        height: 155px !important;
        flex-wrap: nowrap !important;
    }

    .featured-card .col-7 {
        flex: 0 0 58% !important;
        max-width: 58% !important;
        width: 58% !important;
        min-width: 0 !important;
    }

    .featured-card .col-5 {
        flex: 0 0 42% !important;
        max-width: 42% !important;
        width: 42% !important;
        overflow: hidden !important;
        position: relative !important;
        min-width: 0 !important;
    }

    .featured-card .col-7.p-4 {
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
        min-height: 155px !important;
    }

    .featured-card h5 {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .featured-card p.text-muted {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        line-height: 1.5 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .featured-card p.fw-semibold {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
    }

    .featured-explore-bottom {
        display: none !important;
    }
}

/* ── iPad Mini (768px) ── */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .featured-section .row.g-4 {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        padding: 8px !important;
    }

    .featured-card .row.g-0 {
        height: 138px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 138px !important;
    }

    .featured-card h5 {
        font-size: 12px !important;
    }

    .featured-card p.text-muted {
        font-size: 10px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 14px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 10px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 20px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 11px !important;
        padding: 7px 12px !important;
    }
}

/* ── iPad Air (820px) ── */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {

    .featured-section .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .featured-section .row.g-4 {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        padding: 10px !important;
    }

    .featured-card .row.g-0 {
        height: 148px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 148px !important;
    }

    .featured-card h5 {
        font-size: 13px !important;
    }

    .featured-card p.text-muted {
        font-size: 11px !important;
        -webkit-line-clamp: 2 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 17px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 12px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 22px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

/* ── Surface Pro 7 (912px) ── */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .featured-section .row.g-4 {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        padding: 12px !important;
    }

    .featured-card .row.g-0 {
        height: 162px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 162px !important;
    }

    .featured-card h5 {
        font-size: 15px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
        -webkit-line-clamp: 3 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 14px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 16px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 26px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 13px !important;
        padding: 9px 18px !important;
    }
}

/* ── Asus Zenbook Fold (853px) ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .featured-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .featured-section .row.g-4 {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        padding: 12px !important;
    }

    .featured-card .row.g-0 {
        height: 160px !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 160px !important;
    }

    .featured-card h5 {
        font-size: 15px !important;
    }

    .featured-card p.text-muted {
        font-size: 12px !important;
        -webkit-line-clamp: 3 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 14px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 16px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 25px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 13px !important;
        padding: 9px 17px !important;
    }
}

/* ── Nest Hub Max (1280x800) ── */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {

    .featured-section .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 1200px !important;
    }

    .featured-card img {
        margin-left: 30px;
    }

    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        gap: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        padding: 0 !important;
    }

    .featured-section .row.g-4>.col-lg-1 {
        display: none !important;
        flex: none !important;
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 14px !important;
        scroll-snap-align: none !important;
    }

    .featured-card .row.g-0 {
        height: 175px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        min-height: 175px !important;
    }

    .featured-card h5 {
        font-size: 18px !important;
    }

    .featured-card p.text-muted {
        font-size: 14px !important;
        -webkit-line-clamp: 3 !important;
    }

    .featured-card p.fw-semibold {
        font-size: 16px !important;
    }

    .featured-card .col-7.p-4 {
        padding: 22px !important;
    }

    .featured-section .container>.row:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 36px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 16px !important;
        padding: 12px 24px !important;
    }
}

/* ── Surface Duo (540px) — 2 cards show ── */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    .featured-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
        padding: 0 !important;
        gap: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .featured-section .row.g-4>.col-lg-1 {
        display: none !important;
        flex: none !important;
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 8px !important;
        scroll-snap-align: none !important;
        margin-bottom: 0 !important;
    }

    .featured-card {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09) !important;
        background: #fff !important;
        height: 100% !important;
    }

    .featured-card .row.g-0 {
        flex-direction: row !important;
        height: 130px !important;
        flex-wrap: nowrap !important;
    }

    .featured-card .col-7 {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        width: 60% !important;
    }

    .featured-card .col-5 {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        width: 40% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .featured-card .col-7.p-4 {
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .featured-card .col-5 img,
    .featured-card img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        min-height: 130px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
    }

    .featured-card h5 {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 3px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .featured-card p.text-muted {
        font-size: 9px !important;
        margin-bottom: 4px !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .featured-card p.fw-semibold {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
    }

    .featured-section .container>.row:first-child {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.mb-4 h2 {
        font-size: 18px !important;
    }

    .featured-section .container>.row:first-child .col-lg-5.text-end .btn-primary-custom {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    .featured-explore-bottom {
        display: none !important;
    }
}

@media (min-width: 540px) and (max-width: 1199.98px) {
    .featured-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding: 0 8px !important;
        margin: 0 !important;
        gap: 16px 0 !important;
        --bs-gutter-x: 0 !important;
    }

    .featured-section .row.g-4>.col-lg-1 {
        flex: 0 0 0% !important;
        width: 0% !important;
        max-width: 0% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: block !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }

    .featured-section .row.g-4>.col-lg-5 {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        padding: 0 4px !important;
        scroll-snap-align: none !important;
        margin: 0 !important;
    }

    .display-6 {
        padding-left: 18px !important;
    }

    .btn-container {
        padding-right: 42px !important;
    }

}

/* ══════════════════════════════════════
   TREATMENTS — 9th card hide
   iPad Mini, iPad Air, Surface Pro 7,
   Asus Zenbook Fold
══════════════════════════════════════ */

/* iPad Mini (768px) */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .hero-section .btn-primary-custom,
    .hero-section a.btn-primary-custom {
        display: inline-flex !important;
        font-size: 20px !important;
        padding: 10px 24px !important;
    }
}

/* iPad Air (820px) */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }

}

/* Surface Pro 7 (912px) */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }
}

/* Asus Zenbook Fold (853px) */
@media only screen and (min-width: 853px) and (max-width: 853px) {
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }
}

/* General range — catch all 768px–991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }
}

/* ══════════════════════════════════════
   TESTIMONIALS — First 3 cards hide
   iPad Mini, iPad Air, Surface Pro 7,
   Asus Zenbook Fold
══════════════════════════════════════ */

/* General range 768px–991px */
@media (min-width: 768px) and (max-width: 991.98px) {

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3) {
        display: none !important;
    }
}

/* iPad Mini (768px) */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3) {
        display: none !important;
    }
}

/* iPad Air (820px) */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) {

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3) {
        display: none !important;
    }
}

/* Surface Pro 7 (912px) */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3) {
        display: none !important;
    }
}

/* Asus Zenbook Fold (853px) */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .testimonials-section .row.g-4>div:nth-child(1),
    .testimonials-section .row.g-4>div:nth-child(2),
    .testimonials-section .row.g-4>div:nth-child(3) {
        display: none !important;
    }
}


/* ══════════════════════════════════════
   SURFACE DUO — ABSOLUTE FINAL OVERRIDE
   PASTE AT VERY VERY BOTTOM
══════════════════════════════════════ */

@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    /* Mobile elements force hide */
    .sfc-bottom .sfc-app-row.d-lg-none {
        display: none !important;
    }

    .sfc-bottom>.sfc-app-label {
        display: none !important;
    }

    .sfc-bottom>.sfc-app-desc {
        display: none !important;
    }

    span.sfc-app-label.d-lg-none {
        display: none !important;
    }

    span.sfc-app-desc.d-lg-none {
        display: none !important;
    }

    /* Desktop app row force show */
    .sfc-bottom .sfc-app-row.d-none {
        display: flex !important;
    }

    /* Book button force show */
    .sfc-top .sfc-book-btn {
        display: inline-flex !important;
    }

    /* Card */
    .sfc-card {
        padding: 0 20px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* TOP ROW */
    .sfc-top {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 120px !important;
        padding: 20px 0 16px !important;
        gap: 6px !important;
    }

    .sfc-logo-col {
        width: 60px !important;
        flex-shrink: 0 !important;
        padding-bottom: 0 !important;
    }

    .sfc-logo-img {
        width: 52px !important;
        height: 52px !important;
    }

    .sfc-nav {
        flex-direction: row !important;
        gap: 14px !important;
        flex: 1 !important;
        align-items: flex-start !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
    }

    .sfc-nav-col {
        flex-direction: column !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .sfc-head {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #111 !important;
        padding: 0 !important;
        border-bottom: none !important;
        display: block !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    .sfc-sub {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #111 !important;
        padding: 0 !important;
        border-bottom: none !important;
        display: block !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    .sfc-book-btn {
        width: auto !important;
        margin: 0 0 0 auto !important;
        font-size: 10px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        justify-content: center !important;
        display: inline-flex !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        max-width: 130px !important;
    }

    /* DIVIDER */
    .sfc-divider {
        width: 81% !important;
        margin-left: 60px !important;
        border-top: 1.5px solid #8d8d8d !important;
    }

    /* BOTTOM ROW */
    .sfc-bottom {
        flex-direction: row !important;
        align-items: center !important;
        min-height: 80px !important;
        padding: 14px 0 16px !important;
        gap: 0 !important;
    }

    .sfc-logo-spacer {
        width: 60px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .sfc-app-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1 !important;
    }

    .sfc-qr {
        width: 46px !important;
        height: 46px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }

    .sfc-app-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .sfc-app-label {
        font-size: 10px !important;
        color: #666 !important;
        text-align: left !important;
    }

    .sfc-app-desc {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin-bottom: 0 !important;
    }

    .sfc-store-badges {
        display: none !important;
    }

    .sfc-policy {
        flex-direction: row !important;
        gap: 10px !important;
        margin-left: auto !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }

    .sfc-policy a {
        font-size: 10px !important;
        color: #111 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }

    /* BELOW BAR */
    .sfc-below {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 12px 20px 14px !important;
    }

    .sfc-copy {
        font-size: 10px !important;
        order: unset !important;
    }

    .sfc-socials {
        order: unset !important;
    }

    .sfc-badge {
        order: unset !important;
    }

    .sfc-badge span {
        font-size: 10px !important;
    }


    .sfc-top .sfc-book-btn {
        display: none !important;
    }
}

/* ── Nest Hub (1024x600) + iPad Pro (1024px) navbar fix ── */
@media only screen and (min-width: 1024px) and (max-width: 1024px) {

    .kalon-desktop-nav ul {
        gap: 0 !important;
    }

    .kalon-desktop-nav ul li a {
        font-size: 13px !important;
        padding: 6px 7px !important;
    }

    .kalon-desktop-btns {
        gap: 6px !important;
        margin-left: 8px !important;
    }

    .tt-signin {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .book-btn,
    .tt-book {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .kalon-logo img,
    .logo-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .kalon-navbar-inner {
        padding: 0 12px !important;
    }
}

/* ══════════════════════════════════════
   BEFORE/AFTER — Device specific fixes
══════════════════════════════════════ */

/* ── iPad Air (820px) + Surface Pro 7 (912px)
   2 per row, only 4 show (hide 5th & 6th) ── */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px),
only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .before-after-card:nth-child(5),
    .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 250px !important;
    }
}

/* ── Surface Duo (540px)
   1 per row, only 4 show (hide 5th & 6th) ── */
@media only screen and (min-device-width: 540px) and (max-device-width: 540px) {

    .before-after-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .before-after-card:nth-child(4),
    .before-after-card:nth-child(5),
    .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 220px !important;
    }
}

/* ── Galaxy Z Fold 5 folded (344px) + Samsung Galaxy A51/A71
   1 per row, only 3 show ── */
@media only screen and (max-device-width: 412px) {

    .before-after-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .before-after-card:nth-child(4),
    .before-after-card:nth-child(5),
    .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 200px !important;
    }
}

/* ── Asus Zenbook Fold (853px)
   2 per row, only 4 show ── */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .before-after-card:nth-child(5),
    .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 245px !important;
    }
}



@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px),
only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {
    .btn-primary-custom {
        font-size: 20px !important;
    }
}

/* ══════════════════════════════════════
   TREATMENTS — 6 cards only
   Asus Zenbook Fold (853px) + Surface Pro 7 (912px)
══════════════════════════════════════ */

/* Asus Zenbook Fold (853px) */
@media only screen and (min-width: 853px) and (max-width: 853px) {

    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }
}

/* Surface Pro 7 (912px) */
@media only screen and (min-device-width: 912px) and (max-device-width: 912px) and (-webkit-min-device-pixel-ratio: 2) {

    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }
}

/* ══════════════════════════════════════
   NEST HUB (1024x600) + NEST HUB MAX (1280x800)
   Navbar + Hero fix
══════════════════════════════════════ */

/* ── Nest Hub (1024x600) ── */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 600px) {

    /* Nav links smaller */
    .kalon-desktop-nav ul li a {
        font-size: 12px !important;
        padding: 6px 7px !important;
    }

    .kalon-desktop-btns {
        gap: 6px !important;
        margin-left: 8px !important;
    }

    .tt-signin {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .book-btn,
    .tt-book,
    .btn-primary-custom {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Hero buttons fix */
    .mobile-hero-btns {
        display: none !important;
    }

    .hero-section .col-lg-8 .d-flex,
    .hero-section .btn-primary-custom,
    .hero-section a.btn-primary-custom {
        display: inline-flex !important;
    }

    /* Hero buttons row */
    .hero-section .d-flex.gap-3,
    .hero-section .d-flex.gap-2 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        align-items: center !important;
    }
}

/* ── Nest Hub Max (1280x800) ── */
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (max-height: 800px) {

    /* Hero buttons fix */
    .mobile-hero-btns {
        display: none !important;
    }

    .hero-section .d-flex.gap-3,
    .hero-section .d-flex.gap-2 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .hero-section .btn-primary-custom,
    .hero-section a.btn-primary-custom {
        display: inline-flex !important;
        font-size: 21px !important;
        padding: 10px 24px !important;
    }
}

/* IPAD MINI */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    .treatments-section .row.gy-4>div:nth-child(7),
    .treatments-section .row.gy-4>div:nth-child(8),
    .treatments-section .row.gy-4>div:nth-child(9) {
        display: none !important;
    }

    .mt--94px {
        margin-top: 0 !important;
    }

    .before-after-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .before-after-card:nth-child(5),
    .before-after-card:nth-child(6) {
        display: none !important;
    }

    .before-after-slider {
        height: 245px !important;
    }
}