@charset "utf-8";

/* CSS Document */


/*---For Laptop---*/

@media (max-width: 1800px) {}

@media (max-width: 1600px) {   
  

}
/*---For Laptop---*/

@media (min-width: 1200px) and (max-width: 1460px) {
  
    
}
@media (max-width: 1400px){   
    .navbar-header .main-box .btn-page{
        padding: 10px 10px;
    }
    .navbar-header .main-box .btn-page i{
        width: 20px;
        height: 20px;    
        font-size: 12px;    
    }
   
}

/*---For Horizental iPad---*/

@media (min-width: 992px) and (max-width: 1199px) {
  
   
    
}

@media(max-width: 1199px) {
    .hide-sm,
    .main-header .main-box,
    .sticky-header {
        display: none!important;
    }
    .main-header{
        padding: 0;
    }
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        /* padding: 15px 95px; */
    }
    .nav-outer .mobile-nav-toggler {
        font-size: 25px;
        display: block;
    }
    #nav-mobile .mm-panels .sub-menu-head{
        font-size: 28px;
        color: #F18835;
        font-weight: 600;
        line-height: 35px;
        margin-bottom: 15px;
    }
    header .bottom-header .nav-contact-action .nav-box ul{
        margin: auto;
    }

}


/*---For Vertical iPad---*/

@media (min-width: 768px) and (max-width: 991px) {
   
    .main-header .top-header .contact-info{
        gap: 8px;
    }.sh.c .h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 22px;
    text-align: center;
}
}

@media (min-width: 768px){   
   
}    

