ul.custom_top_nav li.nav-item.top_menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0px 16px;
}
#inactivityModal.modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /*background-color: rgb(0 0 0 / 76%);*/
                background: #000000a8;
        }

        #inactivityModal .modal-content {
            background: white;
            padding: 20px;
            max-width: 500px;
            margin: 5% auto;
            border-radius: 10px;
            position: relative;
            border: 0px;
            box-shadow: 0px 14px 14.8px 0px #00000012;
        }

        #inactivityModal .close-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 24px;
    cursor: pointer;
    /* background: #000; */
    padding: 4px 13px;
    /* text-align: center; */
    /* color: #fff; */
    font-weight: 600;
    border-top-right-radius: 10px;
}

        /*.primary_btn {*/
        /*    background-color: #007bff;*/
        /*    color: white;*/
        /*    padding: 10px;*/
        /*    border: none;*/
        /*    cursor: pointer;*/
        /*    border-radius: 5px;*/
        /*}*/


        #pdfModal .modal-content {
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        #pdfModal .modal-content {
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        #pdfModal .modal-header {
            background-color: #007bff;
            color: white;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            position: relative;
        }

        #pdfModal .modal-body {
            padding: 15px;
        }

        #pdfModal .modal-body iframe {
            border: none;
            border-radius: 8px;
        }

        #pdfModal .modal-footer {
            justify-content: center;
        }

        /* Close button styling */
        #pdfModal .close-btn {
            position: absolute;
            top: 0px;
            width: 38px;
            right: 0;
            background: none;
            border: none;
            font-size: 28px;
            color: #fff;
            cursor: pointer;
            background: #ff3c3c;
            border-top-right-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Adjust modal size */
        #pdfModal .modal-dialog {
            max-width: 50%;
        }
.doctor_bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
  line-height: 1.5em;
  word-break: break-word;
  text-align: left;
}
/* About Us intro paragraphs — justified for clean block edges. */
.about_text {
  text-align: justify;
}
::selection {
    color: #fff;
    background: rgba(84, 193, 79, 1) !important;
}
.sticky-top {
        position: sticky;
        top: 150px;
        z-index: 1020;
    }
p{
    font-weight: 400;
}
ul.custom_top_nav li.nav-item.top_menu .timeslot {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: rgba(84, 193, 79, 1);
}
.dropdown-item.active, .dropdown-item:active:hover{
    color: #fff !important;
}
.navbar-light .navbar-nav .nav-link {
    font-weight: 700;
    font-size: 16px;
}
ul.custom_top_nav li.nav-item.top_menu img{
    width: 36px;
}
ul.custom_top_nav li.nav-item.top_menu img.phone_img {
    width: 24px !important;
}
ul.custom_top_nav li.nav-item.top_menu p{
  margin-bottom: 0px;
}
ul.custom_top_nav li.nav-item.top_menu .timeslot span.day{
    color: #000000;
    
}
ul.custom_top_nav li.nav-item.top_menu .timeslot span.day,ul.custom_top_nav li.nav-item.top_menu .timeslot p {
    color: #000000;
    font-weight: 700;
    font-size: 15px;
}
ul.custom_top_nav li.nav-item.top_menu a{
    color: rgb(0 0 0 / 50%) !important;
}
ul.custom_top_nav li.nav-item.top_menu a:hover{
    color: #37659b;
}
ul.custom_top_nav li.nav-item.top_menu .timeslot span.time{
    color: rgb(0 0 0 / 50%);
        font-size: 17px;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top.twolevel_navbar{
    background: #fff !important;
    padding: 3px 0px;
    box-shadow: 0px 8px 31.8px 0px rgba(0, 0, 0, 0.04);
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top.twolevel_navbar a.navbar-brand img {
    width: 180px;
    margin-left: 26px;
}

.navbar-light .navbar-nav .active>.nav-link{
    color: rgba(84, 193, 79, 1) !important;
}
.center_menu{
    align-items: center;
    margin: 0px;
}
.border_top_line {
    position: relative;
    width: 100%;
    display: block;
    /* padding-top: 10px; */
    margin-top: 4px;
    border: 1px solid #dee2e6 !important;
}
.search{
    position: relative;
    border-left: 2px solid #E1E1E1;
    border-right: 2px solid #E1E1E1;
    padding: 0px 10px;
}
.search input{
   border: none;
}
.search .form-control:focus {
    color: #495057;
    background-color: #fff;
     border-color: unset !important; 
    outline: 0;
     box-shadow: unset !important; 
}
.search span.fa.fa-search {
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
}
ul.list-inline.sndlvlrtmenu {
    padding: 10px;
}
ul.list-inline.sndlvlrtmenu {
    padding: 0px 10px;
    /*border-left: 2px solid silver;*/
}

ul.list-inline.sndlvlrtmenu li a {
    color: #54c14f !important;
    padding: 3px;
    font-size: 17px;
}
ul.list-inline.sndlvlrtmenu li a:hover{
    color: #000 !important;
   
}
li.nav-item.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.navbar-nav li a {
    color: #000000 !important;
    font-size: 16px;
}
ul.navbar-nav li a:hover {
    color: rgba(84, 193, 79, 1) !important;
}
ul.slevel_menu li.nav-item.dropdown .dropdown-toggle::after {
    display: none;
}

.leadForm .form-group{
    position: relative;
    margin-bottom: 1.5em;
}

.leadForm label.text-red.text-capitalize.text-normal {
    font-size: 12px;
    position: absolute;
    bottom: -18px;
    left: 12px;
    background: white;
    color: #bd060e;
}

.owl-theme .owl-controls{ margin-top: 0; }
.owl-theme .owl-controls .owl-buttons div{
    display: flex;
        /* width: 40px; */
        /* height: 40px; */
        line-height: 35px;
        /* background: #f1971f;
        color: #fff; */
        /* border-radius: 0; */
        margin-right: 5px;
        opacity: 1;
        align-items: center;
        justify-content: center;
}
.owl-prev:before,
.owl-next:before{
    content: "\f060";
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 900;
}
.owl-next:before{ content: "\f061"; }



/* banner_section
   ---------------------------------------------------------------------------
   The banner is one viewport tall, so everything inside it competes for a
   height that a 13" laptop gives far less of than a 27" monitor. Three numbers
   drive that fit and are tuned per height tier below:

     --nav-h        real height of the fixed navbar (measured in Navbar.tsx;
                    the value here is only the pre-hydration fallback)
     --hero-band    the bottom strip of the banner reserved for the progress
                    bars and the consultant cards' overlap — hero copy is
                    centred in what is left, never into this strip
     --card-pull    how far the white consultant cards ride up into the banner

   Keep --hero-band > --card-pull (bars must clear the card edge) and give the
   copy ~24px of air above the bars. */
:root {
    --nav-h: 146px;
    --hero-band: 150px;
    --card-pull: 86px;
    /* Matches Bootstrap's .container step for the current width, so the hero
       copy lines up with the consultant cards below it instead of running to
       the viewport edge (our own max-width overrides .container's). */
    --hero-inner: 1140px;
    /* Aspect ratio of every hero photo (3011÷941). They were widened from
       2.35:1 to 3.2:1 by replicating each photo's leftmost pixel column into
       the new strip — the left quarter of all five is a horizontally uniform
       vertical gradient, so the added wall is indistinguishable from the
       photographed one and the subjects were copied through untouched. The
       point of the extra wall is headroom: it lets a short laptop stay on the
       fit-by-height side of the flip described on div#demo *without* the
       banner having to grow tall enough to swallow the page below it. */
    --hero-photo-aspect: 3.2;
}
@media (max-width: 1199.98px) { :root { --hero-inner: 960px; } }
@media (max-width: 991.98px)  { :root { --hero-inner: 100%; } }
div#demo {
    margin-top: var(--nav-h);
    /* `cover` has two completely different behaviours either side of the
       photo's own aspect: while the box is *narrower* than the photo it fits
       by height and the crop falls on the empty left wall (correct), and the
       moment the box is wider it flips to fitting by width and starts taking
       the crop off the top and bottom instead — which is what used to cut the
       top of the doctor's head off on a 13" laptop.

       Widening the photos to 3.2:1 is what keeps every real screen on the
       right side of that flip: a 1366×768 laptop lands at ~2.95:1 and a 27"
       panel at ~2.16:1, both narrower than 3.2. So the height below is simply
       `100vh - nav` again, and the floor is now only a backstop for freak
       cases (a very short window) rather than something that fires on every
       laptop and pushes the page below it off the fold. */
    height: max(calc(100vh - var(--nav-h)), calc(100vw / var(--hero-photo-aspect)));
    min-height: 560px;
    overflow: hidden;
    position: relative;
}
/* The per-height tiers that retune these variables live at the end of this
   file, alongside the other responsive rules — they have to be declared after
   the fluid type scale to win the cascade. */

/* hero slider
   ---------------------------------------------------------------------------
   Slides are stacked and crossfaded (never translated), with a slow Ken Burns
   push on whichever image is active. The headline is real HTML text laid over
   the photo, so it translates and reflows — nothing is baked into the pixels. */
.hero_slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease-in-out, visibility 0s linear 1.1s;
}
.hero_slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.1s ease-in-out, visibility 0s;
}
.hero_slide_media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* Crop anchored to the RIGHT edge, which is the whole point here: every hero
   photo is 3011×941 (3.2:1) with the doctor at centre-right and the *patient's
   face in the last ~7% of the frame*, over an empty wall on the left that
   exists purely to carry the headline. Every real box is narrower than 3.2:1,
   so `cover` fits by height and spends its entire overflow horizontally — and
   anchoring at 100% means all of it is taken off the wall rather than off the
   patient. Nothing but the Ken Burns push crops vertically. Do not move this
   off 100% at desktop widths: at these aspects the overflow is hundreds of
   pixels, so even a couple of percent bites straight into her face. */
