/* ===============================================
   CRITICAL MOBILE RESPONSIVE FIXES
   =============================================== */

/* Tablet and smaller (991px and below) */
@media (max-width: 991px) {

  /* Hide desktop navigation, show burger menu */
  .desktop-nav {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  /* Stack columns */
  .col-50 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .col-33 {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* Mobile devices (768px and below) */
@media (max-width: 768px) {

  /* Global overflow prevention */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* * {
        max-width: 100%;
    } */

  /* Container fixes */
  .container,
  .full-container {
    padding: 0 15px;
    max-width: 100%;
  }

  /* Header fixes */
  .landing-header .container,
  .landing-header .full-container {
    padding: 0 10px;
  }

  .header-content {
    gap: 10px;
  }

  .site-logo a img {
    width: 80px;
  }

  /* Hide desktop logo on mobile - it will appear inside mobile menu */
  .site-logo {
    display: none !important;
  }

  /* CRITICAL: Hide desktop navigation completely on mobile */
  .desktop-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .primary-menu {
    display: none !important;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex !important;
  }

  /* Mobile navigation */
  .mobile-nav {
    display: block;
  }

  /* Row and column fixes */
  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .col-50,
  .col-33,
  .col-25,
  .col-20,
  .col-100 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 10px;
  }

  /* Banner section */
  .banner-section {
    padding: 40px 0;
    overflow-x: hidden;
  }

  .banner-title {
    font-size: 32px !important;
    line-height: 1.2;
  }

  .banner-description {
    margin: 20px 0 20px 0;
    font-size: 16px;
  }

  /* Brand images */
  .brand-image-container {
    width: 100%;
    max-width: 100%;
  }

  .brand-image {
    width: 90%;
    max-width: 100%;
  }

  .brand-shape1,
  .brand-shape2 {
    width: 50%;
    max-width: 180px;
  }

  /* Review section */
  .review-section {
    overflow-x: hidden;
  }

  .review-row {
    gap: 10px;
  }

  /* Subject buttons */
  .subjects-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .subject-button {
    font-size: 13px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .subject-buttons-grid {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
  }

  .subject-btn {
    font-size: 13px;
    padding: 10px 16px;
    flex: 0 1 calc(50% - 4px);
  }

  /* Featured section */
  .featured-big {
    overflow-x: hidden;
  }

  .featured-main {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 20px 10px;
  }

  .img-wrapper {
    max-width: 45%;
    flex: 0 1 auto;
  }

  .img-wrapper img {
    max-width: 100%;
    height: auto;
  }

  /* CRITICAL: Hand-picked and Team sections - Alternating layout */
  .hand-picked,
  .team {
    overflow-x: hidden;
  }

  .hand-picked .row,
  .team .row {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  /* First hand-picked section: Text first, then image (normal order) */
  .hand-picked .row {
    flex-direction: column;
  }

  /* Team sections: Image first, then text (reversed order) */
  .team .row {
    flex-direction: column-reverse;
  }

  .hand-picked .col-50,
  .team .col-50 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .hand-picked-image,
  .hand-picked-image img {
    max-width: 100%;
    height: auto;
  }

  h2.hand-picked {
    font-size: 26px;
    line-height: 1.3;
  }

  .hand-picked-text {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Testimonial section */
  .testimonial-section {
    overflow-x: hidden;
  }

  .testimonial-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonial-title {
    font-size: 28px;
  }

  /* Learning steps */
  .learning-steps-section {
    overflow-x: hidden;
  }

  .learning-steps-row {
    margin: 0;
  }

  /* Subjects section */
  .subjects {
    overflow-x: hidden;
  }

  .row.subjects {
    justify-content: center;
    gap: 6px;
    margin: 0;
  }

  .subject-link {
    flex: 0 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  /* FAQ section */
  .faq-section {
    overflow-x: hidden;
  }

  .faq-wrapper {
    max-width: 100%;
  }

  /* Footer */
  .landing-footer {
    overflow-x: hidden;
  }

  .footer-main,
  .footer-security,
  .footer-brands,
  .footer-bottom {
    overflow-x: hidden;
    max-width: 100%;
  }

  .footer-content {
    flex-direction: column;
    margin: 0;
  }

  .security-badges {
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {

  .container,
  .full-container {
    padding: 0 10px !important;
  }

  .banner-title {
    font-size: 26px !important;
  }

  .subject-btn {
    flex: 0 1 100%;
    max-width: 100%;
  }

  .img-wrapper {
    max-width: 100%;
    flex: 0 1 100%;
  }

  .subject-link {
    flex: 0 1 100%;
    max-width: 100%;
  }

  h2.hand-picked {
    font-size: 22px;
  }

  .security-badges {
    flex-direction: column;
  }
}