/* ================================
   📱 Mobile Navigation Toggle
================================ */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle img {
  width: 28px;
  height: 28px;
}

/* ================================
   📱 Responsive Layout
================================ */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 20px;
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
    display: none;
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    margin: 5px 0;
  }

  .nav-links a {
    width: 100%;
    padding: 10px;
    background: #333;
    border-radius: 5px;
  }

  .hero-content {
    text-align: center;
    padding: 20px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  form {
    width: 100%;
  }

  .service-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .service-card {
    padding: 20px;
  }
}

/* ================================
   📱 Small Devices
================================ */
@media (max-width: 480px) {
  .logo {
    font-size: 18px;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  p {
    font-size: 0.95rem;
  }

  .cta-button {
    font-size: 0.95rem;
    padding: 10px 16px;
  }

  .gallery-item figcaption {
    font-size: 0.85rem;
  }
}