@media (min-width: 300px) and (max-width: 639px) {

  .lg\:col-span-7 > .grid.sm\:grid-cols-3 {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: #fea619 #e3e2e0;
  }
  .lg\:col-span-7 > .grid.sm\:grid-cols-3::-webkit-scrollbar { height: 4px; }
  .lg\:col-span-7 > .grid.sm\:grid-cols-3::-webkit-scrollbar-track { background: #e3e2e0; border-radius: 9999px; }
  .lg\:col-span-7 > .grid.sm\:grid-cols-3::-webkit-scrollbar-thumb { background: #fea619; border-radius: 9999px; }

  .lg\:col-span-7 > .grid.sm\:grid-cols-3 > div {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 1rem;
    gap: 0.5rem;
  }
  .lg\:col-span-7 > .grid.sm\:grid-cols-3 > div > div:first-child {
    width: 2rem;
    height: 2rem;
    font-size: 14px;
  }
  .lg\:col-span-7 > .grid.sm\:grid-cols-3 > div h3 { font-size: 13px; line-height: 18px; }
  .lg\:col-span-7 > .grid.sm\:grid-cols-3 > div p  { font-size: 11px; line-height: 16px; }
}









/* 7-Step cards: 300px - 1023px par slider */
@media (min-width: 300px) and (max-width: 1023px) {

  /* Dono rows (4 cards + 3 cards) slider ban jayengi */
  main .lg\:grid-cols-4.mb-6,
  main .sm\:grid-cols-3.gap-6 {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 0.9rem;          /* upar hover lift ke liye, neeche bar ke liye */
    scrollbar-width: thin;             /* Firefox */
    scrollbar-color: #fea619 #e3e2e0;
  }
  main .lg\:grid-cols-4.mb-6 { margin-bottom: 0.5rem; }

  main .lg\:grid-cols-4.mb-6::-webkit-scrollbar,
  main .sm\:grid-cols-3.gap-6::-webkit-scrollbar { height: 4px; }
  main .lg\:grid-cols-4.mb-6::-webkit-scrollbar-track,
  main .sm\:grid-cols-3.gap-6::-webkit-scrollbar-track { background: #e3e2e0; border-radius: 9999px; }
  main .lg\:grid-cols-4.mb-6::-webkit-scrollbar-thumb,
  main .sm\:grid-cols-3.gap-6::-webkit-scrollbar-thumb { background: #fea619; border-radius: 9999px; }

  /* Card width: agla card thoda jhalakta hai, isse slider hone ka pata lagta hai */
  main .lg\:grid-cols-4.mb-6 > div,
  main .sm\:grid-cols-3.gap-6 > div {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* Tablet par (640px+) 2 cards ke saath thoda aur jhalak */
@media (min-width: 640px) and (max-width: 1023px) {
  main .lg\:grid-cols-4.mb-6 > div,
  main .sm\:grid-cols-3.gap-6 > div {
    flex: 0 0 44%;
  }
}









/* Syllabus (6 Units): 300px - 1023px par slider */
@media (min-width: 300px) and (max-width: 1023px) {

  #syllabus .lg\:grid-cols-3 {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 0.9rem;          /* neeche scroll bar ke liye jagah */
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #fea619 #e3e2e0;
  }

  #syllabus .lg\:grid-cols-3::-webkit-scrollbar { height: 4px; }
  #syllabus .lg\:grid-cols-3::-webkit-scrollbar-track { background: #e3e2e0; border-radius: 9999px; }
  #syllabus .lg\:grid-cols-3::-webkit-scrollbar-thumb { background: #fea619; border-radius: 9999px; }

  /* Mobile: ek card + agle ka kinara jhalakta hai */
  #syllabus .lg\:grid-cols-3 > div {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}



/* Tablet (640px+): lagbhag 2 cards ek saath */
@media (min-width: 640px) and (max-width: 1023px) {
  #syllabus .lg\:grid-cols-3 > div {
    flex: 0 0 46%;
  }
}

.enroll-whatsapp{
    font-size: 13px
}









/* Fee card ka top row: 300px - 419px par dono text upar-neeche */
@media (min-width: 300px) and (max-width: 419px) {
  #fee-section .relative.z-10 > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}









/* Hero buttons: 1024px - 1091px par text 3 line me na tute */
@media (min-width: 1024px) and (max-width: 1091px) {

  .lg\:col-span-7 > .sm\:flex-row.pt-2.w-full {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .lg\:col-span-7 > .sm\:flex-row.pt-2.w-full > a {
    flex: 1 1 auto;            /* row me jagah ke hisaab se failenge */
    white-space: nowrap;       /* text ek hi line me rahega */
    padding: 0.875rem 1.25rem;
    font-size: 13px;
    gap: 0.4rem;
  }
}