@media (max-width: 1023px){
     
}
/*---For Mobile---*/
@media (max-width: 992px){
    .mobile-bar {
    display: flex !important;}
    .header-wrapper{
        position: relative;
    }
    .header-wrapper .header-main{
        display: none;
    }
    .header-wrapper .mobile-header{
        display: flex;
        border-bottom: 1px solid #ddd;
    }
    .header-wrapper .mobile-header .logo img{
        height: 60px;
    }
    .mm-navbar__title span{
        color: #fff;
    }
    .mobile-header {
        padding: 15px 15px ;
    }
    .mobile-header.fixed-header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;        z-index: 111;
    }
    .banner-area .banner-section .slide{
        padding: 50px 0;
        height: 400px;
    }
   
}
@media (max-width: 991px){
    
}
@media (max-width: 425px){    
   
   
}
@media (max-width: 767px) {
    .testi-layout
    {
       grid-template-columns: 1fr !important;
    }
 .why-inner
 {
         width: 100%;
 }    .why-layout {
        margin-top: 34px;
        gap: 28px;
        width: 100%;
        margin:auto;
    }    #services.svc-v2 .svc-grid {
       grid-template-columns: 1fr 1fr !important;
    }    #services.svc-v2 .dt-tab.svc-tab {
   width: max-content !IMPORTANT;
        border-radius: 10px !important;
    }
    #services.svc-v2 .dt-panel>.dt-sidebar, #services.svc-v2 .dt-panel>.dt-content-panel 
    {  position: relative !important;
        top: 0 !important;}
 .logo img
 {
    width: 220px;
 }
    #mainNav
    {
        display:none;
    }.nav-outer .mobile-nav-toggler {
        font-size: 25px;
        display: flex;
        align-items: center;
    }
    .hindi-wrap .hindi-img-col 
    {
            position: relative;
    top: 0;
    }
        .testi-left img 
        {
                    height: 360px;
        }.sh.c .h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 22px;
    text-align: center;
}
    .ebar,
    #services.svc-v2::before,
    .nav-actions .nav-cta,
    .nav-actions .nav-cta .nav-wa,
    .doc-book-hover
    {
        display:none;
    }    .head-logo img {
               width: 204px !important;
        height: 100%;
    }
    .source-org.vcard .f-content-nav{
        padding: 40px 0 30px;
    }
    .source-org.vcard .logo img{
        max-width: 250px;
        margin: auto;
        display: block;
    }
    .source-org.vcard .f-social{
        justify-content: center !important;
        padding: 15px 0;
    }
    .source-org.vcard .f-content-nav .content-info, .source-org.vcard .f-content-nav .explore-links{
        margin-bottom: 15px;
    }
    .source-org.vcard .f-content-nav .content-box h5{
        color:  var(--primary-color);
    }
    .source-org.vcard .footer-bottom p{
        padding: 10px;
        font-size: 12px;
        line-height: 1.5;
    }
    .tests .tests-nav-cards .nav-pills .nav-link{
        width: max-content;
    }
    .tests .tests-nav-cards .testTab-bar{
        overflow: auto;
        padding-bottom: 10px;
    }
    .tests .tests-nav-cards .testTab-bar .nav{
        display: inline-flex;
        flex-wrap: nowrap;
        flex-direction: row !important;
        overflow: auto;    
    }
}
@media (max-width: 575px) {
    .tests, .callAction-quality, .healthPackages, .about-us, .getIntouch, .whyChoose, .testimonial, .contactUs, .faqSection, .blogs, .missionVision, .doctorIntro, .what-is{
        padding: 40px 0;
    }
    .banner-area .banner-section h1{
        font-size: 26px;
        line-height: 1.5;
    }
    .content-box h5, .content-box h4{
        font-size: 16px;
    }
    .banner-area .banner-section .slide {
        padding: 50px 0;
        height: calc(100vh - 300px);
        background-position: left !important;
        display: flex;
        align-items: center;
    }
    .content-box h2, .content-box h3{
        font-size: 26px;
        line-height: 1.4;
    } 
    .content-box h6 span {    
        display:none;
    }
    .modal.modalhealth .modal-card-health h4{
        font-size: 16px;
    }
    .modal.modalhealth .modal-card-health h6{
        font-size: 14px;
    }
    .modal.modalhealth .modal-card-health p{
        margin-bottom: 0;
        font-size: 14px;
    }
    .modal.modalhealth .modal-header .btn-close{
        right: 10px;
        z-index:99;
    }
    .contactForm .field-items textarea.form-control {
        height: 50px;
    }
    .contactForm .field-items .input-box.before-disable p .form-check-input span{
        font-size: 14px;
    }
    .contactForm .field-items label{
        font-size: 14px;
    }
    .contactForm .field-items input.form-control{
        height: 40px;
    }
    .modal.modalhealth .modal-card-health{
        height: auto;
        padding: 10px;
        margin-bottom: 15px;
    }
    .testimonial .testimonial-items.owl-carousel .owl-nav{
      display: none;
    }
    .testimonial .testimonial-items.owl-carousel .owl-dots{
        position: relative;
        bottom: 0;
        border: 0;
    }
    .about-us .about-image{        
        margin-bottom: 40px;
    }
    .about-us .about-image .about-experience h6 span{
        font-size: 30px;
    }
    .callAction-quality .quality-card h6{
        font-size: 16px;
    }
    .callAction-quality .quality-card p{
        font-size: 14px;
    }
    .callAction-quality .quality-card .icon {
        width: 60px;
    }
    .getIntouch .getintouch-items ul{
        gap: 20px;
    }
    .getIntouch .getintouch-items ul li:last-child{
        border-radius: 20px;
        width: 100%;
    }
    .getIntouch .getintouch-items ul li a h6 span{
        margin-top: 5px;
    }
    .getIntouch .getintouch-items ul li a i{
        font-size: 22px;
        height: 40px;
        width: 40px;
    }
    .whyChoose .whychoose-image .row .col-6 img{
        height: auto !important;
    }
    .tests .tests-nav-cards .tests-card{
        height: auto;
        min-height: auto;
        max-height: max-content;
        overflow: inherit;
        padding-right: 0;
        border-radius: 0;
    }
    .contactUs .contact-info-card .icon{
        width: 50px;
        height: 50px;
        margin-bottom: 14px !important;
    }
    .whyChoose .whychoose-items .whychoose-card{
        box-shadow: 5px 8px 4px 0 rgba(0, 0, 0, 0.1);
    }
    .healthPackages .healthPackges-items.owl-carousel .owl-nav{
        display: none;
    }
    .healthPackages .healthPackges-items.owl-carousel .owl-dots{
        bottom:-10px;
        position: relative;
        border: 0;
    }
    .healthPackages .healthPackges-items .owl-stage-outer{
        padding: 0;
    }
    .missionVision .missionVision-items .misvis-card{
        text-align: start;
    }
    .missionVision .missionVision-items .misvis-card .icon{
        margin-left: 0 !important;
    }
    .missionVision .missionVision-items .misvis-card .content-box{
        text-align: start;
    }
    .missionVision .missionVision-items .missvis-center-image{
        overflow: hidden;
    }
    .doctorIntro .content-box{
        text-align: start !important;
    }
    .doctorIntro .intro-items .fullcard .social-profile ul{
        justify-content: start !important;
    }
    .fullcard-2.fullcard .content-box h6,
    .fullcard-1.fullcard .content-box h6{
        justify-content: start !important;
        flex-direction: row-reverse;
    }
    .doctorIntro .intro-items .fullcard .image img{
        margin-bottom: 15px;
    }
    .header-wrapper .mobile-header{
        padding: 10px 15px;
    }
    .header-wrapper .mobile-header .logo img {
        height: 50px;
    }
    .doctorIntro .content-box h3{
        margin-bottom: 0;
    }
    .page-banner{
        padding: 50px 0;
    }
    .what-is h3{
        font-size: 26px;
        line-height: 1.4;
    }
    .what-is .col-lg-7 p{
        padding-left: 15px;
    }
    .content-section{
        padding: 40px 0;
    }
    .page-template-home-collection-services .callAction-quality .quality-card .icon{
        margin-bottom: 10px;
    }
    .about-us .about-image .about-experience h6::after{
        top: -24px;
        width: 200px;
        height: 200px;
    }
    .about-us .about-image .about-experience h6{
        width: 200px;
        font-size: 14px;
        padding: 0 30px;
    }
    .page-banner .section-heading h1{
        font-size: 28px;
    }
    .contactInfo-section{
        padding-top: 40px;
    }
    .page-banner .section-heading p{
        margin-bottom: 0;
    }
    .modal.modalhealth .modal-dialog{
        height: calc(100vh - 100px);
        min-height: calc(100vh - 100px);
    }
    .faqSection .accordion-body{
        padding-left: 10px;
    }
    .faqSection .accordion{
        padding: 10px;
    }
    .m-footer{
        display: flex;
    }
    .banner-area.aboutbanner .banner-section .slide{
        height:auto;
        padding:50px 0 50px
    }
    .about-action .image-doc{
        margin: auto;
        margin-top: 15px;
    }
}
@media (max-width: 480px) {   
    .blogs.home-blog .blogs-items .blogs-card .content h6{
        font-size: 14px;
    }
    .blogs.home-blog .blogs-items .blogs-card .content .blogs-about span:first-child{
        display: none;
    }
    .blogs.home-blog .blogs-items .blogs-card .content .blogs-about span{
        font-size: 10px;
    }
    .testimonial .content-box{
        margin-bottom: 15px;
    }
    .page-btn .btn{
        padding: 6px 18px;
    }
    
}