.hero_img {
    object-fit: cover;
    object-position: 100% 42%;
    transform: scale(1.01);
    transform-origin: 100% 50%;
}
/* Ken Burns runs only on the active slide, so each image restarts its push as
   it fades in rather than drifting while hidden. Kept to a narrow range — the
   hero box is far wider than the 2.35:1 photos, so cover already enlarges them;
   a wide push on top of that cropped the subjects out of frame. The origin is
   pinned to the right edge for the same reason as object-position: a centred
   zoom pushes the patient back out past the right edge as it grows. */
.hero_img.is-zooming {
    animation: hero_kenburns 7.6s ease-out forwards;
}
@keyframes hero_kenburns {
    from { transform: scale(1.01); }
    to   { transform: scale(1.06); }
}

/* Left-weighted scrim: dark enough on the text side for AA contrast on white
   copy, clearing to nothing over the subject on the right. */
.hero_scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 24, 30, 0.82) 0%, rgba(3, 24, 30, 0.62) 34%, rgba(3, 24, 30, 0.12) 62%, rgba(3, 24, 30, 0) 82%);
}
/* Bottom band, which exists only to seat the white consultant cards against a
   darker edge — it is not part of the copy's contrast budget.

   It used to be a second full-width layer on .hero_scrim, 32% of the banner
   tall. That is far taller than the cards' overlap, and on a short laptop it
   reached all the way up into the patient's jaw: at 1366x768 the banner is
   497px, so the ramp started 159px off the bottom and put ~0.26 alpha across
   her chin and neck while her eyes sat above it — the lower third of a face
   fading out is exactly what reads as "you can't see her properly".

   So: tie the band's height to the overlap it is actually there to serve
   (--card-pull plus a soft tail) instead of a fixed fraction of the banner,
   and mask it off before the right edge. The subject sits in the last ~10% of
   every hero photo, which on a wide monitor is well clear of the cards (they
   end at 80% of the viewport) but at 1366 is only just past their right edge —
   so the fade costs the last few percent of the cards' backing and buys back
   the whole face. Where masks are unsupported the band simply renders
   unmasked, i.e. the old behaviour. */
.hero_scrim::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--card-pull) + 90px);
    background: linear-gradient(0deg, rgba(3, 24, 30, 0.5) 0%, rgba(3, 24, 30, 0.16) 45%, rgba(3, 24, 30, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0, 0, 0, 0) 90%);
    mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0, 0, 0, 0) 90%);
}

