/* =============================================
   SIANT AGRO CHEMICALS – responsive.css
   Media Queries for Full Responsiveness
============================================= */

/* ── 1200px ───────────────────────────────── */
@media (max-width: 1200px) {
  .cat-grid  { grid-template-columns: repeat(3, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ── 1024px ───────────────────────────────── */
@media (max-width: 1024px) {
  .section { padding: 72px 0; }
  .about-grid  { grid-template-columns: 1fr; gap: 48px; }
  .about-badge { right: 0; bottom: -16px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .product-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .mission-vision-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
  .stat:last-child,
  .stat:nth-last-child(2) { border-bottom: none; }
}

/* ── 900px ────────────────────────────────── */
@media (max-width: 900px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .contact-cards-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}

/* ── 768px (Tablet) ───────────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav-menu, .nav-cta { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .slide-content { left: 5%; right: 5%; bottom: 14%; }
  .slide-btns { flex-direction: column; max-width: 220px; }
  .btn { text-align: center; }
  .s-arrow { width: 38px; height: 38px; font-size: 1rem; }

  /* Trust */
  .trust-inner { gap: 20px; flex-direction: column; align-items: flex-start; padding: 0 5%; }

  /* Cats */
  .cat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Products */
  .prod-header { flex-direction: column; align-items: flex-start; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* About features */
  .about-features { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

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

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  /* Why */
  .why-grid { grid-template-columns: 1fr 1fr; }

  /* Stats */
  .stat { border-bottom: 1px solid rgba(255,255,255,0.2); }
  .stat:last-child { border-bottom: none; }

  /* Page hero */
  .page-hero { padding: 120px 0 60px; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }

  /* Contact cards */
  .contact-cards-grid { grid-template-columns: 1fr; max-width: 100%; }
}

/* ── 480px (Mobile) ───────────────────────── */
@media (max-width: 480px) {
  .section { padding: 56px 0; }

  /* Nav brand */
  .nav-brand-text .brand-name { font-size: 1.1rem; }

  /* Hero */
  .hero-section { min-height: 540px; }
  .slide-content h1 { font-size: 1.9rem; }

  /* Cats */
  .cat-grid { grid-template-columns: 1fr; }

  /* Products */
  .prod-grid { grid-template-columns: 1fr; }

  /* Why */
  .why-grid { grid-template-columns: 1fr; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* About badge */
  .about-badge { position:static; margin-top:24px; display:inline-block; }

  /* Floating */
  .whatsapp-float { bottom: 20px; right: 20px; width: 46px; height: 46px; font-size: 1.3rem; }
  .back-top { bottom: 76px; right: 20px; }
}

/* ── 360px ────────────────────────────────── */
@media (max-width: 360px) {
  .nav-inner { padding: 0 4%; }
  .container { padding: 0 4%; }
  .slide-content { left: 4%; right: 4%; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
}