@media (max-width: 991.98px) {
  section {
    padding: 72px 0;
  }

  .navbar-collapse {
    padding: 18px 0 8px;
  }

  .navbar .btn-brand {
    width: 100%;
    margin-top: 10px;
  }

  .hero {
    min-height: auto;
    padding: 126px 0 78px;
    background:
      linear-gradient(180deg, rgba(17, 17, 17, 0.95), rgba(17, 17, 17, 0.72)),
      url("../images/hero/ei-mama-hero-food.jpg") center / cover no-repeat;
  }

  .hero-stat {
    margin-bottom: 10px;
  }

  .special-panel {
    padding: 28px;
  }

  .shop-story-image {
    min-height: 320px;
  }
}

@media (max-width: 767.98px) {
  section {
    padding: 58px 0;
  }

  .brand-logo {
    width: 72px;
    height: 72px;
  }

  .navbar-brand {
    font-size: 1.55rem;
  }

  .hero {
    padding-top: 112px;
  }

  .hero h1,
  .page-hero h1 {
    line-height: 1.16;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-actions {
    display: grid;
    gap: 12px;
  }

  .hero-actions .btn-brand,
  .hero-actions .btn-outline-brand {
    width: 100%;
  }

  .page-hero {
    padding: 116px 0 64px;
  }

  .feature-panel,
  .review-card,
  .contact-panel,
  .special-panel {
    padding: 24px;
  }

  .cta-band {
    text-align: center;
  }

  .cta-band .btn-outline-brand {
    width: 100%;
    margin-top: 12px;
  }

  .map-placeholder,
  .map-placeholder iframe {
    min-height: 300px;
    height: 300px;
  }

  .whatsapp-float,
  .scroll-top {
    right: 15px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-title {
    font-size: 2rem;
  }

  .food-card-body {
    padding: 18px;
  }

  .menu-filter {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .filter-btn {
    white-space: nowrap;
  }
}