/* ===========================
   Responsive CSS
   =========================== */

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 { font-size: 20px; }
  .stats-mini { gap: 16px; }
  .topbar { flex-direction: column; gap: 8px; text-align: center; }
  .pay-cards { flex-direction: column; align-items: center; }
  .pay-card { width: 100%; max-width: 280px; }
  .stats-inner { gap: 20px; }
  .si .sn { font-size: 24px; }
  .footer { flex-direction: column; text-align: center; }
  .courses-sec, .testi-sec { padding: 32px 16px; }
  .why-sec { padding: 32px 16px; }
}

@media (max-width: 480px) {
  .hero { padding: 24px 16px 20px; }
  .hero h1 { font-size: 18px; }
  .form-box { padding: 16px 14px; }
  .sec-hd h2 { font-size: 20px; }
  .contact-bar .ph { font-size: 16px; }
}