/* ==============================
   INDEX PAGE MOBILE FIX
================================ */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* ===== NAVBAR ===== */
  nav, .navbar {
    padding: 10px 14px;
  }

  /* ===== HERO SECTION ===== */
  .hero,
  .hero-section {
    padding: 40px 15px;
    text-align: center;
  }

  /* ===== PLANS SECTION ===== */
  .plans,
  .plans-container,
  .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }

  /* ===== SINGLE PLAN CARD ===== */
  .plan-card,
  .pricing-card,
  .vip-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 15px auto;
  }

  /* ===== BUTTONS ===== */
  .plan-card button,
  .pricing-card button,
  .vip-card button {
    width: 100%;
  }

  /* ===== HOW IT WORKS ===== */
  .how-it-works,
  .steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ===== FOOTER ===== */
  footer {
    padding: 30px 15px;
    text-align: center;
  }

  footer .row {
    flex-direction: column;
    gap: 20px;
  }
}