/* ===========================
   HERO SECTION RESPONSIVE
=========================== */
@media (max-width: 1200px) {
  .hero h1 {
    font-size: 42px;
  }
  .hero-img {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .hero-img img {
    max-width: 80%;
  }
  .hero .ex-sp {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
    line-height: 1.2;
  }
  .hero .ex-sp {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}

/* ===========================
   SERVICES
=========================== */
@media (max-width: 992px) {
  .service-box {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .service-box .icon-circle {
    margin-bottom: 10px;
  }
}

/* ===========================
   HELPLINE
=========================== */
@media (max-width: 992px) {
  .helpline .row {
    flex-direction: column-reverse;
    text-align: center;
  }
  .helpline img {
    max-width: 80%;
    margin: 0 auto;
  }
  .helpline h2 {
    font-size: 28px;
  }
}

/* ===========================
   FACILITY
=========================== */
@media (max-width: 768px) {
  .facility h2 {
    font-size: 28px;
    line-height: 1.3;
  }
  .facility .card {
    text-align: center;
  }
}

/* ===========================
   WORKING HOURS
=========================== */
@media (max-width: 992px) {
  .working-hours-section .bg-brown {
    padding: 30px 20px;
    text-align: center;
  }
  .working-hours-section h2 {
    font-size: 28px;
  }
}

/* ===========================
   24/7 SECTION
=========================== */
@media (max-width: 768px) {
  .twenty-section h2 {
    font-size: 28px;
  }
  
}

/* ===========================
   APPOINTMENT
=========================== */
@media (max-width: 992px) {
  .appointment-section .row {
    flex-direction: column;
  }
  .appointment-section img {
    max-width: 90%;
    margin: 0 auto 20px;
  }
  .appointment-section h2 {
    font-size: 28px;
  }
}

/* ===========================
   DOCTORS
=========================== */
@media (max-width: 768px) {
  .doctor-section h2 {
    font-size: 28px;
  }
  .doctor-card {
    text-align: center;
  }
}

/* ===========================
   INFO SECTION
=========================== */
@media (max-width: 768px) {
  .info-section h2 {
    font-size: 28px;
  }
  .info-section .doctor-img {
    margin-top: 20px;
    max-width: 80%;
  }
}

/* ===========================
   TESTIMONIALS
=========================== */
@media (max-width: 768px) {
  .testimonial-wrapper {
    text-align: center;
    padding: 20px;
  }
  .testimonial-text {
    font-size: 15px;
  }
  .testimonial-author {
    margin-top: 15px;
  }
}

/* ===========================
   FAQ + FOOTER
=========================== */
@media (max-width: 768px) {
  .faq-section h2,
  .article h2,
  .footer h2 {
    font-size: 26px !important;
  }

  .footer .col-md-3 {
    text-align: center;
    margin-bottom: 20px;
  }
}

/* ===========================
   FOOTER RESPONSIVE
=========================== */
@media (max-width: 768px) {
  /* Hide Explore & Resources Columns */
  .footer .col-md-3:nth-child(3),
  .footer .col-md-3:nth-child(4) {
    display: none;
  }
  .facility .container .row .col-12 .card .card-body p{
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Align other content to left */
  .footer .container .row {
    text-align: left !important;
  }
  

  .footer .container .row .col-md-3 {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}


/* ===========================
   UNIVERSAL IMAGE CENTER (Responsive)
=========================== */
@media (max-width: 992px) {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Make parent flex container center align images */
  /* .row img,
  .container img,
  section img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  } */


  /* Hero, Helpline, Appointment, etc. specific adjustments */
  .hero-img,
  .helpline .col-md-6,
  .appointment-section .col-lg-6,
  .twenty-section .col-lg-6,
  .info-section .col-md-6,
  .doctor-section .doctor-card,
  .testimonials .col-md-6 {
    text-align: center !important;
  }

}

/* ===========================
   UNIVERSAL IMAGE RESPONSIVE
=========================== */
/* img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
} */

@media (max-width: 992px) {
  section img,
  .container img,
  .row img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===========================
   HIDE IMAGES IN FAQ & APPOINTMENT (Responsive)
=========================== */
@media (max-width: 768px) {
  /* Appointment section image hide */
  .appointment-section img {
    display: none !important;
  }

  /* FAQ section image hide */
  .faq-section img {
    display: none !important;
  }
}