.hero_content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    max-width: var(--hero-inner);
    /* Centre the copy in the banner *above* the reserved bottom band, so a
       short viewport can never push the CTA down onto the progress bars or the
       consultant cards. */
    padding-bottom: var(--hero-band);
    z-index: 2;
}
.hero_eyebrow {
    color: rgba(84, 193, 79, 1);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero_title {
    color: #fff;
    font-size: 54px;
    line-height: 1.14;
    font-weight: 400;
    max-width: 15ch;
    margin-bottom: 18px;
}
.hero_text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    max-width: 46ch;
    margin-bottom: 30px;
}
.hero_cta {
    display: inline-block;
}
/* Each slide's copy lifts into place as the slide becomes active. */
.hero_slide.is-active .hero_eyebrow,
.hero_slide.is-active .hero_title,
.hero_slide.is-active .hero_text,
.hero_slide.is-active .hero_cta {
    animation: hero_rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero_slide.is-active .hero_title { animation-delay: 0.08s; }
.hero_slide.is-active .hero_text  { animation-delay: 0.16s; }
.hero_slide.is-active .hero_cta   { animation-delay: 0.24s; }
@keyframes hero_rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Progress indicators — thin bars that fill over the slide's dwell time. */
.hero_dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Sit inside the reserved band, clear of the cards' top edge. */
    bottom: calc(var(--card-pull) + 18px);
    width: 100%;
    max-width: var(--hero-inner);
    padding: 0 15px;
    display: flex;
    gap: 10px;
    z-index: 3;
}
.hero_dot {
    flex: 0 0 auto;
    width: 54px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.32);
    overflow: hidden;
    cursor: pointer;
}
.hero_dot:focus-visible {
    outline: 2px solid rgba(84, 193, 79, 1);
    outline-offset: 4px;
}
.hero_dot_fill {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(84, 193, 79, 1);
    transform: scaleX(0);
    transform-origin: left center;
}
.hero_dot.is-active .hero_dot_fill {
    animation-name: hero_fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform: scaleX(1);
}
@keyframes hero_fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero_img.is-zooming { animation: none; }
    .hero_slide.is-active .hero_eyebrow,
    .hero_slide.is-active .hero_title,
    .hero_slide.is-active .hero_text,
    .hero_slide.is-active .hero_cta { animation: none; }
    .hero_dot.is-active .hero_dot_fill { animation: none; transform: scaleX(1); }
}
.banner_title {
    font-size: 52px;
    font-weight: 400;
}
.sub_color {
    color: rgba(84, 193, 79, 1);
    font-weight: 700;
}
.carousel-caption {
    position: absolute;
    right: 0;
    /* The white consultant cards are pulled up 86px into the banner
       (.consultent_sec { top: -86px }). Anchor the button so its centre lands
       on that overlap line, i.e. centred on the card's top border. */
    bottom: 74px;
    left: 0;
    z-index: 10;
    padding-top: 0;
    padding-bottom: 0;
    color: #fff;
    text-align: center;
    width: 100%;
    /* background: #000; */
}
.primary_btn {
    background: rgba(84, 193, 79, 1);
    border-radius: 26px;
    padding: 15px 32px;
    font-size: 16px;
    color: #fff;
    border: none;
}
.primary_btn:hover {
    background-color: #fff;
    color: rgba(84, 193, 79, 1);
    transition: all 0.9s;
}
.consultent_details{
    display: flex;
    justify-content: center;
}
/*.consultent_details .seconadry_btn{*/
/*    margin-top: 20px;*/
/*}*/
.consultent_sec{
    position: relative;
    top: calc(-1 * var(--card-pull));
}
.consultent_sec .card:hover h3, .card:hover a ,.card:hover .location{
    color: rgba(84, 193, 79, 1) !important;
    transition: all 0.9s;
    cursor: pointer;
}
.founder_details_sec{
    display: flex;
    justify-content: center;
    align-items: center;
}
.seconadry_btn{
    color: #000000;
}
.consultent_sec .card {
    background: rgba(255, 255, 255, 1);
    border-radius: 0px;
    padding: 30px;
    text-align: center;
    width: 33%;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    border: none;
}
.card_border{
    border-left: 1px solid rgba(0, 0, 0, 0.17) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.17) !important;
}
.card_left_radius{
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}
.card_right_radius{
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important; 
}
.consultent_sec .card img {
    width: 60px;
    margin-bottom: 10px;
}


.consultent_sec .card h3 {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    margin-top: 12px;
}

.consultent_sec .card p {
    color: rgba(0, 0, 0, 0.83);
    margin-bottom: 10px;
}

.consultent_sec .card a {
    font-weight: bold;
    text-decoration: none;
}
.carousel-caption .custom_button{
    margin-top: 0;
}

