/* =========================================================
   Responsive rules — mirrors Tailwind's `md:` breakpoint
   (min-width: 48rem / 768px) exactly as used in the source.
   ========================================================= */

/* ---- Topbar: desktop vs mobile layout swap ---- */
@media (min-width: 48rem) {
  .topbar-desktop { display: flex; }
  .topbar-mobile { display: none; }
}

/* ---- Navbar: desktop menu vs hamburger ---- */
@media (min-width: 48rem) {
  .navbar-menu { display: flex; }
  .navbar-hamburger { display: none; }
  .navbar-mobile-menu { display: none !important; }
}

/* ---- Card grids: International Tours / Domestic Tours (2 -> 4 cols) ---- */
@media (min-width: 48rem) {
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Gallery grid (2 -> 3 cols) ---- */
@media (min-width: 48rem) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Services grid (2 -> 5 cols) ---- */
@media (min-width: 48rem) {
  .services-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Testimonials (stacked -> 2 cols) ---- */
@media (min-width: 48rem) {
  .testimonials-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Contact form rows (stacked -> 2 cols) ---- */
@media (min-width: 48rem) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Map section (stacked -> 2 cols) ---- */
@media (min-width: 48rem) {
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Footer (stacked/centered -> 3 cols, left aligned) ---- */
@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
  .footer-social a { justify-content: flex-start; }
  .footer-bottom { text-align: center; }
}

/* =========================================================
   Below are additional real-world responsive refinements
   (320px -> 4K) to keep the layout comfortable at extreme
   sizes, without altering the original design language.
   ========================================================= */

/* Small phones */
@media (max-width: 380px) {
  .hero-inner h1 { font-size: 2.25rem; }
  .hero-inner h2 { font-size: 1.5rem; }
  .navbar-logo img { height: 2.5rem; }
}

/* Large / 4K screens: keep content capped, avoid over-stretching */
@media (min-width: 1920px) {
  .container-xl,
  .card-grid,
  .gallery-grid,
  .services-grid,
  .testimonials-inner,
  .contact-card,
  .map-grid,
  .footer-grid,
  .navbar-inner,
  .topbar-inner,
  .hero-content,
  .about-inner {
    max-width: 90rem;
  }
}