@media (max-width: 414px) {
 
}

@media (max-width: 411px) {
 
}

@media (max-width: 375px) {
    
}

@media (max-width: 360px) {}

@media (max-width: 320px) {}


/* =====================================================================
   NOVANTA HOSPITALS — RESPONSIVE / MOBILE STYLESHEET
   ---------------------------------------------------------------------
   Load this AFTER your main stylesheet so it wins the cascade.
   Breakpoints: 1280 · 1100 · 992 · 820 · 680 · 520 · 400
   ===================================================================== */


/* =====================================================================
   0. GLOBAL FIXES  (apply at every width)
   ===================================================================== */


img, iframe, video { max-width: 100%; }

/* Stop grid/flex children from forcing horizontal overflow */
.about-wrap > *, .why-layout > *, .hindi-wrap > *, .testi-layout > *,
.contact-grid > *, .faq-layout > *, .vid-inner > *, .appt-content > *,
.dept-grid > *, .doc-track > *, .blog-grid > *, .footer-grid > *,
.hero-ct > *, .dt-panel > * { min-width: 0; }

/* FAQ answers were clipped at 140px — long answers were cut off */
.faq-item.open .faq-ans { max-height: 900px; }

/* .fsoc used display:contents, which removed the circle entirely */
.footer-socials .fsoc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    transition: .3s;
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--t1);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .sr, .sr-l, .sr-r { opacity: 1; transform: none; }
}