/* whychoose_sec */
.hospitol_details{
    background: linear-gradient(180deg, #00B1D2 -624.26%, #FFFFFF 40%);

}
.whychoose_title{
    font-size: 38px;
    /* font-weight: 600; */
}


.list li {
    display: flex;
    /* align-items: center; */
    gap: 8px; /* Space between icon and text */
    font-size: 18px;
    margin-bottom: 10px;
}
.list li img{
    width: 30px;
    height: 30px;
}

.whychoose_us_details_sec,.staff_details_sec,.laboratory_details_sec,.equipment_details_sec{
    padding: 50px 0px;
}
.whychoose_us_details,.staff_details,.laboratory_details,.equipment_details{
    display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
}
.sub_title{
    font-size: 44px
}
.whychoose_text,.staff_text,.laboratory_text,.equipment_text    {
    margin: 30px 0px;
    text-align: justify;
}
.why_choose_img,.staff_img,.laboratory_img,.equipment_img,.founder_img,.doctors_list_img,.opd_list_img{
    width: 100%;
    border-radius: 10px;
}
/* About page: show the building photo in full (never cropped) at every screen
   size. On desktop the image column vertically centers the natural-ratio image
   beside the taller text column, so any height difference becomes balanced
   whitespace instead of a crop. Mobile keeps the natural banner. */
@media (min-width: 768px) {
    .about_us_details_sec .col-md-6:not(.about_details_des) { display: flex; align-items: flex-start; }
    /* Drop the photo so its top edge lines up with the first body paragraph
       instead of the "About Us" heading. Offset = heading height (its fluid
       font-size x 1.2 line-height) + its 20px bottom margin (mb-20), so it
       tracks the heading as it scales. */
    .about_us_details_sec .sticky-top {
        width: 100%;
        margin-top: calc(clamp(1.75rem, 1.0rem + 3.2vw, 2.75rem) * 1.2 + 20px);
    }
    .about_us_details_sec .why_choose_img {
        height: auto;
        object-fit: contain;
    }
    /* Doctor profile pages put the photo beside the name/speciality heading, so
       its top edge should line up with that heading — cancel the About-page
       offset that would otherwise drop the photo down a line. */
    .doctor_info_row.sticky-top,
    .doctor_info_row .sticky-top {
        margin-top: 0;
    }
}
.doctors_list_img{
    background: #fff;
    /* Uniform card image regardless of the source photo's aspect ratio, so all
       cards line up. Matches the existing 255x315 portraits. */
    aspect-ratio: 255 / 315;
    object-fit: cover;
    object-position: center top;
}
.opd_list_img{
    background: rgba(244, 244, 244, 1);

}
.opd_details_sec {
    padding-top: 168px;
    padding-bottom: 50px;
}
.opd_title{
    font-size: 38px;
}
.doc_galary_two{
    display: flex;
    flex-direction: column;
    gap: 21px;
}
/* doctor section */
.doctor_details_sec{
    background: rgba(0, 177, 210, 0.03);
}
.opd_details_sec{
    
}
.founder_deatils{
    padding: 50px 0px;
    display: flex;
    justify-content: center;
}
.founder_text{
    margin: 0px 0px 22px 0px;
    line-height: 1.9;
}
.founder_details_text{
    padding: 10px 20px 20px;
}
.founder_details_text h5{
    margin-bottom: 26px;
}

.doctors_list_icon{
    position: absolute;
    bottom: 139px;
    z-index: 999;
}

.our_patients_details{
    display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
}
.our_patients{
    padding: 50px 0px;
}

.owl-next:before {
    content: unset;
}
.owl-prev:before {
    content: unset;
}
/* Nav arrows — green chevron sitting on a soft green semicircle hugging each
   edge (flat edge faces inward toward the card edge). */
#our_patients .owl-next {
    position: absolute;
    top: 124px;
    right: 0;
    width: 34px;
    height: 64px;
    font-size: 34px;
    line-height: 1;
    background: rgba(84, 193, 79, 0.18);
    border: 0;
    border-radius: 999px 0 0 999px;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    color: rgba(84, 193, 79, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#our_patients .owl-next:hover{
    background: rgba(84, 193, 79, 0.32);
    color: #14532d;
    transform: scale(1.1);
}
.testimonial{
    padding: 0px 51px;
}
#our_patients .owl-prev:hover{
    background: rgba(84, 193, 79, 0.32);
    color: #14532d;
    transform: scale(1.1);
}
#our_patients.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
    background: #fff;
    padding: 40px 0px;
    border-radius: 12px;
    box-shadow: 0px 14px 14.8px 0px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(228, 228, 228, 1);
}
.bi.bi-arrow-left,.bi.bi-arrow-right{
    font-size: 22px;
}
#our_patients .owl-prev{
    position: absolute;
    top: 124px;
    left: 0;
    width: 34px;
    height: 64px;
    font-size: 34px;
    line-height: 1;
    background: rgba(84, 193, 79, 0.18);
    border: 0;
    border-radius: 0 999px 999px 0;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    color: rgba(84, 193, 79, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.copyright p a{
    color:rgba(84, 193, 79, 1);
}
.copyright p a:hover{
    text-decoration: underline;
}
#doc_galary .owl-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px 0px 0px;
    gap: 24px;
}
#doc_galary  .owl-prev{
    height: 55px;
    width: 55px;
    border-radius: 50%;
    background: rgba(84, 193, 79, 1);
    padding: 0px;
    /* line-height: 50px;
    opacity: 100; */
    color: #fff;
    box-shadow: 0px 0px 23.8px 0px #00000014;
}

#doc_galary .owl-prev:hover{
    height: 55px;
    width: 55px;
    border-radius: 50%;
    background: #fff;
    padding: 0px;
    color: rgba(84, 193, 79, 1);
    transition: all 0.9s;
}
#doc_galary .owl-next {
height: 55px;
    width: 55px;
    border-radius: 50%;
    background: rgba(84, 193, 79, 1);
    padding: 0px;
    line-height: 50px;
    opacity: 100;
    color: #fff;
    box-shadow: 0px 0px 23.8px 0px #00000014;
}
#doc_galary .owl-next:hover{
    height: 55px;
    width: 55px;
    border-radius: 50%;
    background: #fff;
    padding: 0px;
    line-height: 50px;
    opacity: 100;
    color: rgba(84, 193, 79, 1);
    transition: all 0.9s;
}
.testimonial_img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}
.stars i{
    color: rgba(255, 193, 7, 1);
    font-size: 24px;
}
.description{
    margin-top: 6px;
    font-style: italic;
}
.our_patient_title {
    padding: 10px 0px 26px 0px;
        font-size: 20px;
}
.footer_links{
    display: flex;
}
.footer_links li{
    padding-right: 26px;
}
.footer_links li a{
    color: #000;
}
.footer_links li a:hover{
    color: rgba(84, 193, 79, 1);
}
.footer_socail_links{
    float: right;
}
.footer_sec{
    padding-top: 24px;
}
hr {
    margin-top: 0px;
    /*border: 1px solid #dee2e6 !important;*/
}

.footer{
    background: rgba(247, 252, 253, 1);

}
.copyright p{
    font-size: 14px;
}
/* The copyright sits a few px lower than the links / social row because the
   social column floats; nudge it up so all three align on one line. Only when
   the three columns are side by side (>=768px); below that the footer stacks. */
@media (min-width: 768px) {
  .footer_sec .copyright p {
    position: relative;
    top: -8px;
  }
}
.about_details,.doctor_info{
    padding-top: 218px;
    padding-bottom: 50px;
}
.doctor_info{
    background: linear-gradient(354deg, #00B1D2 -1115.43%, #FFFFFF 100%);

}
.doctor_deatils{
    display: flex;
    justify-content: space-between;
    padding: 0px 0px 10px 0px;
}
.doctors_list_icon {
    position: absolute;
    /* bottom: 139px; */
    z-index: 999;
    left: 14px;
    bottom: -20px;
}
.doctors_list_details_text{
    padding: 30px 14px 10px 14px;
}
.doctors_list{
    padding: 50px 0px;
}
.opd_list{
    /* padding: 50px 0px; */
    display: flex;
    justify-content: center;
}
.opd_sub_title{
    font-weight: 700;
}
.opd_color{
    color: #000;
}
.opd_color:hover{
    color: #000;
}
#doc_galary .testimonial {
    padding: 0px 10px 0px 10px;
}
#doc_galary .owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 40px 0px;
    border-radius: 12px;
}
#doc_galary .pic img{
    border-radius: 14px;
}

