.doctor-info{
  background-color:#0d95b8; /* same blue */
  padding:55px 0;
  color:#ffffff;
    font-family: 'Bitter', serif;
    /* line-height: 24px; */
}

.info-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:60px;
  padding:0 20px;
}

.info-box{
  flex:1;
}

.info-box h3{
  font-size:26px;
  font-weight:600;
  margin-bottom:20px;
  
}

.info-box ul{
  list-style:none;
  padding:0;
}

.info-box ul li{
  font-size:16px;
  line-height:24px;
  margin-bottom:10px;
  position:relative;
  padding-left:18px;
}

/* dash before text */
.info-box ul li::before{
  content:"–";
  position:absolute;
  left:0;
}



/* ========= MOBILE BACKGROUND FIX ========= */
@media (max-width: 576px){

  /* footer full background force */
  .site-footer{
    background-color: #1c1c1c;   /* same footer bg */
  }

  /* container should not cut background */
  .footer-top{
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-top: 40px !important;
    padding-bottom: 40px;
    background-color: inherit;   /* 🔥 important */
  }

  /* each section full width */
  .footer-col{
    width: 100%;
    padding: 0;
    background-color: transparent;
  }

  /* text readable */
  .footer-col p{
    font-size: 14px;
    line-height: 22px;
    color: #cccccc;
  }

  .footer-col h4{
    font-size: 18px;
    color: #ffffff;
  }

  /* map full width */
  .map-box iframe{
    width: 100%;
    height: 200px;
    display: block;
  }

  /* bottom bar also background fix */
  .footer-bottom{
    background-color: #1c1c1c;
  }

  .bottom-content{
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* ===================== TABLET ===================== */
@media (max-width: 992px){

  /* about section */
  .about-title{
    font-size: 28px;
  }

  .two-color-line{
    flex-wrap: wrap;
  }

  .doctor-right{
    margin-top: 30px;
    text-align: center;
  }

  .doctor-image-box img{
    max-width: 80%;
    height: auto;
  }

  /* doctor info section */
  .info-container{
    flex-wrap: wrap;
    gap: 30px;
  }

  .info-box{
    width: 100%;
  }

  .info-box h3{
    font-size: 22px;
  }
}


/* ===================== MOBILE ===================== */
@media (max-width: 576px){

  /* fixed height problem solve */
  .about-doctor-section{
    height: auto !important;
    padding: 40px 0;
  }

  .about-title{
    font-size: 24px;
    text-align: center;
  }

  /* .two-color-line{
    justify-content: center;
  } */

  .about-text{
    font-size: 15px;
    line-height: 24px;
  }

  .doctor-right{
    margin-top: 30px;
  }

  .doctor-image-box img{
    max-width: 100%;
  }

  .doctor-contact .phone,
  .doctor-contact .email{
    font-size: 14px;
  }

  /* doctor info */
  .info-container{
    flex-direction: column;
    gap: 25px;
  }

  .info-box h3{
    font-size: 20px;
  }

  .info-box ul li{
    font-size: 15px;
    line-height: 22px;
  }
}