/* ==========================================================================
   MUSFIRAH INTERNATIONAL QURAN INSTITUTE - RESPONSIVE STYLES
   ========================================================================== */

/* Mobile Devices (up to 575.98px) */
@media (max-width: 575.98px) {
  html {
    font-size: 15px;
  }

  .brand-logo-img {
    height: 42px !important;
  }

  .brand-title {
    font-size: 1.15rem !important;
  }

  .brand-subtitle {
    font-size: 0.58rem !important;
    letter-spacing: 1.2px !important;
  }

  .hero-section {
    padding: 5rem 0 3.5rem;
  }

  .display-hero {
    font-size: 1.95rem !important;
  }

  .display-section {
    font-size: 1.6rem !important;
  }

  .page-banner {
    padding: 4rem 0 2.5rem;
  }

  .page-banner h1 {
    font-size: 1.85rem;
  }

  .card-musfirah {
    padding: 1.35rem;
  }

  .counter-box {
    padding: 1.5rem 0.8rem;
  }

  .btn-gold, .btn-outline-gold, .btn-brown {
    padding: 0.75rem 1.4rem;
    font-size: 0.88rem;
    width: 100%;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 28px;
    bottom: 20px;
    right: 20px;
  }
}

/* Landscape Mobile & Tablets (up to 991.98px) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--color-dark-brown);
    border: 1px solid var(--color-luxury-gold);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    margin-top: 0.8rem;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4);
  }

  .navbar-musfirah .nav-link {
    color: var(--color-light-cream) !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    font-size: 1rem;
  }

  .navbar-musfirah .nav-link:last-child {
    border-bottom: none;
  }

  .navbar-musfirah .nav-link::after {
    display: none;
  }

  .navbar-musfirah .nav-link:hover,
  .navbar-musfirah .nav-link.active {
    color: var(--color-warm-gold) !important;
    padding-left: 8px !important;
  }

  .hero-spotlight-card {
    margin-top: 2rem;
  }
}

/* Medium Desktops & Laptops (992px to 1220px) */
@media (min-width: 992px) and (max-width: 1220px) {
  .brand-logo-img {
    height: 42px !important;
  }
  .brand-title {
    font-size: 1.15rem !important;
  }
  .brand-subtitle {
    font-size: 0.58rem !important;
    letter-spacing: 1.2px !important;
  }
  .navbar-musfirah .nav-link {
    font-size: 0.86rem !important;
    padding: 0.4rem 0.45rem !important;
  }
  .navbar-musfirah .btn-gold {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.8rem !important;
  }
}

/* Desktop & Large Screens (992px and up) */
@media (min-width: 992px) {
  .hero-section {
    padding: 7.5rem 0 5.5rem;
  }
}