/* Design by : Tehseen (03009239939) */

/* ============================================================
   ABDUL MUJEEB & SONS — responsive.css
   ============================================================ */

/* ---------- Tablet: ≤1024px ---------- */
@media (max-width: 1024px) {
  .section-pad { padding: 75px 0; }

  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-img-wrap { max-width: 560px; margin-inline: auto; }
  .about-text-wrap { padding-left: 0; }

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

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

  .service-detail-inner { grid-template-columns: 280px 1fr; }
  .service-detail-img { height: 280px; }

  .clients-logo-grid { grid-template-columns: repeat(4, 1fr); }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

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

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

  .timeline-items { flex-wrap: wrap; }
  .timeline-item { flex: 0 0 calc(33.333% - 1rem); }
  .timeline-line, .timeline-progress { display: none; }

  .hero-stats .container { flex-wrap: wrap; }
  .stat-card { flex: 0 0 calc(50% - .5px); }
  .stat-card:first-child { border-radius: 0; }
  .stat-card:last-child  { border-radius: 0; }
}

/* ---------- Mobile: ≤768px ---------- */
@media (max-width: 768px) {
  :root { font-size: 15px; }
  .section-pad { padding: 60px 0; }
  .section-pad-sm { padding: 40px 0; }

  /* Header */
  .nav-menu { display: none; }
  .nav-cta  { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }

  /* Hero */
  .hero { min-height: 100svh; padding-top: 80px; padding-bottom: 60px; }
  .hero-title { font-size: clamp(2rem, 7vw, 2.8rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { display: none; }

  /* About */
  .about-features { grid-template-columns: 1fr; }
  .about-img-badge { right: 0; bottom: 0; }
  .about-img-main { height: 300px; }

  /* Why / Services */
  .why-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { height: 260px; }

  /* Milestone */
  .timeline-item { flex: 0 0 100%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Services page */
  .service-detail-inner { grid-template-columns: 1fr; }
  .service-detail-card.reverse .service-detail-inner { direction: ltr; }
  .service-detail-img { height: 220px; }
  .service-detail-body { padding: 1.8rem; }
  .service-features-grid { grid-template-columns: 1fr; }

  /* Clients */
  .clients-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .partnership-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:nth-child(3n+1) { grid-row: span 1; }
  .lightbox-prev { left: -2.2rem; }
  .lightbox-next { right: -2.2rem; }

  /* Contact */
  .form-row { grid-template-columns: 1fr; }
  .map-wrap { height: 260px; }
  .contact-form-wrap { padding: 1.8rem; }

  /* CTA band */
  .cta-band .container { flex-direction: column; text-align: center; }
  .cta-band-actions { justify-content: center; }

  /* Page hero */
  .page-hero { padding: 130px 0 60px; }
  .page-hero h1 { font-size: 2rem; }
}

/* ---------- Small Mobile: ≤480px ---------- */
@media (max-width: 480px) {
  .clients-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:nth-child(3n+1) { grid-row: span 1; }
  .hero-stats { display: none; }
  .client-filter-tabs { gap: .4rem; }
  .filter-tab { padding: .4rem .9rem; font-size: .75rem; }
  .lightbox-prev { left: -1.5rem; }
  .lightbox-next { right: -1.5rem; }
  .lightbox-inner img { max-height: 60vh; }
  .contact-action-btns { flex-direction: column; }
  .call-btn, .wa-btn { justify-content: center; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}