/* Global responsive baseline applied across all pages. */

html,
body {
  max-width: 100%;
  /* overflow-x: hidden; */
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Keep wide data tables usable on mobile without breaking layout. */
@media (max-width: 992px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .container,
  .stats-container,
  .faq-container,
  .form-container,
  .service-form-container,
  .login-container,
  .login-box {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .container,
  .stats-container,
  .faq-container,
  .form-container,
  .service-form-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .form-grid,
  .video-grid,
  .video-grid-new,
  .why-grid,
  .course-pricing,
  .hero-content-wrapper,
  .footer-links {
    grid-template-columns: 1fr !important;
  }

  .form-header {
    flex-direction: column !important;
    gap: 14px;
    align-items: flex-start !important;
  }

  .header-right {
    width: 100%;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .form-actions,
  .whatsapp-buttons,
  .contact-section {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }

  .cta,
  .btn-primary,
  .submit-btn,
  .action-btn,
  .whatsapp-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .chart-container {
    height: 240px !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
  }

  h2 {
    font-size: clamp(1.2rem, 6vw, 1.6rem) !important;
  }

  .section-header,
  .detail-card,
  .stat-card,
  .faq-item,
  .testimonial-card,
  .video-card,
  .video-card-new {
    border-radius: 10px;
  }
}