/*
 * Responsive Stylesheet for domain.com
 * Mobile-first approach with media queries
 */

/* Base mobile styles are already in style.css */

/* Tablet (768px and up) */
@media screen and (max-width: 768px) {
  /* Typography */
  h1 {
    font-size: 2.2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  /* Header */
  .nav-menu {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  /* About Section */
  .about-container {
    flex-direction: column;
  }
  
  /* Services Grid */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Form Container */
  .form-container {
    padding: 2rem;
  }
}

/* Mobile (under 576px) */
@media screen and (max-width: 576px) {
  /* Typography */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  section {
    padding: 3rem 1rem;
  }
  
  /* Services Grid */
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  /* Testimonials Grid */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  /* Benefits Grid */
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  /* Form Container */
  .form-container {
    padding: 1.5rem;
  }
  
  /* Footer */
  .footer-container {
    grid-template-columns: 1fr;
  }
  
  /* Prevent horizontal scrolling */
  .container, section {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Large screens (1200px and up) */
@media screen and (min-width: 1200px) {
  .container {
    padding: 0 2rem;
  }
  
  h1 {
    font-size: 3.5rem;
  }
  
  h2 {
    font-size: 2.5rem;
  }
  
  .hero-content {
    max-width: 700px;
  }
  
  .hero h1 {
    font-size: 3.5rem;
  }
  
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}