.bg-white{background-color: #fff;}
.about-hospital-main .about-hospital-left{width: 45%;}
.about-hospital-main .about-hospital-right{width: 32%;}
.about-hospital-main .about-hospital-left .paraslgheading{color: var(--light-black); font-weight: 700; text-transform: capitalize; margin-bottom: 15px;}
.about-hospital-main .about-hospital-left p{color: var(--gray-color);}
.about-hospital-right .colm-count{width: 50%; padding: 30px 15px; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; text-align: center; border-right: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2);}
.about-hospital-right .about-number, .about-hospital-right .about-title{width: 100%;}
.about-hospital-right .about-number{font-size: 54px; color: var(--blue-color); font-weight: 700; margin-bottom: 5px;}
.about-hospital-right .about-title{font-size: 16px; font-weight: 700; color: var(--gray-color);}

.about-hospital-right .colm-count:first-child, .about-hospital-right .colm-count:nth-child(2){padding-top: 10px;}
.about-hospital-right .colm-count:nth-child(2n){border-right: 0;}
.about-hospital-right .colm-count:nth-child(3n), .about-hospital-right .colm-count:last-child{border-bottom: 0; padding: 15px 15px;}

.contact-detail-with-map{width: 35%;}
.contact-detail-inner{padding: 30px; border-radius: 20px;}
.contact-detail-inner .parasmdheading{color: var(--light-black); font-weight: 700; margin-bottom: 20px;}
.contact-detail-inner .contact-list{padding: 0; margin: 0; list-style: none;}
.contact-detail-inner .contact-list li{display: flex; margin-bottom: 15px;}
.contact-detail-inner .contact-list li .icon{width: 20px; min-width: 20px; margin-right: 10px;}
.contact-detail-inner .contact-list li p{font-size: 16px; color: var(--light-gray-color);}
.contact-detail-inner .contact-list li p a{color: var(--light-gray-color);text-decoration: none;}
.contact-detail-inner .contact-list li:last-child{margin-bottom: 0;}
.contact-detail-inner .contact-map{margin-top: 30px;}
.hospital-image{width: 65%; padding-left: 30px;}
.hospital-image img{width: 100%; border-radius: 20px; overflow: hidden;}
.skelton{height: 650px;}


.doctor-item a{text-decoration: none;}
.doctor-item{border-radius: 20px; padding: 20px; background: var(--white-color); height: 100%;}
.doctor-item .doctor-item-top{border-radius: 10px; padding-bottom: 70%; overflow: hidden;}
.doctor-item .doctor-content{margin-top: 15px;}
.doctor-item .doctor-content-top .parassmheading{color: var(--light-black); font-weight: 700; margin-bottom: 5px;}
.doctor-item .doctor-content-top .parasxxsheading{color: var(--gray-color); margin-bottom: 10px;}
.doctor-item .doctor-content-top p{font-size: 16px; color: var(--gray-color); font-weight: 700; display: flex; align-items: center;}
.doctor-item .doctor-content-top p svg{margin-right: 8px;}
.doctor-item .doctor-content-bottom{border-top: 1px solid #E7E7E7; padding: 15px 20px 20px; margin: 20px -20px 0;}
.doctor-item .doctor-tab{list-style: none; padding: 0; margin-bottom: 10px;}
.doctor-item .doctor-tab li{font-size: 16px; color: var(--light-gray-color); border-bottom: 2px solid transparent; display: inline-block; padding-bottom: 2px; text-transform: capitalize; margin-right: 30px; cursor: pointer;}
.doctor-item .doctor-tab li:last-child{margin-right: 0;}
.doctor-item .doctor-tab li:hover, .doctor-item .doctor-tab li.active{color: var(--blue-color); border-bottom-color: var(--blue-color);}

.doctor-item .doctor-tab .doctor-tab-content ul li svg{width: 14px; min-width: 14px; height: 14px; margin-right: 5px;}
.doctor-item .btn-bottom{position: absolute; bottom: -18px; left: 0; right: 0;}
.doctor-item .anchor-bg-btn{width: 220px;margin: 0 auto;}
.doctor-item .doctor-tab .doctor-tab-content ul{list-style: none; padding: 0; gap: 5px 25px; justify-content: flex-start;}
.doctor-item .doctor-tab .doctor-tab-content ul li{font-size: 16px; color: var(--light-gray-color); display: flex; align-items: flex-start; padding: 5px 0; border: 0; cursor: auto;}
.doctor-item .doctor-tab .doctor-tab-content ul li svg{margin-top: 5px;}
.doctor-item .doctor-tab .doctor-tab-content ul li:hover{color: var(--light-gray-color);}
.doctor-no{font-size: 14px; color: var(--light-gray-color); text-align: center; padding: 5px 20px; font-weight: 700; background: var(--white-color); position: absolute; top: 0; right: 0; border-radius: 0 10px 0 10px;}
.profile-content{justify-content: flex-start;}
.profile-content .view-profile{color: var(--blue-color); font-weight: 700; margin-left: 10px;}
.doctors-list-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px 30px;
  padding-top: 20px;
  padding-bottom: 30px;
}
.doctor-card {
  margin-bottom: 30px;
  /* Reserve height to prevent shift */
  min-height: 380px;
}

