@media (max-width: 991px) {
  .custom-navbar {
    background: rgba(7, 7, 7, 0.95);
  }

  .hero {
    padding: 140px 0 90px;
    text-align: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-highlights {
    justify-content: center;
  }

  .hero-floating-card {
    position: static;
    margin-top: 1rem;
    display: inline-block;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.8rem;
  }

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

  .food-card-image {
    height: 190px;
  }

  .cta-box {
    padding: 40px 24px;
  }

  .lunch-banner {
    padding: 60px 0;
    text-align: center;
  }

  .price {
    font-size: 2.4rem;
  }
}

@media (max-width: 576px) {
  .hero {
    min-height: auto;
  }

  .hero-highlights div {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .feature-box {
    padding: 22px;
  }

  .why-card {
    padding: 28px;
  }

  .gallery-img {
    height: 220px;
  }
}