/*
 * Master's NEET Academy — Comprehensive Responsive CSS
 * =====================================================
 * Covers: Header, Navbar, Hero, About, Counter, Courses,
 *         Faculty, Gallery, Videos, Contact, Footer — all pages.
 * Breakpoints: 1400px | 1200px | 992px | 768px | 576px | 400px
 */

/* ══════════════════════════════════════════════════════════
   1. GLOBAL / UTILITY
══════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Remove horizontal scroll on all screens */
html, body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════
   2. HEADER — all three rows
══════════════════════════════════════════════════════════ */

/* --- 1200px: shrink contact pills --- */
@media (max-width: 1200px) {
  .hdr-contact-card .cc-val { font-size: .82rem; }
  .nav-links > li > a,
  .nav-links > li > .nav-dd-btn { padding: 14px 11px; font-size: .84rem; }
  .nav-join-btn { padding: 8px 16px; font-size: .82rem; }
}

/* --- 992px: switch to mobile hamburger --- */
@media (max-width: 991px) {
  /* Hide desktop contact pills on small screens */
  .hdr-contact-card { display: none !important; }

  /* Logo row compact */
  .hdr-middle { padding: 8px 0; }
  .hdr-middle .container-fluid { flex-wrap: wrap; gap: 8px; }

  /* Logo text smaller */
  .hdr-middle span[style*="font-size:1.5rem"] { font-size: 1.2rem !important; }

  /* Hide lang + social in header on mobile (show in drawer) */
  .hdr-social { display: none !important; }
  .lang-pill { display: none !important; }
}

/* --- 576px: logo text even smaller --- */
@media (max-width: 576px) {
  .hdr-middle span[style*="font-size:1.5rem"],
  .hdr-middle span[style*="1.5rem"] { font-size: 1rem !important; }

  .ticker-badge { font-size: .64rem; padding: 3px 8px; }
  .hdr-ticker marquee { font-size: .78rem; }

  /* Logo image max smaller on phones */
  .hdr-middle img[style*="max-height:90px"] { max-height: 60px !important; }
}

/* ══════════════════════════════════════════════════════════
   3. PAGE TITLE BANNER (breadcrumb headers)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-title-area { padding: 2.5rem 0 !important; }
  .page-title-area h1 { font-size: 2rem !important; }
}
@media (max-width: 480px) {
  .page-title-area h1 { font-size: 1.6rem !important; }
}

/* ══════════════════════════════════════════════════════════
   4. HERO / SLIDER SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .hero-slider-area .display-4 { font-size: 2rem !important; }
  .hero-slider-area .row { padding: 2rem 0 !important; }
}
@media (max-width: 768px) {
  .hero-slider-area { padding: 1.5rem 0 !important; }
  .hero-slider-area .display-4 { font-size: 1.7rem !important; }
  .hero-slider-area .lead { font-size: 1rem !important; }
  /* Stack buttons on small */
  .hero-slider-area .d-flex.gap-3 { flex-direction: column; gap: .75rem !important; align-items: flex-start; }
  .hero-slider-area .col-lg-6:last-child { margin-top: 1.5rem !important; }
}
@media (max-width: 480px) {
  .hero-slider-area .display-4 { font-size: 1.4rem !important; }
  /* Full-width buttons */
  .hero-slider-area .btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   5. ABOUT SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .about-area .col-lg-6:last-child { padding-left: 15px !important; }
  .about-area h2 { font-size: 1.6rem !important; }
}
@media (max-width: 768px) {
  .about-area { padding: 2.5rem 0 !important; }
  .about-area .col-lg-6 { margin-bottom: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   6. COUNTER / STATS SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .count_area, [class*="counter"] { margin-top: 20px; }
  .single-counter, [class*="single-counter"] { margin-bottom: 20px; text-align: center; }
  /* Make stat numbers smaller */
  .counter-number, .count_number { font-size: 2.2rem !important; }
}
@media (max-width: 480px) {
  .counter-number, .count_number { font-size: 1.8rem !important; }
}

/* ══════════════════════════════════════════════════════════
   7. COURSES / CARDS
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .courses-area .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 768px) {
  .courses-area .col-lg-4,
  .courses-area .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .course-card img, .card-img-top { height: 200px !important; object-fit: cover; }
}
@media (max-width: 576px) {
  .course-card img, .card-img-top { height: 170px !important; }
  /* Category filter pills wrap nicely */
  .nav-pills { gap: 6px !important; }
  .nav-pills .nav-link { padding: 6px 14px !important; font-size: .82rem; }
}

