  /* Header Styles */
  @media (max-width: 992px) {
    .btn-login {
      font-size: 0.8rem;
      padding: 0.35rem 0.6rem;
    }
  }

  @media (max-width: 576px) {
    .container-fluid {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .logo-container {
      width: 120px;
      height: 120px;
    }

    .btn-login {
      padding: 0.3rem 0.5rem;
      font-size: 0.75rem;
    }

    .navbar-toggler {
      width: 35px;
      height: 35px;
      padding: 0.3rem;
    }

    .header-top {
      min-height: 60px;
      gap: 0.5rem;
    }
  }

  @media (max-width: 360px) {
    .container-fluid {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    .btn-login {
      padding: 0.25rem 0.4rem;
      font-size: 0.7rem;
    }
  }

  /* ---------------------------------------------------------------------------*/

  /* Doctor Booking Banner  */
  @media (max-width: 992px) and (min-width: 769px) {
    .doctor-booking-banner-content h1 {
      font-size: 2.5rem;
      text-align: center;
    }
    
    .doctor-booking-banner-content .res {
      font-size: 1.2rem;
      text-align: center;
    }
    
    .doctor-booking-banner-image {
      margin-top: 2rem;
    }
    
    .doctor-booking-banner-image i {
      font-size: 5rem !important;
    }
  }

  @media (max-width: 768px) {
    .doctor-booking-banner-content h1 {
      font-size: 2rem;
      text-align: center;
    }
    
    .doctor-booking-banner-content .res {
      font-size: 1rem;
      text-align: center;
    }
    
    .doctor-booking-banner-image i {
      font-size: 4rem !important;
    }
  }

  @media (max-width: 576px) {
    .doctor-booking-banner-content h1 {
      font-size: 1.5rem;
    }
    
    .doctor-booking-banner-content .res {
      font-size: 0.9rem;
    }
    
    .doctor-booking-banner-image i {
      font-size: 3rem !important;
    }
  }
  /* ---------------------------------------------------------------------------*/

  /* Hero Section  */

  @media (max-width: 768px) {
    .hero-content {
      flex-direction: column;
      text-align: center;
      gap: 2rem;
    }

    .hero-title {
      font-size: 2.5rem;
    }

    .medical-hero-statistics-container {
      justify-content: center;
    }

    .medical-hero-action-buttons-container {
      justify-content: center;
    }

    .medical-hero-floating-badge-top-right,
    .medical-hero-floating-badge-bottom-left {
      position: static;
      margin: 1rem 0;
      display: inline-block;
    }

    .medical-search-form-row-wrapper {
      flex-direction: column;
      gap: 1rem;
    }

    .form-row {
      flex-direction: column;
      gap: 1rem;
    }

    .medical-appointment-search-form-container {
      padding: 1.5rem;
    }

    .search-form {
      padding: 1.5rem;
    }

    #heroCarousel .carousel-item img {
      height: 450px;
    }

    /* Medical Section */
    .medical-title {
      font-size: 2rem;
    }

    .specialty-card {
      margin-bottom: 1rem;
    }

    /* Topic Tag */
    .topic-tag {
      font-size: 0.8rem;
      padding: 0.4rem 0.8rem !important;
      margin: 0.25rem;
    }
  }

  @media (max-width: 576px) {
    #heroCarousel .carousel-item img {
      height: 400px;
    }
  }

  /* ---------------------------------------------------------------------------*/
  /* Doctor Booking Section */
  @media (min-width: 992px) {
    .col-lg-2-4 {
      flex: 0 0 auto;
      width: 20%;
    }
  }


  /* ---------------------------------------------------------------------------*/
  /* Exclusive Offers SubNavbar */
  @media (max-width: 768px) {
    .offers-title {
      font-size: 0.9rem;
    }

    .offer-item {
      min-width: 140px;
      padding: 0.5rem;
    }

    .offer-icon {
      width: 28px;
      height: 28px;
      font-size: 0.8rem;
    }

    .offer-main-text {
      font-size: 0.65rem;
    }

    .offer-sub-text {
      font-size: 0.55rem;
    }

    .btn-exclusive-offers {
      font-size: 0.7rem;
      padding: 0.3rem 0.6rem;
    }
  }

  @media (max-width: 576px) {
    .offers-title {
      font-size: 0.85rem;
    }

    .offer-item {
      min-width: 120px;
      padding: 0.4rem;
    }

    .offer-icon {
      width: 24px;
      height: 24px;
      font-size: 0.75rem;
    }

    .offer-main-text {
      font-size: 0.6rem;
    }

    .offer-sub-text {
      font-size: 0.5rem;
    }

    .btn-exclusive-offers {
      font-size: 0.7rem;
    }

    /* Topic Tag */
    .topic-tag {
      font-size: 0.75rem;
      padding: 0.3rem 0.6rem !important;
      margin: 0.2rem;
    }
  }

  /* ---------------------------------------------------------------------------*/
  /* Footer */
  @media (max-width: 768px) {
    .footer-logo {
      width: 130px;
    }

    /* Footer bottom section responsive */
    .footer-bottom {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }

    .footer-links {
      justify-content: center;
      gap: 1rem !important;
    }
  }

  @media (max-width: 576px) {
    .footer-logo {
      width: 130px;
    }

    .footer-links {
      gap: 0.75rem !important;
    }

    .footer-links a {
      font-size: 0.85rem;
    }
  }

  @media (max-width: 480px) {
    .footer-links {
      gap: 0.5rem !important;
    }

    .footer-links a {
      font-size: 0.8rem;
    }

    .footer-bottom .text-muted p {
      font-size: 0.85rem;
    }
  }

  /* ---------------------------------------------------------------------------*/
  /* Auth  */
  @media (max-width: 768px) {
    .auth-card {
      padding: 2rem 1.5rem;
      margin: 1rem;
    }

    .auth-title {
      font-size: 1.75rem;
    }

    .auth-form-section {
      padding: 1rem;
    }
  }

  @media (max-width: 576px) {
    .auth-card {
      padding: 1.5rem 1rem;
      margin: 0.5rem;
    }

    .auth-icon {
      width: 60px;
      height: 60px;
      font-size: 2rem;
    }

    .auth-title {
      font-size: 1.5rem;
    }
  }