/* ============================================================
   RESPONSIVE SHARED — R1 Global, R3 Inner Banners, R4 Sidebar, R5 Navbar, R16-R35
   ============================================================ */

/* ============================================================
   RESPONSIVE DESIGN — MOBILE & TABLET
   ============================================================
   Breakpoints:
   • Mobile   : max-width 767px
   • Tablet   : 768px – 1024px  (max-width 1024px)
   • Sidebar  : hide on mobile (≤767px), collapse on tablet
   ============================================================ */

/* ============================================================
   R1. GLOBAL — Base padding / spacing fixes
   ============================================================ */
@media (max-width: 1024px) {
    /* Remove excessive side margins on tablets */
    .content-inner > .container,
    .dz-bnr-inr > .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .content-inner {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

@media (max-width: 991px) {
    /* Fix content being hidden under fixed header on mobile / tablet */
    .page-wraper .page-content {
        padding-top: 74px !important;
    }
    .dvk-home .page-content {
        padding-top: 0 !important;
    }
}

@media (max-width: 767px) {
    body {
        overflow-x: clip !important;
    }
    .page-wraper {
        overflow-x: clip !important;
    }
    .content-inner {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* Content area full-width padding when no sidebar */
    .content-inner.bg-light {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .content-inner.bg-light > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .section-head.style-5 .title,
    .section-head .title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
    .m-b30 { margin-bottom: 20px !important; }
    .m-b40 { margin-bottom: 28px !important; }
    .m-b50 { margin-bottom: 35px !important; }
    .m-b60 { margin-bottom: 40px !important; }
    .m-t30 { margin-top: 20px !important; }

    /* Universal Table Responsiveness on Mobile */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 480px) {
    .section-head.style-5 .title,
    .section-head .title {
        font-size: 22px !important;
    }
}

/* ============================================================
   R1.1 HERO CLINICAL INTRO & SERVICE HEADINGS RESPONSIVENESS
   Ensures headings, lead paragraphs & badges scale down cleanly
   ============================================================ */
@media (max-width: 1024px) {
    .service-card .dz-info h2.dz-title,
    .dvk-main-content h2.dz-title,
    .service-card .dz-info h2,
    .dvk-main-content h2 {
        font-size: 23px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    .service-card .dz-info p.lead,
    .dvk-main-content p.lead {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
    .service-card .dz-info p,
    .dvk-main-content p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
    .service-card .dz-info .badge {
        font-size: 11.5px !important;
        padding: 5px 12px !important;
    }
}

@media (max-width: 767px) {
    .service-card .dz-info h2.dz-title,
    .dvk-main-content h2.dz-title,
    .service-card .dz-info h2,
    .dvk-main-content h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    .service-card .dz-info p.lead,
    .dvk-main-content p.lead {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
    }
    .service-card .dz-info p,
    .dvk-main-content p {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 14px !important;
    }
    .service-card .dz-info .badge {
        font-size: 10.5px !important;
        padding: 4px 10px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        display: inline-block !important;
        max-width: 100% !important;
    }
    .service-card .dz-info {
        padding: 20px 16px !important;
    }
}

@media (max-width: 480px) {
    .service-card .dz-info h2.dz-title,
    .dvk-main-content h2.dz-title,
    .service-card .dz-info h2,
    .dvk-main-content h2 {
        font-size: 18.5px !important;
        line-height: 1.3 !important;
    }
    .service-card .dz-info p.lead,
    .dvk-main-content p.lead {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
    .service-card .dz-info p,
    .dvk-main-content p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* ============================================================
   R1.2 RADIAL STAT RING (dvk-stat-ring)
   Numbers centered inside circle, unit labels centered below
   ============================================================ */
.dvk-stat-ring__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 116px;
    gap: 8px;
    text-align: center;
}
.dvk-stat-ring__unit {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ring-color, #431A57);
    background: rgba(173, 79, 112, 0.08);
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid rgba(173, 79, 112, 0.14);
    text-align: center;
    line-height: 1.2;
}
@media (max-width: 560px) {
    .dvk-stat-ring,
    .dvk-stat-ring--reverse {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    .dvk-stat-ring__visual {
        margin: 0 auto 10px !important;
    }
}

/* ============================================================
   R1.3 CLINICAL PARAMETER & COMPARISON TABLES RESPONSIVE
   Ensure 100% width visibility on mobile without hidden columns
   ============================================================ */

@media (max-width: 767px) {
    .dvk-male-param-table,
    .dvk-lap-compare-table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }
    .dvk-male-param-table th,
    .dvk-male-param-table td,
    .dvk-lap-compare-table th,
    .dvk-lap-compare-table td {
        padding: 8px 6px !important;
        font-size: 11.5px !important;
        white-space: normal !important;
    }
    .dvk-param-badge-normal,
    .dvk-param-badge-abnormal {
        font-size: 10.5px !important;
        padding: 3px 6px !important;
        white-space: normal !important;
        display: inline-block !important;
        width: 100% !important;
        text-align: center !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    .dvk-male-param-table th,
    .dvk-male-param-table td,
    .dvk-lap-compare-table th,
    .dvk-lap-compare-table td {
        padding: 6px 4px !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }
    .dvk-param-badge-normal,
    .dvk-param-badge-abnormal {
        font-size: 9.5px !important;
        padding: 2px 4px !important;
    }
}

/* ============================================================
   R3. INNER PAGE BANNER (dz-bnr-inr — service/treatment pages)
   Banner has background image with right-side photographic area.
   On mobile: background shifts so right image area is hidden
   ============================================================ */
@media (max-width: 767px) {
    .dz-bnr-inr,
    [style*="background-image"].dz-bnr-inr,
    .dz-bnr-inr[style*="background-image"] {
        background-position: 15% center !important;
        background-size: cover !important;
        min-height: 200px !important;
        padding: 60px 0 30px !important;
    }
    .dz-bnr-inr.dz-bnr-inr-lg {
        min-height: 220px !important;
        padding: 70px 0 35px !important;
    }
    .dz-bnr-inr h1,
    .dz-bnr-inr .h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    .dz-bnr-inr-entry {
        padding-left: 0 !important;
    }
    .dz-bnr-inr.style-1 .breadcrumb,
    .breadcrumb-row .breadcrumb {
        font-size: 12px !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        display: inline-flex !important;
        flex-wrap: wrap !important;
        gap: 3px 6px !important;
        align-items: center !important;
        max-width: 100% !important;
    }
    .dz-bnr-inr.style-1 .breadcrumb li,
    .breadcrumb-row .breadcrumb li {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
    .dz-bnr-inr.style-1 .breadcrumb li:last-child,
    .dz-bnr-inr.style-1 .breadcrumb li.active,
    .breadcrumb-row .breadcrumb li:last-child,
    .breadcrumb-row .breadcrumb li.active {
        color: #F2B423 !important;
        font-weight: 700 !important;
    }
    .dz-bnr-inr.style-1 .breadcrumb li a,
    .breadcrumb-row .breadcrumb li a {
        font-size: 12px !important;
        color: #FFFFFF !important;
    }
    .dz-bnr-inr.style-1 .breadcrumb li a:hover,
    .breadcrumb-row .breadcrumb li a:hover {
        color: #F2B423 !important;
    }
    /* Inner banner: hide right col if any */
    .dz-bnr-inr .banner-media,
    .dz-bnr-inr [class*="col-"]:last-child:not(:first-child) .dz-media {
        display: none !important;
    }
    /* Inner banner: hide swiper dots / scroll down */
    .dz-bnr-inr .swiper-pagination,
    .dz-bnr-inr .pagination-align,
    .dz-bnr-inr .scroll-down {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .dz-bnr-inr h1,
    .dz-bnr-inr .h1 {
        font-size: 1.6rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dz-bnr-inr,
    .dz-bnr-inr.dz-bnr-inr-lg,
    [style*="background-image"].dz-bnr-inr,
    .dz-bnr-inr[style*="background-image"] {
        background-position: right center !important;
        background-size: cover !important;
        min-height: 320px !important;
    }
    /* Doctor/Team banner (2400x875 ratio) */
    .dz-bnr-inr[style*="doctorbanner"],
    [style*="doctorbanner"].dz-bnr-inr {
        background-position: 95% center !important;
        background-size: cover !important;
        min-height: 340px !important;
        height: 42vw !important;
        max-height: 420px !important;
    }
    .dz-bnr-inr-entry {
        max-width: 52% !important;
        z-index: 2 !important;
    }
    .dz-bnr-inr h1,
    .dz-bnr-inr .h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
}

/* ============================================================
   R4. SIDEBAR — Hide on mobile, collapse on tablet
   ============================================================ */

/* Mobile: completely hidden */
@media (max-width: 767px) {
    .dvk-sidebar-wrapper,
    #sidebar-component,
    [id="sidebar-component"] {
        display: none !important;
        visibility: hidden !important;
    }
    /* Make main content full width when sidebar is hidden */
    .dvk-main-content,
    .col-xl-9.col-lg-8.dvk-main-content,
    .col-xl-9.col-lg-8.col-md-12.dvk-main-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Tablet: sidebar collapses / becomes full-width accordion style */
@media (min-width: 768px) and (max-width: 1024px) {
    /* On tablet, sidebar goes below main content, full-width */
    .dvk-sidebar-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 2 !important;
    }
    .dvk-main-content,
    .col-xl-9.col-lg-8.dvk-main-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 1 !important;
    }
    /* Sidebar content — show as horizontal card strip */
    #sidebar-component .widget,
    #sidebar-component .dz-card {
        margin-bottom: 16px !important;
    }
}

/* ============================================================
   R5. COMPLETE RESPONSIVE NAVBAR SYSTEM (Mobile & Tablet < 992px)
   ============================================================ */

/* A. Desktop & Tablet Header (>= 768px) — Reset Drawer & Elements */
@media (min-width: 768px) {
    .dvk-drawer-top,
    .dvk-drawer-appt-wrap,
    .dvk-drawer-contact,
    .dvk-drawer-close,
    .w3menu-toggler.navicon,
    .menu-close {
        display: none !important;
    }
    .header-nav.mo-left {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
        box-shadow: none !important;
        display: flex !important;
    }
}

/* B. Mobile ONLY (< 768px) — Header Bar, Logo & Drawer */
@media (max-width: 767px) {
    /* Header Container Fixed at Top */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: transparent !important;
    }
    .site-header .main-bar {
        background: #FFFFFF !important;
        box-shadow: 0 4px 20px rgba(67, 26, 87, 0.08) !important;
        border-bottom: 1px solid rgba(67, 26, 87, 0.06) !important;
        padding: 10px 0 !important;
    }
    .site-header.box-header2 .main-bar .inner-bar,
    .site-header .main-bar .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Remove awkward pseudo-element pill that overflows on mobile */
    .site-header.box-header2 .main-bar .container .header-part-left:before {
        display: none !important;
    }
    /* Hide desktop-only elements on mobile header bar */
    .header-part-right,
    .btn-header-appointment,
    .extra-nav,
    .dvk-nav-phone-inline {
        display: none !important;
    }
    /* Logo in Header Bar */
    .site-header.box-header2 .main-bar .container .header-part-left > .logo-header {
        display: flex !important;
        align-items: center !important;
        border-right: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left > .logo-header a {
        display: flex !important;
        align-items: center !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left > .logo-header img {
        height: 42px !important;
        max-height: 42px !important;
        width: auto !important;
        max-width: 190px !important;
        object-fit: contain !important;
    }

    /* Modern Premium Hamburger Toggler */
    .w3menu-toggler.navicon {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #AD4F70 0%, #431A57 100%) !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: auto !important;
        box-shadow: 0 4px 14px rgba(67, 26, 87, 0.25) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        z-index: 100 !important;
    }
    .w3menu-toggler.navicon:active {
        transform: scale(0.95) !important;
    }
    .w3menu-toggler.navicon span {
        position: static !important;
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: #FFFFFF !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: none !important;
        left: auto !important;
        margin: 0 !important;
    }
    /* Animated Hamburger to X when open */
    .w3menu-toggler.navicon.open span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg) !important;
    }
    .w3menu-toggler.navicon.open span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    .w3menu-toggler.navicon.open span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg) !important;
    }

    /* Overlay Backdrop behind Drawer */
    .menu-close,
    .menu-close.fade-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(45, 15, 30, 0.55) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 99998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        pointer-events: none !important;
    }
    .w3menu-toggler.open ~ .menu-close,
    .header-nav.show ~ .menu-close,
    body.menu-open .menu-close {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Mobile Navigation Drawer (#W3Menu) */
    .header-nav.w3menu.mo-left,
    #W3Menu {
        position: fixed !important;
        top: 0 !important;
        left: -350px !important;
        width: 320px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        background: #FFFFFF !important;
        z-index: 99999 !important;
        box-shadow: 8px 0 35px rgba(0, 0, 0, 0.22) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-nav.w3menu.mo-left.show,
    #W3Menu.show {
        left: 0 !important;
    }

    /* Drawer Header Bar */
    .dvk-drawer-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid rgba(67, 26, 87, 0.08) !important;
        background: #FFF8FA !important;
        flex-shrink: 0 !important;
    }
    .dvk-drawer-top .logo-header img {
        height: 38px !important;
        max-height: 38px !important;
        width: auto !important;
    }
    .dvk-drawer-close {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(67, 26, 87, 0.12) !important;
        color: #431A57 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(67, 26, 87, 0.08) !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
    }
    .dvk-drawer-close:hover {
        background: #AD4F70 !important;
        color: #FFFFFF !important;
    }

    /* Mobile Appointment CTA inside Hamburger (User Explicit Request) */
    .dvk-drawer-appt-wrap {
        padding: 16px 20px 8px !important;
        flex-shrink: 0 !important;
    }
    .dvk-drawer-appt-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: 100% !important;
        padding: 13px 18px !important;
        background: linear-gradient(135deg, #AD5D4F 0%, #AD4F70 50%, #431A57 100%) !important;
        color: #FFFFFF !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        box-shadow: 0 6px 18px rgba(173, 79, 112, 0.35) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .dvk-drawer-appt-btn:hover {
        color: #FFFFFF !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(173, 79, 112, 0.45) !important;
    }
    .dvk-drawer-appt-btn i {
        font-size: 16px !important;
    }

    /* Drawer Vertical Navigation List */
    .header-nav.w3menu .nav.navbar-nav,
    #W3Menu .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 8px 20px 16px !important;
        margin: 0 !important;
        list-style: none !important;
        float: none !important;
    }
    .header-nav.w3menu .nav > li,
    #W3Menu .nav > li {
        width: 100% !important;
        border-bottom: 1px solid rgba(67, 26, 87, 0.06) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .header-nav.w3menu .nav > li > a,
    #W3Menu .nav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 13px 4px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #2D0F1E !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        transition: color 0.2s ease, padding-left 0.2s ease !important;
    }
    .header-nav.w3menu .nav > li.active > a,
    #W3Menu .nav > li.active > a {
        color: #AD4F70 !important;
        font-weight: 700 !important;
    }
    .header-nav.w3menu .nav > li > a:hover,
    #W3Menu .nav > li > a:hover {
        color: #AD4F70 !important;
        padding-left: 4px !important;
    }

    /* Sub-menu Chevron Button on Mobile */
    .header-nav.w3menu .nav > li.sub-menu-down > a i,
    #W3Menu .nav > li.sub-menu-down > a i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        background: rgba(173, 79, 112, 0.08) !important;
        color: #AD4F70 !important;
        font-size: 11px !important;
        margin: 0 !important;
        margin-left: 8px !important;
        float: none !important;
        transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease !important;
    }
    .header-nav.w3menu .nav > li.sub-menu-down.open > a i,
    #W3Menu .nav > li.sub-menu-down.open > a i {
        transform: rotate(180deg) !important;
        background: #AD4F70 !important;
        color: #FFFFFF !important;
    }

    /* Sub-menu Accordion Container */
    .header-nav.w3menu .nav > li .sub-menu,
    #W3Menu .nav > li .sub-menu {
        display: none;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        background: #FAF5F8 !important;
        padding: 10px 12px !important;
        margin: 4px 0 12px !important;
        border: 1px solid rgba(173, 79, 112, 0.12) !important;
        pointer-events: auto !important;
    }
    .header-nav.w3menu .nav > li.open > .sub-menu,
    #W3Menu .nav > li.open > .sub-menu {
        display: block !important;
    }

    /* Services Mega Menu in Mobile Drawer */
    .dvk-services-mega-menu {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
    }
    .dvk-services-mega-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .dvk-services-col {
        margin: 0 !important;
    }
    .dvk-services-mega-col-title {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #AD4F70 !important;
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
        border-bottom: 1px solid rgba(173, 79, 112, 0.15) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .dvk-services-mega-col-title i {
        color: #D4A537 !important;
        font-size: 11px !important;
    }
    .dvk-services-mega-link {
        display: flex !important;
        align-items: center !important;
        padding: 7px 8px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #4A3A43 !important;
        text-decoration: none !important;
        transition: background 0.15s ease !important;
    }
    .dvk-services-mega-link i {
        font-size: 9px !important;
        color: #AD4F70 !important;
        margin-right: 7px !important;
    }
    .dvk-services-mega-link:hover {
        background: #FFF0F5 !important;
        color: #2D0F1E !important;
    }
    .dvk-services-mega-link.active {
        background: linear-gradient(135deg, rgba(173, 79, 112, 0.12) 0%, rgba(67, 26, 87, 0.05) 100%) !important;
        color: #AD4F70 !important;
        font-weight: 700 !important;
        border-left: 3.5px solid #AD4F70 !important;
        padding-left: 12px !important;
    }
    .dvk-services-mega-link.active i {
        color: #AD4F70 !important;
        transform: translateX(2px) !important;
    }
    .dvk-services-mega-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 8px !important;
        margin-top: 4px !important;
        border-top: 1px solid rgba(67, 26, 87, 0.08) !important;
    }
    .dvk-services-mega-footer a {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #AD4F70 !important;
        text-decoration: none !important;
    }
    .dvk-services-mega-footer a.active {
        color: #AD4F70 !important;
        font-weight: 800 !important;
        background: rgba(173, 79, 112, 0.08) !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
    }

    /* Patient Guide Sub-menu Links */
    .header-nav.w3menu .nav > li .sub-menu > li,
    #W3Menu .nav > li .sub-menu > li {
        border-bottom: 1px solid rgba(67, 26, 87, 0.05) !important;
    }
    .header-nav.w3menu .nav > li .sub-menu > li:last-child,
    #W3Menu .nav > li .sub-menu > li:last-child {
        border-bottom: none !important;
    }
    .header-nav.w3menu .nav > li .sub-menu > li > a,
    #W3Menu .nav > li .sub-menu > li > a {
        display: block !important;
        padding: 8px 8px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #4A3A43 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    .header-nav.w3menu .nav > li .sub-menu > li > a:hover {
        color: #AD4F70 !important;
    }
    .header-nav.w3menu .nav > li .sub-menu > li.active > a,
    .header-nav.w3menu .nav > li .sub-menu > li > a.active,
    #W3Menu .nav > li .sub-menu > li.active > a,
    #W3Menu .nav > li .sub-menu > li > a.active {
        background: linear-gradient(135deg, rgba(173, 79, 112, 0.12) 0%, rgba(67, 26, 87, 0.05) 100%) !important;
        color: #AD4F70 !important;
        font-weight: 700 !important;
        border-left: 3.5px solid #AD4F70 !important;
        padding-left: 12px !important;
        border-radius: 6px !important;
    }
    .header-nav.w3menu .nav > li .sub-menu > li.active > a::after,
    .header-nav.w3menu .nav > li .sub-menu > li > a.active::after,
    #W3Menu .nav > li .sub-menu > li.active > a::after,
    #W3Menu .nav > li .sub-menu > li > a.active::after {
        content: '\f054' !important;
        font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
        font-weight: 900 !important;
        font-size: 10px !important;
        color: #AD4F70 !important;
        float: right !important;
        margin-top: 3px !important;
    }

    /* Drawer Contact Info CTA */
    .dvk-drawer-contact {
        padding: 14px 20px !important;
        margin-top: auto !important;
        border-top: 1px solid rgba(67, 26, 87, 0.08) !important;
        background: #FFF8FA !important;
        flex-shrink: 0 !important;
    }
    .dvk-drawer-phone-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 10px 16px !important;
        margin-bottom: 8px !important;
        background: rgba(173, 79, 112, 0.1) !important;
        color: #AD4F70 !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        border-radius: 25px !important;
        border: 1px solid rgba(173, 79, 112, 0.25) !important;
        text-decoration: none !important;
    }
    .dvk-drawer-email-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        color: #7B6871 !important;
        font-size: 12px !important;
        text-decoration: none !important;
    }

    /* Drawer Social Media Icons */
    .dz-social-icon.dvk-drawer-social {
        padding: 10px 20px 20px !important;
        background: #FFF8FA !important;
        flex-shrink: 0 !important;
    }
    .dz-social-icon.dvk-drawer-social ul {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .dz-social-icon.dvk-drawer-social ul li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    .dz-social-icon.dvk-drawer-social ul li a {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        text-decoration: none !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
        transition: transform 0.2s ease !important;
        color: #FFFFFF !important;
    }
    .dz-social-icon.dvk-drawer-social ul li a:hover {
        transform: translateY(-2px) !important;
    }
    .dvk-social-wa { background: #25D366 !important; }
    .dvk-social-fb { background: #1877F2 !important; }
    .dvk-social-ig { background: linear-gradient(135deg, #833AB4, #FD1D1D, #F56040) !important; }
    .dvk-social-yt { background: #FF0000 !important; }
}

/* C. Tablet Specific Nav Optimization (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet Sticky Header */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: transparent !important;
    }
    .site-header .main-bar {
        background: #FFFFFF !important;
        box-shadow: 0 4px 20px rgba(67, 26, 87, 0.08) !important;
        border-bottom: 1px solid rgba(67, 26, 87, 0.06) !important;
        padding: 8px 0 !important;
    }
    .site-header.box-header2 .main-bar .inner-bar,
    .site-header .main-bar .container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left {
        display: flex !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 3px 8px !important;
        position: relative !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left:before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: -6px !important;
        width: calc(100% + 12px) !important;
        height: 100% !important;
        background: #ffffff !important;
        border-radius: 40px !important;
        box-shadow: 0 6px 18px rgba(67, 26, 87, 0.08) !important;
        z-index: -1 !important;
        display: block !important;
    }

    /* Logo - Compact for tablet */
    .site-header.box-header2 .main-bar .container .header-part-left .logo-header {
        display: flex !important;
        align-items: center !important;
        margin-right: 6px !important;
        padding-right: 4px !important;
        border-right: none !important;
        width: auto !important;
        height: auto !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left .logo-header a {
        display: flex !important;
        align-items: center !important;
    }
    .site-header.box-header2 .main-bar .container .header-part-left .logo-header img {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 125px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Nav menu container & links */
    .site-header.box-header2 .header-nav.w3menu,
    .site-header.box-header2 .main-bar .container .header-part-left .header-nav.w3menu {
        display: flex !important;
        align-items: center !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav.navbar-nav,
    #W3Menu .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        float: none !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li,
    #W3Menu .nav > li {
        border: none !important;
        margin: 0 1px !important;
        padding: 0 !important;
        width: auto !important;
        display: inline-block !important;
        position: relative !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li > a,
    #W3Menu .nav > li > a {
        font-size: 12px !important;
        padding: 8px 4px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        color: #2D0F1E !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li > a span,
    #W3Menu .nav > li > a span {
        font-size: 12px !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li.sub-menu-down > a i,
    #W3Menu .nav > li.sub-menu-down > a i {
        font-size: 8px !important;
        margin-left: 2px !important;
        background: transparent !important;
        color: inherit !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* Sub-menus dropdown on tablet */
    .site-header.box-header2 .header-nav.w3menu .nav > li .sub-menu,
    #W3Menu .nav > li .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: #FFFFFF !important;
        box-shadow: 0 10px 30px rgba(67, 26, 87, 0.18) !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        min-width: 200px !important;
        border: 1px solid rgba(173, 79, 112, 0.15) !important;
        z-index: 99999 !important;
        display: none !important;
        flex-direction: column !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li:hover > .sub-menu,
    .site-header.box-header2 .header-nav.w3menu .nav > li.open > .sub-menu,
    #W3Menu .nav > li:hover > .sub-menu,
    #W3Menu .nav > li.open > .sub-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li.menu-services .sub-menu,
    #W3Menu .nav > li.menu-services .sub-menu {
        min-width: 480px !important;
        max-width: 85vw !important;
        left: -60px !important;
    }
    .site-header.box-header2 .header-nav.w3menu .nav > li.menu-services .dvk-services-mega-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    /* Helpline & Appointment Icons inside Pill (Side-by-side, no gap) */
    .site-header.box-header2 .main-bar .container .header-part-left .extra-nav {
        margin-left: 6px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .dvk-nav-phone-inline {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    .dvk-nav-phone-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #AD4F70 0%, #431A57 100%) !important;
        color: #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        box-shadow: 0 3px 10px rgba(67, 26, 87, 0.25) !important;
        margin: 0 !important;
    }
    .dvk-nav-phone-info {
        display: none !important;
    }

    /* Tablet Appointment Button (Right next to Phone inside White Pill) */
    .dvk-nav-appt-tablet {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #AD5D4F 0%, #AD4F70 50%, #431A57 100%) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        box-shadow: 0 3px 10px rgba(67, 26, 87, 0.25) !important;
        text-decoration: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .dvk-nav-appt-tablet:hover,
    .dvk-nav-appt-tablet:active {
        color: #FFFFFF !important;
        transform: scale(1.05) !important;
        box-shadow: 0 4px 14px rgba(173, 79, 112, 0.4) !important;
    }
    .dvk-nav-appt-tablet i {
        font-size: 13px !important;
        color: #FFFFFF !important;
        margin: 0 !important;
    }

    /* Outer Appointment Button - Hidden on Tablet (now integrated inside pill) */
    .site-header.box-header2 .main-bar .container .header-part-right {
        display: none !important;
    }
    .w3menu-toggler.navicon {
        display: none !important;
    }
}

/* ============================================================
   R16. FOOTER
   ============================================================ */
@media (max-width: 767px) {
    /* Footer columns stack */
    .site-footer .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 28px !important;
    }
    .footer-logo {
        text-align: center !important;
        margin-bottom: 16px !important;
    }
    .footer-logo img {
        height: 52px !important;
        max-width: 220px !important;
    }
    .dvk-footer-bottom {
        text-align: center !important;
        padding: 16px 20px !important;
    }
    .dvk-footer-bottom p {
        font-size: 12px !important;
    }
    /* Footer banner */
    .dvk-footer-banner {
        padding: 22px 16px !important;
        margin-bottom: 28px !important;
    }
    .dvk-footer-banner-title {
        font-size: 19px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }
    .dvk-footer-banner-text {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
    .dvk-footer-banner-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px 8px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    .dvk-footer-stat-item {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 2px !important;
        padding: 8px 4px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        width: 100% !important;
    }
    .dvk-footer-stat-num {
        font-size: 20px !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }
    .dvk-footer-stat-text {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
    .dvk-footer-banner-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .dvk-footer-banner-btns a {
        width: 100% !important;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .site-footer .row > [class*="col-lg-3"],
    .site-footer .row > [class*="col-md-6"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* ============================================================
   R17. GALLERY PAGE
   ============================================================ */
@media (max-width: 767px) {
    /* Gallery grid — 2 columns */
    .gallery-section .col-xl-3,
    .gallery-section .col-lg-4,
    #gallery-section [class*="col-"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
    .dz-gallery-box .dz-media img {
        height: 150px !important;
        object-fit: cover !important;
    }
}

/* ============================================================
   R18. TEAM PAGE
   ============================================================ */
@media (max-width: 767px) {
    /* Team cards stack */
    .team-section .col-xl-3,
    .team-section .col-lg-3,
    .team-section .col-md-6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
    .team-1 .dz-media img {
        height: 200px !important;
        object-fit: cover !important;
    }
}

/* ============================================================
   R19. CONTACT PAGE
   ============================================================ */
@media (max-width: 767px) {
    .contact-info-wrap {
        margin-bottom: 30px !important;
    }
    .dvk-contact-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    /* Google map iframe */
    .contact-map-wrap iframe {
        height: 280px !important;
    }
    /* Contact form */
    .contact-form .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================================
   R20. APPOINTMENT PAGE
   ============================================================ */
@media (max-width: 767px) {
    .appointment-section .form-group,
    .appointment-section .mb-3 {
        margin-bottom: 16px !important;
    }
    .appointment-section .row > [class*="col-md-6"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================================
   R21. SERVICE DETAIL PAGES (IUI, IVF, ICSI, etc.)
   ============================================================ */
@media (max-width: 767px) {
    /* Intro card — image column hide */
    .service-card .row.g-4 > .col-lg-6:last-child .dz-media,
    .service-card .row.g-4 > .col-lg-6:last-child img,
    .service-card .row.g-4 > .col-md-6:last-child .dz-media,
    .service-card .row.g-4 > .col-md-6:last-child img {
        border-radius: 12px !important;
        margin-top: 16px !important;
    }
    /* Heading sizes in service pages */
    .service-card .dz-title,
    .service-card h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    /* Feature pill grids */
    .service-card .row.g-2 > [class*="col-sm-6"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Step cards / timeline */
    .dvk-step-card,
    .dvk-process-card {
        padding: 18px 14px !important;
    }
    /* Info boxes in service pages */
    .dvk-info-box,
    .dvk-highlight-card {
        padding: 16px !important;
    }
    /* Two-col tables in service pages */
    .dvk-comparison-table td,
    .dvk-comparison-table th {
        font-size: 12px !important;
        padding: 8px 6px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .service-card .dz-title,
    .service-card h2 {
        font-size: 24px !important;
    }
}

/* ============================================================
   R22. ABOUT US PAGE
   ============================================================ */
@media (max-width: 767px) {
    /* About us page — doctor image */
    .about-page-media,
    .about-img-wrap {
        margin-bottom: 24px !important;
    }
    .about-page-media img,
    .about-img-wrap img {
        border-radius: 12px !important;
        width: 100% !important;
    }
    /* Mission/Vision/Values cards — stack */
    .icon-bx-wraper.style-2 {
        margin-bottom: 16px !important;
    }
}

/* ============================================================
   R23. FAQ PAGE (Standalone)
   ============================================================ */
@media (max-width: 767px) {
    .faq-page .dvk-faq-media-wrap {
        display: none !important;
    }
    .faq-page .accordion-button {
        font-size: 14px !important;
        padding: 14px 14px !important;
    }
}

/* ============================================================
   R24. BLOG PAGES (Grid & Details)
   ============================================================ */
@media (max-width: 767px) {
    /* Blog grid — single column */
    .blog-grid-section [class*="col-lg-4"],
    .blog-grid-section [class*="col-md-6"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Blog details — sidebar already handled in R4 */
    .dz-card.blog-single .dz-media img {
        border-radius: 12px !important;
    }
    .dz-card.blog-single .dz-info {
        padding: 20px 0 !important;
    }
    .dz-card.blog-single .dz-title {
        font-size: 1.4rem !important;
    }
}

/* ============================================================
   R25. SERVICES.HTML — Services grid page
   ============================================================ */
@media (max-width: 767px) {
    .services-page .service-grid-card {
        margin-bottom: 20px !important;
    }
    .services-page .service-grid-thumb {
        height: 180px !important;
    }
}

/* ============================================================
   R26. WHY CHOOSE US PAGE
   ============================================================ */
@media (max-width: 767px) {
    .why-choose-page .dvk-why-card {
        padding: 18px 16px !important;
    }
    .why-choose-page .dvk-why-card-title {
        font-size: 16px !important;
    }
}

/* ============================================================
   R27. FACILITIES PAGE
   ============================================================ */
@media (max-width: 767px) {
    .facilities-page [class*="col-xl-4"],
    .facilities-page [class*="col-md-6"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================================
   R28. PRIVACY POLICY / TERMS PAGE
   ============================================================ */
@media (max-width: 767px) {
    .privacy-section h2,
    .terms-section h2,
    .privacy-section h3,
    .terms-section h3 {
        font-size: 1.2rem !important;
    }
    .privacy-section p,
    .terms-section p {
        font-size: 14px !important;
    }
}

/* ============================================================
   R29. SERVICE INTRO SECTION — Right image column
   (In iui-treatment, ivf-treatment etc, row with col-lg-6 for 
    text and col-lg-6 for clinical image)
   Mobile: image shows below text, not beside it
   ============================================================ */
@media (max-width: 767px) {
    /* Two-col intro layouts */
    .service-card .row.g-4.align-items-center > .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Image in second col — show below, full width */
    .service-card .row.g-4.align-items-center > .col-lg-6:nth-child(2) {
        margin-top: 16px !important;
    }
    .service-card .row.g-4.align-items-center > .col-lg-6:nth-child(2) img {
        width: 100% !important;
        border-radius: 12px !important;
        max-height: 260px !important;
        object-fit: cover !important;
    }
}

/* ============================================================
   R30. DVKCOMPONENTS — Timeline, Process, Step Cards
   ============================================================ */
@media (max-width: 767px) {
    /* DVK timeline cards */
    .dvk-timeline-item {
        padding-left: 50px !important;
    }
    .dvk-timeline-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    /* Risk factor cards */
    .dvk-risk-card {
        padding: 16px !important;
    }
    /* Comparison table */
    .dvk-ivf-comparison-table {
        font-size: 12px !important;
    }
    .dvk-ivf-comparison-table td,
    .dvk-ivf-comparison-table th {
        padding: 8px 6px !important;
    }
    /* Factor tab buttons */
    .dvk-factor-nav-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    /* ICSI factor detail cards */
    .dvk-factor-detail-card {
        padding: 18px 16px !important;
    }
    .dvk-factor-detail-title {
        font-size: 18px !important;
    }
}

/* ============================================================
   R31. BUTTONS — Mobile sizing
   ============================================================ */
@media (max-width: 767px) {
    .btn-lg {
        padding: 12px 22px !important;
        font-size: 14px !important;
    }
    .btn-xl {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
    /* Explore outline button */
    .btn-explore-outline {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    /* Gradient button */
    .dvk-grad-btn {
        padding: 12px 20px !important;
    }
}

/* ============================================================
   R32. MISC COMPONENTS
   ============================================================ */
@media (max-width: 767px) {
    /* Floating stat badges on lab/about section */
    .dvk-floating-stat {
        padding: 10px 14px !important;
    }
    .dvk-floating-stat-val {
        font-size: 18px !important;
    }
    /* Section head badges */
    .dvk-grad-badge {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }
    /* Swiper pagination */
    .swiper-pagination {
        bottom: 8px !important;
    }
    /* Video play buttons */
    .video-btn {
        width: 54px !important;
        height: 54px !important;
        font-size: 18px !important;
    }
    /* Diagnostic centre badges — hide on mobile for clean look */
    .dvk-diag-badge {
        display: none !important;
    }
    /* Horizontal rule separators */
    .dz-separator {
        margin: 16px 0 !important;
    }
    /* About widgets (phone, address) — compact */
    .widget-icon-bx {
        padding: 12px !important;
    }
    /* Content bx style-2 (lab section cards) */
    .content-bx.style-2 {
        padding: 20px 14px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet: 2-col grid for most multi-col sections */
    .row > .col-xl-3:not(.dvk-sidebar-wrapper) {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
    .row > .col-xl-4 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
    /* Section head font sizes */
    .section-head.style-5 .title,
    .section-head .title {
        font-size: 30px !important;
    }
}

/* ============================================================
   R33. IMAGE OVERFLOW FIX
   Make all images responsive site-wide
   ============================================================ */
@media (max-width: 767px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    iframe {
        max-width: 100% !important;
    }
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================================
   R34. PRELOADER — Mobile
   ============================================================ */
@media (max-width: 767px) {
    .dz-preloader-1 .dz_svg {
        width: 160px !important;
        height: 160px !important;
    }
}

/* ============================================================
   R35. MOBILE SERVICES TABS (components/services.js)
   ============================================================ */
@media (max-width: 767px) {
    /* Services Tab Buttons (pairs of two) */
    #servicesTabNav {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
    }
    #servicesTabNav .nav-item {
        width: 100%;
        margin-bottom: 0 !important;
    }
    #servicesTabNav .nav-link {
        padding: 12px 8px !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center;
        height: 100%;
        gap: 6px !important;
    }
    #servicesTabNav .nav-link i {
        font-size: 20px !important;
        margin: 0 !important;
    }
    #servicesTabNav .nav-link span {
        font-size: 12px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
}

/* ============================================================
   DESKTOP RESPONSIVE INNER PAGE BANNERS (Auto-Scale Across Screen Sizes)
   Maintains native aspect ratio (2400x1125 => 46.875vw) so the banner image
   scales smoothly with screen width without ANY side cropping on desktop / laptops.
   ============================================================ */
@media (min-width: 992px) {
    .dz-bnr-inr,
    .dz-bnr-inr.dz-bnr-inr-lg,
    .dz-bnr-inr.dz-bnr-inr-md,
    [style*="background-image"].dz-bnr-inr,
    .dz-bnr-inr[style*="background-image"] {
        width: 100% !important;
        height: 46.875vw !important;
        min-height: 420px !important;
        max-height: 900px !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Doctor / Team banner with 2400x875 ratio (875/2400 = 36.46vw) */
    .dz-bnr-inr[style*="doctorbanner"],
    [style*="doctorbanner"].dz-bnr-inr {
        height: 36.46vw !important;
        min-height: 350px !important;
        max-height: 720px !important;
    }

    .dz-bnr-inr > .container {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    .dz-bnr-inr .dz-bnr-inr-entry {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: 62% !important;
    }

    .dz-bnr-inr h1,
    .dz-bnr-inr .h1 {
        font-size: clamp(2rem, 3.4vw, 3.8rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
    }

    .dz-bnr-inr .breadcrumb-row .breadcrumb {
        font-size: clamp(13px, 1.05vw, 15px) !important;
        margin-bottom: 0 !important;
    }
}

/* Ultra-wide screens (>1920px) safety fallback */
@media (min-width: 1921px) {
    .dz-bnr-inr:not(.blog-details-hero-bnr),
    .dz-bnr-inr.dz-bnr-inr-lg:not(.blog-details-hero-bnr),
    .dz-bnr-inr.dz-bnr-inr-md:not(.blog-details-hero-bnr),
    [style*="background-image"].dz-bnr-inr:not(.blog-details-hero-bnr),
    .dz-bnr-inr[style*="background-image"]:not(.blog-details-hero-bnr) {
        height: 900px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ============================================================
   END OF RESPONSIVE STYLES
   ============================================================ */