
@media only screen and (max-device-width: 1024px) {
  #header .header-btn-collapse-nav{
    display: block;
  }
  #header .header-nav-main {
    position: absolute;
    background: transparent;
    width: 100%;
    top: 100%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
  #header .header-nav-main:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background: #FFF;
    z-index: -1;
    transform: translateX(-50%);
}
#header .header-nav-main nav {
  max-height: 50vh;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 15px;
  transition: ease all 500ms;
}
#header .header-nav-main nav > ul {
  padding-top: 15px;
  padding-bottom: 15px;
  flex-direction: column;
}
#header .header-nav-main nav > ul li {
  border-bottom: 1px solid #e8e8e8;
  clear: both;
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
}
#header .header-nav-main nav > ul li a {
  font-size: 15px;
  font-style: normal;
  line-height: 20px;
  padding: 7px 8px;
  margin: 1px 0;
  border-radius: 4px;
  text-align: left;
}
#header .header-nav-main nav > ul > li > a {
  text-transform: none;
  font-weight: 600;
  margin-top: 1px;
  margin-bottom: 1px;
  color: #CCC;
}
#header .header-nav-main.header-nav-main-square nav > ul > li a {
  border-radius: 0 !important;
}
#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a {
  color: #000;
}
.feature-box-content img{width: 35px;}
.feature-box-content h2{font-size: 25px;}
.feature-box-content h3{font-size: 18px;}
}

@media only screen  and (min-width: 1200px){
    .custom-col{width: 12.5%; flex: 0 0 auto;}
    .site-header { padding-top: 100px; padding-bottom: 50px; }
    .w-lg-25{ width: 25% !important;}
    .w-lg-50{ width: 50% !important;}
    .mobile-block{display: none;}
    .highlight-section {margin-bottom: 1.5rem;}
    .speciality .custom-col{width: 25%; flex: 0 0 auto;}
}

@media only screen  and (min-device-width: 992px)  and (max-device-width: 1024px) {
    .filter-details-box .doctor-image img{ width: 100%; height: auto;}
    .blog-section .thumbnail-image img{ width: 100%; height: auto; object-fit: initial;}
    .doctor-section .doctor-image img{width: 100%; height: auto; object-fit: initial;}
    .doctor-details-section .doctor-image img{ width: 100%; height: auto; object-fit: initial;}
    .blog-master-section .thumbnail-image img{width: 100%; height: auto; object-fit: initial;}
    .page-header{margin: 0;}
    .header-top-nav { display: none !important;}
    .form-section h2{font-size: 18px;}
    .custom-col{width: 20%;}
    .hospital-facility-feature{ width: 25%;}
    .about-content-area h3{font-size: 16px;}
    .desktop-block{display: none;}
    .feature-image{margin-top: -30%;}
}


/* For Tablet */

@media only screen and (min-width: 768px) and (max-width: 991px){
    .highlight-wrapper{ padding: 20px 20px; margin-top: 25px;}
    .hospital-speciality .hospital-card-image img{ width: 100%; height: auto}
    .header-top-nav { display: none !important;}
    .hospital-card-image img{ width: 100%; height: auto;}
    .page-header { margin: 0;}
    .filter-details-box .card-body{ padding: 1rem;}
    .hospital-card-content h2{ font-size: 18px; line-height: 22px;}
    .sec-title{margin-bottom: 6px; padding-bottom: 6px;}
    .sec-title h2{ font-size: 22px; margin-bottom: 5px; line-height: 22px;}
    .filter-details-box > h2{ font-size: 22px; line-height: 22px; }
    .desktop-block{ display: none;}
    section.section{ padding: 25px 0;}
    .filter-details-box .doctor-image img{ width: 100%; height: auto;}
    .blog-section .thumbnail-image img{ width: 100%; height: auto;}
    .doctor-section .doctor-image img{width: 100%; height: auto;}
    .doctor-details-section .doctor-image img{ width: 100%; height: auto;}
    .blog-master-section .thumbnail-image img{width: 100%; height: auto;}
    .blogs-post img{width: 100%; height: auto;}
    .blog-details-content h3{font-size: 20px;}
    .blogs-post::after { top: -23px; left: 23px; width: 88%; }
    .blogs-post::before { top: -12px; left: 12px; width: 94%; }
    .doctor-profile-list .doctor-image img{width: 100%; height: 230px;}
    .faq-section .accordion-header span{font-size: 15px;}
    .accordion-header .accordion-button{align-items: start;}
    .hospital-profile-list .hospital-card-image img{width: 100%;height: auto;}
    .treatment-hospital-list .hospital-card-image img{width: 100%; height: auto;}
    #expertDoctor.owl-carousel .doctor-image img{width: 100%; height: auto;}
    .hospital-facility-feature{width: 25%;}
    .facility-icon{margin: 0 auto;}
    .custom-col { width: 25%; }
    .owl-carousel .owl-nav{top: 34%;}
    .about-content-area .hospital-facility-feature:first-child{margin-bottom: 20px;}
    .tab-scroll{ width: 100%; }
    .booking-section { margin-top: 18px;}
    .page-header{margin: 0;}
    .form-section h2{font-size: 18px;}
    .about-content-area h3{font-size: 16px;}
    .feature-image{margin-top: -45%; width: 65px; height: 65px;}
}

/* For Medium Devive */

@media only screen and (max-width: 767px) {
  .tab-scroll { width: 100%; }
  .fixed-footer{
    display: block;
    background-color: #800000;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 99;
    color: #fff;
  }
  .fixed-footer a{color: #fff; font-weight: 600; text-transform: capitalize; font-size: 14px; display: block;padding:2px;  }
  .booking-section { margin-top: 18px;}
  .feature-image{margin-top: -27%; width: 65px; height: 65px;}
  .header-top-nav { display: none !important;}
  .page-header{margin: 0;}
  .form-section h2{font-size: 18px;}
  .custom-col { width: 33.2%; }
  .hospital-facility-feature{width: 30%;}
  .about-content-area h3{font-size: 16px;}
  .desktop-block{ display: none;}
  .about-content-area h2{font-size: 20px; font-weight: 600; margin-bottom: 6px;}
  .accreditation { margin-bottom: 15px; }
}

/* For Small Device */

@media only screen and (max-width: 480px){
  .sec-title h2{font-size: 20px;}
  .feature-image{margin-top: -23%; width: 65px; height: 65px;}
  .booking-section { margin-top: 18px;}
  .header-top-nav { display: none !important;}
  .page-header{margin: 0;}
  .form-section h2{font-size: 18px;}
  .custom-col { width: 50%; }
  .hospital-facility-feature{ width: 50%;}
  .about-content-area h3{font-size: 16px;}
  .desktop-block{ display: none;}
  .about-content-area h2{font-size: 20px; font-weight: 600; margin-bottom: 6px;}
  .accreditation { margin-bottom: 15px; }
  .dr_whtsapp{margin-top: 0;}
  .block-card-content a{margin-bottom: 0;}
  .doctor-details-section .doctor-image img{width: 100%;height:auto;}
}