/* =========================================
   TABLET LANDSCAPE & SMALL DESKTOP (Max: 1024px)
========================================= */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
   TABLET LANDSCAPE & SMALL DESKTOP (Max: 1024px)
========================================= */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
   TABLET PORTRAIT (Max: 834px / 768px)
========================================= */
@media (max-width: 834px) {
  /* Header & Mobile Menu */
  .hamburger {
    display: block;
  }
  
  .nav-links {
    position: fixed;
    top: 80px; /* Below header */
    left: 100%; /* Hidden off-screen */
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--white); /* FIXED: Changed from var(--clr-white) to var(--white) */
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2rem;
    gap: 1.5rem;
    transition: left 0.3s ease-in-out;
    box-shadow: inset 0 5px 10px -10px rgba(0,0,0,0.1);
  }

  .nav-links.active {
    left: 0;
  }

  .nav-links a.nav-item {
    font-size: 1.25rem;
  }

  /* Hamburger Animation */
  .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active .bar:nth-child(2) { opacity: 0; }
  .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Hero Section */
  .hero {
    height: 75vh;
    min-height: 500px;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  /* About Section */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-img {
    order: -1; /* Image above text on mobile */
  }

  /* Projects Section */
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .project-card.full-width {
    grid-column: 1 / -1; /* Redundant but explicit */
  }
}

/* =========================================
   MOBILE SCREENS (Max: 600px / 430px / 320px)
========================================= */
@media (max-width: 600px) {
  :root {
    --section-pad: 3rem;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-buttons .btn {
    width: 100%;
  }

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

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}