/* =====================================================================
   1. ≤ 1280px — large laptops
   ===================================================================== */
@media (max-width: 1280px) {
    .W { max-width: 100%; padding: 0 28px; }
    .hero .W { padding: 52px 0 20px 28px; }

    .sh.c .sub { max-width: 74%; }

    .dept-grid { grid-template-columns: repeat(3, 1fr); }
    .doc-track { grid-template-columns: repeat(3, 1fr); }

    .about-wrap { gap: 28px; }
    .why-layout { gap: 44px; }
    .hindi-wrap { gap: 48px; }
    .vid-inner  { gap: 48px; padding: 80px 0; }
    .faq-layout { gap: 44px; }
}


/* =====================================================================
   2. ≤ 1100px — small laptops / large tablets
   ===================================================================== */
@media (max-width: 1100px) {
    .hero h1 { font-size: 34px; }

    /* About — image block drops to a two-up row underneath the copy */
    .about-wrap { grid-template-columns: 1fr 1fr; }
    .about-right-col {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        align-items: center;
    }
    .about-right-col .img-sec { height: 210px; }
    .about-mid-col .img-main { height: 400px; }

    .why-layout { grid-template-columns: 1fr; gap: 36px; }
    .why-visual .img-main { height: 420px; }
    .why-stats-bar { max-width: 420px; }

    .faq-layout { grid-template-columns: 1fr; gap: 34px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }

    /* Services rail: unpin the sticky columns so the panel can stack */
    #services.svc-v2 .dt-panel > .dt-sidebar,
    #services.svc-v2 .dt-panel > .dt-content-panel {
        position: static;
        top: auto;
    }
    #services.svc-v2 .dt-nav { scrollbar-width: none; }
    #services.svc-v2 .dt-nav::-webkit-scrollbar { display: none; }
}


/* =====================================================================
   3. ≤ 992px — tablets.  Header switches to the slide-in menu here.
   ===================================================================== */
