/* Responsive Styles */

/* Extra Small Devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  /* Typography */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Hero Section */
  .hero {
    padding: var(--space-8) 0;
  }
  
  .hero-content h2 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  /* Navigation */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: 90;
  }
  
  .nav-links.active {
    transform: translateX(0);
  }
  
  .mobile-menu-toggle {
    display: block;
    z-index: 100;
  }
  
  /* Sections */
  .section-header h2 {
    font-size: 1.75rem;
  }
  
  .section-header p {
    font-size: 1rem;
  }
  
  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  /* Testimonials */
  .testimonial-content p {
    font-size: 1rem;
  }
  
  /* CTA */
  .cta h2 {
    font-size: 1.75rem;
  }
  
  .cta p {
    font-size: 1rem;
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .footer-links {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  /* About Page */
  .about-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  .about-content h2 {
    font-size: 1.75rem;
  }
  
  /* Services Page */
  .service-grid,
  .service-grid.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  
  .service-content h2 {
    font-size: 1.75rem;
  }
  
  /* Process Steps */
  .process-steps {
    flex-direction: column;
    gap: var(--space-6);
  }
  
  .process-steps::before {
    display: none;
  }
  
  /* Contact Page */
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-info h2 {
    font-size: 1.75rem;
  }
}

/* Small Devices (tablets, 768px and down) */
@media only screen and (max-width: 768px) {
  /* Navigation */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: 90;
  }
  
  .nav-links.active {
    transform: translateX(0);
  }
  
  .mobile-menu-toggle {
    display: block;
    z-index: 100;
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  
  /* About Page */
  .about-grid {
    grid-template-columns: 1fr;
  }
  
  /* Services Page */
  .service-grid,
  .service-grid.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  
  /* Process Steps */
  .process-steps {
    overflow-x: auto;
    padding-bottom: var(--space-4);
    justify-content: flex-start;
  }
  
  .process-step {
    min-width: 200px;
  }
  
  /* Contact Page */
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Medium Devices (desktops, 1024px and down) */
@media only screen and (max-width: 1024px) {
  /* Services */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Team */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Values */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large Devices (large desktops, 1280px and up) */
@media only screen and (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}