.banner-section {
    background-size: cover;
    background-image: url("../media/webp/doctor-work.webp");
  }
  
  .banner-container {
    display: flex;
    justify-content: center;
  }
  
  .banner-container h2 {
    color: var(--blue);
    font-size: 80px;
    line-height: 110px;
  }
  
  .banner-container span {
    color: var(--blue);
    letter-spacing: 20px;
    font-size: 200px;
  }
  
  @media (max-width: 996px) {
    .banner-section {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  
    .banner-section .banner-container h2 {
      font-size: 40px;
      line-height: 70px;
    }
  
    .banner-section .banner-container span {
      font-size: 120px;
      letter-spacing: 10px;
    }
  }
  
  /** first-mode-section **/
  
  .doctor-section {
    padding: 5% 10%;
  }
  
  .doctor-section .doctor-container {
    display: grid;
    gap: 30px;
    align-items: center;
    grid-template-columns: 20% 1fr;
  }
  
  .doctor-section .doctor-container .doctor-card {
    box-shadow: 3px 3px 10px #00000030;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .doctor-section .doctor-container .doctor-card img {
    display: flex;
  }
  
  .doctor-section .doctor-container .doctor-info {
    background: var(--blue);
    padding: 20px;
    color: white;
    text-align: center;
  }
  
  .doctor-section .doctor-container .doctor-info h2 {
    color: white;
    font-size: 100%;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .doctor-section .doctor-container .doctor-info p {
    color: white;
    font-size: 100%;
    text-align: center;
  }
  
  .doctor-section .doctor-container .doctor-info .book-btn a {
    background: var(--red);
    color: white;
    padding: 5px 10px;
    font-weight: 700;
    font-size: 10px;
    transition: 0.3s ease;
    border-radius: 15px;
  }
  
  .doctor-section .doctor-container .doctor-info .book-btn a:hover {
    background: white;
    color: black;
  }
  
  .doctor-section .doctor-container .doctor-bio {
    display: flex;
    flex-direction: column;
  }
  
  .doctor-section .doctor-container .doctor-bio h1 {
    color: var(--blue);
    font-size: 30px;
    margin-bottom: 30px;
  }
  
  .doctor-section .doctor-container .doctor-bio h2 {
    color: var(--blue);
    margin-bottom: 20px;
  }
  
  .doctor-section .doctor-container .doctor-bio p {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .doctor-section .doctor-container .doctor-bio h3 {
    color: var(--blue);
    text-align: justify;
  }
  
  @media (max-width: 996px) {
  
    .doctor-section .doctor-container {
      display: grid;
      gap: 30px;
      align-items: center;
      grid-template-columns: 100%;
    }
  }