body{font-family: "Poppins", sans-serif;}
/*--------- Common Css ----------- */
.blog-img img,.medevents .medevents-img , .casestudies .casestudies-img, .gallery .presscard,.doccard .doccard-img img, .vm .vmimg img{
    transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.limit-text{
  display: inline-block;
  width: 14ch;             /* ch = character units */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.blog-img:hover img ,.medevents:hover .medevents-img, .casestudies:hover .casestudies-img, .gallery:hover .presscard,.doccard:hover .doccard-img img, .vm .vmimg:hover img {
    transform: scale(1.06); /* Adjust scale as needed */
}
.list-none li{    list-style: none;}
.points ul{
    padding-left: 0px;
}

.text-96{color:#969696 !important;}
.obj-cover{object-fit: cover !important;}
.obj-fill{object-fit: fill !important;}
.navbar-light .navbar-nav .nav-link {color: black;font-size:16px;font-weight:500;}
a.text-hover:hover{text-decoration:underline !important;}
a.text-hover-color:hover{color:#F7B32B !important;}
.text-ul{text-decoration:underline !important;}
.faq-hover:hover{background: #B8B8B8 !important;}
.ofh{overflow: hidden;}
.bg-white{background: #000;}
.bg-app {background: #F7B32B;}
.text-main {color: #F7B32B !important;}
.bg-lapp{background: #F7B32B;}
.text-appp {color: #F48C12 !important;}
.text-app2 {color: #F7B32B !important;}
.bg-darkk{background-color: #000000 !important;}
.bg-news{background: #F6F6F6;}
.bg-light1 {background: rgba(0, 0, 0, 0.04);}
.bg-greyy{background: #B8B8B8 !important;}
.text-darkk{color: #000000;}
.text-darkkk{color: #000000 !important;}
.text-grey{color: #969696;}
.text-lblue{color: #0F4DED !important;}
.text-nblue{color: #0A0CF4 !important;}
.text-app {color: #F48C12;}
.text-lightt , .text-lightt p{color:#555555 !important;}
.brs-10 {border-radius: 10px;}
.brs-15{border-radius: 15px;}
.brs-top-15{border-top-left-radius: 15px;border-top-right-radius: 15px;}
.brs-bot-15{border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;box-shadow: rgba(139, 150, 153, .2) 0 5px 18px;}
.brs-bot-30{border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;}
.brs-20 {border-radius: 20px;}
.brs-30 {border-radius: 30px;}
.brs-40 {border-radius: 40px;}
.brs-50{border-radius:50%;}
.pad5-7{padding: 3px 5px;}  
.lh-60{line-height: 75px;}
.fs-65{font-size: 65px;}
.sideimg {position: absolute;top: 0px;left: 0;width: 350px;}
.bg-under{background: #545454;}
.mtn-48{margin-top: -48px;}
.wid-20{width: 20px;}
.fw-100{font-weight:100;}
.fw-200{font-weight:200;}
.fw-300{font-weight:300;}
.fw-400{font-weight:400;}
.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.fw-800{font-weight:800;}
.fw-900{font-weight:900;}
.btnsecondary {padding: 8px 30px;border-radius:30px !important;}
.btnprimary {padding: 12px 30px !important;border-radius:30px !important;}

/*--------- Text overflow Control Css --------- */
.overelipsis1 {display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
.overelipsis2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.overelipsis3 {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.overelipsis {display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}

/*Navbar Styles*/
.navbar-nav .nav-link.active {
  color: #F7B32B !important;
}
.navbar-nav .nav-link:hover {
  color: #F7B32B !important;
}
.navbar-nav .dropdown .nav-link:hover {
    color: #F7B32B !important;
}

.navbar-nav .dropdown .nav-link.active {
    color: #F7B32B !important;
}

.top-navbar-head.activescroll {
    background: #fff;
    padding: 12px 15px !important;
    box-shadow: rgba(139, 150, 153, .2) 0 5px 18px;
}
  nav.breadcrumb{
        position: relative;
        justify-content: flex-end;
    } 
    ol.breadcrumb {
        justify-content: flex-end;
        margin: 0px;
        padding: 0px;
    }
    .bred_flex {
        display: flex;
        justify-content: space-between;
    }
    .bred_flex h1 {
        font-size: 18px;
        margin-bottom: 0px;
    }
    
/*--------- Top Menu Css ---------*/
.top_menu .float-right a i{font-size: 15px;background: #000000;border-radius: 50%;color: #F7B32B;padding: initial;width: 25px;height: 25px;text-align: center;align-content: center !important;}

/*services*/
.service .testimoimg{width: 75px;height: 75px;border-radius: 50%;}

.service-card:hover .text-hover-color{
    color:#F7B32B !important
}
.wid-30 {
    width: 30px;
}
/*vision-mission*/
.vision-mission-card:hover .text-hover-color{
    color:#F7B32B !important
}
/*Doctors*/
.doctor-card:hover .text-hover-color{
    color:#F7B32B !important
}
.doctoricons{
    background: #000;
    margin: 0px 5px;
    color: #fff;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}
/*Banner Section STYLES*/
.carousel-indicators li{
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
.banner_txt {
    position: absolute;
    top: 505;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    width: 80%;
}
.banner_txt h3{
    font-size: 40px;
    font-weight: bold;
}

.banner_txt p{
    font-size: 20px;
}

a._banner_href {
    color: #fff;
    width: 100%;
    display: block;
}
  
.banner_txt h1{font-size:50px;font-size: 60px;width: 75%;font-weight: 900;}
.banner_txt p{width:75%;}


/*About Styles*/
.docimgabout{
    width: 350px;
    object-fit: cover;
    position: absolute;
    height: 400px;
    left: 40px;
    top: 35px;
}
.docimgabouthome{
     width: 350px !important;
     height: 350px !important;
}
.about_homepage div.text-lightt p{
    font-size:14px !important;
    font-weight:500 !important;
}
.whytochoosehome .choosetickbefore li{
    font-size: 18px;
    font-weight: 600;
}
.whytochoosehome .choosetickbefore p{
    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
}
/*Awards Styles*/
.awards-card .card-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 320px;
}
.awards_homepage .post:hover p.awardtitle{
    color:#F7B32B !important;
}
/*Press Styles*/
.presscard{
    border: 3px solid #A1A0A0 !important;
    padding: 1px;
}
.presscontent{
    overflow-y: auto;
    height: 65px;
    }
/*News Styles*/
.news .post:hover .newstitle{
    color:#F7B32B ;
}
.news-information h1.font-weight-bold.mb-0 {
    font-size: 30px;
}
/*Treatments Styles*/
.treatments .treatments-card:hover h3.treattitle{
    color:#F7B32B ;
}
/*FAQ STyles*/
.faq-hover.active {
    background-color: #B8B8B8 !important; 
}
.faqsection .card-body p{
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 400;
}
/*#accordion .hdng a:after {font-family:Fontawesome;content:'\f078';float:right;font-size:15px;}*/
/*#accordion .hdng a.collapsed:after {font-family:Fontawesome;content:'\f077';}*/

#accordion .hdng a:after {
    font-family: FontAwesome;
    content: '\f077'; /* up arrow — shown when expanded */
    float: right;
    font-size: 15px;
}

#accordion .hdng a.collapsed:after {
    content: '\f078'; /* down arrow — shown when collapsed */
}

#democ .carousel-indicators .active {background: #F7B32B;border: 1px solid #F7B32B;margin-top: 9px;}

.whychoosevideo{position:absolute;}
.choosetickbefore *{color:#ffffff;}
.w-250{width:250px;}
.bg-hgrey{background: #F4F4F4;}
.maskimg{position: absolute;right: 0;width: 200px;top: 0;}




/*--------- Blog Area input Css ---------*/
.blogcategory ul li.yearnum:hover p{
    color:#F7B32B !important;
}
.blogcategory ul li{border:1px solid #e9e9e9;padding:4px;}
.blogcategory ul li a:hover{color: #F7B32B;}
.blogarea h2, .blogarea h3, .blogarea h4, .blogarea h5, .blogarea h6{font-weight:bold;margin:20px 0px;}
.blogarea p{font-size:18px;}
.blogarea span{color: #000000;font-size:16px !important;}
.blogarea ul li, .blogarea ol li{font-size:18px;
/*padding: 8px 0px;line-height: 30px;*/
    
}
.blogarea img{width:100%;margin:20px 0px;border: 1px solid #dee2e6;}

/*---------Events Css --------- */
.medeventsdiv a:hover{text-decoration: none;}
.medevents{background: rgba(0, 0, 0, 0.04);cursor:pointer;height: 320px;}
.medevents:hover{background: #000000;}
.medevents p{color:#000000;}
.medevents:hover p{color:#ffffff;}
.medevents p.text-app{color:#000000;}
.medevents:hover p.text-app{color:#F7B32B;}
.venuedetails{height:45px;overflow-y:scroll;}
.medevents:hover span , .medevents:hover .title{color: #F7B32B !important;}

/*--------- Tesimonial Css --------- */
.testimoimg{width: 75px;height: 75px;border-radius: 50%;}
.paginationcss .page-link {position: relative;display: block;padding: 15px 20px;line-height: 1.25;color: #121212;background-color: #fff;border: 1px solid #dee2e6;border-radius: 50%;margin-right: 16px;}
.page-item:first-child .page-link {border-radius: 50%;}
.paginationcss  .page-item:last-child .page-link {border-radius: 50%;}
.paginationcss .page-item.active .page-link {color: #000000;background-color: #F7B32B;border-color: #dee2e6;}


/*--------- Faq's Css --------- */
.faqsection a, .faqsection .text-link {color: #3a3a3a;}
.faqsection a:hover, .faqsection .text-link:hover {text-decoration: none;}

/*--------- video Gallery Css --------- */
.video_gallery_homepage .videogallery:hover span.vidtitle{
    color:#F7B32B !important;
}
.vedioimg{position:relative;}
.videogallery{position: absolute;top: 0;bottom: 0;left: 0;right: 0;padding:15px;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);}
.vgallery .btnandtitle{position:absolute;bottom: 20px;}
.playbtnimg{position:absolute;left: 40%;top: 36%;width:130px;}
.playbtnimgvideo1{left: 75px;}

/*--------- Owl-Carousel Css --------- */
.owl-item a:hover{text-decoration: none;}
.owl-theme .owl-controls .owl-page span {background: #F7B32B;}
.owl-buttons{position: absolute;right: 74px;top: -70px;}
.owl-controls .owl-page, .owl-controls .owl-buttons div {cursor: pointer;background: #000000!important;width: 50px;}
.owl-controls .owl-page{background: transparent !important;width: 20px !important;}

/*--------- Contact Us and Write a Review Css ---------*/
.contactusform ::placeholder {color: #000000;font-size:18px;}
.contactusform{background: #F8FCFF;}
.contactusform .form-control{background: rgba(0, 0, 254, 0.04) !important;padding:25px 15px;border:1px solid #0A0CF4 !important;    border-radius: 7px;}
.writereview .form-control{background: transparent;padding: 25px 15px;}
.writereviewtestimonial .form-control{border: 1px solid #000000;}
.writereview .form-control::placeholder {color: #000000;}
.wreviewp{padding: 10px 10px !important;height: 52px;}
.wreviewpeople{background: rgba(0, 0, 0, 0.04);height: 240px;}
.wrpeopleimg{width: 50px;height: 50px;}
.peoplereview{height: 125px;overflow-y: auto;}
.mobilecon{width: 60px;position: absolute;left: 0px;top: -12px;}

/*--------- Social media icons Css ---------*/
.bg-fb{background: #3b5998;}
.bg-twit{background: #00acee;}
.bg-link{background: #0072b1;}
.bg-whats{background: #25D366;}

/*--------- Book Appointgment Css ---------*/
.bookappointment-text:hover .bookapptxt{
    color:#F48C12 !important;
}
.bookapmt .form-control{border: none !important;border-bottom: 1px solid #808080 !important;border-radius: 0;box-shadow: none;}
.bookapmt .form-control::placeholder{font-size:14px !important;}
.bookapmt .form-control{padding-left:0px !important;}
/* Book Appointment date picker: the jQuery UI calendar popup (appended to <body>) must
   render above every element — overrides the low inline z-index jQuery UI computes. */
.ui-datepicker{ z-index: 100000 !important; }
.appointmentimg{position: absolute;right: -100px;}
.appointmentslotscontainer label{background: #eee;border-radius: 4px;padding: 2px 8px;float: left;color: #000000;border: 1px solid #727272;}
.appointmentslotscontainer label:hover{background:#0A0CF4;color:#FFFFFF;}
.appointmentslotscontainer div{width:178px;text-align:center;position:relative;font-size: 16px;}

/*--------- Speciality's Css ---------*/
.specialtick ul{padding-left: 0px;}
/*.specialtick{    display: flex;*/
/*    align-items: center;}*/
.specialtick {
    position: absolute;
    left: -10px;
}
.artdate{right: 0px;position: absolute;bottom: 22px;background: #F7B32B;padding: 10px 15px;}

/*--------- Gallery Css ---------*/
.albumcss{height: 100%;overflow: hidden;}
.allimgnums {position: absolute;bottom: 90px;right: 0;left: 0;color: white;font-size: 18px;font-weight: 600;background: #14131394;text-align: center;}
.albumcss:hover .allimgnums{
    display:block !important;
}
/*--------- iframe Css ---------*/
.mapvenue iframe{width:100%;}

/*--------- Submit btn Searchbar Css ---------*/
.subbtnsearch{position: absolute;right: 8px;top: 8px;border:none !important;background:transparent;z-index:1;padding:0px 12px;color:transparent;}


/*--------- Custotm style ScrollBar Css ---------*/
.cusscroll ::-webkit-scrollbar {width: 2px;}
.cusscroll ::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; }
.cusscroll ::-webkit-scrollbar-thumb {background: #F7B32B;  border-radius: 10px;}
.cusscroll ::-webkit-scrollbar-thumb:hover {background: #b30000; }


/*--------- Contact Us Css ---------*/
.c_row {display: flex;align-items: center;}
.workhrs.c_row{display: flex;align-items: normal;}
.c_row .c_icon {min-width:50px;height: 50px;vertical-align: middle;text-align: center;background: #F7B32B;border-radius: 50%;display: flex;justify-content: center; margin-right: 0.7em;}
.c_row .c_icon i {color: #000000;font-size: 24px;}
.contdetails .c_row .c_icon{align-items: center;}

.bookappfooter .c_row{align-items: start !important;}
.bookappfooter .c_row .c_icon {min-width:0px !important;height: 0px !important;}



.choosetickbefore ul , .specialtick ul{list-style:none !important;}
.choosetickbefore ul li{color:#ffffff;position:relative;margin-top:20px;}
.choosetickbefore ul li::before {content: url('https://wellvgo.com/assets/img/tickmark.png');margin-right:15px;position:absolute;left: -40px;}
/*--------- Footer Css ---------*/
footer p.footba::before{content: "";position: absolute;width: 420px;left: 0;height: 1px;background: #575757;top: 31px;}
footer p.footba::after{content: "";position: absolute;width: 420px;right: 0;height: 1px;background: #575757;top: 31px;}
.breadcrumb {border-radius: 0px;}

/*--------- Video Popup Css ---------*/
.video-block button.close {position: absolute;z-index: 999;background: #023047;color: #fff;padding: 10px;opacity: 1;right: 0;top: 0px;}

.text-red {color: red;}
.h-280{height:310px;object-fit:cover;}
.h-250{height:250px;object-fit:cover;}

/*--------- Responsive Css ---------*/
@media (max-width: 1200px) {
footer p.footba::before{display:none;}
footer p.footba::after{display:none;}
}  

@media (max-width: 1024px) {
.top_menu{display:none;}
.appointmentimg {display: none;}
.navbar{padding:20px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
}  

@media (max-width: 768px) {
.appointmentslotscontainer div {width: 250px;} 
.bookappempire{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
}

@media (max-width: 767px) {
/*COMMON CODE*/
.mob-d-flex{display:flex !important;}
.mob-flex-col{flex-direction:column !important;}
.mob-border-none{border:none !important;}
.mob-text-center{text-align:center !important;}
.height-auto{height:auto !important;}
.mobpx-0{padding-left: 0px !important;padding-right: 0px !important;}
.mobd-none{display:none !important;}
.mobp-static{position: static !important;}
.mobpl-15{padding-left: 15px !important;}
.mobpl-0{padding-left: 0px !important;}
.mobpr-15{padding-right: 15px !important;}
.mobpx-15{padding-left: 15px !important;padding-right: 15px !important;}
.mobpx-0{padding-left: 0px !important;padding-right: 0px !important;}
.mobmx-0{margin-left: 0px !important;margin-right: 0px !important;}
.mobmr-15{margin-right: 15px !important;}
.mobtext-center{text-align: center !important;}
.mobw-100{width: 100% !important;}
.mobmy-5px{margin: 5px 0px !important;}   
.mobfs-24{font-size: 24px !important;}
.moblh-3{line-height: 3;}
.mobtext-right{text-align:right !important;}
.mobjustify-right{justify-content:end !important;}
.file-upload-input {
    width: 200px !important;
}
.btnprimary {
    padding: 8px 22px !important;
    font-size: 14px;
}
.bred_flex {flex-direction: column;}
.banner_txt h1 {
    font-size: 24px;
    width: 100%;
}
.docimgabouthome{
    position: static;
}
.medevents{height: auto;}
.whychoosevideo{position:relative !important;}
/*casestudies*/
.casestudies_homepage  .owl-buttons{
    display:none;
}


} 


@media (max-width: 450px) {
.fs-65{font-size:40px !important;}
.fs-40{font-size:35px !important;}
.w-75{width:100% !important;}
.playbtnimg {width: 80px;}
.sideimg {display:none;}
.centext{text-align:center;}
.py-5{padding-top:10px !important; padding-bottom:10px !important;}
.pt-5{padding-top:10px !important;}
.owl-buttons {right: -4px;top: -38px;}
#testimonials_slider .owl-buttons {top: 0px;position: relative;}
.pt-3{padding-top: 0.5rem!important;}
.lh-60 {line-height: 52px;}
.mr-20{margin-right:0px !important;}
.w-250{width:200px;}
.navbar-brand.fs-30{font-size:26px !important;}
}  

@media (max-width: 375px) {
.navbar-brand.fs-30{font-size:20px !important;}
.fs-50 {font-size: 35px !important;}
.fs-40 {font-size: 28px !important;}
}  

@media (max-width: 325px) {
.docimgabout {width: 285px;height: 285px;}
.navbar-brand.fs-30{font-size:16px !important;}
}

/* ============================================================
   PREMIUM ANIMATIONS & UI  (reference redesign)
   Pure CSS layer — triggered by Bootstrap's own .active class
   and the additive scroll-reveal script in layout/js.php
   ============================================================ */

html{scroll-behavior: smooth;}

/* ---------- Keyframes ---------- */
@keyframes tbFadeDown{
    from{opacity: 0; transform: translateY(-100%);}
    to{opacity: 1; transform: translateY(0);}
}
@keyframes tbFromLeft{
    from{opacity: 0; transform: translateX(-70px);}
    to{opacity: 1; transform: translateX(0);}
}
@keyframes tbFromRight{
    from{opacity: 0; transform: translateX(70px);}
    to{opacity: 1; transform: translateX(0);}
}
@keyframes bnrFadeUp{
    from{opacity: 0; transform: translateY(45px);}
    to{opacity: 1; transform: translateY(0);}
}
@keyframes bnrKenburns{
    from{transform: scale(1);}
    to{transform: scale(1.08);}
}
@keyframes fcSlideIn{
    from{opacity: 0; transform: translateX(-60px);}
    to{opacity: 1; transform: translateX(0);}
}
@keyframes fcFloat{
    0%, 100%{transform: translateY(0);}
    50%{transform: translateY(-7px);}
}
@keyframes fcPulseCall{
    0%{box-shadow: 0 0 0 0 rgba(232,65,60,.45);}
    70%{box-shadow: 0 0 0 14px rgba(232,65,60,0);}
    100%{box-shadow: 0 0 0 0 rgba(232,65,60,0);}
}
@keyframes fcPulseWhats{
    0%{box-shadow: 0 0 0 0 rgba(37,211,102,.45);}
    70%{box-shadow: 0 0 0 14px rgba(37,211,102,0);}
    100%{box-shadow: 0 0 0 0 rgba(37,211,102,0);}
}
@keyframes ddFade{
    from{opacity: 0; transform: translateY(12px);}
    to{opacity: 1; transform: translateY(0);}
}

/* ---------- 1. Top Bar (deep teal, compact, reference layout) ---------- */
.top_menu{
    font-size: 14px;
    position: relative;
    z-index: 1021;
    background: #0d567a;
    animation: tbFadeDown .6s ease backwards;
    overflow: hidden; /* clip the left/right entrance slides */
}
/* on load: contact slides in from the left, social + Get Appointment from the right */
.top_menu .top_left{animation: tbFromLeft .8s .3s cubic-bezier(.22,.61,.36,1) backwards;}
.top_menu .top_right{animation: tbFromRight .8s .3s cubic-bezier(.22,.61,.36,1) backwards;}
.top_menu .topbar-bookapp{animation: tbFromRight .8s .3s cubic-bezier(.22,.61,.36,1) backwards;}
/* everything on the bar reads white */
.top_menu p, .top_menu a, .top_menu a span, .top_menu span, .top_menu marquee, .top_menu marquee span{
    color: #ffffff !important;
}
/* compact, equal vertical rhythm (~44px total) */
.top_menu .top_left, .top_menu .top_right{
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
    margin-bottom: 0;
}
.top_menu .text-center.pt-3{
    padding-top: .45rem !important;
    padding-bottom: .45rem;
}
/* thin vertical separators between the three sections */
.top_menu .row > div + div{border-left: 1px solid rgba(255,255,255,.18);}
/* separators + equal spacing between left contact items */
.top_menu .top_left .list-inline-item{
    padding-right: 16px;
    border-right: 1px solid rgba(255,255,255,.25);
}
.top_menu .top_left .list-inline-item:last-child{border-right: 0;}
.top_menu .top_left a i{
    font-size: 14px;
    vertical-align: middle;
    margin-right: 4px;
    transition: transform .3s ease;
    display: inline-block;
}
.top_menu a{
    display: inline-block;
    transition: opacity .3s ease, transform .3s ease;
}
.top_menu .top_left a:hover{
    opacity: .8;
    transform: translateY(-1px);
    text-decoration: none !important;
}
.top_menu .top_left a:hover i{transform: rotate(-10deg) scale(1.15);}
/* social icons: small circles, subtle hover */
.top_menu .float-right a i{
    background: rgba(255,255,255,.15) !important;
    color: #ffffff !important;
    width: 26px;
    height: 26px;
    font-size: 13px;
    transition: background .3s ease, color .3s ease;
}
.top_menu .float-right .list-inline-item a{
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.top_menu .float-right .list-inline-item a:hover{transform: translateY(-2px) scale(1.08);}
.top_menu .float-right a:hover i{background: #e6748d !important; color: #ffffff !important;}
/* Get Appointment button (far right, reference style) */
.topbar-bookapp{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #e6748d;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 18px;
    margin-left: 14px;
    text-decoration: none !important;
    transition: background .3s ease;
}
.topbar-bookapp:hover{background: #d95f8d; text-decoration: none !important;}
.topbar-bookapp .tb-icon{
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #2BB9E5;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
/* right section as flexbox: button stretches full bar height (flush, no bottom gap) */
.top_menu .row > div:last-child{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0;
}
.top_menu .row > div:last-child .top_right{
    order: 1;
    float: none !important;
    border-right: 1px solid rgba(255,255,255,.18);
    padding-right: 16px;
    margin-bottom: 0;
}
.top_menu .topbar-bookapp{
    order: 2;
    align-self: stretch;
    float: none !important;
}

/* ---------- 2. Navigation Bar ---------- */
nav.top-navbar-head{
    transition: padding .4s ease, box-shadow .4s ease, background .4s ease;
    animation: tbFadeDown .7s .12s ease backwards;
}
.navbar-brand{
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    white-space: normal;
    color: #e6748d !important; /* doctor name in reference pink */
}
.navbar-brand:hover{
    color: #d95f8d !important;
    text-decoration: none !important;
}
.brand-tagline{
    font-size: 12.5px;
    font-weight: 600;
    color: #0d567a !important;
    text-transform: none;
    letter-spacing: .2px;
    max-width: 430px;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* menu items: solid pink rectangular active + hover (reference style) */
.navbar-nav > .nav-item{
    padding-left: .1rem !important;
    padding-right: .1rem !important;
    display: flex;
    align-items: center;
}
.navbar-nav > .nav-item > .nav-link{
    position: relative;
    padding: 14px 14px !important;
    border-radius: 0;
    color: #0d567a !important;
    font-size: 16px;
    font-weight: 500;
    z-index: 1;
    transition: color .3s ease;
}
/* pink block sweeps in from the left on hover only */
.navbar-nav > .nav-item > .nav-link::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e6748d;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    z-index: -1;
}
.navbar-nav > .nav-item > .nav-link:hover::before{transform: scaleX(1);}
.navbar-nav > .nav-item > .nav-link:hover{
    color: #ffffff !important;
    text-decoration: none !important;
}
/* active item: pink text only (block appears on hover) */
.navbar-nav > .nav-item > .nav-link.active{color: #e6748d !important;}
.navbar-nav > .nav-item > .nav-link.active:hover{color: #ffffff !important;}
.navbar-nav .dropdown-menu{
    border: 0;
    margin-top: 0;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
    animation: ddFade .3s ease both;
}
.navbar-nav .dropdown-item{transition: background .25s ease, color .25s ease, padding-left .25s ease;}
.navbar-nav .dropdown-item:hover{
    background: #FFF6E3;
    color: #F7B32B;
    padding-left: 2rem;
}

/* ---------- 3. Banner (Hero) — reference sequence ---------- */
/* Per slide: bg image alone (~.55s) -> theme panel slides in from left
   -> layered circle drops from top -> content staggers in -> next slide.
   Built on .banner_txt's ::before (panel) + ::after (circle), replayed
   by Bootstrap's own .active class. No markup / carousel JS touched.  */
@keyframes bnrPanelIn{
    from{opacity: 0; transform: translateX(-101%);}
    to{opacity: 1; transform: translateX(0);}
}
@keyframes bnrCircleDrop{
    0%{opacity: 0; transform: translate(-115%,-160%) scale(.8);}
    55%{opacity: 1;}
    100%{opacity: 1; transform: translate(-50%,-50%) scale(1);}
}
/* continuous, looping pan + zoom so the background always feels alive
   (a moving "dynamic background" rather than a static slide) */
/* NO starting zoom — begins at true 1:1 size, then breathes very subtly
   (max 1.03) and settles back. No pop-in, no sudden movement. */
@keyframes bnrDrift{
    0%{transform: scale(1);}
    50%{transform: scale(1.03);}
    100%{transform: scale(1);}
}
/* premium orbital float for the decorative circle — slow, breathing,
   left/right/up/down drift with a very gentle 0.99–1.02 scale, no bounce */
@keyframes bnrCircleFloat{
    0%{transform: translate(-50%, -50%) scale(1);}
    20%{transform: translate(calc(-50% + 16px), calc(-50% - 14px)) scale(1.02);}
    40%{transform: translate(calc(-50% + 20px), calc(-50% + 10px)) scale(1);}
    60%{transform: translate(calc(-50% - 12px), calc(-50% + 16px)) scale(1.02);}
    80%{transform: translate(calc(-50% - 18px), calc(-50% - 8px)) scale(.99);}
    100%{transform: translate(-50%, -50%) scale(1);}
}
/* soft glowing pulse (keeps the 34px pink ring, adds a breathing halo) */
@keyframes bnrCircleGlow{
    0%, 100%{box-shadow: 0 0 0 34px #edaebe, 0 0 32px 6px rgba(13,86,122,.12);}
    50%{box-shadow: 0 0 0 34px #edaebe, 0 0 62px 16px rgba(13,86,122,.26);}
}
/* elegant cinematic crossfade between slides (image is the first thing to move) */
#demo.carousel-fade .carousel-item{
    transition: opacity .9s ease;
}
/* CRITICAL: kill Bootstrap's native translate-slide so the image is never slid
   TWICE (BS `slide` transform + our custom slide-in). The item only crossfades;
   the single right->left glide comes solely from .banner_slider below. */
#demo .carousel-inner,
#demo .carousel-item,
#demo .carousel-item-next,
#demo .carousel-item-prev,
#demo .carousel-item-next.carousel-item-left,
#demo .carousel-item-prev.carousel-item-right,
#demo .carousel-item.active.carousel-item-left,
#demo .carousel-item.active.carousel-item-right{
    transform: none !important;
}
/* NO sliding — the image changes purely via the crossfade above (one clean
   fade), never a horizontal slide. This removes the doubled right->left motion. */
/* the active slide's image drifts continuously (infinite) — nested transform,
   independent of the wrapper's slide-in so the two compose cleanly.
   Slow right->left sway gives the parallax base layer. */
#demo .carousel-item.active .banner_slider img{
    animation: bnrDrift 24s ease-in-out infinite;
    will-change: transform;
}
/* keep the right-side image bright: soften the per-slide admin overlay */
#demo .carousel-item[class*="overlay_"]::before{opacity: .15 !important;}

/* ---- soft floating decorative elements on the RIGHT side (parallax depth) ---- */
@keyframes bnrFloatDotA{
    0%, 100%{transform: translateY(0) translateX(0);}
    50%{transform: translateY(-26px) translateX(-10px);}
}
@keyframes bnrFloatDotB{
    0%, 100%{transform: translateY(0) translateX(0);}
    50%{transform: translateY(24px) translateX(-8px);}
}
#demo .carousel-inner{position: relative;}
#demo .carousel-inner::before,
#demo .carousel-inner::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}
/* larger soft ring, upper-right — slow 13s drift */
#demo .carousel-inner::before{
    width: 120px; height: 120px;
    top: 16%; right: 8%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    animation: bnrFloatDotA 13s ease-in-out infinite;
}
/* smaller soft dot, lower-right — slower 17s drift (different speed = parallax) */
#demo .carousel-inner::after{
    width: 60px; height: 60px;
    bottom: 20%; right: 18%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(255,255,255,.12));
    box-shadow: 0 8px 26px rgba(255,255,255,.18);
    animation: bnrFloatDotB 17s ease-in-out infinite;
}
@media (max-width: 767px){
/* hide the floaters on small screens where the image is full-width behind text */
#demo .carousel-inner::before, #demo .carousel-inner::after{display: none;}
}

/* left panel layout (overrides the centered default above) */
#demo .banner_txt{
    top: 0;
    left: 0;
    width: 49%;
    height: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 9% 0 8%;
    margin: 0;
    overflow: hidden; /* circle + rings can never escape the left panel */
    z-index: 2;
}
/* semi-transparent theme overlay panel */
#demo .banner_txt::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.12) 0 110px, transparent 111px),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,.08) 0 85px, transparent 86px),
        radial-gradient(circle at 12% 92%, rgba(255,255,255,.07) 0 70px, transparent 71px),
        linear-gradient(120deg, rgba(234,154,174,.72) 0%, rgba(234,154,174,.58) 100%);
    z-index: 0;
}
/* large layered decorative circle (ring via box-shadow for depth) */
#demo .banner_txt::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 40%;
    width: min(86%, 580px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #0d567a;
    box-shadow: 0 0 0 34px #edaebe;
    transform: translate(-50%,-50%);
    z-index: 1;
}
#demo .banner_txt h1, #demo .banner_txt h3, #demo .banner_txt p, #demo .banner_txt .buttons{
    position: relative;
    z-index: 2;
}
#demo .banner_txt h1{
    width: 100%;
    color: #fff !important;
    font-size: clamp(28px, 3.6vw, 54px);
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 18px;
}
#demo .banner_txt h3{
    width: 100%;
    color: #ffffff !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
#demo .banner_txt p{
    width: 100%;
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 26px;
}
/* banner buttons — match the section "View All" button design, with spacing so the
   two CTAs don't touch and wrap cleanly */
#demo .banner_txt .buttons .btn{
    background: #e6748d !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 12px 38px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    margin: 0 14px 10px 0;
}
#demo .banner_txt .buttons .btn:hover{
    background: #0d567a !important;
    color: #ffffff !important;
}

/* CRITICAL: hide ALL banner content by default so the incoming slide never
   flashes its panel/circle/text before it is fully active. Without this, an
   entering item (.carousel-item-next, not yet .active) shows its text at full
   opacity, then the .active animation restarts it — the "text twice" bug. */
#demo .banner_txt::before,
#demo .banner_txt::after,
#demo .banner_txt h1,
#demo .banner_txt h3,
#demo .banner_txt p,
#demo .banner_txt .buttons{opacity: 0;}

/* text enters from the TOP (gentle fade-down) */
@keyframes bnrFadeDown{
    from{opacity: 0; transform: translateY(-34px);}
    to{opacity: 1; transform: translateY(0);}
}

/* STAGED cinematic entrance — strict visual hierarchy, image ALWAYS first:
   1) background image slides in from the right (0s)                         */
/*  2) once the image is in (~0.9s) the left panel + circle enter from the left
    3) then the heading / description / buttons drop in from the top          */
#demo .carousel-item.active .banner_txt::before{animation: bnrPanelIn .9s cubic-bezier(.22,.61,.36,1) .9s both;}
#demo .carousel-item.active .banner_txt::after{
    animation: bnrCircleDrop 1s cubic-bezier(.34,1.3,.5,1) .95s both,
               bnrCircleFloat 11s ease-in-out 2s infinite,
               bnrCircleGlow 6s ease-in-out .95s infinite;
    will-change: transform, box-shadow;
}
#demo .carousel-item.active .banner_txt h3{animation: bnrFadeDown .8s cubic-bezier(.22,.61,.36,1) 1.45s both;}
#demo .carousel-item.active .banner_txt h1{animation: bnrFadeDown .8s cubic-bezier(.22,.61,.36,1) 1.55s both;}
#demo .carousel-item.active .banner_txt p{animation: bnrFadeDown .8s cubic-bezier(.22,.61,.36,1) 1.7s both;}
#demo .carousel-item.active .banner_txt .buttons{animation: bnrFadeUp .8s cubic-bezier(.22,.61,.36,1) 1.8s both;}

/* banner responsive */
@media (max-width: 991px){
#demo .banner_txt{width: 56%;}
}
@media (max-width: 767px){
#demo .banner_txt{width: 100%; padding: 0 10%;}
#demo .banner_txt::before{background: rgba(234,154,174,.50);}
#demo .banner_txt::after{width: min(88%, 78vw); box-shadow: 0 0 0 18px #edaebe;}
#demo .banner_txt h1{font-size: 24px;}
#demo .banner_txt p{font-size: 14px;}
#demo .banner_txt .buttons .btn{padding: 12px 30px !important; font-size: 15px;}
}
#demo .carousel-control-prev, #demo .carousel-control-next{
    opacity: 0;
    transition: opacity .4s ease;
}
#demo:hover .carousel-control-prev, #demo:hover .carousel-control-next{opacity: .9;}
/* vertical dash indicators on the right edge (reference style) */
#demo .carousel-indicators{
    left: auto;
    right: 26px;
    bottom: 34px;
    margin: 0;
    flex-direction: column;
    align-items: center;
}
#demo .carousel-indicators li{
    width: 4px;
    height: 22px;
    border-radius: 4px;
    margin: 5px 0;
    border: 0;
    background-color: rgba(255,255,255,.55);
    transition: height .3s ease, background .3s ease;
}
#demo .carousel-indicators li.active{
    background-color: #F7B32B;
    height: 38px;
}

/* ---------- 4. Left Floating Contact Buttons ---------- */
.floating-contact{
    position: fixed;
    left: 18px;
    bottom: 24px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fcSlideIn .8s .6s cubic-bezier(.22,.61,.36,1) both,
               fcFloat 3.4s 1.4s ease-in-out infinite;
}
.fc-btn{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 20px;
    text-decoration: none !important;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.fc-btn:hover{transform: translateY(-5px) scale(1.08);}
.fc-btn i{color: #ffffff;}
.fc-call{background: #e8413c; animation: fcPulseCall 2.6s ease-out infinite;}
.fc-whatsapp{background: #25D366; animation: fcPulseWhats 2.6s 1.3s ease-out infinite;}

/* ---------- 5. Right Floating Book Appointment ---------- */
.floating-bookapp{
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1030;
    background: #e6748d;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .8px;
    padding: 20px 10px;
    border-radius: 0 6px 6px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%) rotate(180deg);
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(242,125,166,.45);
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.floating-bookapp:hover{
    background: #0d567a;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(13,86,122,.45);
}

/* ---------- 6. Scroll Reveal (activated by js.php) ---------- */
html.anim-ready .anim-fade-up{
    opacity: 0;
    transform: translateY(46px);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
html.anim-ready .anim-fade-left{
    opacity: 0;
    transform: translateX(-46px);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
html.anim-ready .anim-fade-right{
    opacity: 0;
    transform: translateX(46px);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
html.anim-ready .anim-zoom{
    opacity: 0;
    transform: scale(.92);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
html.anim-ready .anim-fade-up.anim-in,
html.anim-ready .anim-fade-left.anim-in,
html.anim-ready .anim-fade-right.anim-in,
html.anim-ready .anim-zoom.anim-in{
    opacity: 1;
    transform: none;
}

/* ---------- 6b. About Section (reference redesign) ---------- */
.about_homepage .sideimg{display: none;} /* clean, minimal — no side dots */
/* small pink uppercase heading with // accent */
.about_homepage h3.text-app2{
    color: #e6748d !important;
    font-size: 18px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 6px;
}
.about_homepage h3.text-app2::after{
    content: ' //';
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0;
}
/* doctor name: large bold blue */
.about_homepage h2{
    color: #0d567a !important;
    font-weight: 800;
    margin-bottom: 26px;
}
/* description: full width, justified, airy line height */
.about_homepage div.mb-20.text-lightt,
.about_homepage div.mb-30.fs-18{
    max-width: 100%;
    text-align: justify;
}
.about_homepage div.text-lightt p{
    color: #1e1e1e !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px;
}
.about_homepage div.mb-30.fs-18, .about_homepage div.mb-30.fs-18 p{
    color: #1e1e1e !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 24px;
}
/* Read More button: pink block with blue side accent */
.about-readmore{margin: 34px 0 14px;}
.about-readmore .btnprimary{
    background: #e6748d !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 16px 42px !important;
    letter-spacing: .5px;
    position: relative;
    overflow: visible;
    box-shadow: none;
}
.about-readmore .btnprimary::before{display: none;} /* no shine sweep here */
/* blue vertical accent bar inside the button's right edge */
.about-readmore .btnprimary::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: #0d567a;
    transition: background .3s ease;
}
.about-readmore .btnprimary:hover{
    background: #0d567a !important;
    color: #ffffff !important;
    transform: none;
    box-shadow: none;
}
.about-readmore .btnprimary:hover::after{background: #e6748d;}
/* statistics strip: full-width continuous carousel (marquee) */
@keyframes statsScroll{
    from{transform: translateX(0);}
    to{transform: translateX(-50%);}
}
.stats-strip{padding: 10px 0 36px; overflow: hidden;}
.stats-strip .stats-row{
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y; /* vertical page scroll still works on touch */
}
.stats-strip .stats-row.is-dragging{cursor: grabbing;}
.stats-strip .stat-card img, .stats-strip .stat-card a{-webkit-user-drag: none;}
.stats-strip .stats-track{
    display: flex;
    width: max-content;
    animation: statsScroll 28s linear infinite;
}
.stats-strip .stats-row:hover .stats-track{animation-play-state: paused;}
.stats-strip .stats-group{
    display: flex;
    gap: 30px;
    padding-right: 30px;
}
.stats-strip .stat-card{
    flex: 0 0 auto;
    width: 330px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 30px;
}
.stats-strip .stats-group .stat-card:nth-child(odd){background: #0d567a;}
.stats-strip .stats-group .stat-card:nth-child(even){background: #ea9aae;}
.stats-strip .stat-icon{
    font-size: 42px;
    color: #ffffff !important;
    line-height: 1;
}
.stats-strip .stat-value{
    color: #ffffff !important;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 6px;
}
.stats-strip .stat-value .stat-plus{
    color: #ffffff !important;
    font-size: 18px;
    vertical-align: baseline;
}
.stats-strip .stat-label{
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0;
}
@media (max-width: 767px){
.about_homepage div.mb-20.text-lightt,
.about_homepage div.mb-30.fs-18{max-width: 100%;}
.stats-strip .stat-card{width: 270px; padding: 20px 22px;}
.stats-strip .stats-group{gap: 18px; padding-right: 18px;}
}

/* ---------- 6c. Why Choose Us (reference redesign) ---------- */
.choose_homepage .bg-darkk{background-color: #0d567a !important;} /* theme blue block */
.choose_homepage .maskimg{display: none;}
/* kill Bootstrap row/col gutters so the card can truly reach the section's right edge */
.choose_homepage > .row{margin-left: 0 !important; margin-right: 0 !important;}
.choose_homepage .wc-right{
    padding: 70px 0 70px 0 !important;
    margin: 0 !important;
}
/* white content card: overlaps the image on the left, flush to the right edge */
.choose_homepage .wc-card{
    background: #ffffff;
    width: calc(100% + 75px);
    max-width: none;
    padding: 55px 50px;
    margin-left: -75px;
    margin-right: 0;
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
    position: relative;
    z-index: 2;
}
/* small pink heading with // accent */
.choose_homepage .wc-card h3{
    color: #e6748d !important;
    font-size: 18px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
}
.choose_homepage .wc-card h3::after{content: ' //'; font-style: italic; font-weight: 800; letter-spacing: 0;}
.choose_homepage .wc-card > p.fw-400.px-3:empty{display: none;}
/* main heading: large bold blue */
.choose_homepage .wc-card p.text-app{
    color: #0d567a !important;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}
/* dynamic description paragraphs */
.choose_homepage .choosetickbefore p{
    color: #0d567a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.8;
    margin-bottom: 12px;
}
/* dynamic items: plain readable list, no icons */
.choose_homepage .choosetickbefore ul{
    list-style: none !important;
    padding: 0;
    margin: 10px 0 0;
}
.choose_homepage .choosetickbefore ul li{
    color: #0d567a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    position: relative;
}
.choose_homepage .choosetickbefore ul li::before{content: none !important;} /* no tick image, no icon */
/* neutralise the theme's white-text rule inside the card */
.choose_homepage .choosetickbefore ul li *{color: inherit !important;}
/* item paragraphs styled like the description */
.choose_homepage .choosetickbefore ul li p{
    color: #0d567a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 24px;
    margin: 4px 0 0;
}
@media (max-width: 767px){
.choose_homepage .wc-right{padding: 26px 15px 40px !important;}
.choose_homepage .wc-card{margin-left: 0; padding: 30px 22px;}
}

/* ---------- 6d. Section Heading (centered, reusable) ---------- */
.sec-head{margin-bottom: 36px;}
.sec-head .sec-sub{
    color: #e6748d !important;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}
.sec-head .sec-sub::after{content: ' //'; font-style: italic; font-weight: 800; letter-spacing: 0;}
.sec-head .sec-title{
    color: #0d567a !important;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 4px;
}
.sec-head .sec-viewall{
    color: #e6748d !important;
    font-size: 14px;
    font-weight: 600;
}
/* View All button (bottom center of section) */
/* View All button (bottom center of section) */
.sec-viewall-btn{
    display: inline-block;
    background: #e6748d;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 12px 38px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.sec-viewall-btn:hover{
    background: #0d567a;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13,86,122,.25);
}
/* heading rises from the bottom on scroll, children staggered (sub -> title -> view all) */
html.anim-ready .sec-head.anim-fade-up .sec-sub,
html.anim-ready .sec-head.anim-fade-up .sec-title,
html.anim-ready .sec-head.anim-fade-up .sec-viewall{
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
    display: inline-block;
}
html.anim-ready .sec-head.anim-fade-up .sec-sub{display: block;}
html.anim-ready .sec-head.anim-fade-up.anim-in .sec-sub,
html.anim-ready .sec-head.anim-fade-up.anim-in .sec-title,
html.anim-ready .sec-head.anim-fade-up.anim-in .sec-viewall{
    opacity: 1;
    transform: none;
}
html.anim-ready .sec-head.anim-fade-up.anim-in .sec-title{transition-delay: .15s;}
html.anim-ready .sec-head.anim-fade-up.anim-in .sec-viewall{transition-delay: .3s;}

/* ---------- 6e. Services Section (reference redesign) ---------- */
.services_homepage{background: #ffffff;}
.srv-card{
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
    margin: 10px 12px 28px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.srv-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,.13);
}
.srv-card a{text-decoration: none !important; display: block;}
.srv-img img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.srv-body{
    padding: 20px 22px 24px;
    text-align: left;
}
.srv-title{
    color: #0d567a !important;
    font-size: 18px;
    font-weight: 800 !important;
    line-height: 1.4;
    margin-bottom: 13px !important;
}
.srv-desc{
    color: #1e1e1e !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 8px;
}
.srv-readmore{
    color: #e6748d !important;
    font-size: 16px;
    font-weight: 500;
}
.srv-card a:hover .srv-readmore{text-decoration: underline;}
/* hide Owl's default nav here — custom floating buttons replace it */
.services_homepage .owl-buttons, .blog_homepage .owl-buttons, .news_homepage .owl-buttons,
.treatments .owl-buttons, .awards_homepage .owl-buttons, .pressrelease_homepage .owl-buttons,
.events_homepage .owl-buttons, .testimonials_homepage .owl-buttons,
.photo_gallery_homepage .owl-buttons, .video_gallery_homepage .owl-buttons{display: none !important;}
/* consistent pink title hover across all srv cards (overrides legacy amber hovers) */
.srv-card a:hover .srv-title{color: #e6748d !important;}
.awards_homepage .post:hover p.awardtitle{color: #e6748d !important;}
/* Awards cards: equal height — reserve 2 lines for the title (matches the overelipsis2
   clamp) so the image, date, title and Read More stay aligned across all cards */
.awards_homepage .post .awardtitle{min-height: 50px;}
.treatments .treatments-card:hover h3.treattitle{color: #e6748d !important;}
.news .post:hover .newstitle{color: #e6748d !important;}
/* small date line on news cards */
.srv-date{
    color: #969696 !important;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
/* custom floating prev/next buttons (reference style) */
.srv-nav-btn{
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #E76D93;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(231,109,147,.45);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.srv-nav-btn i{color: #ffffff;}
.srv-nav-btn:hover{
    background: #d4577e;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 20px rgba(231,109,147,.55);
}
.srv-nav-btn:focus{outline: none;}
.srv-prev{left: -18px;}
.srv-next{right: -18px;}
@media (max-width: 1199px){
.srv-prev{left: -6px;}
.srv-next{right: -6px;}
}
@media (max-width: 767px){
.srv-img img{height: 200px;}
.srv-body{min-height: 0;}
.srv-nav-btn{width: 32px; height: 32px; font-size: 17px;}
.srv-prev{left: 2px;}
.srv-next{right: 2px;}
}

/* ---------- 6f. Events Section (reference redesign) ---------- */
.events_homepage{background: #ffffff;}
/* card: dark blue, teal border, centered, equal height */
.events_homepage .ev-card{
    background: #0d567a;
    border: 3px solid #2ec4b6;
    padding: 34px 24px 30px;
    text-align: center;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 12px 28px;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.events_homepage .ev-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(13,86,122,.28);
    border-color: #5fe0d3; /* slightly brighter border on hover */
}
/* icon box centered at the top */
.events_homepage .ev-icon{
    width: 62px;
    height: 62px;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 22px;
}
.events_homepage .ev-icon i{color: #ffffff;}
/* title */
.events_homepage .ev-title{
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 700 !important;
    line-height: 1.35;
    margin-bottom: 12px !important;
}
/* address / venue */
.events_homepage .ev-venue{
    color: rgba(255,255,255,.85) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 10px !important;
}
/* timing / date */
.events_homepage .ev-date, .events_homepage .ev-time{
    color: rgba(255,255,255,.9) !important;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px !important;
}
.events_homepage .ev-card span{color: rgba(255,255,255,.85) !important;}
/* View Details button: pink block, pinned to the bottom, centered */
.events_homepage .ev-btn{
    margin-top: auto;
    margin-bottom: 0;
    background: #e6748d !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 10px 28px !important;
    border-radius: 6px !important;
    font-size: 15px;
    font-weight: 600;
}
.events_homepage .ev-btn:hover{
    background: #ffffff !important;
    color: #0d567a !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
@media (max-width: 767px){
.events_homepage .ev-card{min-height: 0; padding: 28px 20px 26px;}
}

/* ---------- 6g. Testimonials Section (matches Events design) ---------- */
.testimonials_homepage{background: #ffffff;}
/* card: dark blue, teal border, centered, equal height (same as events) */
.testimonials_homepage .tm-card{
    background: #0d567a;
    border: 3px solid #2ec4b6;
    padding: 34px 24px 30px;
    text-align: center;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 12px 28px;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.testimonials_homepage .tm-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(13,86,122,.28);
    border-color: #5fe0d3; /* slight border highlight on hover */
}
/* reviewer image, circular, centered at the top */
.testimonials_homepage .tm-avatar{
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.85);
    overflow: hidden;
    margin-bottom: 18px;
    background: #ffffff;
    flex: 0 0 auto;
}
.testimonials_homepage .tm-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* reviewer name */
.testimonials_homepage .tm-name{
    width: 100%;
    color: #ffffff !important;
    font-size: 19px;
    font-weight: 700 !important;
    line-height: 1.35;
    margin-bottom: 4px !important;
}
/* designation / location */
.testimonials_homepage .tm-loc{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 14px !important;
}
.testimonials_homepage .tm-loc span{color: rgba(255,255,255,.8) !important;}
/* testimonial content */
.testimonials_homepage .tm-comment{
    width: 100%;
    color: rgba(255,255,255,.9) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 0 !important;
}
.testimonials_homepage .tm-card span{color: rgba(255,255,255,.85) !important;}
/* teal scrollbar for the review text (overrides the amber default) */
.testimonials_homepage .peoplereview::-webkit-scrollbar-thumb{background: #2ec4b6;}
@media (max-width: 767px){
.testimonials_homepage .tm-card{min-height: 0; padding: 28px 20px 26px;}
}

/* ---------- 6h. FAQ Section (premium redesign — Why-Choose split layout) ---------- */
.faqsection{
    position: relative;
    background: #0d567a; /* matches the panel so the col seam never flashes white */
}
/* heading + description sit over the left image (white text on dark overlay) */
.faqsection .sec-sub{
    color: #e6748d !important;
    font-size: 17px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2.5px;
}
.faqsection .sec-sub::after{content: ' //'; font-style: italic; font-weight: 800; letter-spacing: 0;}
.faqsection .sec-title{
    color: #ffffff !important;
    font-size: 36px; font-weight: 800; line-height: 1.2;
    margin-bottom: 14px;
}
.faqsection .faq-media-desc, .faqsection .faq-media-desc p{
    color: rgba(255,255,255,.9) !important;
    font-size: 15px; font-weight: 400; line-height: 1.8;
    margin-bottom: 26px;
}

/* ---- LEFT (40%): full-bleed image + dark overlay + text over it ---- */
.faqsection .faq-media{
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0d567a;
    min-height: 460px;
}
.faqsection .faq-media-img{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.faqsection .faq-media:hover .faq-media-img{transform: scale(1.06);}
/* dark theme overlay for text legibility */
.faqsection .faq-media-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(6,42,60,.84) 0%, rgba(13,86,122,.66) 100%);
}
.faqsection .faq-media-content{
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 70px 16% 70px 9%;
}

/* ---- RIGHT (60%): blue panel + white card flush to the section's right edge ---- */
.faqsection .faq-right{
    background: #0d567a;
    padding: 70px 0;              /* no horizontal padding → card reaches the edge */
    position: relative;
}
/* box model matched 1:1 to .choose_homepage .wc-card */
.faqsection .faq-card{
    background: #ffffff;
    width: calc(100% + 75px);     /* same as wc-card */
    max-width: none;
    margin-left: -75px;           /* same overlap over the left image */
    margin-right: 0;              /* flush to the right edge, no gap */
    padding: 55px 50px;           /* same padding as wc-card */
    border-radius: 20px 0 0 20px; /* radius on the visible left; right meets the edge */
    box-shadow: 0 20px 45px rgba(0,0,0,.12); /* same shadow as wc-card */
    position: relative;
    z-index: 2;
}
/* floating question medallion */
.faqsection .faq-mark{
    width: 96px; height: 96px; border-radius: 26px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0d567a 0%, #12729b 100%);
    color: #fff; font-size: 44px;
    box-shadow: 0 18px 40px rgba(13,86,122,.35);
    margin: 6px 0 28px;
    position: relative;
    animation: faqFloat 3.6s ease-in-out infinite;
}
.faqsection .faq-mark::after{
    content: ''; position: absolute; inset: -4px; border-radius: 30px;
    border: 2px solid rgba(46,196,182,.55);
}
.faqsection .faq-mark i{color: #fff;}
@keyframes faqFloat{0%,100%{transform: translateY(0);}50%{transform: translateY(-9px);}}

/* dynamic FAQ image — premium framed visual */
.faqsection .faq-visual{
    position: relative;
    max-width: 420px;
    margin: 10px 0 30px;
}
/* offset gradient depth frame behind the image */
.faqsection .faq-visual::before{
    content: '';
    position: absolute;
    right: -16px; bottom: -16px;
    width: 100%; height: 100%;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(46,196,182,.92), rgba(13,86,122,.92));
    z-index: 0;
}
.faqsection .faq-visual-frame{
    position: relative;
    z-index: 1;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    padding: 8px;
    border: 1px solid #e6eef1;
    box-shadow: 0 22px 50px rgba(13,86,122,.22);
    animation: faqFloat 4.2s ease-in-out infinite;
}
.faqsection .faq-visual-img{
    width: 100%;
    display: block;
    border-radius: 16px;
    object-fit: cover;
}
/* floating pink question badge overlapping the corner */
.faqsection .faq-visual-badge{
    position: absolute;
    top: -18px; left: -18px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6748d, #e05f8d);
    color: #fff; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 26px rgba(242,125,166,.45);
    z-index: 2;
    animation: faqFloat 3.2s ease-in-out infinite;
}
.faqsection .faq-visual-badge i{color: #fff;}
/* dotted teal accent */
.faqsection .faq-visual-dots{
    position: absolute;
    top: 16px; right: -26px;
    width: 72px; height: 72px;
    z-index: 0;
    background-image: radial-gradient(#2ec4b6 2px, transparent 2.5px);
    background-size: 14px 14px;
    opacity: .5;
}
/* View All CTA (same link, premium pill) */
/* FAQ button matches the section "View All" button (.sec-viewall-btn) design */
.faqsection .faq-viewall-btn{
    display: inline-flex; align-items: center; gap: 10px;
    background: #e6748d; color: #fff !important;
    font-size: 15px; font-weight: 600; letter-spacing: .5px;
    padding: 12px 38px; border-radius: 6px;
    text-decoration: none !important;
    box-shadow: none;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.faqsection .faq-viewall-btn i{color: #fff; transition: transform .3s ease;}
.faqsection .faq-viewall-btn:hover{
    background: #0d567a; transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13,86,122,.25);
    text-decoration: none !important;
}
.faqsection .faq-viewall-btn:hover i{transform: translateX(5px);}

/* ---- accordion items ---- */
.faqsection .faq-accordion{counter-reset: faq;}
.faqsection .faq-accordion .faq-item{
    background: #ffffff !important;
    border: 1px solid #e6eef1 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(13,86,122,.06);
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.faqsection .faq-accordion .faq-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(13,86,122,.13);
    border-color: #bfe7e2 !important;
}
/* open item: light theme-colored background + teal border (progressive enhancement) */
.faqsection .faq-accordion .faq-item:has(.collapse.show){
    background: #eef7f9 !important;
    border-color: #2ec4b6 !important;
    box-shadow: 0 20px 42px rgba(13,86,122,.17);
}
.faqsection .card-header{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.faqsection .card-header.faq-hover:hover{background: transparent !important;}
.faqsection .hdng{width: 100%;}
.faqsection #accordion .hdng a{
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    color: #0d567a !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1.45;
    text-decoration: none !important;
    position: relative;
    transition: color .3s ease, background .3s ease;
}
.faqsection .hdng-txt{flex: 1 1 auto;}
/* leading number badge */
.faqsection #accordion .hdng a::before{
    counter-increment: faq;
    content: counter(faq, decimal-leading-zero);
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #eaf4f6; color: #0d567a;
    font-size: 14px; font-weight: 800;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}
/* custom circular +/- icon (overrides legacy chevron) */
.faqsection #accordion .hdng a:after,
.faqsection #accordion .hdng a.collapsed:after{
    font-family: FontAwesome;
    float: none;
    flex: 0 0 auto;
    margin-left: auto;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: #e6748d; color: #fff;
    box-shadow: 0 6px 14px rgba(242,125,166,.4);
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.faqsection #accordion .hdng a.collapsed:after{content: '\f067';} /* plus (closed) */
.faqsection #accordion .hdng a:after{content: '\f068'; background: #0d567a; transform: rotate(180deg);} /* minus (open) */
/* open-state emphasis on the number badge */
.faqsection #accordion .hdng a:not(.collapsed)::before{background: #0d567a; color: #fff; transform: scale(1.05);}
/* hover on a closed row */
.faqsection #accordion .hdng a.collapsed:hover{background: #f6fbfc;}
.faqsection #accordion .hdng a.collapsed:hover::before{background: #0d567a; color: #fff;}
.faqsection #accordion .hdng a.collapsed:hover:after{background: #0d567a; transform: rotate(90deg);}

/* answer body — aligned under the question text */
.faqsection .card-body{padding: 0 22px 22px 76px;}
.faqsection .card-body, .faqsection .card-body p, .faqsection .card-body li, .faqsection .card-body span{
    color: #4a5a61 !important;
    font-size: 14.5px !important;
    font-weight: 400;
    line-height: 1.8;
}
/* gradient divider above the answer */
.faqsection .card-body::before{
    content: ''; display: block; width: 100%; height: 1px;
    background: linear-gradient(90deg, #2ec4b6, rgba(46,196,182,0));
    margin-bottom: 14px;
}
/* inner answer content reveal, synced with Bootstrap collapse */
.faqsection .collapse .card-body, .faqsection .collapsing .card-body{
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
}
.faqsection .collapse.show .card-body{opacity: 1; transform: none; transition-delay: .12s;}

/* staggered scroll-reveal for the rows */
.faqsection .faq-item.anim-fade-up:nth-child(2){transition-delay: .05s;}
.faqsection .faq-item.anim-fade-up:nth-child(3){transition-delay: .1s;}
.faqsection .faq-item.anim-fade-up:nth-child(4){transition-delay: .15s;}
.faqsection .faq-item.anim-fade-up:nth-child(5){transition-delay: .2s;}
.faqsection .faq-item.anim-fade-up:nth-child(6){transition-delay: .25s;}

@media (max-width: 767px){
.faqsection .faq-media{min-height: 320px;}
.faqsection .faq-media-content{padding: 55px 8%;}
.faqsection .faq-right{padding: 30px 16px 40px;}
.faqsection .faq-card{width: 100%; margin-left: 0; border-radius: 16px; padding: 32px 24px;}
.faqsection .sec-title{font-size: 28px;}
}
@media (max-width: 450px){
   .sec-title{font-size: 26px !important;} 
}
@media (max-width: 767px){
.faqsection #accordion .hdng a{font-size: 15px !important; padding: 16px 15px; gap: 12px;}
.faqsection #accordion .hdng a::before{width: 32px; height: 32px; font-size: 12px;}
.faqsection #accordion .hdng a:after, .faqsection #accordion .hdng a.collapsed:after{width: 30px; height: 30px;}
.faqsection .card-body{padding-left: 15px; padding-right: 15px;}
.faqsection .faq-mark{width: 78px; height: 78px; font-size: 34px;}
}

/* ---------- 6i. Photo & Video Gallery (matches Services cards) ---------- */
/* reuse .srv-card / .srv-img / .srv-body / .srv-title / .srv-desc from Services;
   these rules add the gallery-specific thumbnail, overlay and hover behaviour */
.photo_gallery_homepage .gallery-thumb,
.video_gallery_homepage .video-thumb{
    overflow: hidden;
    position: relative;
}
/* equal-height image area (same 220px as Services cards) */
.photo_gallery_homepage .gallery-thumb img,
.video_gallery_homepage .video-thumb img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
/* slight image zoom on hover */
.photo_gallery_homepage .gallery-card:hover .gallery-thumb img,
.video_gallery_homepage .video-card:hover .video-thumb img{transform: scale(1.08);}
/* equal-height body so all cards match regardless of title/description length */
.photo_gallery_homepage .gallery-card .srv-body{min-height: 62px; display: flex; align-items: center; justify-content: center;}
/* grid pages: the legacy .albumcss{height:100%} must not swallow the card —
   it pushed the title area below the card edge (the "cut titles" bug) */
.srv-grid .gallery-card .gallery-thumb.albumcss{height: auto; flex: 0 0 auto;}
.srv-grid .gallery-card .srv-body{flex: 1 1 auto;}
/* album title: STRICT single line with ellipsis — uses nowrap truncation
   instead of the -webkit-box clamp (which clips descenders like g/p/y) */
.photo_gallery_homepage .gallery-card .srv-title{
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.5 !important;
}
.video_gallery_homepage .video-card .srv-body{min-height: 84px;}

/* ---- Photo Gallery hover overlay (icon + View Photo) ---- */
.photo_gallery_homepage .gallery-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(13,86,122,.72);
    opacity: 0;
    transition: opacity .4s ease;
}
.photo_gallery_homepage .gallery-card:hover .gallery-overlay{opacity: 1;}
.photo_gallery_homepage .gallery-overlay-icon{
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #ffffff;
    color: #0d567a;
    font-size: 23px;
    display: flex; align-items: center; justify-content: center;
    transform: translateY(12px);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.photo_gallery_homepage .gallery-overlay-icon i{color: #0d567a;}
.photo_gallery_homepage .gallery-card:hover .gallery-overlay-icon{transform: translateY(0);}
.photo_gallery_homepage .gallery-overlay-text{
    color: #ffffff;
    font-size: 15px; font-weight: 600; letter-spacing: .5px;
    transform: translateY(12px);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1) .05s;
}
.photo_gallery_homepage .gallery-card:hover .gallery-overlay-text{transform: translateY(0);}
/* keep the legacy "More Photos" label hidden — only the new "View Photo" overlay shows */
.photo_gallery_homepage .allimgnums,
.photo_gallery_homepage .albumcss:hover .allimgnums{display: none !important;}

/* ---- Video Gallery hover overlay (enlarging play button) ---- */
/* override the legacy .videogallery gradient inside these thumbs only */
.video_gallery_homepage .video-thumb .videogallery{
    position: absolute;
    inset: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,86,122,.30);
    transition: background .4s ease;
    z-index: 2;
}
.video_gallery_homepage .video-card:hover .video-thumb .videogallery{background: rgba(13,86,122,.58);}
.video_gallery_homepage .video-play{
    display: flex; align-items: center; justify-content: center;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.video_gallery_homepage .video-play img{
    width: 62px; height: auto;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
.video_gallery_homepage .video-card:hover .video-play{transform: scale(1.2);}
/* pink title hover, consistent with Services */
.video_gallery_homepage .video-card a:hover .srv-title,
.photo_gallery_homepage .gallery-card a:hover .srv-title{color: #e6748d !important;}
.video_gallery_homepage .video-card .srv-desc{color: #1e1e1e !important;}
/* Photo & Video Gallery cards: remove the empty gap below the card title.
   The card body min-height (62px/84px) left large empty space under the one-line
   titles — drop it so the body wraps the title snugly. */
.photo_gallery_homepage .gallery-card .srv-body,
.video_gallery_homepage .video-card .srv-body{min-height: 0 !important;}
@media (max-width: 767px){
.photo_gallery_homepage .gallery-thumb img,
.video_gallery_homepage .video-thumb img{height: 200px;}
/* the .video-thumb img{height:200px} rule above also matched the play icon and stretched it —
   keep the play button proportional (correct aspect ratio) and centered on mobile.
   Higher specificity (.video-play img) wins without touching the poster thumbnail. */
.video_gallery_homepage .video-thumb .video-play img{
    width: clamp(42px, 13vw, 58px);
    height: auto;
}
/* one video card per row on mobile (full width); the .srv-card margin keeps the
   left/right + vertical spacing. Tablet/desktop grid (col-md-4 / col-lg-3) unchanged. */
.video_gallery_homepage .srv-grid > .col-6{
    flex: 0 0 100%;
    max-width: 100%;
}
/* Photo Gallery: one card per row on mobile + keep the image inside its card (no overflow).
   Tablet/desktop grid (col-md-4 / col-lg-3) is untouched. */
.photo_gallery_homepage .srv-grid > .col-6{
    flex: 0 0 100%;
    max-width: 100%;
}
.photo_gallery_homepage .srv-grid .gallery-card{width: 100%; max-width: 100%;}
.photo_gallery_homepage .srv-grid .gallery-thumb{max-width: 100%; overflow: hidden;}
.photo_gallery_homepage .srv-grid .gallery-thumb img{
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}
}

/* ---------- 7. Card Hover Lift ---------- */
.post, .blog, .doccard, .treatments-card, .casestudies, .medevents, .wreviewpeople{
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, background .4s ease;
}
.post:hover, .blog:hover, .doccard:hover, .treatments-card:hover, .casestudies:hover, .medevents:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
.faqsection .card{transition: box-shadow .3s ease;}
.faqsection .card:hover{box-shadow: 0 10px 24px rgba(0,0,0,.08);}
.faqsection .card-header{transition: background .3s ease;}

/* ---------- 8. Button Shine + Lift ---------- */
.btnprimary, .btnsecondary, .btnthird, .btnfour{
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btnprimary::before, .btnsecondary::before, .btnthird::before, .btnfour::before{
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
    transform: skewX(-24deg);
    transition: left .65s ease;
    pointer-events: none;
}
.btnprimary:hover::before, .btnsecondary:hover::before, .btnthird:hover::before, .btnfour:hover::before{left: 130%;}
.btnprimary:hover, .btnsecondary:hover, .btnthird:hover, .btnfour:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.btnprimary:active, .btnsecondary:active, .btnthird:active, .btnfour:active{
    transform: translateY(0) scale(.97);
}

/* ---------- 9. Responsive + Accessibility ---------- */
@media (max-width: 1024px){
.brand-tagline{max-width: 320px;}
}
@media (max-width: 767px){
.brand-tagline{font-size: 10.5px; max-width: 220px;}
.floating-contact{left: 12px; bottom: 16px; gap: 10px;}
.fc-btn{width: 44px; height: 44px; font-size: 17px;}
.floating-bookapp{font-size: 12px; padding: 15px 8px;}
#demo .carousel-indicators{right: 12px; bottom: 14px;}
#demo .carousel-indicators li{height: 16px;}
#demo .carousel-indicators li.active{height: 26px;}
}
/* ---------- 10. Book Appointment CTA (premium redesign) ----------
   Layout + motion — colors come from the :root theme tokens */
.cta-app{
    position: relative;
    overflow: hidden;
}
/* generous section spacing (utilities .pt-50/.pb-40/.py-4 use !important) */
section.bookappfooter.cta-app{
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}
.cta-app .cta-app__inner{
    position: relative;
    z-index: 2;
    padding: 0 30px !important;
}
/* 7 / 5 split on desktop */
@media (min-width: 992px){
.cta-app .col-lg-8{flex: 0 0 58.333%; max-width: 58.333%;}
.cta-app .col-lg-4{flex: 0 0 41.667%; max-width: 41.667%;}
}

/* slow, seamless background marquee — kept as a subtle watermark */
@keyframes ctaMarquee{
    from{transform: translateX(0);}
    to{transform: translateX(-50%);}
}
.cta-app__marquee{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 0;
}
.cta-app__marquee-track{
    display: inline-flex;
    width: max-content;
    animation: ctaMarquee 60s linear infinite;
}
.cta-app__marquee-group{
    display: inline-flex;
    align-items: center;
    font-size: 108px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .12; /* lightly visible tone-on-tone watermark over the pink band */
}
.cta-app__marquee-group .cta-app__dot{
    margin: 0 32px;
    font-size: 44px;
    line-height: 1;
}

/* two decorative circles only, very quiet */
@keyframes ctaFloat{
    0%, 100%{transform: translateY(0) rotate(0deg);}
    50%{transform: translateY(-24px) rotate(8deg);}
}
.cta-app__shape{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.cta-app__shape--1{width: 220px; height: 220px; top: -90px; right: 8%; animation: ctaFloat 9s ease-in-out infinite;}
.cta-app__shape--2{width: 120px; height: 120px; bottom: -50px; left: 5%; animation: ctaFloat 11s 1.2s ease-in-out infinite;}
.cta-app__shape--3{display: none;}

/* content — small accent label above a balanced heading */
p.cta-app__title::before{
    content: "Let's Get Started //";
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--theme-footer-text); /* white label on the solid pink band */
    margin-bottom: 18px;
}
p.cta-app__title{
    font-size: clamp(28px, 3.2vw, 42px) !important; /* overrides .fs-65 */
    line-height: 1.3 !important;                    /* overrides .lh-60 */
    font-weight: 800;
    max-width: 620px;
    margin-bottom: 16px;
}
.cta-app__desc{
    font-size: 18px;
    line-height: 1.8;
    max-width: 500px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* actions: horizontal button pair, vertically centered against the text */
.cta-app__actions{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.cta-app__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 40px;
    border-radius: 50px !important;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    text-decoration: none !important;
}
.cta-app__btn i{transition: transform .35s ease;}
.cta-app__btn:hover i{transform: translateX(6px);}
.cta-app__btn--ghost{
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cta-app__btn--ghost:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.15);
    text-decoration: none;
}

@media (min-width: 992px){
.cta-app__actions{justify-content: flex-end;} /* button pair sits right in the 5-col */
}
@media (max-width: 991px){
.cta-app__actions{margin-top: 26px;}
}
@media (max-width: 767px){
.cta-app .cta-app__inner{padding: 0 6px !important;}
.cta-app .col-lg-8, .cta-app .cta-app__title, .cta-app__desc{text-align: center;}
.cta-app__desc{margin-left: auto; margin-right: auto;}
.cta-app__actions{flex-direction: column; align-items: stretch; gap: 14px;}
.cta-app__btn{width: 100%;}
}

/* ---------- 11. Redesigned Footer (.ftr) ----------
   Colors come ONLY from the :root tokens emitted by layout/theme_css.php
   (--theme-accent-primary / --theme-accent-secondary / --theme-footer-text ...) */
footer.ftr{
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--theme-accent-secondary) 0%, var(--theme-accent-secondary-deep) 100%);
}
/* world-map backdrop: white-on-transparent dotted map, relative to this CSS file */
footer.ftr::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../img/footer-map.png') center center no-repeat;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .9;
    pointer-events: none;
}
footer.ftr .ftr__inner{position: relative; z-index: 1;}

.ftr__col{margin-bottom: 34px;}
.ftr__heading{
    font-size: 26px;
    font-weight: 800;
    color: var(--theme-accent-primary);
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 26px;
}
.ftr__heading::after{
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: var(--theme-accent-primary);
    opacity: .85;
}
.ftr__about, .ftr__about p, .ftr__about span{
    color: var(--theme-footer-text);
    font-size: 16px;
    line-height: 1.9;
}

/* social icons — equal circles with hover animation */
.ftr__social{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 26px 0 0;
}
.ftr__social li{list-style: none;}
.ftr__social li a{
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--theme-accent-primary);
    color: var(--theme-footer-text);
    font-size: 16px;
    text-decoration: none;
    transition: all .3s ease;
}
.ftr__social li a:hover{
    background: var(--theme-footer-text);
    color: var(--theme-accent-secondary);
    transform: translateY(-4px);
    text-decoration: none;
}

/* menu columns */
.ftr__menu{margin: 0; padding: 0;}
.ftr__menu li{list-style: none; margin-bottom: 14px;}
.ftr__menu li a{
    color: var(--theme-footer-text);
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    line-height: 1.5;
    transition: all .25s ease;
}
.ftr__menu li a::before{
    content: '';
    width: 7px; height: 7px;
    flex-shrink: 0;
    background: var(--theme-accent-primary);
}
.ftr__menu li a:hover{
    color: var(--theme-accent-primary);
    transform: translateX(5px);
    text-decoration: none;
}

/* contact column items */
.ftr__ci{display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px;}
.ftr__ci-icon{
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--theme-accent-primary);
    color: var(--theme-accent-primary);
    font-size: 15px;
    transition: all .3s ease;
}
.ftr__ci:hover .ftr__ci-icon{
    background: var(--theme-footer-text);
    border-color: var(--theme-footer-text);
    color: var(--theme-accent-secondary);
}
.ftr__ci-head{
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-footer-heading);
    margin: 0 0 4px;
}
.ftr__ci-val, .ftr__ci-val a{
    color: var(--theme-footer-text);
    font-size: 15px;
    line-height: 1.7;
    text-decoration: none;
}
.ftr__ci-val a:hover{color: var(--theme-accent-primary); text-decoration: none;}

/* divider + bottom contact strip */
.ftr__divider{
    border: 0;
    border-top: 1px solid var(--theme-footer-text);
    opacity: .25;
    margin: 14px 0 44px;
}
.ftr__strip-item{display: flex; align-items: flex-start; gap: 16px; justify-content: center; margin-bottom: 26px;}
.ftr__strip-icon{
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--theme-accent-primary);
    color: var(--theme-accent-primary);
    font-size: 16px;
    transition: all .3s ease;
}
.ftr__strip-item:hover .ftr__strip-icon{
    background: var(--theme-footer-text);
    border-color: var(--theme-footer-text);
    color: var(--theme-accent-secondary);
}
.ftr__strip-head{
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-footer-heading);
    margin: 0 0 4px;
}

/* bottom copyright bar */
.ftr__copy{
    background: var(--theme-accent-primary);
    padding: 16px 0;
}
.ftr__copy p,
.ftr__copy p span,
.ftr__copy p a,
.ftr__copy p strong{
    color: var(--theme-footer-text) !important;
    font-size: 14px;
    margin: 0;
}

@media (max-width: 991px){
.ftr__strip-item{justify-content: flex-start;}
}
@media (max-width: 767px){
.ftr__heading{font-size: 22px;}
.ftr__strip-head{font-size: 18px;}
/* hide the duplicate bottom contact strip on mobile only — the right-side Contact Us
   column stays visible; the strip reappears on tablet/desktop unchanged */
.ftr__strip{display: none !important;}
}

/* ---------- 12. Book Appointment CTA colors (.cta-app) ----------
   Clean solid premium pink band (client-specified #e6748d, no gradients). */
section.bookappfooter.cta-app{
    background: #e6748d;
}
.cta-app__marquee-group, .cta-app__marquee-group .cta-app__dot{
    color: var(--theme-footer-text);
}
/* subtle corner circles only — very low opacity, never over the text */
.cta-app__shape{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}
p.cta-app__title{
    color: var(--theme-footer-text);
}
p.cta-app__desc{
    color: var(--theme-footer-text);
    opacity: .9;
}
/* Book Appointment: white pill, pink text -> website blue with white on hover
   (shine + lift hover behaviour comes from section 8 above) */
.cta-app .btnsecondary{
    background: var(--theme-footer-text) !important;
    color: #e6748d !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.cta-app .btnsecondary:hover{
    background: var(--theme-accent-secondary) !important;
    color: var(--theme-footer-text) !important;
    border: 0 !important;
}
/* Contact Us: transparent, 2px white outline -> white with pink text on hover */
.cta-app__btn--ghost, a.cta-app__btn--ghost{
    border: 2px solid var(--theme-footer-text);
    color: var(--theme-footer-text);
    background: transparent;
}
.cta-app__btn--ghost:hover, a.cta-app__btn--ghost:hover{
    background: var(--theme-footer-text);
    color: #e6748d;
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

/* ---------- 13. About page — index parity + Specialties card grid ----------
   Colors consume the :root theme tokens from layout/theme_css.php */
/* the About page keeps its SEO <h1> where the index About uses <h2> — same look */
.about_homepage h1{
    color: var(--theme-accent-secondary) !important;
    font-weight: 800;
    margin-bottom: 26px;
}
/* airier reading rhythm for the About description blocks */
.about_homepage div.text-lightt p,
.about_homepage div.mb-30.fs-18 p,
.about_homepage .about-morecontent p{
    line-height: 24px;
    margin-bottom: 14px;
}
.about_homepage .about-morecontent, .about_homepage .about-morecontent p{
    color: #1e1e1e !important;
    font-size: 14px !important;
    font-weight: 400;
    text-align: justify;
}

/* ---------- Consistent CMS body typography for inner detail pages ----------
   Reference: About Us content (.about_homepage div.mb-30.fs-18) — 14px / weight 400 /
   line-height 24px / #1e1e1e / 14px paragraph spacing. Applied via .cms-typo (and the
   existing .MoreBlog wrapper) to the CMS long-description areas on bloginfo, newsinfo,
   eventinfo, doctorsinfo and departmentsinfo so body text reads consistently sitewide. */
.cms-typo, .cms-typo p, .cms-typo li, .cms-typo span, .cms-typo td, .cms-typo div,
.MoreBlog, .MoreBlog p, .MoreBlog li, .MoreBlog span, .MoreBlog div{
    color: #1e1e1e !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 24px;
}
.cms-typo p, .MoreBlog p{margin: 0 0 14px;}
.cms-typo p:last-child, .MoreBlog p:last-child{margin-bottom: 0;}
.cms-typo ul, .cms-typo ol, .MoreBlog ul, .MoreBlog ol{margin: 0 0 14px; padding-left: 22px;}
.cms-typo li, .MoreBlog li{margin: 0 0 8px;}
.cms-typo strong, .cms-typo b, .MoreBlog strong, .MoreBlog b{font-weight: 700 !important;}
.cms-typo em, .cms-typo i, .MoreBlog em, .MoreBlog i{font-style: italic;}
.cms-typo h1, .cms-typo h2, .cms-typo h3, .cms-typo h4, .cms-typo h5, .cms-typo h6,
.MoreBlog h1, .MoreBlog h2, .MoreBlog h3, .MoreBlog h4, .MoreBlog h5, .MoreBlog h6{
    color: #1e1e1e !important;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}
.cms-typo h1, .MoreBlog h1{font-size: 26px !important;}
.cms-typo h2, .MoreBlog h2{font-size: 22px !important;}
.cms-typo h3, .MoreBlog h3{font-size: 20px !important;}
.cms-typo h4, .MoreBlog h4{font-size: 18px !important;}
.cms-typo h5, .MoreBlog h5{font-size: 16px !important;}
.cms-typo h6, .MoreBlog h6{font-size: 14px !important;}

/* ---------- Blog Info: modern circular share icons (theme colors) ----------
   Separated from the content above with a top border + spacing. UI only. */
.blog-share{
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid #e6eef1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.blog-share strong{
    color: var(--theme-accent-secondary);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.blog-share > span{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-share a{
    width: 42px;
    height: 42px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent-secondary) !important;
    color: #ffffff !important;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(13,86,122,.18);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.blog-share a:hover{
    background: var(--theme-accent-primary) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.blog-share a i{color: #ffffff !important; margin: 0 !important;}

/* Events Info: keep the left description column sticky while scrolling (desktop/tablet).
   align-self:flex-start lets the flex (.row) child size to content so sticky can engage. */
@media (min-width: 768px){
.eventinfo-sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    align-self: flex-start;
    z-index: 5;
}
}

/* statistics strip: clear breathing room from neighbouring sections */
.stats-strip{padding: 38px 0 56px;}

/* why-choose: softer overlap + airier card and typography */
.choose_homepage .wc-card{
    width: calc(100% + 45px);
    margin-left: -45px;
    padding: 60px 54px;
}
.choose_homepage .choosetickbefore p{line-height: 1.9;}
.choose_homepage .choosetickbefore ul li{margin: 0 0 16px !important;}

/* Specialties: fixed-height cards — content scrolls inside, cards never grow */
section.spc-section{
    padding-top: 64px !important;   /* overrides .pt-50 */
    padding-bottom: 72px !important;/* overrides .pb-50 */
}
.spc-row{margin-top: 6px;}
.spc-row > div{margin-bottom: 30px;}
.spc-card{
    display: flex;
    align-items: stretch;
    gap: 18px;
    width: 100%;
    height: 280px;              /* fixed — never changes with content */
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e9eef1;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 8px 24px rgba(0,0,0,.07);
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.spc-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
    border-color: var(--theme-accent-primary);
}
.spc-icon{
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--theme-accent-secondary);
    color: var(--theme-footer-text);
    font-size: 18px;
    transition: background .35s ease, transform .35s ease;
}
.spc-icon i{color: inherit;}
.spc-card:hover .spc-icon{
    background: var(--theme-accent-primary);
    transform: scale(1.06) rotate(-6deg);
}
.spc-body{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.spc-title{
    flex: 0 0 auto;             /* title pinned at the top */
    color: var(--theme-accent-secondary) !important;
    font-size: 18px;
    font-weight: 800 !important;
    line-height: 1.35;
    margin: 2px 0 10px;
}
.spc-value{
    flex: 1 1 auto;
    overflow-y: auto;           /* only the description scrolls */
    padding-right: 8px;
    color: #1e1e1e !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}
/* themed scrollbar for the card content */
.spc-value::-webkit-scrollbar{width: 4px;}
.spc-value::-webkit-scrollbar-track{background: rgba(0,0,0,.06); border-radius: 10px;}
.spc-value::-webkit-scrollbar-thumb{background: var(--theme-accent-primary); border-radius: 10px;}
.spc-value{scrollbar-width: thin; scrollbar-color: var(--theme-accent-primary) rgba(0,0,0,.06);}
/* CMS lists inside the Specialties card: drop the default ~40px indent so items align
   with the rest of the card content (scoped to .spc-value — other site lists untouched) */
.spc-value ul, .spc-value ol{margin: 0; padding-left: 18px; list-style-position: outside;}
.spc-value li{margin: 0 0 4px;}
.spc-value ul:last-child, .spc-value ol:last-child, .spc-value li:last-child{margin-bottom: 0;}
@media (max-width: 767px){
.spc-card{padding: 20px; height: 200px;}
/* re-assert the mobile card reset (the wider base rule above is later in the cascade) */
.choose_homepage .wc-card{width: 100%; margin-left: 0; padding: 30px 22px;}
}

/* ---------- 14. Services inner page grid (reuses the index .srv-card design) ----------
   Equal-height cards per row; Read More pinned to the bottom of every card.
   Column padding is zeroed so the gap between cards comes only from the
   card's own 12px side margins — the same 24px gap as the index slider. */
.srv-grid{margin-left: -12px; margin-right: -12px;}
.srv-grid > div{padding-left: 0; padding-right: 0;}
.srv-grid .srv-card{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.srv-grid .srv-card > a{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.srv-grid .srv-body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.srv-grid .srv-readmore{margin-top: auto;}
/* events page: ev-card fills its grid column (index look, equal heights) */
.srv-grid .ev-card{width: 100%;}
/* treatments/doctors pages: index cards fill their grid columns too */
.srv-grid .dept-card{width: 100%;}
.srv-grid .dr-card{width: 100%;}
/* dark dept-style sections: visible description line under the sec-head */
.dept_homepage .sec-head h2{color: rgba(255,255,255,.85) !important;}
/* awards page: themed scrollbar on the long-description area (overrides the amber default) */
.awards_homepage .peoplereview::-webkit-scrollbar-thumb{background: var(--theme-accent-primary);}

/* ---------- Awards inner page: premium horizontal cards (one per row, col-md-12) ---------- */
.awards_homepage .awards-hcard{
    background: #ffffff;
    border: 1px solid #eef2f4;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(13,86,122,.08);
    margin-bottom: 30px;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.awards_homepage .awards-hcard:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(13,86,122,.16);
    border-color: #d9ecef;
}
/* left: award image */
.awards-hcard__media{position: relative; overflow: hidden; min-height: 260px;}
.awards-hcard__media img{
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.awards-hcard:hover .awards-hcard__media img{transform: scale(1.05);}
/* right: content, vertically centered with comfortable inner padding */
.awards-hcard__body{
    padding: 36px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Year → themed pill */
.awards-hcard .srv-date{
    display: inline-block;
    align-self: flex-start;
    color: var(--theme-accent-primary) !important;
    background: rgba(230,116,141,.10);
    border-radius: 30px;
    padding: 5px 16px;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}
.awards-hcard .srv-date span{color: var(--theme-accent-primary) !important; font-weight: 700 !important;}
/* Award title */
.awards-hcard .awardtitle{
    color: var(--theme-accent-secondary) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    margin-bottom: 16px !important;
}
/* meta rows (Awarded By / Awarded At) — About Us body typography, accent label */
.awards-hcard .srv-desc{
    color: #1e1e1e !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 8px !important;
}
.awards-hcard .srv-desc .fw-600{color: var(--theme-accent-secondary) !important; font-weight: 700 !important;}
/* description — typography inherited from About Us (.cms-typo); layout only here */
.awards-hcard__desc{
    margin-top: 18px;
    padding-top: 18px;
    padding-right: 8px;
    border-top: 1px solid #eef2f4;
    height: auto !important;
    max-height: 240px;
    overflow-y: auto;
}
@media (max-width: 767px){
    .awards-hcard__media{min-height: 0;}
    .awards-hcard__media img{min-height: 0; height: 220px;}
    .awards-hcard__body{padding: 24px 22px;}
    .awards-hcard .awardtitle{font-size: 21px !important;}
}

/* ---------- About Us content lists: themed check icon (same as other content pages) ----------
   Applies to every CMS content wrapper in the About Us section (short content, main content,
   and more content) so all <ul><li> items get the same icon/spacing/size/color. */
.about_homepage div.mb-30.fs-18 ul,
.about_homepage .text-lightt ul,
.about_homepage .about-morecontent ul{list-style: none; padding-left: 2px; margin-bottom: 0;}
.about_homepage div.mb-30.fs-18 ul li,
.about_homepage .text-lightt ul li,
.about_homepage .about-morecontent ul li{position: relative; padding-left: 28px;}
.about_homepage div.mb-30.fs-18 ul li::before,
.about_homepage .text-lightt ul li::before,
.about_homepage .about-morecontent ul li::before{
    content: "\f058";                 /* Font Awesome check-circle */
    font-family: "FontAwesome";
    font-weight: normal;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--theme-accent-primary);
    font-size: 1em;
    line-height: inherit;
}

/* ---------- 15. Doctors section (premium redesign) ----------
   Colors consume the :root theme tokens from layout/theme_css.php */
/* custom floating arrows replace Owl's default nav here */
.doctors .owl-buttons{display: none !important;}

.dr-card{
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    margin: 10px 12px 28px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.dr-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(0,0,0,.14);
}
.dr-card a{text-decoration: none !important;}

/* portrait: slow zoom + soft depth gradient on hover */
.dr-photo{position: relative; overflow: hidden;}
.dr-photo::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22));
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.dr-card:hover .dr-photo::after{opacity: 1;}
.dr-img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.dr-card:hover .dr-img{transform: scale(1.07);}

/* body: specialization chip overlapping the photo, name, blurb, link */
.dr-body{padding: 8px 24px 26px;}
.dr-spec{
    display: inline-block;
    background: var(--theme-accent-primary);
    color: var(--theme-footer-text) !important;
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    padding: 9px 18px;
    border-radius: 30px;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
    position: relative;
    margin: -26px 0 14px;   /* chip straddles the photo edge */
    max-width: 92%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-spec:empty{display: none;}
.dr-name{
    color: var(--theme-accent-secondary) !important;
    font-size: 19px;
    font-weight: 800 !important;
    line-height: 1.4;
    margin-bottom: 8px;
    transition: color .3s ease;
}
.dr-card a:hover .dr-name{color: var(--theme-accent-primary) !important;}
.dr-desc{
    color: #1e1e1e !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    min-height: 48px;
    margin-bottom: 14px;
}
.dr-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-accent-primary) !important;
    font-size: 15px;
    font-weight: 600;
}
.dr-link i{color: inherit; transition: transform .35s ease;}
.dr-link:hover i{transform: translateX(5px);}

@media (max-width: 767px){
.dr-img{height: 260px;}
.dr-body{padding: 8px 18px 22px;}
}

/* ---------- 16. Departments section (premium dark redesign) ----------
   Colors consume the :root theme tokens from layout/theme_css.php */
.dept_homepage .owl-buttons{display: none !important;}

/* deep teal gradient with soft corner glows (overrides .bg-darkk's !important black) */
section.dept_homepage.bg-darkk{
    background:
        radial-gradient(circle at 10% -10%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 42%),
        radial-gradient(circle at 92% 110%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 40%),
        linear-gradient(180deg, var(--theme-accent-secondary) 0%, var(--theme-accent-secondary-deep) 100%) !important;
}
/* light heading on the dark surface (sec-sub stays accent pink) */
.dept_homepage .sec-title{color: var(--theme-footer-text) !important;}

/* glass card — FIXED height so every card in a row aligns perfectly,
   regardless of content length; content areas have fixed slots below */
.dept-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 340px;              /* fixed — never grows or shrinks with content */
    overflow: hidden;
    margin: 10px 12px 28px;
    padding: 34px 26px 28px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
.dept-card:hover{
    transform: translateY(-8px);
    background: rgba(255,255,255,.09);
    border-color: var(--theme-accent-primary);
    box-shadow: 0 22px 44px rgba(0,0,0,.35);
}
.dept-card a{text-decoration: none !important;}

/* circular icon medallion on a white plate with an accent ring */
.dept-icon{
    width: 92px; height: 92px;
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 4px;
    background: var(--theme-footer-text);
    border: 2px solid var(--theme-accent-primary);
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.dept-icon img{
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.dept-card:hover .dept-icon{transform: translateY(-4px) scale(1.06);}

.dept-name{
    color: var(--theme-footer-text) !important;
    font-size: 19px;
    font-weight: 800 !important;
    line-height: 1.4;
    min-height: 27px;           /* fixed title slot — one clamped line */
    flex: 0 0 auto;
    margin-bottom: 12px;
    transition: color .3s ease;
}
.dept-card a:hover .dept-name{color: var(--theme-accent-primary) !important;}

.dept-desc, .dept-desc p, .dept-desc span, .dept-desc li{
    color: rgba(255,255,255,.85) !important;
    font-size: 14px !important;
    line-height: 24px;
}
.dept-desc{
    height: 72px;               /* fixed description slot — 3 lines of 24px */
    overflow: hidden;
    flex: 0 0 auto;
    margin-bottom: 16px;
}
.dept-desc p{margin-bottom: 8px;}

/* Explore link pinned to the card bottom */
.dept-more{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-accent-primary) !important;
    font-size: 15px;
    font-weight: 600;
}
.dept-more i{color: inherit; transition: transform .35s ease;}
.dept-more:hover i{transform: translateX(5px);}

@media (max-width: 767px){
.dept-card{height: 326px; padding: 28px 20px 24px;}
}

/* ---------- 17. Press Release lightbox (.prlb) ----------
   One shared fullscreen modal; colors consume the :root theme tokens */
body.prlb-lock{overflow: hidden;}

.prlb{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.85);
}
.prlb--open{display: flex; animation: prlbFadeIn .3s ease both;}
.prlb--closing{animation: prlbFadeOut .28s ease both;}
@keyframes prlbFadeIn{from{opacity: 0;} to{opacity: 1;}}
@keyframes prlbFadeOut{from{opacity: 1;} to{opacity: 0;}}

/* centered stage — image scales to fit the viewport, aspect ratio preserved */
.prlb__stage{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 96px;
}
.prlb__img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.prlb__img--in{animation: prlbZoom .35s cubic-bezier(.22,.61,.36,1) both;}
@keyframes prlbZoom{
    from{opacity: 0; transform: scale(.88);}
    to{opacity: 1; transform: scale(1);}
}

/* close button — always visible, theme color on hover */
.prlb__close{
    position: absolute;
    top: 18px; right: 22px;
    z-index: 2;
    width: 52px; height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 46px;
    line-height: 1;
    cursor: pointer;
    transition: color .3s ease, transform .3s ease;
}
.prlb__close:hover{color: var(--theme-accent-primary); transform: rotate(90deg);}
.prlb__close:focus{outline: none;}

/* circular blurred prev/next arrows, vertically centered */
.prlb__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 54px; height: 54px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.prlb__nav i{color: inherit;}
.prlb__prev{left: 22px;}
.prlb__next{right: 22px;}
.prlb__nav:hover{
    background: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
    transform: translateY(-50%) scale(1.08);
}
.prlb__nav:focus{outline: none;}

@media (max-width: 767px){
.prlb__stage{padding: 64px 16px;}
.prlb__nav{width: 44px; height: 44px; font-size: 20px;}
.prlb__prev{left: 10px;}
.prlb__next{right: 10px;}
.prlb__close{top: 8px; right: 10px; font-size: 38px;}
}

/* ---------- 18. Testimonials page (index tm-card parity + review form) ----------
   Colors consume the :root theme tokens from layout/theme_css.php */
/* cards fill their columns; spacing comes from the grid, not the slider margins */
.testipg .tm-card{margin: 0; width: 100%;}

/* media variant: premium video testimonial card — matches the text testimonial cards */
.testipg .col-md-4:has(.tm-card--media){display: flex;}
.testipg .tm-card--media{
    position: relative;
    padding: 0;
    display: block;
    width: 100%;
    height: auto !important;    /* override the inline .localvid height:240px so the flex row can stretch it */
    min-height: 360px;         /* same floor as the text .tm-card */
    background: #0d567a;
    overflow: hidden;
}
/* video fills the whole frame */
.testipg .tm-card--media video{
    position: absolute; inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 0;
}
/* soft gradient overlay for legibility (deepens on hover) */
.testipg .tm-card--media .videogallery{
    position: absolute; inset: 0;
    padding: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(13,86,122,.10) 0%, rgba(6,42,60,.10) 42%, rgba(6,42,60,.82) 100%);
    transition: background .4s ease;
    z-index: 2;
}
.testipg .tm-card--media:hover .videogallery{
    background: linear-gradient(180deg, rgba(13,86,122,.22) 0%, rgba(6,42,60,.34) 42%, rgba(6,42,60,.9) 100%);
}
/* centered circular play button */
.testipg .tm-card--media .btnandtitle{position: static;}
.testipg .tm-card--media .playButton{
    position: absolute;
    top: 46%; left: 50%;
    transform: translate(-50%, -50%);
    width: 66px !important; height: 66px;
    padding: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    cursor: pointer;
    z-index: 4;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.testipg .tm-card--media:hover .playButton{
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
/* reviewer name near the bottom */
.testipg .tm-card--media .btnandtitle span{
    position: absolute;
    left: 18px; right: 18px; bottom: 46px;
    z-index: 3;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
/* rating row pinned to the bottom */
.testipg .tm-card--media .testimonial-stars{
    position: absolute;
    left: 18px; right: 18px; bottom: 16px;
    z-index: 3;
    padding: 0 !important;
    margin: 0 !important;
}
/* whole video card links to the dedicated video info page (modal removed) */
.testipg .tm-card--media .tm-media-link{
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
}
/* keep the rating stars gold — the tm-card white-span rule would wash them out */
.testipg .tm-card .star.full{color: #FFD700 !important;}
.testipg .tm-card .star.empty{color: #cccccc !important;}
.testipg .tm-card .rating-number{color: rgba(255,255,255,.85) !important;}

/* ---- Write a Review form ---- */
section.writereviewtestimonial.bg-lapp{
    background: #f2f7f9 !important;   /* soft neutral replaces the amber band */
    padding-top: 64px !important;
    padding-bottom: 72px !important;
}
.writereviewtestimonial .wr-card{
    max-width: 100%;    /* full available width (col-md-12) */
    float: none;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e9eef1;
    border-radius: 22px;
    padding: 44px 46px 40px;
    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}
.writereviewtestimonial .form-group{margin-bottom: 22px;}
.writereviewtestimonial label{
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--theme-accent-secondary);
    margin-bottom: 8px;
}
.writereviewtestimonial .form-control{
    background: #f7fafb !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 12px !important;
    padding: 12px 16px;
    height: 48px;               /* one consistent control height across the form */
    font-size: 15px;
    color: #1e1e1e;
    box-shadow: none;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.writereviewtestimonial .form-control:focus{
    background: #ffffff !important;
    border-color: var(--theme-accent-primary) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    outline: none;
}
.writereviewtestimonial textarea.form-control{height: auto; min-height: 130px; resize: vertical;}
/* jQuery-validate error messages */
.writereviewtestimonial label.error{
    color: #e8413c;
    font-size: 12.5px;
    font-weight: 600;
    margin: 6px 0 0;
}
.writereviewtestimonial .form-control.error{border-color: #e8413c !important;}
/* custom file upload — one unified 48px control (flex kills the float misalignment) */
.writereviewtestimonial .file-upload-wrapper{
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
}
.writereviewtestimonial .file-upload-input{
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    height: 48px;               /* identical to every other .form-control */
    background: #f7fafb;
    border: 1px solid #e2e9ee;
    border-right: 0;
    border-radius: 12px 0 0 12px !important; /* beats bootstrap .rounded-left */
    padding: 0 16px;
    font-size: 15px;
    color: #1e1e1e;
}
.writereviewtestimonial .file-upload-input:focus{outline: none; border-color: var(--theme-accent-primary);}
.writereviewtestimonial .file-upload-button{
    flex: 0 0 auto;
    float: none;
    width: 110px;
    height: 48px;               /* same height, vertically flush with the input */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent-secondary);
    color: #ffffff;
    border: 0;
    border-radius: 0 12px 12px 0 !important; /* beats bootstrap .rounded-right */
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease;
}
.writereviewtestimonial .file-upload-button:hover{background: var(--theme-accent-primary);}
.writereviewtestimonial .custom-file-upload{width: 100%;}
/* submit — accent skin over the existing btnsecondary (same language as the CTA) */
.writereviewtestimonial .btnsecondary{
    background: var(--theme-accent-primary) !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 14px 46px;
    font-size: 16px;
    letter-spacing: .4px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.writereviewtestimonial .btnsecondary:hover{
    background: var(--theme-accent-secondary) !important;
    color: #ffffff !important;
    border: 0 !important;
}
/* Blog Info comment form submit (btnprimary) — same accent skin as the testimonials
   submit. Scoped with .btnprimary so the testimonials submit (.btnsecondary) is untouched. */
.writereviewtestimonial .btn_submit.btnprimary{
    background: var(--theme-accent-primary) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 30px !important;
    padding: 14px 46px !important;
    font-size: 16px;
    letter-spacing: .4px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.writereviewtestimonial .btn_submit.btnprimary:hover{
    background: var(--theme-accent-secondary) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}
@media (max-width: 767px){
.writereviewtestimonial .wr-card{padding: 28px 20px 26px; border-radius: 16px;}
}

/* ---------- 19. Service detail page (.svcinfo) ----------
   Colors consume the :root theme tokens from layout/theme_css.php */
.svcinfo-main{padding-right: 34px;}

/* hero image in a fine double accent frame (reference style) */
.svcinfo-hero{
    border: 2px solid var(--theme-accent-primary);
    border-radius: 0px;
    padding: 2px;
    background: #ffffff;
}
.svcinfo-hero img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    margin: 0; /* beats .blogarea img {margin:20px 0} inside the frame */
    border: 1px solid var(--theme-accent-primary);
    border-radius: 5px;
}

/* big accent title with the site's // signature */
.svcinfo-title{
    color: var(--theme-accent-primary) !important;
    font-size: 30px;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 28px 0 16px;
}
.svcinfo-title::after{content: ' //'; font-style: italic; font-weight: 800;}

/* readable long-form content */
.svcinfo-lead, .svcinfo-lead p{
    color: #1e1e1e !important;
    font-size: 16px;
    line-height: 1.9;
}
.svcinfo-content p, .svcinfo-content li{
    color: #1e1e1e;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 14px;
}
.svcinfo-content h2, .svcinfo-content h3, .svcinfo-content h4{
    color: var(--theme-accent-secondary) !important;
    font-weight: 800;
    margin: 26px 0 12px;
}
.svcinfo-content img{max-width: 100%; border-radius: 10px; margin: 14px 0;}
.svcinfo-cta{border-radius: 10px; margin-top: 10px;}

/* ---- More Services sidebar: accent header + stacked teal rows ---- */
.svc-side{
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.svc-side__head{
    background: var(--theme-accent-primary);
    color: #ffffff !important;
    font-size: 24px;
    font-weight: 800 !important;
    padding: 22px 26px;
    margin: 0 !important; /* beats .blogarea h2 {margin:20px 0} on the blog detail page */
}
.svc-side__list{margin: 0; padding: 0; max-height: 480px; overflow-y: auto;}
.svc-side__list::-webkit-scrollbar{width: 4px;}
.svc-side__list::-webkit-scrollbar-thumb{background: var(--theme-accent-primary); border-radius: 10px;}
.svc-side__list li{list-style: none;}
.svc-side__list a, .svc-side__plain{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--theme-accent-secondary);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    padding: 17px 26px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    text-decoration: none !important;
    transition: background .3s ease, padding-left .3s ease;
}
.svc-side__list li:last-child a, .svc-side__list li:last-child .svc-side__plain{border-bottom: 0;}
.svc-side__txt{
    color: inherit !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.svc-side__list a i{
    color: #ffffff;
    font-size: 13px;
    width: 22px; height: 22px;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.svc-side__list a:hover{
    background: var(--theme-accent-primary);
    padding-left: 34px;
}
.svc-side__list a:hover i{background: rgba(255,255,255,.18); border-color: #ffffff; transform: translateX(2px);}
.svc-side__list a.svc-side__active{background: var(--theme-accent-primary);}
/* sidebar sub-heading (e.g. "Expert Doctors for <treatment>") */
.svc-side__sub{
    font-size: 20px;
    font-weight: 800 !important;
    color: var(--theme-accent-secondary) !important;
    margin: 26px 0 18px;
}
.svc-side__sub span{color: var(--theme-accent-primary) !important;}

/* sticky sidebar on desktop — explicit, so no other rule can defeat .sticky-top */
@media (min-width: 992px){
aside.svc-side.sticky-top{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 120px !important;
    z-index: 9;
}
}
@media (max-width: 991px){
.svcinfo-main{padding-right: 15px;}
.svc-side{margin-top: 36px; position: static !important;}
.svcinfo-hero img{height: 320px;}
}

/* ---------- 20. Page banner with breadcrumb overlay (reference style) ----------
   Reusable: wrap the page's banner <img> + existing breadcrumb <nav> in .page-banner */
.page-banner{position: relative; overflow: hidden;}
.page-banner > img{display: block; object-fit: cover;}

/* the existing breadcrumb nav becomes a transparent overlay, vertically centered
   (nav.breadcrumb.page-banner__crumb outranks the legacy nav.breadcrumb rules) */
nav.breadcrumb.page-banner__crumb{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important; /* kills bootstrap's grey .breadcrumb bar */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
}
/* stack: big title on top, crumb trail below (overrides the old space-between row) */
.page-banner__crumb .bred_flex{
    display: block;
    width: 100%;
}
.page-banner__crumb .bred_flex > p,
.page-banner__crumb .bred_flex > h1{
    color: #ffffff !important;
    font-size: clamp(28px, 3.6vw, 44px) !important; /* overrides .fs-20 */
    font-weight: 800 !important;
    line-height: 1.15;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.18);
}
/* solid accent bar before the title, like the reference */
.page-banner__crumb .bred_flex > p::before,
.page-banner__crumb .bred_flex > h1::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 78%;
    background: var(--theme-accent-secondary);
}
.page-banner__crumb ol.breadcrumb{
    justify-content: flex-start !important;
    background: transparent;
    padding: 0 0 0 20px;
    margin: 0;
}
.page-banner__crumb .breadcrumb-item,
.page-banner__crumb .breadcrumb-item a{
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: color .3s ease;
}
.page-banner__crumb .breadcrumb-item a:hover{color: var(--theme-accent-secondary) !important;}
.page-banner__crumb .breadcrumb-item + .breadcrumb-item::before{color: rgba(255,255,255,.85);}

@media (max-width: 767px){
.page-banner > img.h-280{height: 220px !important;}
.page-banner__crumb .bred_flex > p{padding-left: 14px;}
.page-banner__crumb .bred_flex > p::before{width: 5px;}
.page-banner__crumb ol.breadcrumb{padding-left: 14px;}
}

/* ---------- 21. Contact Us + Book Appointment (premium split layout) ----------
   Left: large white form card (the focus). Right: STICKY dark gradient info
   card with grouped blocks. Shared by .contact-premium and .ba-premium.
   Colors consume the :root theme tokens. */
section.contact-premium.contactusform,
section.ba-premium.bookapmt{
    background: #eef4f6 !important;         /* soft neutral (overrides legacy bg) */
    position: relative;
    overflow: visible !important;           /* .ofh would break position:sticky */
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}
/* 30px gap between the two cards comes from the bootstrap gutters.
   IMPORTANT: columns must STRETCH (flex default) — the sticky element travels
   inside its full-height parent column. align-items:flex-start would shrink
   the column to its content and kill the sticky behaviour. */
.contact-premium-row{align-items: stretch;}

/* ---- LEFT: white form card (primary focus) ---- */
.contact-form-card{
    background: #ffffff;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(13,86,122,.10);
    transition: box-shadow .4s ease;
}
.contact-form-card:hover{box-shadow: 0 26px 60px rgba(13,86,122,.14);}
/* keep the form's inner bootstrap row gutters inside the card padding */
.contact-form-card form > .row{margin-left: -10px; margin-right: -10px;}
.contact-form-card form > .row > [class*="col-"]{padding-left: 10px; padding-right: 10px;}
.contact-formside__head{margin-bottom: 30px;}
.contact-formside__eyebrow{
    display: inline-block;
    color: var(--theme-accent-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
h2.contact-formside__eyebrow{font-size: 14px !important; margin-top: 0;}
.contact-formside__title{
    color: var(--theme-accent-secondary) !important;
    font-size: 30px;
    font-weight: 800 !important;
    line-height: 1.25;
    margin-bottom: 8px;
}
.contact-formside__sub{
    color: #5a6b72 !important;
    font-size: 15px;
    margin: 0;
}
.contact-form-card .form-group{margin-bottom: 22px;}
.contact-form-card label{
    display: block;
    color: var(--theme-accent-secondary);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 12px;
}
/* inputs: 55px, radius 10, light fill, theme focus (overrides legacy styles) */
.contact-premium .form-control,
.ba-premium .form-control{
    background: #f6fafb !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 10px !important;
    height: 55px;
    padding: 12px 18px !important;
    font-size: 15px;
    color: #1e1e1e !important;
    box-shadow: none !important;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.contact-premium textarea.form-control,
.ba-premium textarea.form-control{height: auto; min-height: 150px; resize: vertical;}
.contact-premium .form-control:focus,
.ba-premium .form-control:focus{
    background: #ffffff !important;
    border-color: var(--theme-accent-primary) !important;
    box-shadow: 0 6px 18px rgba(242,125,166,.16) !important;
    outline: none;
}
.contact-premium ::placeholder,
.ba-premium ::placeholder{color: #9aa7ad !important; font-size: 15px !important;}
.contact-premium label.error,
.ba-premium label.error{color: #e8413c !important; font-size: 12.5px; font-weight: 600; margin: 6px 0 0;}
.contact-premium .form-control.error,
.ba-premium .form-control.error{border-color: #e8413c !important;}
/* submit: matches the section "View All" button (.sec-viewall-btn) design */
.contact-premium .btn_submit.btnprimary,
.ba-premium .btn_submit.btnprimary{
    max-width: 100%;
    background: #e6748d !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 12px 38px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    box-shadow: none;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    margin-top: 6px;
}
.contact-premium .btn_submit.btnprimary:hover,
.ba-premium .btn_submit.btnprimary:hover{
    background: #0d567a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13,86,122,.25);
}

/* ---- RIGHT: sticky dark gradient info card ---- */
.contact-sticky{position: relative;}
@media (min-width: 992px){
.contact-sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    z-index: 5;
}
}
.contact-aside-card{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px;
    background:
        radial-gradient(circle at 85% -10%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 42%),
        linear-gradient(160deg, var(--theme-accent-secondary) 0%, var(--theme-accent-secondary-deep) 100%);
    box-shadow: 0 24px 55px rgba(13,86,122,.28);
}
/* floating decorative circles */
.contact-aside__shape{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.contact-aside__shape--1{
    width: 190px; height: 190px;
    top: -60px; right: -55px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}
.contact-aside__shape--2{
    width: 110px; height: 110px;
    bottom: -35px; left: -25px;
    background: rgba(242,125,166,.16);
}
.contact-aside__body{position: relative; z-index: 1;}
.contact-aside__eyebrow{
    display: inline-block;
    color: var(--theme-accent-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.contact-aside__title{
    color: var(--theme-footer-text) !important;
    font-size: 26px;
    font-weight: 800 !important;
    margin-bottom: 10px;
}
.contact-aside__sub{
    color: rgba(255,255,255,.8) !important;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
}
/* grouped information blocks (ONE block per type, values stacked inside) */
.ca-block{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.ca-block:last-child{border-bottom: 0; padding-bottom: 6px;}
.ca-block:hover{transform: translateX(5px);}
.ca-block__icon{
    width: 50px; height: 50px;
    min-width: 50px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.ca-block__icon i{color: var(--theme-footer-text) !important; font-size: 19px;}
.ca-block:hover .ca-block__icon{
    background: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
    transform: scale(1.06);
}
.ca-block__info{min-width: 0;}
.ca-block__head{
    color: var(--theme-footer-text) !important;
    font-size: 17px;
    font-weight: 700 !important;
    margin: 2px 0 8px;
}
.ca-block__val{
    color: rgba(255,255,255,.85) !important;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 8px;
    word-break: break-word;
}
.ca-block__val:last-child{margin-bottom: 0;}
.ca-block__val strong{color: var(--theme-footer-text) !important;}
.ca-block__val a{color: rgba(255,255,255,.9) !important; transition: color .3s ease;}
.ca-block__val a:hover{color: var(--theme-accent-primary) !important; text-decoration: none;}
.ca-block__label{color: rgba(255,255,255,.65) !important; font-size: 13px;}
/* CMS-entered HTML inside a contact value inherits the panel typography so every
   element (<p>, <ul>, <ol>, <li>, <strong>, <em>, headings) looks consistent */
.ca-block__val p,
.ca-block__val ul,
.ca-block__val ol,
.ca-block__val li,
.ca-block__val span,
.ca-block__val em,
.ca-block__val i{
    color: rgba(255,255,255,.85) !important;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
}
.ca-block__val p{margin: 0 0 8px;}
.ca-block__val p:last-child{margin-bottom: 0;}
.ca-block__val ul,
.ca-block__val ol{margin: 0 0 8px; padding-left: 18px;}
.ca-block__val li{margin: 0 0 4px;}
.ca-block__val em, .ca-block__val i{font-style: italic;}
.ca-block__val b{color: var(--theme-footer-text) !important; font-weight: 700;}
.ca-block__val h1,
.ca-block__val h2,
.ca-block__val h3,
.ca-block__val h4,
.ca-block__val h5,
.ca-block__val h6{
    color: var(--theme-footer-text) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}
.ca-block--plain{display: block;}
/* CTA buttons inside the panel → white pills */
.ca-block .contact_btn .btn, .contact-aside__body .contact_btn .btn{
    background: var(--theme-footer-text) !important;
    color: var(--theme-accent-secondary) !important;
    border: 0 !important;
    border-radius: 30px !important;
    padding: 10px 26px;
    margin: 6px 8px 6px 0;
}
.ca-block .contact_btn .btn:hover, .contact-aside__body .contact_btn .btn:hover{
    background: var(--theme-accent-primary) !important;
    color: var(--theme-footer-text) !important;
}
/* dynamic side image inside the help card (book appointment) */
.ba-side-img{
    width: 100%;
    height: 185px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    margin-bottom: 22px;
}

/* ---- Google Map (below): rounded, shadowed, full width ---- */
.contact-map-section{padding-top: 10px;}
.contdetails .mapouter{
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(13,86,122,.14);
    margin-bottom: 24px;
    border: 6px solid #ffffff;
}
.contdetails .mapouter iframe{
    display: block;
    width: 100%;
    min-height: 360px;
    border: 0;
}

@media (max-width: 991px){
.contact-form-card{padding: 32px 26px; margin-bottom: 30px;}
.contact-aside-card{padding: 32px 26px;}
.contact-sticky{position: static !important;} /* sticky disabled below desktop */
}
@media (max-width: 767px){
.contact-form-card{padding: 26px 20px; border-radius: 16px;}
.contact-aside-card{padding: 26px 20px; border-radius: 16px;}
.contact-premium .btn_submit.btnprimary,
.ba-premium .btn_submit.btnprimary{width: 100%;}
}

/* ---------- 22. Vision & Mission (home section + inner page) ----------
   Dark premium band matching the Treatments section: teal gradient section
   (via dept_homepage bg-darkk classes) holding a frosted glass split card —
   content (60%) + full-height feature image (40%).
   Colors consume the :root theme tokens. */
/* card surface + hover identical to the Treatments section's .dept-card
   (same 10px top margin too — it gives the hover lift room inside the
   owl slider's overflow, otherwise the top edge clips) */
.vm .vm-card{
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    margin: 10px 0px 28px;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
.vm .vm-card:hover{
    transform: translateY(-8px);
    background: rgba(255,255,255,.09);
    border-color: var(--theme-accent-primary);
    box-shadow: 0 22px 44px rgba(0,0,0,.35);
}
/* balanced 60 / 40 split on desktop */
@media (min-width: 768px){
.vm .vm-card .col-md-7{flex: 0 0 60%; max-width: 60%;}
.vm .vm-card .col-md-5{flex: 0 0 40%; max-width: 40%;}
}
/* !important: bootstrap's .no-gutters zeroes the column padding otherwise */
.vm .vm-card .vm-content{
    position: relative;
    padding: 50px 55px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}
/* plain glass interior — identical surface to the treatments .dept-card */
.vm .vm-content > *{position: relative; z-index: 1;}
/* large white title with the vertical accent bar — the visual focus */
.vm .vm-title{
    color: var(--theme-footer-text) !important;
    font-size: 34px;
    font-weight: 800 !important;
    line-height: 1.25;
    position: relative;
    padding-left: 20px;
    margin: 0 0 20px;
}
.vm .vm-title::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 80%;
    border-radius: 4px;
    background: var(--theme-accent-primary);
}
.vm .vm-title::after{content: ' //'; color: var(--theme-accent-primary); font-style: italic;}
/* subtitle */
.vm .vm-lead, .vm .vm-lead p{
    color: rgba(255,255,255,.92) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    max-width: 58ch;
    margin: 0 0 25px;
}
/* description — readable measure, comfortable rhythm */
.vm .vm-desc{max-width: 62ch;}
/* HOME section only: fixed 3-line slot — the card height never changes
   whether the content is short or long (inner page shows full text) */
.vm.doctors .vm-desc{
    height: 86px;               /* 3 lines × (15px × 1.9) */
    overflow: hidden;
}
.vm .vm-desc, .vm .vm-desc p, .vm .vm-desc li{
    color: rgba(255,255,255,.78) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
}
.vm .vm-desc p{margin-bottom: 14px;}
.vm .vm-desc p:last-child{margin-bottom: 0;}
.vm .vm-desc ul{padding-left: 18px; margin: 8px 0 14px;}
/* CTA pill — consistent with the site's buttons */
.vm-more{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 35px;
    background: var(--theme-accent-primary);
    color: var(--theme-footer-text) !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 13px 34px;
    border-radius: 40px;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(242,125,166,.25);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.vm-more i{color: inherit; transition: transform .35s ease;}
.vm-more:hover{
    background: var(--theme-accent-secondary);
    color: var(--theme-footer-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13,86,122,.22);
}
.vm-more:hover i{transform: translateX(5px);}
/* image column: clean full-height feature image — no borders, no overlays */
.vm-media{
    position: relative;
    overflow: hidden;
    min-height: 360px;
}
.vm-img{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}
@media (max-width: 991px){
.vm .vm-card .vm-content{padding: 40px 34px !important;}
.vm .vm-title{font-size: 28px;}
}
@media (max-width: 767px){
.vm .vm-card .vm-content{padding: 30px 24px !important;}
.vm-media{min-height: 240px;}
.vm-img{position: static; height: 240px;}
.vm-more{margin-top: 26px;}
}

/* ---------- 23. Doctor & Department profile pages ----------
   Colors consume the :root theme tokens. */
/* profile hero card */
.doc-hero{
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 10px 35px rgba(0,0,0,.06);
    margin-bottom: 30px;
}
.doc-hero__photo{
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(13,86,122,.14);
}
.doc-hero__photo img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.doc-hero:hover .doc-hero__photo img{transform: scale(1.04);}
.doc-hero__chip{
    display: inline-block;
    background: var(--theme-accent-primary);
    color: var(--theme-footer-text) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 14px;
}
.doc-hero__name{
    color: var(--theme-accent-secondary) !important;
    font-size: 32px;
    font-weight: 800 !important;
    margin-bottom: 12px;
}
.doc-hero__lead{
    color: #1e1e1e !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 12px;
}
.doc-hero__desc{
    color: #45535a !important;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 8px;
}
.doc-hero__actions{display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px;}
.docinfo .doc-hero__actions .btnprimary{
    background: var(--theme-accent-primary) !important;
    color: var(--theme-footer-text) !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 13px 34px !important;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(242,125,166,.30);
}
.docinfo .doc-hero__actions .btnprimary:hover{background: var(--theme-accent-secondary) !important;}
.doc-hero__ghost{
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--theme-accent-secondary);
    color: var(--theme-accent-secondary) !important;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 32px;
    border-radius: 40px;
    text-decoration: none !important;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.doc-hero__ghost:hover{background: var(--theme-accent-secondary); color: var(--theme-footer-text) !important; transform: translateY(-2px);}

/* quick information tiles */
.doc-qi-row > div{margin-bottom: 30px;}
.doc-qi{
    width: 100%;
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 16px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.doc-qi:hover{transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.10); border-color: var(--theme-accent-primary);}
.doc-qi__icon{
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--theme-accent-secondary);
    transition: background .35s ease;
}
.doc-qi__icon i{color: var(--theme-footer-text) !important; font-size: 19px;}
.doc-qi:hover .doc-qi__icon{background: var(--theme-accent-primary);}
.doc-qi__label{
    color: #7c8a91 !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.doc-qi__val{
    color: var(--theme-accent-secondary) !important;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    word-break: break-word;
}

/* About / details card */
.doc-about{
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 35px rgba(0,0,0,.06);
}
.doc-feature{
    border-radius: 16px;
    margin-bottom: 26px;
    max-height: 420px;
}
.doc-sec-title{
    color: var(--theme-accent-secondary) !important;
    font-size: 24px;
    font-weight: 800 !important;
    position: relative;
    padding-left: 18px;
    margin-bottom: 22px;
}
.doc-sec-title::before{
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 78%;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--theme-accent-primary), var(--theme-accent-secondary));
}
.doc-sec-title strong{color: var(--theme-accent-primary) !important;}
/* detail rows: airy, separated */
.doc-about > .row, .doc-about .pt-10.row, .doc-about .row.pt-10{
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid #eef3f5;
}
.doc-about > .row:last-child{border-bottom: 0;}
.doc-about .row h5{color: var(--theme-accent-secondary) !important; margin-bottom: 4px;}
.doc-about .row .col-md-8{color: #45535a; font-size: 15px; line-height: 1.8;}
/* contact info sub-cards */
.doc-contact-card{
    background: #f6fafb;
    border: 1px solid #e8eef1;
    border-radius: 14px;
    padding: 20px 22px !important;
    margin: 16px 0;
}
.doc-contact-card__head{
    color: var(--theme-accent-secondary) !important;
    font-weight: 800;
    margin-bottom: 12px;
}
.doc-contact-card__head i{color: var(--theme-accent-primary); margin-right: 8px;}
.doc-contact-card .row{border-bottom: 0 !important; padding: 5px 0 !important;}
/* social icons — bigger themed circles */
.doc-about .doctoricons{
    width: 40px !important;
    height: 40px !important;
    margin: 0 10px 0 0 !important;
    font-size: 16px !important;
    background: var(--theme-accent-secondary) !important;
    color: #ffffff !important;
    transition: background .3s ease, transform .3s ease;
}
.doc-about a:hover .doctoricons, .doc-about .doctoricons:hover{
    background: var(--theme-accent-primary) !important;
    transform: translateY(-3px);
}
.doc-about .socialmedia{align-items: center;}

/* sidebar (treatments) */
.doc-side{border-left: 0;}
.doc-side__head{
    font-size: 17px;
    font-weight: 700 !important;
    color: var(--theme-accent-secondary) !important;
}
.doc-side__head strong{color: var(--theme-accent-primary) !important;}
.doc-side .treatments-card{
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 16px;
    overflow: hidden;
    padding-bottom: 14px;
    margin: 0 0 22px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    transition: transform .35s ease, box-shadow .35s ease;
}
.doc-side .treatments-card:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.10);}
.doc-side .treatments-card img{border: 0 !important;}
.doc-side .treatments-card h3{padding: 0 16px; font-size: 16px !important; color: var(--theme-accent-secondary) !important;}
.doc-side .treatments-card p{padding: 0 16px; color: #45535a !important;}

/* department page: book appointment strip */
.dept-book-strip{
    background: #f0f7fa;
    border: 1px solid #e2edf2;
    border-radius: 16px;
    padding: 22px 26px !important;
    margin: 26px 0;
    align-items: center;
    gap: 8px;
}
.dept-book-strip h5{color: var(--theme-accent-secondary) !important;}
.dept-book-strip h5 strong{color: var(--theme-accent-primary) !important;}
.dept-book-strip__btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-accent-primary);
    color: var(--theme-footer-text) !important;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 40px;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(242,125,166,.28);
    transition: background .3s ease, transform .3s ease;
}
.dept-book-strip__btn:hover{background: var(--theme-accent-secondary); transform: translateY(-2px); text-decoration: none !important;}
.dept-book-strip__btn i{transition: transform .3s ease;}
.dept-book-strip__btn:hover i{transform: translateX(4px);}
/* force white text on hover — overrides the generic .bookapptxt orange hover (#F48C12) */
.dept-book-strip__btn.bookapptxt:hover,
.dept-book-strip__btn.bookapptxt:focus,
.bookappointment-text:hover .dept-book-strip__btn.bookapptxt,
.bookappointment-text:hover .dept-book-strip__btn.bookapptxt i{
    color: #ffffff !important;
}

/* related departments — horizontal cards */
.dpt-rel{
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.dpt-rel:hover{transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.10); border-color: var(--theme-accent-primary);}
.dpt-rel__img{
    width: 86px; height: 86px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--theme-accent-primary);
    padding: 3px;
    background: #ffffff;
}
.dpt-rel__img img{width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;}
.dpt-rel__info{min-width: 0;}
.dpt-rel a{text-decoration: none !important;}
.dpt-rel__name{
    color: var(--theme-accent-secondary) !important;
    font-size: 18px;
    font-weight: 800 !important;
    margin-bottom: 6px;
    transition: color .3s ease;
}
.dpt-rel a:hover .dpt-rel__name{color: var(--theme-accent-primary) !important;}
.dpt-rel__desc{
    color: #45535a !important;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 8px;
}
.dpt-rel__more{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--theme-accent-primary) !important;
    font-size: 14px;
    font-weight: 600;
}
.dpt-rel__more i{transition: transform .3s ease;}
.dpt-rel__more:hover i{transform: translateX(4px);}

@media (max-width: 767px){
.doc-hero{padding: 22px;}
.doc-hero__photo img{height: 300px;}
.doc-hero__name{font-size: 26px;}
.doc-hero__actions .btnprimary, .doc-hero__ghost{width: 100%; justify-content: center;}
.doc-about{padding: 24px 18px;}
.dpt-rel{flex-direction: row; padding: 14px;}
}

/* ---------- 24. Gallery pages (photo / album / video / video detail) ----------
   Colors consume the :root theme tokens. */
/* album page: photo-count badge */
.gal-meta{margin-bottom: 26px;}
.gal-meta__badge{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--theme-accent-secondary);
    color: var(--theme-footer-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 10px 26px;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(13,86,122,.20);
}
.gal-meta__badge i{color: var(--theme-accent-primary);}
/* album grid items: rounded, shadowed, no borders */
.galinfo .gal-item{display: block; margin-bottom: 30px; text-decoration: none !important;}
.galinfo .gal-item__frame{
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.galinfo .gal-item:hover .gal-item__frame{
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
}
.galinfo .gal-item__frame img{
    height: 260px;
    display: block;
    border: 0;
    margin: 0;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.galinfo .gal-item:hover .gal-item__frame img{transform: scale(1.08);}

/* ---- Video detail: cinematic watch page ---- */
/* the "cinema band": a teal gradient strip behind the player + sidebar top,
   fading into the light content zone below — no markup restructuring needed */
section.vif-section{
    background-color: #F8FAFD;
    background-image: linear-gradient(180deg, var(--theme-accent-secondary) 0%, var(--theme-accent-secondary-deep) 100%);
    background-size: 100% 420px;
    background-repeat: no-repeat;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}
/* premium white media card around the player */
.vif-player-card{
    background: #ffffff;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 30px 60px rgba(0,0,0,.30);
}
.vif-main video,
.vif-main iframe{
    display: block;
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: #000;
    overflow: hidden;
}
/* large blue title under the player */
.vif-title{
    color: var(--theme-accent-secondary) !important;
    font-size: 30px;
    font-weight: 800 !important;
    line-height: 1.25;
    margin: 6px 0 18px;
}
/* meta chips */
.vif-meta{display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;}
.vif-meta__chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f7fa;
    border: 1px solid #dfeaf0;
    color: var(--theme-accent-secondary) !important;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 30px;
}
.vif-meta__chip i{color: var(--theme-accent-primary);}
.vif-meta__chip--views{
    background: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
    color: var(--theme-footer-text) !important;
}
.vif-meta__chip--views i{color: var(--theme-footer-text);}
/* about card */
.vif-card{
    background: #ffffff;
    border: 1px solid #edf2f4 !important;
    border-radius: 18px;
    padding: 30px 34px;
    margin-top: 30px;
    box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.vif-card .doc-sec-title{font-size: 21px; margin-bottom: 14px;}
.vif-writeup, .vif-card p{color: #45535a !important; font-size: 16px; line-height: 1.9; max-width: 72ch;}
/* comments zone reads as its own card on the light page background */
.vif-comments{
    background: #ffffff !important;
    border: 1px solid #edf2f4;
    border-radius: 20px;
    padding: 30px 34px !important;
    margin-top: 30px;
    box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.vif-comments .writereview.container,
.vif-comments .writereview.container-fluid{width: 100%; max-width: 100%; padding-left: 24px; padding-right: 24px;}

/* comments zone */
.vif-chead{color: var(--theme-accent-secondary) !important;}
.vif-chead .btn.btnprimary{
    background: var(--theme-accent-primary) !important;
    color: var(--theme-footer-text) !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 10px 26px !important;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(242,125,166,.28);
}
.vif-chead .btn.btnprimary:hover{background: var(--theme-accent-secondary) !important;}
.vif-comments .wreviewpeople{
    background: #ffffff !important;
    border: 1px solid #edf2f4;
    border-left: 4px solid var(--theme-accent-primary);
    border-radius: 14px !important;
    height: auto !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.05);
    transition: transform .3s ease, box-shadow .3s ease;
}
.vif-comments .wreviewpeople:hover{transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.09);}
.vif-comments .wreviewpeople .peoplereview{color: #45535a !important; height: auto; max-height: 125px;}
.vif-comments .wreviewpeople .text-darkkk{color: var(--theme-accent-secondary) !important;}
/* comment form — premium inputs matching the site's forms */
.vif-comments .writereview{background: #f6fafb; border: 1px solid #e8eef1; border-radius: 18px;}
.vif-comments .writereview h4{color: var(--theme-accent-secondary) !important; font-size: 20px; font-weight: 800;}
.vif-comments .form-control{
    background: #ffffff !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 10px !important;
    height: 50px;
    padding: 12px 16px !important;
    font-size: 15px;
    box-shadow: none !important;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.vif-comments textarea.form-control{height: auto; min-height: 120px;}
.vif-comments .form-control:focus{border-color: var(--theme-accent-primary) !important; box-shadow: 0 6px 16px rgba(242,125,166,.14) !important;}
.vif-comments .btn_submit{
    background: var(--theme-accent-primary) !important;
    color: var(--theme-footer-text) !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 12px 40px !important;
    box-shadow: 0 10px 22px rgba(242,125,166,.30);
}
.vif-comments .btn_submit:hover{background: var(--theme-accent-secondary) !important;}

/* sticky sidebar: white floating panel over the cinema band */
.vif-side .sticky-top{
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 44px rgba(0,0,0,.14);
}
.vif-side__head{
    color: var(--theme-accent-secondary) !important;
    font-size: 19px;
    font-weight: 800 !important;
    position: relative;
    padding-left: 16px;
}
.vif-side__head::before{
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 80%;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--theme-accent-primary), var(--theme-accent-secondary));
}
/* ---- Watch Next: cinematic full-thumbnail cards ---- */
.vif-side .sec-sub{text-align: left; display: block;}
.wn-card{
    position: relative;
    display: block;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    text-decoration: none !important;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.wn-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.wn-card__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.wn-card:hover .wn-card__img{transform: scale(1.08);}
/* centered pink play circle */
.wn-card__play{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--theme-accent-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding-left: 4px;
    z-index: 3;
    box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.15);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.wn-card__play i{color: #ffffff;}
.wn-card:hover .wn-card__play{
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 9px rgba(242,125,166,.25);
}
/* hover overlay: title + meta + CTA slide up */
.wn-card__overlay{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(9,61,87,0) 30%, rgba(9,61,87,.88) 100%);
    opacity: 0;
    transition: opacity .4s ease;
}
.wn-card:hover .wn-card__overlay{opacity: 1;}
.wn-card__title{
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateY(12px);
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.wn-card__meta{
    color: rgba(255,255,255,.8) !important;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    transform: translateY(12px);
    transition: transform .4s cubic-bezier(.22,.61,.36,1) .05s;
}
.wn-card__meta i{color: var(--theme-accent-primary);}
.wn-card__cta{
    color: var(--theme-accent-primary) !important;
    font-size: 13px;
    font-weight: 700;
    margin-top: 6px;
    transform: translateY(12px);
    transition: transform .4s cubic-bezier(.22,.61,.36,1) .1s;
}
.wn-card:hover .wn-card__title,
.wn-card:hover .wn-card__meta,
.wn-card:hover .wn-card__cta{transform: translateY(0);}
/* currently playing: accent border + pink glow + badge */
.wn-card--current{
    border: 2px solid var(--theme-accent-secondary);
    box-shadow: 0 0 0 4px rgba(242,125,166,.30), 0 12px 28px rgba(0,0,0,.18);
}
.wn-card__badge{
    position: absolute;
    top: 12px; left: 12px;
    z-index: 4;
    background: var(--theme-accent-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: 0 6px 14px rgba(0,0,0,.30);
}

/* ---- share bar inside the About card ---- */
.vif-share{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eef3f5;
}
.vif-share__label{
    color: var(--theme-accent-secondary);
    font-size: 15px;
    font-weight: 700;
}
.vif-share__label i{color: var(--theme-accent-primary); margin-right: 4px;}
.vif-share__btn{
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent-secondary);
    color: #ffffff !important;
    font-size: 15px;
    text-decoration: none !important;
    transition: background .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.vif-share__btn i{color: #ffffff;}
.vif-share__btn:hover{background: var(--theme-accent-primary); transform: translateY(-3px) scale(1.06);}

/* comment submit (classes are `btn btnprimary`, no btn_submit) */
.vif-comments input[type="submit"]{
    background: var(--theme-accent-primary) !important;
    color: var(--theme-footer-text) !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 12px 40px !important;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(242,125,166,.30);
    transition: background .3s ease, transform .3s ease;
}
.vif-comments input[type="submit"]:hover{background: var(--theme-accent-secondary) !important; transform: translateY(-2px);}

@media (max-width: 991px){
.vif-side .sticky-top{position: static !important; margin-top: 30px;}
section.vif-section{background-size: 100% 300px;}
}
@media (max-width: 767px){
.galinfo .gal-item__frame img{height: 180px;}
}

/* ---------- 25a. Top bar: exact vertical centering ----------
   The Get Appointment button stretches the bar taller than the text items,
   so the call/email links sat slightly high — flex-center them instead. */
.top_menu .row{align-items: stretch;}
.top_menu .row > div{display: flex; align-items: center; min-height: 44px;}
.top_menu .row > div.text-center{justify-content: center;}
.top_menu .top_left{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;            /* keep phone + email on one line, side by side */
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.top_menu .top_left .list-inline-item{
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    white-space: nowrap;         /* never break an item onto a second line */
}
.top_menu .top_left a{display: inline-flex; align-items: center;}
.top_menu .top_left a i{margin-top: 0;}
/* Get Appointment button: label + icon exactly centered within the full-height pill */
.top_menu .topbar-bookapp{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
}
.top_menu .topbar-bookapp .tb-icon{margin-top: 0;}
.top_menu .row > div:last-child .top_right{
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------- 25. Navigation: full-height hover / active block ----------
   The pink block must fill the navbar from top edge to bottom edge
   (reference design) — desktop/tablet only, mobile menu untouched. */
@media (min-width: 992px){
/* the navbar's own vertical padding is what created the white gaps */
nav.top-navbar-head{padding-top: 0 !important; padding-bottom: 0 !important;}
nav.top-navbar-head.activescroll{padding-top: 0 !important; padding-bottom: 0 !important;}
/* brand keeps its breathing room so the bar height stays comfortable */
nav.top-navbar-head .navbar-brand{padding-top: 16px; padding-bottom: 16px;}
/* menu stretches to the full bar height */
nav.top-navbar-head .navbar-collapse{align-self: stretch;}
nav.top-navbar-head .navbar-nav{height: 100%; align-items: stretch;}
nav.top-navbar-head .navbar-nav > .nav-item{
    display: flex;
    align-items: stretch;
    height: auto;
    padding: 0 !important;
    margin: 0;
}
nav.top-navbar-head .navbar-nav > .nav-item > .nav-link{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 78px;
    padding: 0 22px !important;
    transition: color .35s ease;
}
/* the pink block appears ONLY on hover (active page keeps pink text only),
   with a silky-smooth sweep */
nav.top-navbar-head .navbar-nav > .nav-item > .nav-link{
    transition: color .4s ease;
}
nav.top-navbar-head .navbar-nav > .nav-item > .nav-link::before{
    transition: transform .45s cubic-bezier(.25,.8,.25,1);
}
}

/* ---------- 26. Inner-page polish: sticky sidebars, news order, mobile menu, buttons ---------- */

/* 1 + 4: sticky sidebars / doctor image on desktop, normal flow on mobile */
@media (min-width: 992px){
.ti-side .ti-sticky{position: -webkit-sticky; position: sticky; top: 120px; z-index: 5;}
/* doctor image column stretches to the full split-row height so the
   sticky photo can travel down while the details/about scroll past */
.docinfo-split{align-items: stretch;}
.docinfo-split__media .doc-hero__photo{position: -webkit-sticky; position: sticky; top: 120px;}
/* quick-info tiles go 2-up inside the narrower right (7-col) body */
.docinfo-split__body .doc-qi-row .col-lg-3{flex: 0 0 50%; max-width: 50%;}
}
.docinfo-split__media .doc-hero__photo{border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(13,86,122,.14);}
.docinfo-split__media .doc-hero__photo img{width: 100%; height: 100%; max-height: 460px; object-fit: cover; object-position: top center; display: block;}
/* intro card no longer wraps the photo — keep its own padding */
.docinfo .doc-hero__intro{width: 100%;}

/* 5: department overview — LIGHT card (VM styles are scoped to .vm, so the
   reused .vm-card gets no styling on the department page without this) */
.blogpage .vm-card{
    background: #ffffff;
    border: 1px solid #edf2f4;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,.07);
    margin-bottom: 30px;
}
.blogpage .vm-card .vm-content{padding: 40px 44px; display: flex; flex-direction: column; justify-content: center;}
.blogpage .vm-card .vm-title{
    color: var(--theme-accent-secondary) !important;
    font-size: 26px; font-weight: 800 !important;
    position: relative; padding-left: 18px; margin-bottom: 16px;
}
.blogpage .vm-card .vm-title::before{
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 80%; border-radius: 4px;
    background: linear-gradient(180deg, var(--theme-accent-primary), var(--theme-accent-secondary));
}
.blogpage .vm-card .vm-title::after{content: ' //'; color: var(--theme-accent-primary); font-style: italic;}
.blogpage .vm-card .vm-lead, .blogpage .vm-card .vm-lead p{color: var(--theme-accent-secondary) !important; font-size: 16px; font-weight: 600; line-height: 1.7; margin-bottom: 12px;}
.blogpage .vm-card .vm-desc, .blogpage .vm-card .vm-desc p, .blogpage .vm-card .vm-desc li{color: #45535a !important; font-size: 15px; line-height: 1.9;}
.blogpage .vm-card .vm-media{position: relative; overflow: hidden; min-height: 340px;}
.blogpage .vm-card .vm-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0;}
/* strong fixed-height feature image on desktop */
@media (min-width: 768px){
.blogpage .vm-card .vm-media{min-height: 520px;}
}
@media (max-width: 767px){
.blogpage .vm-card .vm-content{padding: 26px 22px;}
.blogpage .vm-card .vm-media{min-height: 240px;}
.blogpage .vm-card .vm-img{position: static; height: 240px;}
}

/* 3: newsinfo — featured image, then pink date badge, then title */
/* featured image sized to match the other inner pages' .svcinfo-hero img (500px / 320px mobile) */
.news-hero img{border-radius: 16px !important; object-fit: cover; box-shadow: 0 12px 30px rgba(0,0,0,.10);}
.news-meta{display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px;}
.news-date-badge{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--theme-accent-primary);
    color: var(--theme-footer-text);
    font-size: 13.5px; font-weight: 700;
    padding: 8px 18px; border-radius: 30px;
    box-shadow: 0 8px 18px rgba(242,125,166,.28);
}
.news-date-badge i{color: var(--theme-footer-text);}
.news-venue{color: #5a6b72; font-size: 14px; font-weight: 600;}
.news-venue i{color: var(--theme-accent-primary); margin-right: 3px;}
.news-title{
    color: var(--theme-accent-secondary) !important;
    font-size: 28px; font-weight: 800 !important;
    line-height: 1.3; margin-bottom: 20px;
}

/* 6: standardized "Read More" secondary button (btnthird) — pink pill -> blue */
.btn.btnthird{
    background: var(--theme-accent-primary) !important;
    color: var(--theme-footer-text) !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 11px 30px !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(242,125,166,.28);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn.btnthird:hover{
    background: var(--theme-accent-secondary) !important;
    color: var(--theme-footer-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(13,86,122,.22);
    text-decoration: none !important;
}
/* "View More" / load-more buttons on every listing page — same design as the section
   "View All" button (.sec-viewall-btn) for consistency across the website */
#load_more .btn_submit,
#load_more input[type="submit"]{
    background: #e6748d !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 12px 38px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    box-shadow: none;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
#load_more .btn_submit:hover,
#load_more input[type="submit"]:hover{
    background: #0d567a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13,86,122,.25);
}

/* 2: premium left off-canvas mobile menu (CSS-only; existing collapse JS drives it) */
@media (max-width: 767.98px){
    /* overlay layer = the collapse container */
    .top-navbar-head .navbar-collapse{
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1050;
        display: block !important;
        background: rgba(9,61,87,.55);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
    }
    .top-navbar-head .navbar-collapse.collapsing{height: auto !important; transition: opacity .35s ease;}
    .top-navbar-head .navbar-collapse.show{opacity: 1; visibility: visible;}
    /* sliding white panel = the menu list */
    .top-navbar-head .navbar-collapse .navbar-nav{
        position: fixed;
        top: 0; left: 0;
        width: 286px;
        max-width: 84vw;
        height: 100%;
        margin: 0 !important;
        padding: 78px 0 30px !important;
        background: #ffffff;
        box-shadow: 0 0 60px rgba(0,0,0,.25);
        transform: translateX(-100%);
        transition: transform .38s cubic-bezier(.22,.61,.36,1);
        overflow-y: auto;
    }
    .top-navbar-head .navbar-collapse.show .navbar-nav{transform: translateX(0);}
    /* keep the toggler clickable ABOVE the overlay so it closes the panel */
    .top-navbar-head .navbar-toggler{position: relative; z-index: 1060;}
    /* menu items: spaced, rounded, blue text; pink active/hover */
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item{
        display: block;
        padding: 0 !important;
        margin: 2px 14px;
    }
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link{
        display: block !important;
        min-height: 0;
        padding: 13px 20px !important;
        border-radius: 10px;
        color: var(--theme-accent-secondary) !important;
        font-size: 16px;
        font-weight: 600;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        transition: background .25s ease, color .25s ease, padding-left .25s ease;
    }
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link::before{display: none;} /* kill the desktop sweep block */
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link.active{
        background: var(--theme-accent-primary);
        color: var(--theme-footer-text) !important;
        padding-left: 26px !important;
    }
    /* dropdown items inside the panel */
    .top-navbar-head .navbar-collapse .dropdown-menu{
        border: 0; box-shadow: none; padding: 0 0 0 14px; margin: 0;
    }
    .top-navbar-head .navbar-collapse .dropdown-item{
        border-radius: 8px; padding: 10px 18px; font-size: 15px;
        color: var(--theme-accent-secondary);
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .top-navbar-head .navbar-collapse .dropdown-item:hover{background: #FFF0F5; color: var(--theme-accent-primary);}
    /* panel header divider under the top padding */
    .top-navbar-head .navbar-collapse .navbar-nav::before{
        content: 'Menu';
        position: absolute;
        top: 26px; left: 28px;
        color: var(--theme-accent-primary);
        font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    }
}

/* ---------- 26b. Mobile menu UI/UX upgrade (toggle, close, overlay, scroll-lock, panel) ---------- */
/* lock page scroll while the off-canvas menu is open (class added via nav.php JS) */
body.mobile-menu-open{overflow: hidden;}

@media (max-width: 767.98px){
    /* ---- animated hamburger ⇄ X toggle button ---- */
    .navbar-toggler.nav-toggle{
        width: 46px; height: 46px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: var(--theme-accent-primary);
        box-shadow: 0 6px 16px rgba(0,0,0,.18);
        display: inline-flex; align-items: center; justify-content: center;
        position: relative; z-index: 1060;
        transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
    }
    .navbar-toggler.nav-toggle:focus{outline: 0; box-shadow: 0 0 0 3px rgba(230,116,141,.4);}
    .navbar-toggler.nav-toggle:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.24);}
    .navbar-toggler.nav-toggle:active{transform: scale(.93);}
    .nav-toggle__box{position: relative; display: block; width: 22px; height: 16px;}
    .nav-toggle__bar{
        position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 3px;
        background: #ffffff;
        transition: transform .32s cubic-bezier(.22,.61,.36,1), top .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
    }
    .nav-toggle__bar:nth-child(1){top: 0;}
    .nav-toggle__bar:nth-child(2){top: 6.75px;}
    .nav-toggle__bar:nth-child(3){top: 13.5px;}
    /* only ONE close control: hide the hamburger while the menu is open — the panel X closes it */
    .navbar-toggler.nav-toggle[aria-expanded="true"]{opacity: 0; visibility: hidden; pointer-events: none;}

    /* ---- dedicated close (X) button at the panel's top-right ---- */
    .mobile-nav-close{
        position: fixed;
        top: 18px;
        left: calc(min(300px, 84vw) - 58px);
        z-index: 1061;
        width: 40px; height: 40px;
        padding: 0; border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        display: flex; align-items: center; justify-content: center;
        transition: background .25s ease, transform .35s ease;
    }
    .mobile-nav-close:focus{outline: 0;}
    .mobile-nav-close:hover{background: rgba(255,255,255,.30); transform: rotate(90deg);}
    .mobile-nav-close span{
        position: absolute; width: 17px; height: 2.5px; border-radius: 3px;
        background: #ffffff;
    }
    .mobile-nav-close span:nth-child(1){transform: rotate(45deg);}
    .mobile-nav-close span:nth-child(2){transform: rotate(-45deg);}

    /* ---- premium panel ---- */
    /* richer overlay: soft pink glow fading into deep blue */
    .top-navbar-head .navbar-collapse{
        background: radial-gradient(130% 90% at 0% 0%, rgba(230,116,141,.30) 0%, rgba(9,61,87,.66) 46%, rgba(9,61,87,.74) 100%);
    }
    .top-navbar-head .navbar-collapse .navbar-nav{
        width: 300px;
        padding-top: 96px !important;
        background: linear-gradient(180deg, #ffffff 0%, #eef6f9 100%);
        box-shadow: 10px 0 50px rgba(0,0,0,.28);
        border-radius: 0 22px 22px 0;
    }
    /* gradient header band behind the Menu label + close button */
    .top-navbar-head .navbar-collapse .navbar-nav::after{
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 78px;
        background: linear-gradient(120deg, var(--theme-accent-secondary) 0%, var(--theme-accent-secondary-deep) 100%);
        border-radius: 0 22px 0 0;
        z-index: 1;
    }
    /* "Menu" label sits on the band, in white */
    .top-navbar-head .navbar-collapse .navbar-nav::before{
        top: 29px; left: 26px;
        color: rgba(255,255,255,.95);
        font-size: 13px; font-weight: 700; letter-spacing: 3px;
        z-index: 2;
    }
    /* menu items above the band area */
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item{
        position: relative; z-index: 2;
        margin: 5px 16px;
    }
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link{
        position: relative;
        padding: 14px 18px !important;
        font-size: 16px; font-weight: 600; letter-spacing: .2px;
        border-radius: 12px;
        color: var(--theme-accent-secondary) !important;
        transition: background .28s ease, color .28s ease, padding-left .28s ease, box-shadow .28s ease;
    }
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
    .top-navbar-head .navbar-collapse .navbar-nav > .nav-item > .nav-link.active{
        background: linear-gradient(120deg, var(--theme-accent-primary) 0%, #ef8ca4 100%);
        color: #ffffff !important;
        padding-left: 22px !important;
        box-shadow: 0 10px 22px rgba(230,116,141,.35);
    }
}

/* ---------- 27. Stable dynamic section title area ----------
   Dynamic titles vary in length; reserve a consistent 2-line title slot so a
   short OR long title never shifts the description/content below. min-height
   only sets a floor (very long titles still expand gracefully). */
.sec-head .sec-title{
    min-height: 52px;                 /* ~ one comfortable line, centred */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 6px;
    text-align: center;
    transition: none;
}
/* Services heading specifically: reserve up to two lines so the slider start
   position stays fixed regardless of the dynamic services_title length */
.services_homepage .sec-head .sec-title{
    min-height: 58px;
    margin-bottom: 10px;
}
/* keep the eyebrow -> title -> content spacing constant */
.sec-head{margin-bottom: 15px;}
.sec-head .sec-sub{margin-bottom: 4px !important;}
@media (max-width: 767px){
.sec-head .sec-title{min-height: 40px;}
.services_homepage .sec-head .sec-title{min-height: 44px;}
}

@media (prefers-reduced-motion: reduce){
html{scroll-behavior: auto;}
*, *::before, *::after{
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}
html.anim-ready .anim-fade-up, html.anim-ready .anim-fade-left,
html.anim-ready .anim-fade-right, html.anim-ready .anim-zoom{
    opacity: 1;
    transform: none;
}
}

.ftr__copy {
    background: #e6748d !important;
    padding: 16px 0;
}

/* ---------- Why to Choose: premium content presentation + staggered entrance ----------
   Enhances ONLY the dynamic CMS content (<p> / <ul><li>) inside .choosetickbefore.
   The section (.choose_homepage) is already scroll-observed (js adds .anim-in), so the
   content reveals with a staggered fade-up when the section enters the viewport. Heading,
   title, text colors and typography are left untouched. */

/* engaging paragraph layout — subtle themed card with a left accent (text unchanged) */
.whytochoosehome .choosetickbefore > p{
    position: relative;
    background: rgba(13,86,122,.05);
    border-left: 3px solid var(--theme-accent-primary);
    border-radius: 10px;
    padding: 14px 18px 14px 20px;
    margin: 0 0 14px !important;
}
.whytochoosehome .choosetickbefore > p:last-child{margin-bottom: 0 !important;}

/* professional list — themed check icon, comfortable spacing */
.whytochoosehome .choosetickbefore ul{list-style: none !important; padding: 0; margin: 10px 0 0;}
.whytochoosehome .choosetickbefore ul li{
    position: relative;
    background: rgba(13,86,122,.05);
    border-radius: 10px;
    padding: 13px 16px 13px 48px;
    margin: 0 0 12px !important;
}
.whytochoosehome .choosetickbefore ul li:last-child{margin-bottom: 0 !important;}
.whytochoosehome .choosetickbefore ul li::before{
    content: "\f058" !important;          /* Font Awesome check-circle */
    font-family: "FontAwesome" !important;
    font-weight: normal !important;
    position: absolute;
    left: 16px;
    top: 12px;
    color: var(--theme-accent-primary);
    font-size: 20px;
    line-height: 1.2;
}

/* staggered entrance — content rises + fades when the section scrolls into view */
html.anim-ready .whytochoosehome .choosetickbefore > p,
html.anim-ready .whytochoosehome .choosetickbefore ul li{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p,
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li{
    opacity: 1;
    transform: none;
}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p:nth-child(1),
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li:nth-child(1){transition-delay: .12s;}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p:nth-child(2),
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li:nth-child(2){transition-delay: .22s;}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p:nth-child(3),
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li:nth-child(3){transition-delay: .32s;}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p:nth-child(4),
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li:nth-child(4){transition-delay: .42s;}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p:nth-child(5),
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li:nth-child(5){transition-delay: .52s;}
html.anim-ready .whytochoosehome.anim-in .choosetickbefore > p:nth-child(n+6),
html.anim-ready .whytochoosehome.anim-in .choosetickbefore ul li:nth-child(n+6){transition-delay: .62s;}

@media (prefers-reduced-motion: reduce){
html.anim-ready .whytochoosehome .choosetickbefore > p,
html.anim-ready .whytochoosehome .choosetickbefore ul li{opacity: 1; transform: none; transition: none;}
}

/* ---------- Testimonials video info page (inner-page detail layout) ---------- */
.tvinfo-player{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 16px 38px rgba(13,86,122,.14);
    margin-bottom: 20px;
}
.tvinfo-player video{width: 100%; max-height: 540px; display: block; background: #000;}
.tvinfo-player iframe{width: 100%; min-height: 420px; display: block; border: 0;}
.tvinfo-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: #6a7a82;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f4;
}
.tvinfo-meta i{margin-right: 5px; color: var(--theme-accent-primary);}
.tvinfo-meta__views{color: var(--theme-accent-secondary);}
.tvinfo-title{
    color: var(--theme-accent-secondary) !important;
    font-size: 26px;
    font-weight: 800 !important;
    line-height: 1.3;
    margin: 0 0 14px;
}
.tvinfo-desc{margin-bottom: 0;}
/* related videos sidebar */
.tvinfo-side__head{
    color: var(--theme-accent-secondary) !important;
    font-size: 20px;
    font-weight: 800 !important;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--theme-accent-primary);
}
.tvinfo-rel{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid #eef2f4;
    border-radius: 14px;
    text-decoration: none !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tvinfo-rel:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(13,86,122,.12);
    border-color: #d9ecef;
}
.tvinfo-rel__thumb{
    position: relative;
    flex: 0 0 108px;
    width: 108px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
}
.tvinfo-rel__thumb img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;}
.tvinfo-rel:hover .tvinfo-rel__thumb img{transform: scale(1.07);}
.tvinfo-rel__play{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: var(--theme-accent-primary);
    transition: background .3s ease, color .3s ease;
}
.tvinfo-rel:hover .tvinfo-rel__play{background: var(--theme-accent-primary); color: #ffffff;}
.tvinfo-rel__info{display: flex; flex-direction: column; min-width: 0;}
.tvinfo-rel__name{
    color: var(--theme-accent-secondary) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tvinfo-rel__watch{
    color: var(--theme-accent-primary) !important;
    font-size: 13px;
    font-weight: 700;
}
.tvinfo-rel__watch i{margin-left: 4px; transition: transform .3s ease;}
.tvinfo-rel:hover .tvinfo-rel__watch i{transform: translateX(3px);}
@media (max-width: 991px){
    .tvinfo .svcinfo-main{margin-bottom: 30px;}
    .tvinfo-side{position: static !important;}
}