/* ==========================================================================
   Tablets & Medium Screens (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
  /* Header & Mobile Menu Toggle */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    padding: 0;
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    gap: 0;
  }

  .nav-links.active {
    max-height: 400px; /* Adjust if your menu items increase */
    padding: 10px 0 20px 0;
  }

  .nav-links li {
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
  }

  .nav-links a:hover,
  .nav-links a.active {
    background: var(--light);
  }

  .mobile-menu-toggle {
    display: block;
  }
}

/* ==========================================================================
   Mobile Phones (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Typography Resizing */
  .home-hero h1,
  .page-hero h1 {
    font-size: 2.2rem;
  }
  .home-hero p,
  .page-hero p {
    font-size: 1.1rem;
  }
  .section-title h2 {
    font-size: 2rem;
  }
  .site-footer h2 {
    font-size: 1.8rem;
  }

  /* Grids to Single Column */
  .services-grid,
  .portfolio-grid,
  .stats-grid,
  .contact-grid,
  .about-grid,
  .founder-grid,
  .features-grid,
  .process-steps {
    grid-template-columns: 1fr;
  }

  /* Buttons Stacking */
  .button-group {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }
  .button-group .cta-btn {
    width: 100%;
  }

  /* Hide the Header 'Book Now' Button to save space on very small screens */
  .header-actions .cta-btn {
    display: none;
  }

  /* General Spacing Adjustments */
  .home-hero-content {
    margin-top: 30px;
  }
  .contact-section,
  .about-section,
  .founder-section,
  .why-choose-section,
  .services-section,
  .process-section,
  .portfolio-section {
    padding: 50px 0;
  }

  .card {
    padding: 25px;
  }
  .map-container iframe {
    height: 350px;
  }
  .portfolio-item {
    height: 250px;
  }
}