#doc_galary .item-large {
    height: auto;
}

#doc_galary .stacked-items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

/* #doc_galary .half-item {
    height: 270px;
} */

#doc_galary .half-item img {
    height: 188px;
    object-fit: cover;
    border-radius: 14px;
}
#doc_galary {
    padding-top: 50px;
}
.contact_us label {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.63);
}
.contact_us .form-control,.enquery_form .form-control{
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #000;
    background-color: transparent;
    background-clip: padding-box;
    border: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    border-radius: 0px;
    transition: border-color 0.15sease-in-out, box-shadow 0.15sease-in-out;
}
.contact_us .form-control:focus,.enquery_form .form-control:focus {
    box-shadow: unset;
}
.text-capitalize {
    text-transform: math-auto !important;
    font-size: 12px !important;
    color: rgb(253, 23, 23) !important;
}
.contact_us{
    padding-top: 210px;
    padding-bottom: 50px;
}
.contact_us_details,.book_an_app_details{
    background: rgba(249, 249, 249, 1);
    padding: 40px 24px 20px 24px;
    border-radius: 12px;

}

.contact_us_title{
    font-size: 46px;
    font-weight: 700;
}
.contact_title {
    font-size: 46px;
}
.contact_us_details_text{
    padding-right: 20px;
}
.book_an_app_text{
    padding-left: 40px;
}
.boomark_icon{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 0px 50px 0px;
}
.boomark_icon .timeslot{
    display: flex;
    flex-direction: column;
    /* gap: 4px; */
}
.boomark_icon .timeslot p{
    margin: 0px;
}
.boomark_icon img{
    height: 60px;
    /* width: 60px; */
}
.ctn {
    position: absolute;
    margin-top: -160px;
}
.doctor_name{
    font-weight: 600;
}

.menu-header {
    background: #28a745;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 20px 2px 20px 6px;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: fixed;
    top: 45%;
    right: 250px; /* Aligned with the menu */
    border-radius: 5px;
    z-index: 2; /* Above the menu */
    transition: right 0.3s ease-in-out; /* Smooth transition */
}

.floating-menu {
    position: fixed;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    top: 40%;
    right: 0px; /* Initially visible */
    width: 250px;
    background: #fff;
    /* padding: 10px; */
    transition: right 0.3s ease-in-out; /* Smooth transition */
    z-index: 1;
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
}
.menu-header a{
    color: #fff;
}

.floating-menu ul {
    list-style: none;
    margin: 0;
}
.floating-menu ul li {
    padding: 12px;
    /* border-bottom: 1px solid #eee; */
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.3s;
}
.floating-menu ul a:first-child{
    border-top-left-radius: 8px;
}
.floating-menu ul a:last-child li{
    border-bottom-left-radius: 8px;
}
.floating-menu ul a:first-child:hover li{
    border-top-left-radius: 8px;
}
.floating-menu ul a:last-child:hover li{
    border-bottom-left-radius: 8px;
}
.floating-menu ul li:hover {
    background: #54C14F;
    color: #fff;
}
.floating-menu a{
    color: #000;
    font-weight: 600;
    font-size: 14px;
}
.floating-menu ul li:hover a{
    color: #fff;
}
.floating-menu ul li i {
    margin-right: 12px;
    font-size: 18px;
    color: #333;
}
.call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #28a745;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    cursor: pointer;
    border-radius: 0;
}
.call-btn i {
    margin-right: 10px;
}
.hover_image_change {
    position: relative;
    display: inline-block;
}
.doctors_list_icon {
    width: 50px;
    height: 50px;
    transition: opacity 0.3s ease-in-out;
}
.hover_image_change:hover .doctors_list_icon {
    content: url('<?php echo base_url();?>assets/img/gynic_IVF_hover.png'); /* Change Image on Hover */
}
.active1{
        background: #54C14F;
    color: #fff;
}

