/* ── Responsive ── */

/* تبلت (≤ 820px) */
@media (max-width: 820px) {
  .hp-hero { padding: 40px 20px 40px; }
  .hp-hero h1 { font-size: 32px; }
  .hp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-img { height: 300px; }

  .hp-nav-cards { grid-template-columns: repeat(2, 1fr); }
  .hp-nav-top   { padding: 10px 16px 0; }

  .services-grid,
  .testi-grid,
  .feat-grid,
  .videos-grid { grid-template-columns: 1fr; }

  .about-grid    { grid-template-columns: 1fr; gap: 36px; }
  .about-page-in { grid-template-columns: 1fr; gap: 36px; }
  .sidebar-photo { aspect-ratio: 4/3; }

  .pkgs-overview-grid { grid-template-columns: 1fr; }
  .pkg-grid  { grid-template-columns: 1fr; }
  .pkg-grid-2 { grid-template-columns: 1fr; max-width: 100%; }

  .hp-footer-top    { grid-template-columns: 1fr; gap: 28px; }
  .hp-footer-bottom { flex-direction: column; gap: 8px; }

  .hp-section { padding: 40px 20px; }
  .section-title { font-size: 26px; }
  .cta-section h2 { font-size: 26px; }

  .hp-form-row { grid-template-columns: 1fr; }

  .contact-form-box { padding: 24px 20px; }
}

/* موبایل (≤ 480px) */
@media (max-width: 480px) {
  .hp-hero h1 { font-size: 26px; }
  .hp-logo-sub { display: none; }
  .hp-nav-btn  { padding: 8px 14px; font-size: 13px; }
  .hp-nav-links .hp-nav-link { display: none; }

  .hp-nav-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px 16px 10px;
  }
  .hp-nav-card { padding: 8px 10px; gap: 8px; }
  .hp-nav-card-icon { width: 32px; height: 32px; font-size: 14px; }
  .hp-nav-card-label { font-size: 12px; }
  .hp-nav-card-sub   { display: none; }

  .hero-stats { gap: 20px; }
  .stat-num   { font-size: 22px; }

  .pkg-price { font-size: 22px; }

  .hp-section { padding: 32px 16px; }
  .pkg-section { padding: 20px 16px 40px; }
  .page-hero { padding: 16px 16px; }
  .page-hero h1 { font-size: 20px; }

  .cta-section { padding: 48px 16px; }
  .testi-section { padding: 48px 16px; }

  .section-title { font-size: 22px; }
  .about-content h2 { font-size: 22px; }

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

  .hp-btn { padding: 10px 20px; font-size: 14px; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .cta-btns  { flex-direction: column; }
}