/* === Responsive Media Queries === */

/* 📱 Small Devices: 481px–767px */
@media (min-width: 481px) and (max-width: 767px) {
  .search-input {
    font-size: 14px;
    height: 45px;
  }

  .hero-banner {
    height: 280px;
    background-position: top;
  }

  .hero-banner h1 {
    font-size: 24px;
  }

  .hero-banner p {
    font-size: 14px;
  }
}

/* 📱 Tablets: 768px–991px */
@media (min-width: 768px) and (max-width: 991px) {
  .search-input {
    font-size: 15px;
  }

  .hero-banner {
    height: 330px;
    background-position: center;
  }

  .hero-banner h1 {
    font-size: 30px;
  }

  .hero-banner p {
    font-size: 16px;
  }
}

/* 💻 Large Screens: 1024px–1440px */
@media (min-width: 1024px) and (max-width: 1440px) {
  .search-input {
    font-size: 16px;
  }

  .hero-banner {
    height: 400px;
    background-position: center;
  }

  .hero-banner h1 {
    font-size: 36px;
  }

  .hero-banner p {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .hero-banner {
    height: 250px;
    background-position: top;
  }

  .hero-banner h1 {
    font-size: 20px;
  }

  .hero-banner p {
    font-size: 13px;
  }
}