/* RESPONSIVE DESIGN - MEDIA QUERIES */

@media (max-width: 1200px) {
  .about-grid,
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 900px) {
  body {
    cursor: auto !important;
  }

  .cursor,
  .cursor-ring {
    display: none !important;
  }

  nav {
    padding: 1rem 1.5rem;
  }

  #hero {
    padding: 0 1.5rem;
  }

  .nav-links {
    display: none;
    gap: 1.5rem;
  }

  section {
    padding: 5rem 1.5rem;
  }

  .about-visual {
    display: block;
  }

  .services-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .team-grid {
    gap: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Service detail page responsive adjustments */
  .carousel-section {
    height: 45vh;
  }

  .carousel-overlay {
    padding: 2rem 2rem 1.5rem;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .carousel-btn.prev {
    left: 1rem;
  }

  .carousel-btn.next {
    right: 1rem;
  }

  .details-section {
    padding: 3rem 1.5rem;
  }

  .details-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Specific padding adjustment for service page footer */
  .details-section + footer {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .mobile-menu {
    display: flex;
  }

  nav {
    padding: 1rem 1.5rem;
  }

  /* On touch devices, hide overlay by default since no hover */
  .service-overlay {
    display: none;
  }

  .about-slider-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .about-slider-btn.prev {
    left: 10px;
  }

  .about-slider-btn.next {
    right: 10px;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    aspect-ratio: 16/9;
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 3.5rem;
  }
}