@media (max-width: 992px) {
    .sec { padding: 64px 0; }
    .W   { padding: 0 22px; }
    .sh.c .sub { max-width: 92%; }

    /* ── HEADER ─────────────────────────────────────────────── */
    .ebar { padding: 7px 0; }
    .ebar-i { justify-content: center; }
    .ebar-grp { gap: 16px; flex-wrap: wrap; justify-content: center; }
    .ei { font-size: 11.5px; }

    .nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-i { height: 64px; gap: 12px; }

    /* Logo was absolutely centred — put it back in the flow */
    .head-logo img {
        position: static;
        left: auto; right: auto; top: auto;
        margin: 0;
        width: 156px;
        padding: 4px 8px;
        box-shadow: none;
        border-radius: 6px;
    }

    .hbg { display: flex; order: 3; }
    .hbg span { transition: transform .3s var(--ease-out), opacity .2s; }
    .hbg.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .hbg.active span:nth-child(2) { opacity: 0; }
    .hbg.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(330px, 86vw);
        height: 100vh;
        height: 100dvh;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 84px 22px 32px;
        box-shadow: -14px 0 44px rgba(7, 26, 62, .18);
        transition: right .34s var(--ease-out);
        z-index: 1200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-menu.open { right: 0; }
    .nav-menu a {
        width: 100%;
        padding: 15px 4px;
        font-size: 16px;
        color: var(--n2);
        border-bottom: 1px solid var(--g2);
        border-radius: 0;
    }
    .nav-menu a::after { display: none; }
    .nav-menu a:active { color: var(--red); }

    /* Close button injected by the JS helper */
    .nav-close {
        position: absolute;
        top: 20px; right: 20px;
        width: 38px; height: 38px;
        border-radius: 50%;
        background: var(--g1);
        color: var(--n2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border: none;
    }

    /* Dim the page behind the open menu */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(7, 26, 62, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
        z-index: 1100;
    }
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }

    .nav-actions { gap: 8px; }
    .nav-wa, .nav-cta { padding: 9px 14px; font-size: 12.5px; }

    /* ── LAYOUT STACKS ──────────────────────────────────────── */
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .testi-layout { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
    .hindi-wrap   { grid-template-columns: 1fr; gap: 34px; }
    .vid-inner    { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
    .blog-grid    { grid-template-columns: repeat(2, 1fr); }
    .appt-content { grid-template-columns: 1fr; gap: 22px; }
    .appt-form-wrap { max-width: 100%; }

    /* "Quality healthcare" band — doctor cut-out was absolutely placed */
    .about-medcare { padding: 56px 0 0; }
    .about-box { min-height: auto; border-radius: 18px; }
    .doctor-image {
        position: relative;
        left: auto; bottom: auto;
        transform: none;
        width: 100%;
        margin-top: 28px;
    }
}


/* =====================================================================
   4. ≤ 820px — phones (landscape) & small tablets.
      This is where the page becomes a proper single-column mobile app.
   ===================================================================== */
@media (max-width: 820px) {

    .sec { padding: 56px 0; }
    .W   { padding: 0 18px; }
    .sh.c .sub { max-width: 100%; }

    .h2  { font-size: 25px; line-height: 1.24; }
    .sub { font-size: 14.5px; line-height: 1.72; }
    .lbl { font-size: 11px; letter-spacing: 2.4px; }

    /* Touch targets */
    .btn { font-size: 13.5px; padding: 12px 22px; min-height: 46px; }
    .btn-lg { padding: 14px 26px; font-size: 14px; }

    /* ── HERO ───────────────────────────────────────────────── */
    .hero { margin: 0 8px; border-radius: var(--radius-lg); }
    .hero-bg, .hero-bg::after { border-radius: var(--radius-lg); }
    .hero-bg img.main { animation: none; transform: scale(1.02); object-position: 60% 25%; }
    .hero-bg::after {
        background: linear-gradient(180deg,
            rgba(7, 26, 62, .90) 0%,
            rgba(12, 36, 97, .86) 45%,
            rgba(7, 26, 62, .78) 100%);
    }
    .hero .W, .hero .container { padding: 40px 18px 0; }
    .hero-ct { padding-top: 0; padding-bottom: 8px; gap: 24px; }

    .hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1.6px;
        padding: 6px 12px;
        margin-bottom: 16px;
    }
    .hero h1 { font-size: 30px; letter-spacing: -.4px; margin-bottom: 16px; }
    .hero-sub { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }

    .hero-btns { gap: 14px; }
    .hero-btns .btn-lg { width: 100%; justify-content: center; }
    .hero-call-inline {
        width: 100%;
        padding: 12px 14px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: var(--radius-sm);
    }
    .hero-call-ic { width: 40px; height: 40px; font-size: 15px; }

    /* Trust bar becomes a 2×2 tile grid */
    .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        width: 100%;
        margin-top: 22px;
        background: rgba(255, 255, 255, .14);
        backdrop-filter: none;
    }
    .ht-divider { display: none; }
    .ht-item {
        padding: 14px 10px;
        background: rgba(10, 30, 74, .82);
        border-right: none;
    }
    .ht-item strong { font-size: 21px; }
    .ht-item span { font-size: 10.5px; }

    /* ── TICKER ─────────────────────────────────────────────── */
    .ticker-track { gap: 10px; padding: 12px 0; animation-duration: 22s; }
    .ticker-card { width: 210px; height: 132px; }
    .ticker-card-cap { font-size: 11px; padding: 8px 11px; }
    .ticker::before, .ticker::after { width: 46px; }

    /* ── ABOUT ──────────────────────────────────────────────── */
    .about-wrap { grid-template-columns: 1fr; gap: 26px; }
    .about-mid-col .img-main {
        height: 300px;
        border-radius: var(--radius) var(--radius) 48px var(--radius);
    }
    .about-stat-pill { animation: none; padding: 12px 22px; bottom: 16px; }
    .asp strong { font-size: 25px; }
    .about-right-col { grid-template-columns: 1fr; gap: 20px; }
    .about-right-col .img-sec { height: 190px; }
    .about-feats { margin: 18px 0 22px; gap: 9px; }
    .af-item { font-size: 13.5px; padding: 10px 13px; }

    /* ── APPOINTMENT BAND ───────────────────────────────────── */
    #appointment { padding: 36px 0; }
    .appt-form-wrap { padding: 26px 20px; border-radius: var(--radius); }
    .appt-form-wrap h3 { font-size: 21px; }
    .acall-wrap { padding: 24px 20px; border-radius: var(--radius); }
    .acall-wrap .number { font-size: 23px; }
    .acall-wrap .desc { font-size: 13.5px; }
    .acall-wrap .desc br { display: none; }

    /* ── DEPARTMENTS ────────────────────────────────────────── */
    .dept-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
    .dept-card-img { height: 140px; }
    .dept-card-body { padding: 16px 14px; }
    .dept-card-body h4 { font-size: 15px; line-height: 1.32; }
    .dept-card-body p { font-size: 13px; line-height: 1.58; margin-bottom: 10px; }
    .dept-link { font-size: 13px; }

    /* ── WHY CHOOSE US ──────────────────────────────────────── */
    .why-layout { margin-top: 34px; gap: 28px; }
    .wf-item { padding: 18px 16px; gap: 13px; }
    .wf-icon { width: 42px; height: 42px; font-size: 17px; }
    .wf-text h4 { font-size: 15px; }
    .wf-text p { font-size: 13.5px; }
    .why-visual .img-main { height: 320px; }
    .why-stats-bar { left: 14px; right: 14px; bottom: 14px; max-width: none; }

    /* ── VIDEO ──────────────────────────────────────────────── */
    .vid-inner { padding: 52px 0; }
    .vid-player img { height: 230px; }
    .play-btn { width: 58px; height: 58px; font-size: 21px; }
    .vid-checklist { margin: 20px 0 26px; }
    .vc { align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
    .vc i { margin-top: 4px; flex-shrink: 0; }
    .vid-txt .btn { width: 100%; justify-content: center; }

    /* ── GALLERY ────────────────────────────────────────────── */
    .gal-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 10px;
        margin-top: 32px;
    }
    .gal-item { height: 165px; }
    .gal-item:nth-child(1) { grid-column: span 2; grid-row: auto; height: 220px; }
    .gal-item:nth-child(4) { grid-column: span 2; height: 190px; }

    /* ── DOCTORS: swipeable card rail ───────────────────────── */
    .doc-filter {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 24px 0 20px;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .doc-filter::-webkit-scrollbar { display: none; }
    .df { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 9px 16px; }

    .doc-track {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 18px;
        padding: 4px 18px 16px;
        margin: 0 -8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .doc-track::-webkit-scrollbar { display: none; }
    .doc-card { flex: 0 0 74%; max-width: 290px; scroll-snap-align: start; }
    .doc-img-wrap { height: 220px; }
    .doc-arr { display: none; }

    /* ── HINDI SECTION ──────────────────────────────────────── */
    .hindi-img-main {
        height: 320px;
        border-radius: var(--radius) var(--radius) 52px var(--radius);
    }
    .hindi-badge-card {
        left: 16px;
        bottom: 16px;
        padding: 14px 18px;
        min-width: 0;
        animation: none;
    }
    .hindi-badge-card strong { font-size: 22px; }
    .hindi-h { font-size: 24px; line-height: 1.32; }
    .hindi-sub { font-size: 14.5px; margin-bottom: 22px; }
    .hindi-pts { gap: 14px; margin-bottom: 26px; }
    .hpt-ic { width: 42px; height: 42px; font-size: 16px; }
    .hindi-stats { gap: 8px; margin-bottom: 24px; }
    .hstat { padding: 13px 6px; }
    .hstat strong { font-size: 22px; }
    .hstat span { font-size: 10.5px; }
    .hindi-sec .btn-pill {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }

    /* ── TESTIMONIALS ───────────────────────────────────────── */
    
    .testi-card { padding: 22px 20px; }
    .tc-body { font-size: 14px; line-height: 1.72; }
    .tc-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
    .testi-controls { justify-content: center; margin-top: 14px; }
    .tc-nav { width: 44px; height: 44px; }

    /* ── INSURANCE ──────────────────────────────────────────── */
    .ins-sec { padding: 48px 0; }
    .ins-ticker { margin-top: 28px; }
    .ins-track img { height: 34px; }
    .ins-ticker::before, .ins-ticker::after { width: 46px; }

    /* ── BLOG ───────────────────────────────────────────────── */
    .blog-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
    .blog-img { height: 200px; }
    .blog-body { padding: 18px 18px; }
    .blog-meta { justify-content: flex-start; margin-left: 0; }

    /* ── EMERGENCY CTA ──────────────────────────────────────── */
    .ecta-sec { padding: 48px 0; }
    .ecta-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
    .ecta-l p { font-size: 14.5px; }
    .ecta-r { align-items: flex-start; width: 100%; }
    .ecta-hotline { font-size: 26px; line-height: 1.24; }
    .ecta-btns { width: 100%; gap: 10px; }
    .ecta-btns .btn { flex: 1 1 100%; justify-content: center; }

    /* ── FAQ ────────────────────────────────────────────────── */
    .faq-layout { margin-top: 32px; }
    .faq-q { font-size: 14px; padding: 15px 16px; }
    .faq-ans p { padding: 0 16px 16px; font-size: 13.5px; }
    .faq-stat { padding: 13px 15px; }
    .faq-l .btn { width: 100%; justify-content: center; }

    /* ── CONTACT ────────────────────────────────────────────── */
    .contact-grid { margin-top: 32px; }
    .contact-form-card { padding: 26px 20px; border-radius: var(--radius); }
    .contact-form-card h3 { font-size: 21px; }
    .cf-row { grid-template-columns: 1fr; gap: 0; }
    .cf-field input, .cf-field select, .cf-field textarea { font-size: 16px; } /* stops iOS zoom */
    .cinfo { padding: 16px 18px; }
    .map-frame { height: 230px; }

    /* ── FOOTER ─────────────────────────────────────────────── */
    .footer-top-bar { padding: 24px 0; }
    .footer-top-inner { flex-direction: column; text-align: center; }
    .footer-top-inner h3 { font-size: 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 0; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact-card { grid-column: 1 / -1; }
    .footer-brand img { width: 200px; }
    .footer h5 { margin-bottom: 16px; }
    .footer-links li { margin-bottom: 10px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-btm-links { flex-wrap: wrap; justify-content: center; gap: 14px; }

    /* ── SERVICES PANEL ─────────────────────────────────────── */
    #services.svc-v2 .svc-head h3 { font-size: 20px; }
    #services.svc-v2 .svc-head p { font-size: 13.8px; }
    #services.svc-v2 .svc-cta-btn { min-height: 46px; }
}


/* =====================================================================
   5. ≤ 680px — standard phones
   ===================================================================== */
@media (max-width: 680px) {
    .sec { padding: 48px 10px; }
    .W   { padding: 0 16px; }

    .h2 { font-size: 23px; }
    .lbl { margin-bottom: 10px; }

    .hero h1 { font-size: 27px; }
    .hero .W, .hero .container { padding: 34px 16px 0; }

    .about-medcare { padding: 48px 0 0; }

    .gal-item { height: 145px; }
    .gal-item:nth-child(1) { height: 200px; }
    .gal-item:nth-child(4) { height: 170px; }

    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-brand p { max-width: 100%; }
    .footer-stats { gap: 22px; flex-wrap: wrap; }

    .dept-grid { gap: 12px; }
    .ticker-card { width: 186px; height: 118px; }
}


/* =====================================================================
   6. ≤ 520px — small phones
   ===================================================================== */
@media (max-width: 520px) {
    .hero { margin: 0 6px; }
    .hero h1 { font-size: 25px; }
    .hero-sub { font-size: 14.5px; }

    .nav-i { height: 60px; }
    .head-logo img { width: 134px; }
    .nav-wa span, .nav-cta span { display: none; }
    .nav-wa, .nav-cta { padding: 10px 12px; }
    .nav-wa i, .nav-cta i { font-size: 15px; }

    .ebar-grp { gap: 12px; }
    .ei { font-size: 11px; }

    .doc-card { flex: 0 0 82%; }
    .doc-img-wrap { height: 210px; }

    /* Gallery to a single column */
    .gal-mosaic { grid-template-columns: 1fr; }
    .gal-mosaic > .gal-item,
    .gal-item:nth-child(1),
    .gal-item:nth-child(4) { grid-column: 1 / -1; height: 190px; }

    .hindi-stats { grid-template-columns: 1fr 1fr; }
    .hindi-stats .hstat:last-child { grid-column: 1 / -1; }

    .testi-card { padding: 20px 16px; }
    .testi-card .qq { display: none; }

    .contact-form-card { padding: 22px 16px; }
    .appt-form-wrap { padding: 22px 16px; }

    .ecta-hotline { font-size: 23px; }
    .ecta-btns .btn { font-size: 13px; }
}


/* =====================================================================
   7. ≤ 400px — very small phones
   ===================================================================== */
@media (max-width: 400px) {
    .dept-grid { grid-template-columns: 1fr; }
    .dept-card-img { height: 175px; }

    .hero-trust { grid-template-columns: 1fr 1fr; }
    .ht-item { padding: 12px 8px; }
    .ht-item strong { font-size: 19px; }

    .doc-card { flex: 0 0 88%; }
    .h2 { font-size: 21px; }
}


/* =====================================================================
   8. MOBILE ACTION BAR
      Fixed bottom bar — the "app-like" primary actions.
      Requires the markup snippet in html-patches.md.
   ===================================================================== */
.m-actionbar { display: none; }

@media (max-width: 820px) {
    body { padding-bottom: 64px; }

    .m-actionbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--g2);
        box-shadow: 0 -6px 26px rgba(7, 26, 62, .12);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 4px 10px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .2px;
        color: var(--g5);
        border-right: 1px solid var(--g2);
        transition: background .2s, color .2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mab-item:last-child { border-right: none; }
    .mab-item i { font-size: 16px; }
    .mab-item:active { background: var(--g1); }

    .mab-call { color: var(--red); }
    .mab-book { color: var(--n2); }
    .mab-wa   { color: #128C7E; }
    .mab-dir  { color: var(--t1); }

    /* Hide the bar while the nav drawer is open */
    body.nav-open .m-actionbar { opacity: 0; pointer-events: none; }
}


/* =====================================================================
   9. TOUCH DEVICES — hover lifts don't belong on a touchscreen
   ===================================================================== */
@media (hover: none) {
    .dept-card:hover, .doc-card:hover, .blog-card:hover,
    .wf-item:hover, .cinfo:hover, .hstat:hover,
    .btn:hover, .dt-cta-btn:hover, .tc-card:hover,
    #services.svc-v2 .svc-card:hover {
        transform: none;
    }
    .dept-card:hover .dept-card-img img,
    .doc-card:hover .doc-img-wrap img,
    .blog-card:hover .blog-img img,
    .ticker-card:hover img,
    .gal-item:hover img { transform: none; }

    /* The hover-only "Book appointment" chip is unreachable on touch */
    .doc-book-hover { opacity: 1; transform: translateX(-50%) translateY(0); }

    .ticker-track, .ins-track { animation-play-state: running; }
}