/* ══════════════════════════════════════════════════════════
   8. FACULTY / TEAM SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .team_member_img,
  .faculty-img { width: 100px !important; height: 100px !important; }
}
@media (max-width: 480px) {
  .team_member_img,
  .faculty-img { width: 85px !important; height: 85px !important; }
}

/* ══════════════════════════════════════════════════════════
   9. GALLERY
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .gallery-area .col-lg-3 { flex: 0 0 33.33%; max-width: 33.33%; }
}
@media (max-width: 768px) {
  .gallery-area .col-lg-3,
  .gallery-area .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 480px) {
  .gallery-area .col-lg-3,
  .gallery-area .col-md-4,
  .gallery-area .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
}

/* Gallery image height responsive */
@media (max-width: 576px) {
  .gallery-area img { height: 180px !important; object-fit: cover; }
}

/* ══════════════════════════════════════════════════════════
   10. VIDEOS SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .videos-area .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 768px) {
  .videos-area .col-lg-4,
  .videos-area .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  /* Iframe / embed responsive */
  .embed-responsive, .ratio { margin-bottom: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   11. TESTIMONIALS
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .testimonials-area .col-lg-4,
  .testimonials-area .col-md-6 { flex: 0 0 100%; max-width: 100%; margin-bottom: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   12. CONTACT PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .contact-area .col-lg-8,
  .contact-area .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
  .contact-area .col-lg-4 { margin-top: 2rem; }
}
@media (max-width: 576px) {
  .contact-area .card { padding: 1.2rem !important; }
  .contact-area .form-control,
  .contact-area .form-select { font-size: .9rem; }
}
/* Contact info cards row */
@media (max-width: 768px) {
  .contact-cards-row .col-md-4 { flex: 0 0 100%; max-width: 100%; margin-bottom: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   13. ABOUT PAGE SPECIFIC
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .about-page .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
  .about-page .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 576px) {
  .about-page .col-lg-4,
  .about-page .col-md-4 { flex: 0 0 100%; max-width: 100%; margin-bottom: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   14. CTA / CALL-TO-ACTION BANNERS
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cta-area { padding: 2rem 0 !important; }
  .cta-area h2 { font-size: 1.5rem !important; }
  .cta-area .btn { width: 100%; max-width: 320px; }
}
@media (max-width: 480px) {
  .cta-area h2 { font-size: 1.25rem !important; }
}

/* ══════════════════════════════════════════════════════════
   15. FOOTER
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .site-footer .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 576px) {
  .site-footer .col-lg-3,
  .site-footer .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .site-footer .footer-widget { margin-bottom: 1.5rem; }
  .site-footer img { max-height: 80px !important; }
  .footer-bottom .row { flex-direction: column; text-align: center; gap: .5rem; }
}

/* ══════════════════════════════════════════════════════════
   16. FLOATING BUTTONS
══════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .floating-actions { bottom: 16px !important; right: 14px !important; }
  .floating-btn { width: 48px !important; height: 48px !important; font-size: 1.1rem !important; }
}

/* ══════════════════════════════════════════════════════════
   17. COURSE DETAIL PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .course-detail .col-lg-8,
  .course-detail .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
  .course-detail .col-lg-4 { margin-top: 2rem; }
}
@media (max-width: 576px) {
  .course-detail .display-5 { font-size: 1.5rem !important; }
  .course-detail .badge { font-size: .75rem; }
}

/* ══════════════════════════════════════════════════════════
   18. SECTION TYPOGRAPHY SCALING
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .display-4 { font-size: 2.2rem !important; }
  .display-5 { font-size: 1.9rem !important; }
  h2 { font-size: 1.65rem !important; }
}
@media (max-width: 768px) {
  .display-4 { font-size: 1.8rem !important; }
  .display-5 { font-size: 1.6rem !important; }
  h2 { font-size: 1.45rem !important; }
  h3 { font-size: 1.25rem !important; }
  .lead { font-size: 1rem !important; }
}
@media (max-width: 480px) {
  .display-4 { font-size: 1.5rem !important; }
  .display-5 { font-size: 1.3rem !important; }
  h2 { font-size: 1.25rem !important; }
  .section-padding, .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* ══════════════════════════════════════════════════════════
   19. GRID ROW GAPS
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   20. MODAL RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .modal-dialog { margin: .75rem; }
  .modal-body { padding: 1.25rem !important; }
}

/* ══════════════════════════════════════════════════════════
   21. TABLE OVERFLOW (results, batch schedule)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-responsive-wrapper,
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }
}

/* ══════════════════════════════════════════════════════════
   22. OWL CAROUSEL RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .owl-carousel .owl-nav button { width: 36px !important; height: 36px !important; font-size: .9rem !important; }
}

/* ══════════════════════════════════════════════════════════
   23. VERY SMALL SCREENS (< 360px)
══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  body { font-size: 14px; }
  h2 { font-size: 1.15rem !important; }
  .btn { padding: .45rem .9rem; font-size: .82rem; }
  .badge { font-size: .7rem; }
  .floating-btn { width: 42px !important; height: 42px !important; }
  .hdr-middle img { max-height: 50px !important; }
}