.map-container { position: relative; height: 430px; }
.info-box { background: black; color: white;  position: absolute; right: 110px; top: 0px; height: 430px; width: 26%; display: flex; flex-direction: column; justify-content: center; }
.info-box hr{border-color: #fff;}
.info-box h5{font-size: 30px; font-weight: 400;margin-bottom: 12px;}
.text-success{font-size: 28px; font-weight: 400;}
.footer { background: #f8f9fa;}
iframe { width: 100%; height: 430px; border: 0; }
/* Icon + text rows in the footer contact card. The address runs to two lines,
   so centre the pin against the block rather than letting it sit on the first
   line; `flex: 0 0 auto` keeps the icon from being squeezed as the text wraps. */
.info_call_details {
    display: flex;
    align-items: center;
    gap: 16px;
}
.info_call_details img{
    width: 32px;
        height: 32px;
    flex: 0 0 auto;
}
.info_call_details_map{
    display: flex;
    gap: 16px;
}
.appointment_call{
    font-size: 16px;
    color: #fff;
}
ul.custom_top_nav li.nav-item.top_menu a:hover,ul.custom_top_nav li.nav-item.top_menu .timeslot span.time:hover {
    color: rgba(84, 193, 79, 1) !important;
}
.book_an_app_text .appointment_call:hover, .hover_color:hover .day, .hover_color:hover .time{
    color: rgba(84, 193, 79, 1) !important;
}
.appointment_call:hover{
    color: #28a745;
}
.info_call_details_sec {
    border-bottom: 1px solid #7B7B7B;
}
.mb_block{
    display: none;
}
.mb_none{
    display: block;
}
.book_an_app_text .day,.book_an_app_text .appointment{
font-size: 18px ;
font-weight: 600 ;
color: #1E1919
    }
.book_an_app_text .time,.book_an_app_text .appointment_call{
        font-size: 26px ;
        font-weight: 600 ;
        color: #000000
    }
.timeslot.d-flex.justify-content-between.py-2 {
    /*justify-content:  !important;*/
    gap: 6px;
    /*flex-direction: column;*/
}
.menu-header{
    z-index: 99999;
}
.floating-menu{
        z-index: 999999;
}
.instagram{
    width: 31px;
    /*height: 40px;*/
}
.facebook{
    width: 28px;
    /*height: 38px;*/
}
.twitter{
    width: 24px;
    /*height: 32px;*/
}
/* Full-width green underline directly under the founder name (Dr. Prem) */
.founder_details_sec .founder_details_text {
    text-align: center;
}
.founder_details_text h3.sub_title {
    display: inline-block;
    border-bottom: 2px solid #54c14f;
    padding-bottom: 6px;
}
.founder_details_text .underline {
    display: none;
}
.phl_location{
    height: 430px;
}
.info_call_details_map{
    display: flex;
    align-items: center;
}
.doctors_sep_list{
    display: flex;
    gap: 128px;
}
.doctors_sep_list ul li{
    list-style: none;
    margin-top: 10px;
}
.mail_icon{
    width: 30px;
}
.contact_doctor_info{
    display: flex;
    gap: 14px;
    align-items: center;
}
.contact_doctor_info a{
    color: #000;
}
.floating-menu span{
    font-weight: 500;
}
.floating-menu ul li:hover .call{
    color: #fff !important;
}
@media screen and (max-width: 767px){
    .consultent_sec .card {
        background: rgba(255, 255, 255, 1);
        border-radius: 0px;
        padding: 30px;
        text-align: center;
        width: 90%;
        /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
        display: flex;
        /* justify-content: center; */
        align-items: center;
        border: none;
        border-radius: 12px;
    }
    .doctor_deatils{
            flex-direction: column;
            margin-bottom: 20px;
    }
    .dropdown-item{
        padding: .25rem 5px;
    }
    ul.navbar-nav.auto.scrollpy.mt-2.pt-2.slevel_menu.col-md-12 {
    padding-right: 0px;
}
#inactivityModal .modal-content {
    background: white;
    padding: 20px;
    max-width: 320px;
    margin: 11% auto;
    border-radius: 10px;
    position: relative;
    border: 0px;
    box-shadow: 0px 14px 14.8px 0px #00000012;
}
    #pdfModal .modal-dialog{
        max-width: 100% !important;
    }
    .underline{
            margin-left: 0px;
    }
    .card_border {
    border-left: 0px solid rgba(0, 0, 0, 0.17) !important;
    border-right: 0px solid rgba(0, 0, 0, 0.17) !important;
}
    .banner_section_btn .primary_btn{
            padding: 10px 32px !important;
    font-size: 12px !important;
    }
    .banner_gif{
            height: 220px;
    }
    .mb_display{
            display: flex;
            flex-direction: column-reverse;
    }
    .consultent_details {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 19px;
        align-items: center;
    }
    .consultent_sec {
        position: unset;
        top: -80px;
        padding: 30px 0px;
    }
    .why_choose_details_text {
        text-align: center;
    }
    .sub_title {
        font-size: 28px;
    }
    .whychoose_title {
        font-size: 30px;
        /* font-weight: 600; */
    }
    /* .whychoose_us_details_sec, .staff_details_sec, .laboratory_details_sec, .equipment_details_sec {
        padding: 30px 0px;
    } */
    .whychoose_text, .staff_text, .laboratory_text, .equipment_text {
        margin: 20px 0px;
    }
    .whychoose_us_details_sec{
        display: flex;
        flex-direction: column-reverse;
        padding: 30px 0px;
    }
    .sub_title {
        font-size: 28px;
        padding-top: 16px;
    }
    .staff_details_sec{
        padding: 0px 0px;
    }
    .staff_details.pl-50 {
        padding: 0px 15px !important;
    }
    .staff_details_text,.laboratory_details_text,.equipment_details_text {
        text-align: center;
    }
    .staff_details_text h3.sub_title br{
        display: none;
    }
    .laboratory_details_sec{
        display: flex;
        flex-direction: column-reverse;
        padding: 30px 0px;
    }
    .equipment_details_sec{
        padding: 30px 0px;
    }
    .equipment_details.pl-50{
        padding: 0px 15px !important;
    }
    .founder_deatils {
        padding: 30px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .doctors_list {
        padding: 30px 0px;
    }
    .doctors_list_details_text {
        padding: 24px 14px 10px 14px;
        text-align: center;
    }
    .testimonial {
        padding: 0px 28px;
    }
    #our_patients .owl-next {
        position: absolute;
        top: 240px;
        right: 0px;
        width: 30px;
        height: 56px;
        font-size: 28px;
    }
    #our_patients .owl-prev {
        position: absolute;
        top: 240px;
        left: 0px;
        width: 30px;
        height: 56px;
        font-size: 28px;
    }
    .our_patients {
        padding: 30px 0px;
    }
    .map-container.position-relative{
        position: unset;
        height: unset;
    }
    .info-box {
        background: black;
        color: white;
        position: unset;
        right: 110px;
        top: 0px;
        height: 468px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .opd_sub_title {
        font-weight: 700;
        font-size: 24px;
    }
    .opd_title {
        font-size: 32px;
    }
    .mb_block{
        display: block;
    }
    .mb_none{
        display: none;
    }
    .opd_details_sec {
        padding-top: 110px;
        padding-bottom: 30px;
    }
    .about_details, .doctor_info {
        padding-top: 110px;
        padding-bottom: 30px;
    }
    .about_us_details_sec {
        display: flex;
        flex-direction: column-reverse;
    }
    .about_details_des {
        text-align: center;
    }
   .about_details_des .sub_title {
        font-size: 34px;
        padding-top: 16px;
    }
    .contact_us_details_text {
         padding-right: 15px; 
        text-align: center;
        padding-bottom: 30px;
    }
    .contact_us {
    padding-top: 140px;
    padding-bottom: 0px;
}
.carousel-caption {
    position: absolute;
    right: 0;
     bottom: 7%;
    left: 0;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    width: 100%;
    /* background: #000; */
}
.info-box h5 {
    font-size: 22px;
    font-weight: 400;
}
.text-success {
    font-size: 24px;
    font-weight: 400;
}
    .book_an_app_text {
        /*text-align: center;*/
        padding: 30px 15px 0px 15px;
    }
    .contact_title {
    font-size: 33px;
    text-align: center;
}
.contact_us_title {
    font-size: 32px;
    font-weight: 700;
}
.boomark_icon .timeslot {
    display: flex;
    flex-direction: column;
    /* gap: 4px; */
    align-items: baseline;

}
.book_an_app_text .time, .book_an_app_text .appointment_call {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
}
.boomark_icon {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 0px 30px 0px;
}
p.contact_us_text.pt-10.pb-40 {
    padding-bottom: 20px !important;
    text-align: center;
}
.contact_us_details, .book_an_app_details {
    background: rgba(249, 249, 249, 1);
    padding: 30px 24px 30px 24px;
    border-radius: 12px;
}

.carousel-caption .custom_button {
    margin-top: 32px;
}
.consultent_sec .card h3 {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 600;
}
:root {
    --nav-h: 97px;
}
.banner_title {
    font-size: 36px;
    font-weight: 400;
}

.timeslot.d-flex.justify-content-between.py-2{
    justify-content: flex-start !important;
    gap: 6px;
    flex-direction: column;
}
.footer_links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul.list-inline.sndlvlrtmenu {
    padding: 0px 0px;
}
.fotter_links_sec{
        display: flex;
    padding-left: 15px !important;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top.twolevel_navbar a.navbar-brand img{
         margin-left: 0px;
}
/* Mobile hamburger menu (.mb_block is display:none on desktop, so these are
   mobile-only): stack the nav links and the language toggle vertically and
   left-align them, instead of pushing the toggle to the right where it
   collided with the floating "Book" tab. */
.mb_block .second_lvlmenu {
    flex-direction: column;
    align-items: flex-start !important;
}
.mb_block .second_lvlmenu .slevel_menu {
    width: 100%;
}
.mb_block .second_lvlmenu > .py-2 {
    padding-left: 0;
    margin-top: 4px;
}
}

/* =====================================================================
   RESPONSIVE — fluid typography + tablet/laptop breakpoints
   Appended last so it wins over earlier rules on equal specificity.
   Tiers: mobile <=767 (block above) | tablet 768-991 | laptop 992-1199 |
   desktop >=1200 (the default, unscoped rules).
   ===================================================================== */

/* Fluid headings: scale smoothly between the mobile floor and the desktop
   max instead of snapping at the 767px breakpoint. */
.banner_title     { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem); }
.hero_title       { font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.375rem); }
.hero_text        { font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); }
.sub_title        { font-size: clamp(1.75rem, 1.0rem + 3.2vw, 2.75rem); }
.whychoose_title  { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.375rem); }
.opd_title        { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.375rem); }
.contact_title    { font-size: clamp(2.0625rem, 1.4rem + 2.4vw, 2.875rem); }
.contact_us_title { font-size: clamp(2rem, 1.25rem + 2.8vw, 2.875rem); }

