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 */
div#demo {
    margin-top: 102px;
    height: calc(100vh - 102px);
    /* Keep the banner tall enough that the centred (baked-in) hero text never
       drops onto the absolutely-positioned Book button on short/laptop windows. */
    min-height: 460px;
    overflow: hidden;
    position: relative;
}
/* Short / mid-height laptop viewports (≈1280×720, 1366×768, and 1080p 15"
   panels at 100%–125% scaling ≈ 864–937px tall): without this guard the
   min-height floor + card overlap either push the Book button below the fold
   (client has to scroll) or drop the centred baked-in hero text onto the button.
   Let the banner shrink to the actual viewport height and tuck the button/cards
   up so the button clears the text and everything stays visible above the fold. */
@media (min-width: 768px) and (max-height: 1024px) {
    div#demo {
        min-height: 0;
        height: calc(100vh - 102px);
    }
    /* Drop the button toward the banner's lower third so it clears the
       centred (baked-in) hero text, and ease the card pull so the button no
       longer overlaps the white card's top edge. Net: clear gap above and
       below the button, and it stays above the fold. */
    .carousel-caption { bottom: 18px; }
    .consultent_sec { top: -10px; }
    /* On these wide/short laptop windows `object-fit: cover` crops the video
       top & bottom, which drops the baked-in hero text down toward the Book
       button. Bias the framing lower so more of the video's bottom shows and
       the text lifts well clear of the button (no layout/fold change). */
    #demo .carousel-item video { object-position: center 78%; }
}
#demo .carousel-inner,
#demo .carousel-item {
    height: 100%;
}
#demo .carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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: -86px;
}
.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; }
.info_call_details {
    display: flex;
    gap: 16px;
}
.info_call_details img{
    width: 32px;
        height: 32px;
}
.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;
}
div#demo {
    margin-top: 97px;
    height: calc(100vh - 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); }
.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); }

/* 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). */
  div#demo { margin-top: 100px; height: calc(100vh - 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;
  }
}