/* ================= GLOBAL RESPONSIVE CSS ================= */

/* ---- UNIVERSAL ---- */
*{
  box-sizing:border-box;
  scroll-behavior:smooth;
}

/* ---- COURSE GRID ---- */
.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

/* ---- CARD IMAGES FIX ---- */
.card .img-wrap{
  width:100%;
  height:auto;
}

.card img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* ---- HEADER & TITLE RESPONSIVE FIX ---- */
@media(max-width: 768px){
  .header-bar{
    flex-direction: column;
    gap: 6px;
    text-align:center;
    padding:12px;
  }

  .header-logo{
    width:160px !important;
  }

  .header-title{
    font-size:22px !important;
    line-height:28px;
  }

  .sub-title{
    font-size:22px !important;
  }

  .hero-slider{
    aspect-ratio:16/10 !important;
  }
}

/* ---- NAVIGATION TEXT SCALE ---- */
@media(max-width:1200px){
  .nav-item{
    font-size:14px !important;
    padding:8px !important;
  }
}

/* ---- HERO SLIDER STYLE ---- */
.hero-slider{
  width:100%;
  max-width:100%;
  overflow:hidden;
  border-radius:10px;
}

/* ---- TESTIMONIAL RESPONSIVE ---- */
@media(max-width:768px){
  .t-item{
    min-width:260px !important;
  }
}

/* ---- COMBO ROW FIX ---- */
.combo-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}