:root {
  --mobile-page-padding: 10px;
  --mobile-section-padding: clamp(20px, 8vw, 28px);
  --mobile-section-gap: clamp(0px, 4vw, 0px);
}

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  h1 {
    font-size: clamp(1.8rem, 8.5vw, 2.45rem) !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.25 !important;
  }

  h3 {
    font-size: clamp(1.25rem, 6vw, 1.6rem) !important;
    line-height: 1.3 !important;
  }

  h4 {
    font-size: clamp(1.05rem, 5.2vw, 1.35rem) !important;
    line-height: 1.3 !important;
  }

  h5,
  h6 {
    font-size: clamp(0.95rem, 4.5vw, 1.12rem) !important;
    line-height: 1.3 !important;
  }

  p {
    font-size: clamp(0.95rem, 3.8vw, 1rem) !important;
    line-height: 1.65 !important;
  }

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

  .container,
  .nav-container,
  .course-container,
  .event-container,
  .event-wrapper,
  .course-wrap,
  .footer-content,
  .about-footer,
  .about-footer-top {
    width: min(100%, 1200px);
    padding-left: var(--mobile-page-padding) !important;
    padding-right: var(--mobile-page-padding) !important;
  }

  section,
  .section,
  .event-section,
  .event-details,
  .event-about,
  .event-showcase,
  .event-gallery-section,
  .course-hero,
  .course-intro,
  .top-banner-careers {
    padding-top: var(--mobile-section-padding) !important;
    padding-bottom: var(--mobile-section-padding) !important;
  }

  section + section,
  .section + .section {
    margin-top: var(--mobile-section-gap) !important;
  }

  [class*="grid"],
  [class*="wrapper"] {
    gap: clamp(14px, 4vw, 24px);
  }

  .top-banner-careers {
    height: auto !important;
    min-height: 48vh;
  }
}