/* ============================================================
   SAMARTH — Bootstrap Mobile Override CSS
   Replaces all custom CSS Grid layouts with Bootstrap-style
   responsive breakpoints so every section auto-adjusts.
   ============================================================ */

/* ── 1. HERO SECTION ── */
.hero-top-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}
.hero-badge {
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}
/* Stats: 4 columns → 2 → 2 */
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}
@media (min-width: 768px) {
  .hero-stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── 2. FEATURES GRID ── */
.features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}
@media (min-width: 992px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }
}
.feature-card {
  padding: 1.5rem 1rem !important;
}
.feature-icon {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.4rem !important;
  margin-bottom: 1rem !important;
}
.feature-card h3 { font-size: 1rem !important; }
.feature-card p  { font-size: 0.85rem !important; }

/* ── 3. ABOUT GRID ── */
.about-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}
@media (min-width: 992px) {
  .about-grid {
    grid-template-columns: 1.2fr 1fr !important;
    gap: 5rem !important;
  }
}
.about-experience {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 1rem;
  display: inline-block;
}

/* ── 4. COURSES GRID ── */
.course-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
}
@media (min-width: 576px) {
  .course-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 992px) {
  .course-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; }
}
.course-filters { flex-wrap: wrap !important; gap: 0.5rem !important; }
.filter-btn { font-size: 0.82rem !important; padding: 0.5rem 1rem !important; }

/* ── 5. RESULTS GRID ── */
.results-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}
@media (min-width: 992px) {
  .results-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2rem !important; }
}
.result-card { padding: 1.5rem 1rem !important; }
.result-num   { font-size: 2rem !important; }

/* ── 6. INTERNSHIP GRID ── */
.internship-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
}
@media (min-width: 576px) {
  .internship-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 992px) {
  .internship-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2rem !important; }
}

/* ── 7. COMPANY LOGO GRID ── */
.company-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.25rem !important;
}
.company-logo {
  width: 100px !important;
  height: 55px !important;
  flex-shrink: 0;
}

/* ── 8. FOOTER GRID ── */
.footer-content {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  text-align: center !important;
}
@media (min-width: 768px) {
  .footer-content { grid-template-columns: repeat(3, 1fr) !important; text-align: left !important; }
}
.social-links { justify-content: center !important; flex-wrap: wrap !important; }

/* ── 9. FAQ GRID ── */
.faq-grid { display: flex !important; flex-direction: column !important; gap: 1rem !important; }

/* ── 10. HERO TITLE ── */
.hero-title {
  font-size: clamp(1.75rem, 6vw, 4.5rem) !important;
  line-height: 1.15 !important;
}
.hero-subtitle { font-size: clamp(0.95rem, 2.5vw, 1.25rem) !important; }

/* ── 11. SECTION TITLES ── */
.section-title { font-size: clamp(1.6rem, 5vw, 3rem) !important; line-height: 1.2 !important; }
.section-desc  { font-size: clamp(0.9rem, 2vw, 1.1rem) !important; }

/* ── 12. DEMO SECTION ── */
.demo-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}
@media (min-width: 992px) {
  .demo-inner { grid-template-columns: 1.2fr 1fr !important; }
}

/* ── 13. DEMO FORM (batch fields) ── */
.form-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}
@media (min-width: 576px) {
  .form-row { grid-template-columns: 1fr 1fr !important; }
}

/* ── 14. PSYCHOLOGY SECTION TWEAKS ── */
/* Pain section columns */
.pain-section .row > .col-12 { margin-bottom: 1.5rem; }
/* Parent stats */
.parent-stats .row > div { margin-bottom: 1rem; }
/* Urgency section */
.urgency-section .row > .col-12 { margin-bottom: 1.5rem; }

/* ── 15. STICKY BAR ── */
.sticky-bar-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.6rem 1rem !important;
}
.sticky-btn {
  flex: 1 !important;
  min-width: 80px !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  padding: 0.6rem 0.5rem !important;
}

/* ── 16. OVERFLOW PREVENTION ── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
img        { max-width: 100% !important; height: auto !important; }
.container { padding-left: 1rem !important; padding-right: 1rem !important; }

/* ── 17. SMALL PHONE EXTRAS (<400px) ── */
@media (max-width: 400px) {
  .hero-title     { font-size: 1.6rem !important; }
  .hero-badge     { font-size: 0.72rem !important; padding: 0.35rem 0.7rem !important; }
  .btn-hero, .btn-hero-outline, .btn-whatsapp {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
  }
  .stat-num  { font-size: 1.6rem !important; }
  .stat-label{ font-size: 0.7rem !important; }
  .section   { padding: 2.5rem 0 !important; }
  .feature-card { padding: 1rem 0.75rem !important; }
  .course-grid { grid-template-columns: 1fr !important; }
  .results-grid { grid-template-columns: 1fr 1fr !important; }
  .filter-btn { font-size: 0.75rem !important; padding: 0.4rem 0.7rem !important; }
}