/* =========================
MOBILE MENU SYSTEM
========================= */


.mobile-menu-btn{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}

.mobile-submenu{
  display:none;
  margin-top:10px;

  display:none;
  flex-wrap:wrap;
  gap:15px;
}

/* Drawer */

/* Drawer */

.mobile-menu{
  position:fixed;
  top:0;
  right:-320px;
  width:280px;
  height:100vh;

  background:var(--bg-white);

  box-shadow:-10px 0 30px rgba(0,0,0,0.1);

  transition:0.35s ease;

  z-index:2000; /* higher than header */

  display:flex;
  flex-direction:column;
}

.mobile-menu-inner{
  padding:30px;
}

/* main menu layout */

.mobile-menu > .mobile-menu-inner > nav > ul{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.mobile-menu a{
  font-size:16px;
  font-weight:500;
}

/* Close button */

.mobile-menu-close{
  background:none;
  border:none;
  cursor:pointer;
  margin-bottom:20px;
  font-size:26px;
}

/* Overlay */

.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);

  opacity:0;
  visibility:hidden;
  transition:0.3s;

  z-index:1500; /* below menu but above page */
}

/* Active state */

.mobile-menu.active{
  right:0;
}

.mobile-overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================
MOBILE SUBMENU
========================= */

.mobile-dropdown-toggle{
  background:none;
  border:none;
  font-size:16px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  cursor:pointer;
}

/* hidden by default */

.mobile-submenu{
  display:none;

  /* force row layout */
  flex-direction:row !important;
  gap:12px;
  flex-wrap:wrap;

  margin-top:10px;
  padding-left:0;
}

/* submenu items */

.mobile-submenu li{
  list-style:none;
  display:inline-flex;
}

/* submenu links */

.mobile-submenu a{
  font-size:14px;
  padding:6px 10px;
  border-radius:6px;
}

/* visible when active */


.mobile-dropdown.active .mobile-submenu{
  display:flex;
}

/* rotate arrow */

.mobile-dropdown.active .material-symbols-outlined{
  transform:rotate(180deg);
  transition:0.3s;
}


/* =========================
TABLET (≤900px)
========================= */

@media (max-width:900px){

  /* NAVIGATION */

  .nav-menu{
    display:none;
  }

  .mobile-menu-btn{
    display:flex;
  }

  /* HERO */

  .hero-wrapper{
    flex-direction:column;
    text-align:center;
  }

  .hero h1{
    font-size:36px;
  }

  .hero-image{
    max-width:100%;
  }

  /* CATEGORIES */

  .category-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* COURSES */

  .course-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* TESTIMONIALS */

  .testimonial-grid{
    grid-template-columns:1fr;
  }

  .testimonial-header h2{
    font-size:28px;
  }

  /* STATS */

  .stats-box{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
  }

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

  /* UPCOMING COURSES */

  .upcoming-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* TEACHERS */

  .teachers-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .teachers-header{
    flex-direction:column;
    gap:15px;
    text-align:center;
  }

  /* VIDEO + FORM */

  .video-form-wrapper{
    flex-direction:column;
  }

  .video-box,
  .contact-form{
    width:100%;
  }

  .video-box img{
    height:280px;
  }

  /* BLOG */

  .blog-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* FOOTER */

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }

}



/* =========================
MOBILE (≤600px)
========================= */

@media (max-width:600px){

  /* CONTAINER */

  .container{
    max-width:94%;
  }

  /* CATEGORIES */

  .category-grid{
    grid-template-columns:1fr;
  }

  .section-header{
    flex-direction:column;
    gap:15px;
    text-align:center;
  }

  .section-header .view-btn{
    margin-top:10px;
  }

  /* COURSES */

  .course-grid{
    grid-template-columns:1fr;
  }

  /* STATS */

  .stats-box{
    grid-template-columns:1fr;
  }

  /* UPCOMING COURSES */

  .upcoming-grid{
    grid-template-columns:1fr;
  }

  /* TEACHERS */

  .teachers-grid{
    grid-template-columns:1fr;
  }

  /* BLOG */

  .blog-grid{
    grid-template-columns:1fr;
  }

  /* FOOTER */

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-newsletter form{
    flex-direction:column;
  }
  .topbar{
    display: none;
  }
  

}