.filter-doctor-frm {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 -15px;
  /* Reserve height for filter form */
  min-height: 60px;
}
  .filter-doctor-frm .form-group {
    width: 22%;
    padding: 0 15px;
    margin-bottom: 0;
  }
  .filter-doctor-frm .form-group select.form-control {
      padding-right: 30px;
    }

@media screen and (max-width: 1399px){
.about-hospital-main .about-hospital-left{width: 50%;}
.about-hospital-main .about-hospital-right{width: 45%;}
.doctors-list-container{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 30px;}
}

@media screen and (max-width: 1199px){
.about-hospital-right .colm-count{padding-left: 10px; padding-right: 10px;}
.about-hospital-right .about-number{font-size: 42px;}
.about-hospital-right .about-title{font-size: 14px;}
.contact-detail-with-map, .hospital-image{width: 50%;}
}
@media screen and (max-width: 991px) {
  .doctors-list-container{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (max-width: 767px){
.about-hospital-main{gap: 30px;}
.about-hospital-main .about-hospital-left, .about-hospital-main .about-hospital-right{width: 100%;}
.about-hospital-right .about-number{font-size: 36px;}
.contact-detail-with-map{width: 100%;}
.contact-detail-inner{padding: 35px 25px;}
.hospital-image{width: 100%; padding-left: 0px; padding-top: 20px;}
.doctor-item .anchor-bg-btn{width: 200px;}
.doctor-item .doctor-tab li{font-size: 15px; margin-right: 20px;}
.doctor-item .doctor-tab li:last-child{margin-right: 0;}
.doctors-list-container{grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px;}
.filter-doctor-frm{flex-wrap: wrap; min-height: 280px;}
.form-group { width: 100%; margin-bottom: 10px; }
/* .anchor-bg-btn { margin-left: 15px; margin-top: 15px; } */
}

.book-list-container{grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px 30px; padding-top: 40px; margin-bottom: 60px;}


.book-tab ul{padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; gap: 30px;}
.book-tab ul li{font-size: 18px; color: var(--light-black);}
.book-tab ul li a{text-decoration: none; color: var(--light-black); position: relative; padding-left: 40px; cursor: pointer;}
.book-tab ul li a::after{content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gray-color);}
.book-tab ul li.active a, .book-tab ul li:hover a{color: var(--blue-color);}
.book-tab ul li.active a::after, .book-tab ul li:hover a::after{background: var(--blue-color); border-color: var(--blue-color);}

@media screen and (max-width:1399px) {
.book-list-container{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media screen and (max-width:991px) {
.book-list-container{grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 30px;}
}

@media screen and (max-width:767px) {
.book-list-container{grid-template-columns: repeat(1, minmax(0, 1fr)); padding-top: 30px; margin-bottom: 40px;}
.book-tab ul{gap: 15px;}
.book-tab ul li{font-size: 16px;}
.book-tab ul li a{padding-left: 25px;}
.book-tab ul li a::after{width: 15px; height: 15px; top: 2px;}
}