/* ====================================================
   RESPONSIVE DESIGN
==================================================== */
/* ================= TABLET ================= */
@media (max-width: 1024px) {

  .hero-grid,
  .case-row,
  .work-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-content h1 {
    font-size: 48px;
  }

  .image-border {
    width: 320px;
    height: 320px;
    margin: 0 auto;
  }

  .case-content p,
  .work-card p {
    max-width: 100%;
  }

  .section-header {
    margin-bottom: 70px;
  }
   .templates-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ================= MOBILE ================= */
@media (max-width: 800px) {

 .hamburger {
    display: flex;
    z-index: 1100;
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 100vh;

    background: var(--bg-dark); /* same as your site */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 35px;

    transform: translateY(-100%);
    transition: transform 0.5s ease;

    z-index: 1050;
  }

  .nav-links.active {
    transform: translateY(0);
  }

  .nav-links li {
    list-style: none;
  }

  .nav-links a {
    font-size: 22px;
    color: var(--text-primary);
    text-decoration: none;
  }

 
  /* HERO */
  .hero {
    padding-top: 100px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 38px;
  }

  .hero-content p {
    margin: 0 auto 30px auto;
  }

  .image-border {
    width: 260px;
    height: 260px;
    background: none !important;   /* remove animated border */
    padding: 0;                    /* remove border space */
  }

  /* SECTIONS */
  .case-section,
  .testimonials-section,
  .recent-work-section,
  .contact-section {
    padding: 80px 0;
  }

  .section-header h2 {
    font-size: 32px;
  }

  .case-row {
    margin-bottom: 80px;
  }

  .testimonial-card {
    padding: 30px;
  }

  .work-card h3 {
    font-size: 22px;
  }
  .templates-grid {
    grid-template-columns: 1fr;
  }
  .seo-content {
    padding: 70px 0;
  }

  .seo-content h2 {
    font-size: 2rem;
  }

  .seo-content p {
    font-size: 1rem;
  }

  .seo-content h3 {
    font-size: 1.3rem;
  }

}

/* Ensure navbar is responsive */
@media (max-width: 480px) {
  .nav-links {
    width: 100%; /* full width on very small screens */
    padding-top: 100px;
  }

  .nav-links a {
    font-size: 18px;
  }
}