/* =========================================================
   KINGS OF HIMALAYA — RESPONSIVE FINE-TUNING
   Breakpoints tested: 320 / 375 / 425 / 768 / 1024 / 1440
   ========================================================= */

@media (max-width: 1024px) {
  .section { padding: 56px 0; }
  .footer-grid { padding: 48px 20px 30px; }
}

@media (max-width: 768px) {
  .hero { min-height: 66vh; }
  .page-hero { min-height: 36vh; }
  .two-col { gap: 30px; }
  .jumbotron-cta { padding: 40px 24px; }
  .related-strip.grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 425px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .hero-actions .btn, .jumbotron-actions .btn { width: 100%; }
  .hero-actions, .jumbotron-actions { flex-direction: column; }
  .form-card { padding: 20px; }
  .stats-row { gap: 18px; }
  .stat-num { font-size: 1.7rem; }
  .floating-actions { right: 14px; bottom: 14px; }
  .float-btn { width: 46px; height: 46px; }
}

@media (max-width: 375px) {
  .brand-name { font-size: 1.25rem; }
  .card-body { padding: 16px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 320px) {
  .header-inner { padding: 12px 14px; }
  .hero h1 { font-size: 1.6rem; }
}

/* Prevent any horizontal scroll from wide fixed-width children */
html, body { max-width: 100%; overflow-x: hidden; }
table { display: block; overflow-x: auto; }

/* Large / ultra-wide monitors: let the layout breathe a bit more instead of
   sitting in a narrow centred column with large empty gutters on either
   side. Content still caps at a readable width — it just scales gently
   with genuinely large viewports (24"+ desktop monitors, 1600px+). */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
  .hero h1 { font-size: 3.6rem; }
}
@media (min-width: 1920px) {
  :root { --container: 1480px; }
}