/* ---- Hero slider, narrow viewports ----
   A portrait phone crops the photo down to a sliver, so pull back a little from
   the hard right edge — enough to keep the patient's face in shot while still
   holding the doctor in frame beside her. Swap the left-to-right scrim for a
   bottom-up one (there is no room for a clear text column at this width), and
   drop the copy to the lower third above the CTA.

   The 95% is a recalibration, not a round number: this used to read 92% against
   a 2.35:1 photo, where the 8% came to ~124px of the original frame. Widening
   the photos to 3.2:1 multiplied the horizontal overflow that percentage is
   taken from, so the same 92% would now cut ~188px — well into the patient's
   face. 95% of the new overflow is the same ~124px it always was. */
@media (max-width: 991px) {
  div#demo { min-height: 520px; }
  .hero_img { object-position: 95% 32%; }
  .hero_scrim {
    background: linear-gradient(0deg,
        rgba(3, 24, 30, 0.92) 0%,
        rgba(3, 24, 30, 0.72) 38%,
        rgba(3, 24, 30, 0.34) 66%,
        rgba(3, 24, 30, 0.15) 100%);
  }
  /* Mobile already darkens the whole banner bottom-up for the copy, which sits
     at the bottom here — the desktop card band would double up on it. */
  .hero_scrim::after { display: none; }
  .hero_content { justify-content: flex-end; }
  .hero_eyebrow { font-size: 12px; letter-spacing: 0.15em; margin-bottom: 10px; }
  .hero_title { max-width: 100%; margin-bottom: 12px; }
  .hero_text { max-width: 100%; margin-bottom: 22px; }
  .hero_dot { flex: 1 1 0; width: auto; }
}

/* Footer contact card on a narrow laptop: 26% of a 1093px viewport is only
   ~280px, which breaks the address across three lines and leaves the card
   almost touching its own bottom edge. Widen it and pull it nearer the edge. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .info-box { width: 34%; right: 48px; }
}

/* ---- Desktop navbar on a narrow laptop (992-1199) ----
   The hours / phone / address strip has to fit four items into a 960px
   container. Left alone the address breaks into three lines and the fixed
   navbar grows to ~183px, which on a 768px-tall panel swallows a quarter of
   the screen. Tighten the padding and hold each address line on one line —
   the strip stays two rows tall, as it is on a wide monitor. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  ul.custom_top_nav li.nav-item.top_menu { padding: 0 9px; gap: 8px; }
  ul.custom_top_nav li.nav-item.top_menu img { width: 30px; }
  ul.custom_top_nav li.nav-item.top_menu .timeslot span.day,
  ul.custom_top_nav li.nav-item.top_menu .timeslot p { font-size: 14px; }
  ul.custom_top_nav li.nav-item.top_menu .timeslot span.time { font-size: 15px; }
  ul.custom_top_nav li.nav-item.top_menu .timeslot span { white-space: nowrap; }
}

/* =====================================================================
   HERO HEIGHT TIERS
   The banner is 100vh tall, so its contents have to survive on a laptop that
   offers half the height of the designer's 27" monitor. Each tier shrinks the
   reserved bottom band (--hero-band), the cards' overlap (--card-pull) and the
   copy's own type scale together, so the eyebrow → headline → text → CTA stack
   always fits between the navbar and the cards.

   Declared here, after the fluid type scale above, so these font sizes win.
   ===================================================================== */

/* Mobile / tablet: copy is bottom-aligned rather than centred, and the cards
   sit in their own row below the banner. */
@media (max-width: 991px) {
  :root { --hero-band: 108px; --card-pull: 56px; }
}
@media (max-width: 991px) and (max-height: 640px) {
  :root { --hero-band: 84px; --card-pull: 36px; }
  div#demo { min-height: 380px; }
  .hero_eyebrow { margin-bottom: 6px; }
  .hero_title { font-size: clamp(1.5rem, 1rem + 2.4vw, 2rem); margin-bottom: 8px; }
  .hero_text { font-size: 0.9375rem; margin-bottom: 14px; }
  .hero_cta { padding: 10px 24px; font-size: 15px; }
}

