/* ========================
   RESPONSIVE STYLES
   ======================== */

/* Tablets (≤ 1024px) */
@media (max-width: 1024px) {
  .navbar {
    padding: 0 2rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero h3 {
    font-size: 1.2rem;
  }

  .contact-container,
  .services-container,
  .service-detail,
  .mv-container {
    flex-direction: column;
    gap: 2rem;
  }

  .service-box,
  .mv-box {
    max-width: 100%;
  }

  .service-row {
    flex-direction: column !important;
  }

  .map {
    height: 350px;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  /* Navbar stack */
  .navbar {
    flex-direction: column;
    height: auto;
    padding: 1rem;
    background: rgba(0,0,0,0.7); /* fallback background */
  }

  .nav-links {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  .navbar .logo img {
    width: 200px;
    height: auto;
  }

  /* Hero text */
  .home-hero h1,
  .contact-hero h1,
  .service-hero h1,
  .about-hero h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-top: 80px;
  }

  .home-hero h3 {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Sections */
  .contact-page,
  .services-page,
  .about-intro {
    padding: 2rem 1rem;
  }

  .cta {
    padding: 2rem 1rem;
  }

  .map {
    height: 250px;
  }

  footer {
    padding: 1.5rem 1rem;
  }

  footer .footer-logo {
    max-height: 60px;
  }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.2rem;
  }

  .btn-fill,
  .btn-outline {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .service-box img {
    border-radius: 6px;
  }

  .service-box h3 {
    font-size: 1rem;
  }
}