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

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

@media (max-width: 900px) {
  .container {
    width: min(1200px, calc(100vw - 24px)) !important;
  }

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

  .logo {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .logo-mark {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .calligraphy-text {
    font-size: clamp(28px, 8vw, 40px) !important;
    letter-spacing: 2px !important;
  }

  nav {
    width: 100%;
  }

  nav ul {
    width: 100%;
    min-width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  nav a {
    white-space: nowrap;
  }

  nav li.active::after {
    bottom: -8px !important;
  }

  .vision-content,
  .section-header,
  .footer-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .vision-item:not(:last-child)::after {
    display: none;
  }

  .intro-section,
  .review-content,
  .modules-grid,
  .feature-grid,
  .info-grid,
  .grid,
  .cards,
  .course-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-container {
    flex-direction: column !important;
  }

  .profile-sidebar {
    width: 100% !important;
  }

  .hero-card,
  .intro-content,
  .intro-video,
  .review-section,
  .form,
  .profile-sidebar,
  .content-card,
  .card {
    padding: 20px !important;
  }

  .hero h2,
  .hero-card h2,
  .section-header h2,
  .intro-content h2 {
    font-size: 24px !important;
  }

  .course-actions,
  .form-actions,
  .form-buttons,
  .actions {
    flex-wrap: wrap !important;
  }

  .course-actions > *,
  .form-actions > *,
  .form-buttons > *,
  .actions > * {
    width: 100%;
  }

  .modal-content,
  #course-modal > div,
  #video-modal > div,
  #image-modal .modal-content {
    width: min(96vw, 900px) !important;
    margin: 16px auto !important;
    max-height: calc(100vh - 32px) !important;
    padding: 18px !important;
  }

  #video-modal [style*="display: flex; border-bottom"],
  [style*="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"],
  [style*="display: flex; gap: 10px;"],
  [style*="display: flex; gap: 20px; align-items: flex-start;"] {
    flex-wrap: wrap !important;
  }

  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

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

  main,
  .main-content {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  .hero {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
  }

  .hero-card {
    gap: 12px !important;
    border-radius: 14px !important;
  }

  .hero p,
  .intro-content p,
  .desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .card,
  .course-item {
    min-height: auto !important;
  }

  .btn,
  .chip,
  .login-btn,
  .project2-auth-submit,
  .project2-auth-secondary {
    width: 100%;
    text-align: center;
  }

  .avatar {
    width: 64px !important;
    height: 64px !important;
    font-size: 24px !important;
  }

  .profile-sidebar,
  .hero-card,
  .form,
  .review-section,
  .intro-content,
  .intro-video,
  .card {
    border-radius: 14px !important;
  }

  #video-modal [style*="display: flex; justify-content: space-between; align-items: center;"],
  #course-modal [style*="display: flex; justify-content: space-between; align-items: center;"] {
    align-items: flex-start !important;
  }

  #video-modal [style*="width: 150px"],
  #video-modal [style*="width: 90%; max-width: 900px"],
  #course-modal [style*="width: 90%; max-width: 800px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}