/* ==========================================================================
   SUCCESS INDIA HOLIDAYS — RESPONSIVE STYLESHEET
   Breakpoints follow Bootstrap 5.3: xl 1200 / lg 992 / md 768 / sm 576
   ========================================================================== */

/* ---------- Laptop / small desktop (≤1200px) ---------- */
@media (max-width: 1199.98px) {
  .hero-title { font-size: clamp(2.1rem, 4.5vw, 3rem); }
  .about-badge { right: 10px; }
}

/* ---------- Tablet (≤991.98px) ---------- */
@media (max-width: 991.98px) {
  section { padding: 64px 0; }

  .site-header { background: var(--color-primary); }
  .site-header .toggler-bar { background: #fff; }
  .site-header.scrolled { padding: 0; }
  .header-phone, .header-email{
    color: var(--color-primary);
  }

  .hero-bg{
    margin-top: 60px;
  }

  .hero-section { padding-top: 100px; text-align: left; }
  .hero-features { grid-template-columns: 1fr 1fr; }
  .glass-form { margin-top: 40px; }

  .steps-row { flex-direction: column; align-items: center; }
  .step-connector { transform: rotate(90deg); margin: 4px 0; }
  .step-item { max-width: 320px; }

  .about-img { height: 400px; }
  .about-badge { position: static; margin-top: -30px; margin-left: 20px; display: inline-flex; }

  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- Large mobile / small tablet (≤767.98px) ---------- */
@media (max-width: 767.98px) {
  section { padding: 52px 0; }
  .section-heading { margin-bottom: 2rem; }

  .hero-section { min-height: auto; padding-top: 110px; padding-bottom: 50px; }
  .hero-features { grid-template-columns: 1fr; gap: 8px; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; text-align: center; }

  .glass-form { padding: 26px 22px; }

  .trust-strip { padding: 36px 0; }

  .package-actions { flex-wrap: wrap; }
  .package-actions .btn-book-now { order: -1; margin-bottom: 8px; }

  .contact-form-card { padding: 26px 20px; }

  .floating-whatsapp, .floating-call, .back-to-top {
    width: 46px; height: 46px; font-size: 1.2rem;
  }
  .floating-whatsapp { bottom: 18px; left: 18px; }
  .floating-call { bottom: 76px; left: 18px; }
  .back-to-top { bottom: 18px; right: 18px; }
}

/* ---------- Mobile (≤575.98px) ---------- */
@media (max-width: 575.98px) {
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; }

  .destinations-grid .col-6 { flex: 0 0 100%; max-width: 100%; }

  .cta-buttons { flex-direction: column; }
  .cta-buttons .btn { width: 100%; text-align: center; }

  .about-badge { margin-left: 0; }

  .footer-social { justify-content: flex-start; }
}

/* Prevent any horizontal scroll on very narrow devices */
html, body { max-width: 100%; overflow-x: hidden; }