/* ==========================================================================
   MADHO ENTERPRISES – responsive overrides
   Breakpoints follow Bootstrap 5.3:
     ≥1400 large desktop · 1200–1399 desktop · 992–1199 laptop
     768–991 tablet · 320–767 mobile
   ========================================================================== */

/* ---- Laptop and below (<1200px) ---- */
@media (max-width: 1199.98px) {
  .inner-hero::before {
    background: linear-gradient(90deg,
        rgba(30, 27, 75, 0.95) 0%,
        rgba(48, 41, 105, 0.85) 55%,
        rgba(63, 53, 114, 0.5) 100%);
  }
}

/* ---- Tablet and below (<992px) ---- */
@media (max-width: 991.98px) {
  :root {
    --space-section: 4rem;
  }

  .site-nav .btn.btn-ghost {
    padding: 0;
    width: 42px !important;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero {
    padding: 3rem 0 5.5rem;
    text-align: center;
  }

  .hero .btn-row {
    justify-content: center;
  }

  .hero-img {
    max-height: 440px;
    margin-top: 1rem;
  }

  .site-nav .nav-link.active::after {
    display: none;
  }

  /* Banner image sits behind the text, so strengthen the overlay */
  .inner-hero {
    background-position: 68% center;
  }

  .inner-hero::before {
    background: linear-gradient(180deg,
        rgba(30, 27, 75, 0.9) 0%,
        rgba(48, 41, 105, 0.82) 100%);
  }

  /* Why Choose Us: image stacks above the copy */
  .why-visual {
    max-width: 520px;
    margin: 0 auto;
  }

  /* Service approach: image no longer sticks once it drops below the timeline */
  .service-visual {
    position: static;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* ---- Mobile (<576px) ---- */
@media (max-width: 575.98px) {
  :root {
    --space-section: 3.2rem;
  }

  /* Bootstrap's 3rem horizontal gutter (g-5) is wider than the container's side
     padding on phones and causes sideways scrolling. Keep the vertical gap. */
  .g-5,
  .gx-5 {
    --bs-gutter-x: 1.5rem;
  }



  .btn {
    width: 100%;
  }

  .service-card .btn {
    width: auto;
    align-self: stretch;
  }

  .cta {
    padding: 2.5rem 1.2rem;
  }

  .hero::before {
    width: 420px;
    height: 420px;
  }

  .site-nav .brand img {
    height: 35px;
  }

  .footer {
    padding-top: 5rem;
  }

  .topbar .hide-xs {
    display: none;
  }

  .fab {
    width: 48px;
    height: 48px;
  }

  .map-wrap {
    aspect-ratio: 4 / 3;
  }

  .inner-hero h1 {
    max-width: none;
  }

  .mv-icon {
    width: 62px;
    height: 62px;
    font-size: 1.6rem;
  }

  .timeline {
    --timeline-node: 48px;
  }

  .timeline-step {
    gap: 1rem;
  }

  .enquiry-modal .modal-header {
    padding: 1.25rem 1.25rem 1rem;
  }

  .enquiry-modal .modal-body {
    padding: 1.25rem;
  }

  .footer .logo-badge img {
    height: 40px;
  }
}

/* ---- Very small phones (<360px) ---- */
@media (max-width: 359.98px) {
  .site-nav .brand img {
    height: 36px;
  }

  .brand small {
    font-size: 0.6rem;
  }
}