/* Mid-height laptops — 1440×900, and 1080p 15" panels at 125% scaling. */
@media (min-width: 992px) and (max-height: 900px) {
  :root { --hero-band: 140px; --card-pull: 90px; }
  div#demo { min-height: 480px; }
  .hero_eyebrow { margin-bottom: 10px; }
  .hero_title { font-size: clamp(1.75rem, 1.05rem + 2.6vw, 2.75rem); margin-bottom: 14px; }
  .hero_text { margin-bottom: 22px; }
}

/* Short laptops — 1366×768, and anything scaled to 125%/150%, where the usable
   viewport falls to ~550-650px. `min-height` is the safety valve: if the copy
   still cannot fit, the cards drop below the fold instead of landing on the
   button.

   --card-pull runs *against* the gradient of the tiers above it (100px here vs
   90 at ≤900 and 86 on a wide monitor) and that is deliberate. On a 1366×768
   laptop the banner ends exactly at the fold, so the only way the white
   consultant cards appear without scrolling is for them to ride further up
   into it — this is what makes them visible rather than merely close. The copy
   still clears them: the tallest headline in either language ("Healthy Skin
   Starts With The Right Diagnosis", 3 lines) stacks to 268px against the
   443 - 148 = 295px this leaves, and --hero-band keeps the documented
   pull + 45px of air so the progress bars stay off the card edge.

   The width exception below is the one place that 100px does not survive. */
@media (min-width: 992px) and (max-height: 700px) {
  :root { --hero-band: 148px; --card-pull: 100px; }
  div#demo { min-height: 400px; }
  .hero_eyebrow { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 8px; }
  .hero_title { font-size: clamp(1.625rem, 1rem + 2.1vw, 2.25rem); margin-bottom: 10px; }
  .hero_text { font-size: 0.9375rem; margin-bottom: 16px; }
  .hero_cta { padding: 11px 26px; font-size: 15px; }
}

/* Short *and* narrow — 1366×768 being the case this was written for.
   Whether the cards' 100px overlap lands on the patient is a question of width,
   not height. The cards span the 1140px container, so their right edge sits at
   W/2 + 570; the subject occupies the last ~9% of every hero photo, and because
   the banner always fits the photo by height her left edge lands at
   W - 0.087·(3.2·H). Those cross below W ≈ 1448, so on a narrow laptop the
   cards' top edge runs straight through the reclining patient's jaw.

   This started as a tuned pull (56px, derived from gynaecology.png, whose chin
   sits at 86.1% of frame height) and that was the wrong shape of fix. The five
   hero photos do not agree on where the subject ends — the lowest facial
   feature runs to ~84% on cosmetics, ~86% on skin-hair-laser (jaw and ear) and
   86.1% on gynaecology — and the clearance also moves with the measured
   --nav-h and the exact viewport height. Threading a 13px gap through all five
   slides on every short viewport is not something a single px value can hold:
   it held for gynaecology at 1366×768 and still cut the jaw on
   skin-hair-laser at 1229×691.

   So on these screens the cards stop entering the banner at all. Zero overlap
   is the only value that is correct for every slide, every nav height and
   every short viewport, because no face can be under a card that never
   reaches the photo. The cost is deliberate and was the client's call: on a
   short laptop the cards no longer peek above the fold, so they are seen on
   scroll rather than immediately. Above 1450px the tiers above keep their
   overlap — there the cards end at ~80% of the viewport and never come near
   the subject, who sits in the last ~9%. --hero-band drops to 48px to keep
   ~26px of air between the copy and the progress bars, which now sit 18px off
   the banner's bottom edge. */
@media (min-width: 992px) and (max-width: 1450px) and (max-height: 900px) {
  :root { --hero-band: 48px; --card-pull: 0px; }
}

/* Ken Burns is the one thing the height floor above cannot fix: the push runs
   on top of an already-exact cover fit, so whatever it adds in scale it takes
   off the top and bottom of the frame — 6% of growth is ~3% off the top, and
   the doctor's hair starts only 4.7% down. There is room for that on a tall
   panel; on a laptop it is the last thing still touching her head, so halve
   the push here. The motion is subtle enough that the shorter throw reads the
   same, and the resting scale is dropped to match the new `from`. */
@media (max-height: 820px) {
  .hero_img { transform: scale(1.005); }
  .hero_img.is-zooming { animation-name: hero_kenburns_short; }
}
@keyframes hero_kenburns_short {
    from { transform: scale(1.005); }
    to   { transform: scale(1.03); }
}

/* Footer Google map: fill its column, never force horizontal overflow. */
.map-container iframe {
  width: 100% !important;
  height: clamp(280px, 40vw, 450px) !important;
  border: 0;
}

/* Floating "Book" drawer: slide with a width-relative transform so it is fully
   hidden when closed and never wider than the viewport on small phones.
   Width + open offset share one variable so they always stay in sync. */
:root { --drawer-w: min(250px, 78vw); }
.floating-menu {
  width: var(--drawer-w);
  right: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.floating-menu.open { transform: translateX(0); }
.menu-header { right: 0; transition: right 0.3s ease-in-out; }
.menu-header.open { right: var(--drawer-w); }

/* ---- Tablet (768-991): use the hamburger navbar, matching navbar-expand-lg.
   Without this the dense two-row desktop navbar shows and overflows. ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .mb_none { display: none !important; }
  .mb_block { display: block !important; }
  .mb_block .second_lvlmenu {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .mb_block .second_lvlmenu .slevel_menu { width: 100%; }
  .mb_block .second_lvlmenu > .py-2 { padding-left: 0; margin-top: 4px; }

  /* Content offsets matched to the short mobile navbar (logo + 30px offer bar). */
  :root { --nav-h: 100px; }
  .opd_details_sec { padding-top: 120px; padding-bottom: 30px; }
  .about_details, .doctor_info { padding-top: 120px; padding-bottom: 30px; }
  .contact_us { padding-top: 140px; padding-bottom: 0px; }

  /* Footer map: stack the info card below the map instead of the desktop
     absolute overlay, which is too cramped at this width (mirrors ≤767). */
  .map-container.position-relative { position: static; height: auto; }
  .info-box {
    position: static;
    right: auto;
    top: 0;
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}