/* =============================================================
   1. HEADER — TOP BAR (hide on mobile, show logo + hamburger)
============================================================= */
/* =========================================================
   MOBILE + TABLET NAVBAR
   Show ONLY hamburger below desktop size
========================================================= */

@media (max-width: 1200px) {

  /* Hide desktop nav links */
  .nav-links{
    display:none !important;
  }

  /* Hide desktop buttons */
  #google_translate_element,
  .translate-btn,
  .alumni-btn{
    display:none !important;
  }

  /* Hide desktop top bar */
  .header-top{
    display:none !important;
  }

  /* Mobile fixed navbar */
  .nav-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    position:fixed !important;
    top:0;
    left:0;

    width:100%;
    height:64px;

    padding:0 18px;

    background:#1e3549 !important;

    z-index:9999;

    box-shadow:0 4px 18px rgba(0,0,0,.18);
  }

  /* Show logo */
  .sticky-logo{
    display:flex !important;
    align-items:center !important;
    position:static !important;
    margin:0 !important;
  }

  /* Show hamburger */
  #mobileMenuToggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:44px;
    height:44px;

    border:none;
    border-radius:10px;

    background:rgba(255,255,255,.12);

    color:#fff;
    font-size:1.5rem;

    cursor:pointer;
  }

  /* Hide old toggle */
  #menuToggle{
    display:none !important;
  }
}


/* =========================================================
   DESKTOP ONLY
========================================================= */

@media (min-width: 1201px){

  /* Show desktop nav */
  .nav-links{
    display:flex !important;
  }

  /* Hide mobile hamburger */
  #mobileMenuToggle{
    display:none !important;
  }

  /* Hide mobile menu */
  .mobile-menu,
  .mobile-menu-overlay{
    display:none !important;
  }
}

/* =============================================================
   2. MOBILE SIDE MENU (slide-in drawer)
============================================================= */
@media (max-width: 1200px) {

  .mobile-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: min(300px, 82vw) !important;
    height: 100vh !important;
    background: linear-gradient(160deg, #0f2030 0%, #1e3549 100%) !important;
    z-index: 2000 !important;
    padding: 0 !important;
    transition: right 0.38s cubic-bezier(0.77,0,0.175,1) !important;
    opacity: 1 !important;
    overflow: hidden !important;
    box-shadow: -6px 0 28px rgba(0,0,0,0.35) !important;
  }

  /* Everything except the close button lives in here, and THIS is what
     actually scrolls. Decoupling scroll from the fixed outer shell avoids
     every flex/overflow edge case that kept blocking scrolling before. */
  .mobile-menu-scroll {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

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

  /* Overlay backdrop */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1999;
    backdrop-filter: blur(3px);
  }

  .mobile-menu-overlay.active {
    display: block;
  }

  /* Menu header area */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .mobile-menu-header img {
    height: 46px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    filter: none !important;
  }

  .mobile-menu-school-name {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .mobile-menu-school-name strong {
    font-size: 0.92rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .mobile-menu-school-name span {
    font-size: 0.72rem;
    color: #c79a3b;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  /* Close button */
  .close-mobile-menu {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    color: #fff !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    font-size: 1.3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: 0.25s ease !important;
    line-height: 1 !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .close-mobile-menu:hover {
      background: #c79a3b !important;
      transform: rotate(90deg) !important;
    }
  }

  /* Mobile logo inside menu */
  .mobile-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px 20px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .mobile-logo img {
    height: 46px !important;
    max-width: none !important;
    margin: 0 !important;
    filter: none !important;
    align-self: auto !important;
  }

  /* Nav links inside mobile menu */
  .mobile-menu > a,
  .mobile-menu > li > a,
  .mobile-menu a {
    display: block !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 13px 22px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
    transition: all 0.25s ease !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .mobile-menu a:hover {
      color: #c79a3b !important;
      background: rgba(199,154,59,0.08) !important;
      padding-left: 30px !important;
    }
  }

  /* Alumni / Login button in mobile menu */
  .mobile-menu .alumni-btn {
    display: block !important;
    position: static !important;
    margin: 18px 20px 8px !important;
    padding: 12px 20px !important;
    width: calc(100% - 40px) !important;
    background: linear-gradient(135deg, #c79a3b, #d8aa45) !important;
    color: #fff !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* Translate button in mobile menu */
  .mobile-menu .translate-btn {
    display: block !important;
    position: static !important;
    margin: 8px 20px 20px !important;
    width: calc(100% - 40px) !important;
    padding: 10px 20px !important;
    text-align: center !important;
  }

  /* Dropdown in mobile menu */
  .mobile-menu .dropdown-menu {
    display: none !important;
    position: static !important;
    background: rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
  }

  .mobile-menu .dropdown-menu li a {
    padding: 11px 22px 11px 34px !important;
    font-size: 0.9rem !important;
    color: rgba(255,255,255,0.75) !important;
  }
}

/* =============================================================
   3. PAGE BODY OFFSET (nav is fixed on mobile)
============================================================= */
@media (max-width: 768px) {
  /* Hero sections should not have extra top gap */
  .hero-full,
  .about-hero,
  .admissions-hero,
  .academics-hero,
  .contact-hero,
  .gallery-hero,
  .calendar-hero,
  .fees-hero,
  .sc-hero,
  .leader-hero,
  .hero {
    margin-top: 0 !important;
  }
}

/* =============================================================
   4. HERO SECTIONS (all pages)
============================================================= */
@media (max-width: 768px) {

  /* Index hero */
  .hero-full {
    height: 60vh !important;
    min-height: 340px !important;
  }

  .hero-content {
    width: 92% !important;
    padding: 20px 16px !important;
  }

  .hero-content h1 {
    font-size: 1.8rem !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  .hero-content p {
    font-size: 0.9rem !important;
    margin-top: 8px !important;
    margin-bottom: 18px !important;
    line-height: 1.6 !important;
  }

  .buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .hero-btn {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    padding: 10px 10px !important;
    font-size: 0.72rem !important;
    gap: 6px !important;
  }

  .hero-btn i {
    font-size: 0.85rem !important;
  }

  /* Arrow buttons */
  .arrow-full {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  /* Inner hero pages */
  .about-hero,
  .admissions-hero,
  .academics-hero,
  .contact-hero,
  .gallery-hero,
  .calendar-hero,
  .sc-hero,
  .leader-hero {
    height: 34vh !important;
    min-height: 220px !important;
  }

  .about-hero h1,
  .admissions-content h1,
  .academics-content h1,
  .contact-hero h1,
  .gallery-hero h1,
  .calendar-hero-content h1,
  .sc-hero-content h1,
  .leader-hero-content h1 {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }

  .about-hero p,
  .admissions-content p,
  .academics-content p,
  .contact-hero p,
  .gallery-hero p,
  .calendar-hero-content p,
  .sc-hero-content p {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  /* Fees hero special layout */
  .fees-hero {
    padding: 60px 5% 50px !important;
  }

  .fees-hero-container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    text-align: center !important;
  }

  .fees-content h1 {
    font-size: 2.2rem !important;
  }

  .fees-content p {
    font-size: 0.95rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =============================================================
   5. MODERN ABOUT SECTION (index)
============================================================= */
@media (max-width: 768px) {

  .modern-about {
    grid-template-columns: 1fr !important;
    padding: 40px 5% !important;
    gap: 28px !important;
  }

  .about-left {
    text-align: center !important;
  }

  .about-left p {
    max-width: 100% !important;
    text-align: center !important;
  }

  .section-title,
  .section-heading {
    font-size: 1.8rem !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
  }

  .about-cards {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .modern-card {
    padding: 0 !important;
  }

  .modern-card img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Re-anchor the icon badge to sit right on the seam between the photo
     and the text below (it was positioned for desktop's taller image,
     which left a big blank gap before the heading on mobile). */
  .card-icon {
    top: 172px !important;
  }

  .card-content {
    padding-top: 34px !important;
  }

  .about-btn {
    margin: 0 auto !important;
    display: inline-flex !important;
  }
  
}

/* =============================================================
   6. SCHOOL HIGHLIGHTS SECTION (index)
============================================================= */
@media (max-width: 768px) {

  .school-highlights {
    min-height: auto !important;
    padding: 40px 5% !important;
    flex-direction: column !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .section-text {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-text h2 {
    font-size: 1.6rem !important;
  }

  .highlight-container {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .highlight-card.large,
  .highlight-card.small {
    width: 100% !important;
    max-width: 340px !important;
    height: 150px !important;
    border-radius: 16px !important;
  }
}

/* =============================================================
   7. WHY CHOOSE US (index)
============================================================= */
@media (max-width: 768px) {

  .why-choose-section {
    padding: 50px 5% !important;
  }

  .why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .why-card {
    padding: 22px 14px !important;
    min-height: auto !important;
  }

  .why-card h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
  }

  .why-card p {
    display: none !important;
  }

  .why-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  .why-icon i {
    font-size: 1.2rem !important;
  }

  .why-header h2,
  .why-header .section-title {
    font-size: 1.7rem !important;
  }
}

@media (max-width: 380px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   8. ACHIEVEMENTS / COUNTERS (index)
============================================================= */
@media (max-width: 768px) {

  .achievements {
    padding: 40px 5% !important;
  }

  .counter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .counter-box {
    padding: 18px 12px !important;
    border-radius: 14px !important;
  }

  .counter-box .counter {
    font-size: 1.8rem !important;
  }

  .counter-box p {
    font-size: 0.82rem !important;
  }

  .trust-header .section-title {
    font-size: 1.7rem !important;
    color: #ffffff !important;
  }
}

/* =============================================================
   9. EVENTS SECTION (index)
============================================================= */
@media (max-width: 768px) {

  .events-section {
    padding: 50px 0 !important;
  }

  .events-header {
    padding: 0 5% !important;
    margin-bottom: 36px !important;
  }

  .events-header h2,
  .events-header .section-title {
    font-size: 1.7rem !important;
  }

  .events-header p {
    font-size: 0.9rem !important;
  }

  .events-carousel {
    padding: 0 14px !important;
  }
.event-card {
    min-width: calc(100vw - 50px) !important;
    max-width: calc(100vw - 60px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    contain: layout !important;
}
.event-image {
    height: 350px !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 24px 24px 0 0 !important;
}
.event-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: 100% !important;
    display: block !important;
}

  .event-content {
    padding: 18px 18px 22px !important;
  }

  .event-content h3 {
    font-size: 1.2rem !important;
  }

  .event-content p {
    font-size: 0.88rem !important;
  }

  .events-arrow {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.85rem !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
    border-radius: 50% !important;
  }

  .events-arrow.prev { left: -2px !important; }
  .events-arrow.next { right: -2px !important; }
}

/* =============================================================
   10. TESTIMONIALS (index)
============================================================= */
@media (max-width: 768px) {

  .testimonials {
    padding: 40px 5% !important;
  }

  .testimonials .section-title {
    font-size: 1.6rem !important;
  }

  .testimonial {
    padding: 28px 22px 22px !important;
    border-radius: 18px !important;
  }

  .testimonial.active {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .testimonial-quote-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.05rem !important;
  }

  .testimonial p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }
}

/* =============================================================
   11. CONTACT PAGE
============================================================= */
@media (max-width: 768px) {

  .contact-main {
    padding: 40px 5% !important;
  }

  .contact-wrapper {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .contact-info-box,
  .contact-form-box {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .contact-info-box h2,
  .contact-form-box h2 {
    font-size: 1.7rem !important;
  }

  .contact-cards {
    gap: 12px !important;
  }

  .contact-card {
    padding: 14px !important;
    gap: 12px !important;
  }

  .contact-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    font-size: 0.9rem !important;
  }

  .contact-card h3 {
    font-size: 0.9rem !important;
  }

  .contact-card p {
    font-size: 0.85rem !important;
  }

  .form-grid {
    gap: 10px !important;
  }

  .contact-form input {
    height: 48px !important;
    font-size: 0.88rem !important;
  }

  .contact-form textarea {
    min-height: 100px !important;
    font-size: 0.88rem !important;
  }

  .submit-btn {
    height: 48px !important;
    font-size: 0.9rem !important;
  }

  .map-section {
    padding: 0 5% 60px !important;
  }

  .map-wrapper {
    border-radius: 18px !important;
  }

  .map-wrapper iframe {
    height: 280px !important;
  }
}

/* =============================================================
   12. GALLERY PAGE
============================================================= */
@media (max-width: 768px) {

  .gallery-hero {
    height: 32vh !important;
    min-height: 200px !important;
  }

  .gallery-filter {
    top: 64px !important;
    padding: 12px 0 !important;
  }

  .filter-buttons {
    gap: 8px !important;
    padding: 0 14px 4px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }

  .filter-btn {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .gallery-section {
    padding: 30px 0 60px !important;
  }

  .gallery-grid {
    column-count: 2 !important;
    column-gap: 12px !important;
  }

  .gallery-item {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  }

  .gallery-item img {
    border-radius: 14px !important;
    display: block !important;
  }

  .lightbox {
    padding: 14px !important;
  }

  .lightbox-close {
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 1.5rem !important;
  }
}

@media (max-width: 400px) {
  .gallery-grid {
    column-count: 1 !important;
  }
}

/* =============================================================
   13. ADMISSIONS PAGE
============================================================= */
@media (max-width: 768px) {

  .admissions-hero {
    height: 34vh !important;
    min-height: 220px !important;
  }

  .admissions-content h1 {
    font-size: 2.1rem !important;
  }

  .admission-open-section {
    padding: 36px 5% !important;
  }

  .admission-card h2 {
    font-size: 1.7rem !important;
  }

  .admission-card p {
    font-size: 0.92rem !important;
    margin-bottom: 24px !important;
  }

  .apply-btn {
    padding: 12px 22px !important;
    font-size: 0.9rem !important;
  }

  .admission-process-section {
    padding: 50px 5% !important;
  }

  .process-heading h2,
  .process-heading .section-title {
    font-size: 1.7rem !important;
  }

  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .process-card {
    min-height: auto !important;
    padding: 24px 20px !important;
    margin-top: 0 !important;
  }

  .process-card::before {
    display: none !important;
  }

  .process-card h3 {
    font-size: 1.2rem !important;
  }

  .age-criteria-section {
    padding: 50px 5% !important;
  }

  .age-heading h2,
  .age-heading .section-title {
    font-size: 1.7rem !important;
  }

  .age-table-wrapper {
    overflow-x: auto !important;
    border-radius: 14px !important;
  }

  .age-table {
    min-width: 560px !important;
    font-size: 0.85rem !important;
  }

  .age-table th,
  .age-table td {
    padding: 14px 16px !important;
  }

  .documents-section {
    padding: 50px 5% !important;
  }

  .documents-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .documents-left {
    text-align: center !important;
  }

  .documents-left h2,
  .documents-left .section-title {
    font-size: 1.7rem !important;
  }

  /* The heading itself gets centered above, but its gold underline
     (::after) is positioned for left-aligned desktop text and stays
     pinned to the left edge — re-center it to match. */
  .documents-left .section-title.text-left::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .document-btn,
  .document-btn1 {
    padding: 14px 22px !important;
    font-size: 0.88rem !important;
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
  }

  .faq-section {
    padding: 50px 5% !important;
  }

  .faq-heading h2,
  .faq-heading .section-title {
    font-size: 1.7rem !important;
  }

  .faq-question {
    padding: 18px 18px !important;
    font-size: 0.9rem !important;
  }

  .faq-answer p {
    padding: 0 18px 18px !important;
    font-size: 0.88rem !important;
  }

  .admission-contact-section {
    padding: 50px 5% !important;
  }

  .admission-contact-card h2 {
    font-size: 1.7rem !important;
  }

  .admission-contact-card p {
    font-size: 0.95rem !important;
  }

  .contact-btn-group {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .contact-main-btn,
  .contact-outline-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    font-size: 0.9rem !important;
  }
}

/* =============================================================
   14. ACADEMICS PAGE
============================================================= */
@media (max-width: 768px) {

  .academics-hero {
    height: 34vh !important;
    min-height: 220px !important;
  }

  .academics-content h1 {
    font-size: 2.1rem !important;
  }

  .academics-content p {
    font-size: 0.9rem !important;
  }

  /* Generic grid inside academics */
  .academics-grid,
  .subjects-grid,
  .dept-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Swiper on mobile */
  .swiper-button-prev,
  .swiper-button-next {
    width: 36px !important;
    height: 36px !important;
  }
}

/* =============================================================
   15. FEES PAGE
============================================================= */
@media (max-width: 768px) {

  .fees-hero {
    padding: 50px 5% 40px !important;
  }

  .fees-hero-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center !important;
  }

  .fees-content h1 {
    font-size: 2rem !important;
  }

  .fees-content p {
    font-size: 0.9rem !important;
    max-width: 100% !important;
  }

  /* Fee tables */
  .fee-table-wrapper {
    overflow-x: auto !important;
    border-radius: 14px !important;
  }

  .fee-table {
    min-width: 520px !important;
    font-size: 0.85rem !important;
  }

  .fee-table th,
  .fee-table td {
    padding: 14px 16px !important;
  }
}

/* =============================================================
   16. EVENTS PAGE
============================================================= */
@media (max-width: 768px) {

  .calendar-hero {
    height: 34vh !important;
    min-height: 220px !important;
  }

  .calendar-hero-content h1 {
    font-size: 2.1rem !important;
  }

  .calendar-hero-content p {
    font-size: 0.9rem !important;
  }

  /* Event cards grid */
  .events-grid,
  .calendar-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .event-main-card {
    flex-direction: column !important;
  }
}

/* =============================================================
   17. STUDENTS CORNER PAGE
============================================================= */
@media (max-width: 768px) {

  .sc-hero {
    height: 34vh !important;
    min-height: 220px !important;
  }

  .sc-hero-content h1 {
    font-size: 2.1rem !important;
  }

  .sc-container {
    width: 94% !important;
  }

  /* Resource cards */
  .sc-cards-grid,
  .resource-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sc-card {
    padding: 22px 18px !important;
  }
}

/* =============================================================
   18. LEADERSHIP PAGE
============================================================= */
@media (max-width: 768px) {

  .leader-hero {
    min-height: 34vh !important;
  }

  .leader-hero-content h1,
  .leader-hero h1 {
    font-size: 2.1rem !important;
  }

  .lead-container {
    width: 94% !important;
  }

  /* Leader cards */
  .leaders-grid,
  .staff-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .leader-card {
    padding: 20px 14px !important;
  }

  .leader-img {
    width: 90px !important;
    height: 90px !important;
  }
}

@media (max-width: 400px) {
  .leaders-grid,
  .staff-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   19. TRUST PAGE
============================================================= */
@media (max-width: 768px) {

  .hero {
    height: 55vh !important;
  }

  .hero-text h1 {
    font-size: 2rem !important;
  }

  .hero-text p {
    font-size: 0.9rem !important;
  }

  .hero-text span {
    font-size: 0.75rem !important;
  }
}

/* =============================================================
   20. FOOTER (mobile) — COMPACT PROFESSIONAL REDESIGN
============================================================= */
@media (max-width: 768px) {

  /* ── Outer wrapper ── */
  .site-footer {
    padding: 36px 0 0 !important;
    background: linear-gradient(to right, #eef2f7, #f8fafc) !important;
  }
.footer-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 8px 22px 0 !important;
  text-align: center !important;
  align-items: center !important;
}

  /* ════════════════════════════════
     BRAND STRIP — row layout
  ════════════════════════════════ */
  .footer-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
}
.footer-brand {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:16px !important;
}
/* Sized by height (not width) so it lines up with the 3-line text
   block next to it, matching the header logo lockup */
.footer-logo img {
    height:84px !important;
    width:auto !important;
    object-fit:contain !important;
}

.footer-school-text{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    line-height:1 !important;
}

/* ST. MARY'S */
.footer-school-text h1:first-of-type{

    margin:0 !important;

    font-family:'Times New Roman', Times, serif !important;

    font-size:1.4rem !important;

    font-weight:700 !important;

    letter-spacing:0.5px !important;

    color:#1e3549 !important;

    line-height:1 !important;

    white-space:nowrap !important;
}

/* PUBLIC SCHOOL — was ":last-child", which never matched because
   .location-line (not this h1) is the actual last child, so this
   rule silently did nothing and the line fell back to its large
   desktop/inline font-size and wrapped onto 2 lines */
.footer-school-text h1:last-of-type{

    margin:0 !important;

    font-family:'Times New Roman', Times, serif !important;

    font-size:0.92rem !important;

    font-weight:700 !important;

    letter-spacing:0.5px !important;

    color:#1e3549 !important;

    line-height:1.1 !important;

    white-space:nowrap !important;

    margin-top:4px !important;
}

/* KHOPOLI LINE */
.footer-school-text .location-line{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    margin-top:7px !important;
}

.footer-school-text .location-line span{
    width:18px !important;
    height:1.5px !important;
    background:#c79a3b !important;
}

.footer-school-text .location-line div{

    font-size:0.60rem !important;

    font-weight:700 !important;

    letter-spacing:3px !important;

    color:#c79a3b !important;

    text-transform:uppercase !important;
}
  /* Description hidden on mobile — saves space */
  .footer-description {
    display: none !important;
  }

  /* Social icons — small column on right of brand strip */
  .footer-social {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }

  .footer-social a {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.72rem !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }

  /* ════════════════════════════════
     LINKS — 2 columns compact
  ════════════════════════════════ */
  .footer-middle {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 14px !important;
    flex-direction: unset !important;
    justify-content: unset !important;
    flex-wrap: unset !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(23,50,77,0.10) !important;
    margin-bottom: 14px !important;
  }

  .footer-links {
    text-align: center !important;
    min-width: unset !important;
  }

  .footer-links h4 {
    color: #c79a3b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    position: relative !important;
    display: inline-block !important;
  }

  /* Underline centered under heading */
  .footer-links h4::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -6px !important;
    width: 20px !important;
    height: 2px !important;
    background: #c79a3b !important;
    border-radius: 4px !important;
  }

  .footer-links ul {
    margin-top: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-links ul li {
    border-bottom: 1px solid rgba(23,50,77,0.06) !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer-links ul li:last-child {
    border-bottom: none !important;
  }

  .footer-links a {
    display: block !important;
    font-size: 0.78rem !important;
    color: #334155 !important;
    padding: 5px 0 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .footer-links a:hover {
      color: #c79a3b !important;
      padding-left: 0 !important;
    }
  }

  /* ════════════════════════════════
     CONTACT BOX — card style
  ════════════════════════════════ */
  .footer-contact-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: #fff !important;
    border-radius: 18px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 16px rgba(23,50,77,0.07) !important;
    border: 1px solid rgba(23,50,77,0.06) !important;
  }

  .footer-contact-box h4 {
    color: #c79a3b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    position: relative !important;
    display: inline-block !important;
  }

  .footer-contact-box h4::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -6px !important;
    width: 20px !important;
    height: 2px !important;
    background: #c79a3b !important;
    border-radius: 4px !important;
    transform: none !important;
  }

  .footer-contact {
    margin-top: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .contact-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    font-size: 0.78rem !important;
    color: #334155 !important;
    margin-top: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(23,50,77,0.06) !important;
    line-height: 1.4 !important;
    transform: none !important;
    text-align: left !important;
  }

  .contact-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .contact-item:hover {
    transform: none !important;
  }

  .contact-item i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
    background: rgba(199,154,59,0.10) !important;
    color: #c79a3b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* ════════════════════════════════
     WAVE + BOTTOM
  ════════════════════════════════ */
  .footer-wave-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  .footer-wave {
    display: block !important;
    height: 28px !important;
    margin-bottom: -2px !important;
  }

  .footer-bottom {
    margin-top: 0 !important;
    padding: 8px 16px 14px !important;
    background: #17324d !important;
  }

  .footer-bottom p {
    font-size: 0.7rem !important;
    line-height: 1.6 !important;
    margin: 2px 0 !important;
  }

  .footer-bottom span {
    margin: 0 5px !important;
  }
}

/* =============================================================
   21. FLOATING BUTTONS (mobile placement)
============================================================= */
@media (max-width: 768px) {

  .floating-notice-btn {
    right: 14px !important;
    bottom: 16px !important;
    height: 52px !important;
    padding: 0 14px 0 10px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  .floating-notice-btn i {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.85rem !important;
  }

  .floating-notice-btn span {
    font-size: 0.82rem !important;
  }

  .floating-notice-btn.move-left {
    right: 80px !important;
  }
  /* scroll-top — hidden by default, JS adds .show */
  .scroll-top {
    position: fixed !important;
    right: 14px !important;
    bottom: 16px !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    z-index: 9997 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    /* HIDDEN — JS will add .show when scrolled 300px */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(16px) scale(0.9) !important;
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease !important;
  }

  /* JS adds .show after 300px scroll */
  .scroll-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Gold icon — same as desktop */
  .scroll-top i {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #c79a3b, #e0b04a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    transition: .35s ease !important;
  }

  .modern-notice-popup {
    padding: 12px !important;
    /* The mobile nav bar uses z-index:99999 !important, which was
       beating this popup's desktop z-index (10000, no !important)
       and rendering on top of it. Push the popup above the nav. */
    z-index: 999999 !important;
  }

  .modern-notice-box {
    border-radius: 20px !important;
    margin: 0 !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .notice-header {
    padding: 22px 18px 16px !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
  }

  .notice-header h2 {
    font-size: 1.3rem !important;
  }

  .notice-body {
    padding: 18px !important;
    gap: 14px !important;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .notice-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  .notice-card h3 {
    font-size: 1rem !important;
  }

  .notice-card p {
    font-size: 0.88rem !important;
  }

  .notice-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: 1.3rem !important;
  }
}

/* =============================================================
   22. VISION MISSION SECTION
============================================================= */
@media (max-width: 768px) {

  .vm-section {
    padding: 40px 5% !important;
  }

  .vm-container {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .vm-box h3 {
    font-size: 1.2rem !important;
  }

  .vm-box p,
  .vm-box ul li {
    font-size: 0.92rem !important;
  }
}

/* =============================================================
   23. INFO CARDS / HIGHLIGHTS GRID (general)
============================================================= */
@media (max-width: 768px) {

  .highlights-wrapper {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .info-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .info-card .icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .info-card h3 {
    font-size: 1rem !important;
  }

  .info-card p {
    font-size: 0.88rem !important;
  }
}

/* =============================================================
   24. GENERAL SECTION PADDING
============================================================= */
@media (max-width: 768px) {

  .section {
    padding: 50px 0 !important;
  }

  .container {
    padding: 0 16px !important;
  }

  h1, h2 {
    word-break: break-word !important;
  }

  /* Section tags */
  .section-tag {
    font-size: 0.72rem !important;
    letter-spacing: 2px !important;
  }

  
}

/* =============================================================
   25. LOGIN / COMING SOON PAGE
============================================================= */
@media (max-width: 768px) {

  .coming-content {
    padding: 36px 20px !important;
    border-radius: 22px !important;
  }

  .coming-content h1 {
    font-size: 2.2rem !important;
  }

  .coming-content p {
    font-size: 0.92rem !important;
  }

  .coming-icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 22px !important;
    margin-bottom: 20px !important;
  }

  .coming-icon i {
    font-size: 38px !important;
  }

  .coming-buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .coming-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 0.9rem !important;
  }
}

/* =============================================================
   26. MODAL (login popup)
============================================================= */
@media (max-width: 1200px) {

  .modal-content {
    padding: 34px 20px !important;
    border-radius: 22px !important;
    max-width: 94vw !important;
  }

  .modal-header h2 {
    font-size: 1.5rem !important;
  }

  .modal form input,
  .login-btn {
    height: 50px !important;
    font-size: 0.92rem !important;
  }
}

/* =============================================================
   27. SMALL PHONE (max 400px)
============================================================= */
@media (max-width: 400px) {

  .hero-full {
    height: 56vh !important;
  }

  .hero-content h1 {
    font-size: 1.5rem !important;
  }

  .counter-grid {
    grid-template-columns: 1fr !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }

  .gallery-grid {
    column-count: 1 !important;
  }
}

/* =============================================================
   28. SWIPER (academics, gallery sliders)
============================================================= */
@media (max-width: 768px) {
  .swiper {
    width: 100% !important;
  }

  .swiper-slide {
    width: 100% !important;
  }

  .swiper-pagination {
    bottom: 8px !important;
  }
}

/* =============================================================
   29. FIX OVERFLOW GLOBALLY
============================================================= */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important; /* fallback for older browsers */
    /* overflow-x:hidden alone forces the browser to compute
       overflow-y as "auto", turning body into a scroll container —
       that's what was breaking position:sticky (e.g. the gallery
       filter bar) while scrolling. overflow-x:clip avoids this. */
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
}

/* =============================================================
   30. MOBILE NAV — show hamburger inside nav-container
============================================================= */
@media (max-width: 1200px) {
  #mobileMenuToggle {
    display: flex !important;
  }

  /* Ensure nav-container on mobile is dark (matching brand) */
  .nav-container.sticky {
    background: #1e3549 !important;
  }

  .nav-container.sticky .nav-links li a {
    color: #fff !important;
  }
}
/* =============================================================
   31. MOBILE MENU — ACCORDION DROPDOWNS
============================================================= */
@media (max-width: 1200px) {

  /* Wrapper for each dropdown item */
  .mob-dropdown {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* The toggle button (replaces plain <a> for parent items) */
  .mob-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 13px 22px !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .mob-dropdown-toggle:hover {
      color: #c79a3b !important;
      background: rgba(199,154,59,0.08) !important;
    }
  }

  /* Active state — parent is open */
  .mob-dropdown-toggle.open {
    color: #c79a3b !important;
    background: rgba(199,154,59,0.08) !important;
  }

  /* Chevron icon */
  .mob-chevron {
    font-size: 0.75rem !important;
    transition: transform 0.3s ease !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
  }

  /* Rotate chevron when open */
  .mob-dropdown-toggle.open .mob-chevron {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
    color: #c79a3b !important;
  }

  /* Sub-link panel — hidden by default */
  .mob-dropdown-panel {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,0.18) !important;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  }

  /* Open state */
  .mob-dropdown-panel.open {
    max-height: 300px !important;
  }

  /* Sub-links inside panel */
  .mob-dropdown-panel a {
    display: block !important;
    padding: 11px 22px 11px 38px !important;
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    letter-spacing: 0.2px !important;
  }

  .mob-dropdown-panel a:last-child {
    border-bottom: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .mob-dropdown-panel a:hover {
      color: #c79a3b !important;
      background: rgba(199,154,59,0.06) !important;
      padding-left: 46px !important;
    }
  }

  /* Left accent bar on panel */
  .mob-dropdown-panel {
    border-left: 3px solid rgba(199,154,59,0.25) !important;
  }

}
/* =========================================================
   GLOBAL MOBILE FIX
========================================================= */

@media(max-width:1200px){

  html,
  body{
    overflow-x:hidden !important; /* fallback for older browsers */
    /* see FIX 29 note below: overflow-x:hidden alone makes overflow-y
       compute to "auto", turning body into a scroll container and
       breaking position:sticky elements (e.g. gallery filter bar).
       overflow-x:clip avoids that side effect. */
    overflow-x:clip !important;
    scroll-behavior:smooth;
  }

  /* Fixed-nav offset — single source of truth. The nav is position:fixed
     below 1200px, so it's out of the document flow; this pushes ALL page
     content (notice bar, hero, everything) down by the nav's height so
     nothing renders underneath it. The notice bar's own margin-top rules
     further down are zeroed out so this doesn't double up. */
  body{
    padding-top:65px !important;
  }

  /* FIX BLANK SECTIONS — only apply to page-level containers, not UI widgets */

  section,
  main,
  article,
  .container,
  .about-left,
  .about-cards,
  .why-header,
  .events-header,
  .counter-grid{
    overflow:visible !important;
  }

  /* FIX AOS CUTTING */

  [data-aos]{
    overflow:visible !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  /* Keep AOS-animated elements visible once AOS marks them done */
  [data-aos].aos-animate{
    opacity:1 !important;
    transform:none !important;
  }

  /* =========================
     FIX MOBILE NAVBAR
  ========================== */

  .nav-container{

    height:68px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:0 16px !important;

    position:fixed !important;
    top:0;
    left:0;

    width:100%;

    z-index:99999 !important;

    background:#1e3549 !important;

    box-shadow:
      0 4px 20px rgba(0,0,0,.12);
  }

  /* PAGE OFFSET */

  /* Offset is handled once, globally, by body's padding-top above —
     zeroed here so it doesn't stack a second time. */
  .notice-marquee-bar{
    margin-top:0 !important;
  }

  #main,
  .hero-full,
  .about-hero,
  .academics-hero,
  .admissions-hero,
  .contact-hero,
  .gallery-hero,
  .leader-hero,
  .calendar-hero,
  .sc-hero{
    margin-top:0 !important;
  }

  /* =========================
     HERO FIX
  ========================== */

  .hero-full{
    min-height:78vh !important;
    height:auto !important;
  }

  .hero-content{
    width:100% !important;
    padding:20px !important;
  }

  .hero-content h1{
    font-size:2.5rem !important;
    line-height:1.15 !important;
  }

  .hero-content p{
    font-size:1rem !important;
  }

  /* =========================
     FIX CARDS
  ========================== */

  .event-card,
  .modern-card,
  .info-card,
  .why-card,
  .rc-card,
  .initiative-card{
    overflow:hidden !important;
  }

  /* =========================
     FIX GRID CUTTING
  ========================== */

  .academic-row,
  .message-grid,
  .philosophy-grid,
  .fees-hero-container,
  .contact-wrapper,
  .calendar-layout,
  .footer-grid,
  .sc-cards-grid,
  .initiative-grid,
  .why-grid{

    grid-template-columns:1fr !important;
  }

  /* =========================
     FIX IMAGES
  ========================== */

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

  .academic-image,
  .message-image,
  .philosophy-image{
    height:320px !important;
  }

  /* =========================
     FIX MOBILE MENU
  ========================== */

  .mobile-menu{
    z-index:999999 !important;
  }

  /* =========================
     FIX NOTICE BUTTON — superseded by section 21 (FLOATING
     BUTTONS) above, which now handles position/size/z-index for
     both .floating-notice-btn and .scroll-top consistently.
  ========================== */

  /* =========================
     FIX FOOTER — overrides removed, see section 20 above
  ========================== */

  /* =========================
     FIX EXTRA WHITE SPACE
  ========================== */

  .section,
  .events-section,
  .why-choose-section,
  .academic-section,
  .message-section,
  .contact-main,
  .calendar-page,
  .fees-info,
  .sc-cards-section{

    padding-top:60px !important;
    padding-bottom:60px !important;
  }

}
/* =============================================================
   COMPREHENSIVE FIXES — All requested mobile corrections
   Added below existing rules (higher specificity overrides above)
============================================================= */

/* ─────────────────────────────────────────────────────────
   FIX 1: HOME — Event card sizing on mobile
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .event-card {
    min-width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .event-image {
    height: 190px !important;
    flex-shrink: 0 !important;
  }
  .event-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .event-content {
    padding: 16px 18px 20px !important;
    flex: 1 !important;
  }
  .event-content h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .event-content p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }
  .event-icon {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 2: MENU — School name style in mobile sticky nav
   (The sticky-logo already has the right structure — just
   ensure the Khopoli line and sub-names look polished)
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sticky-logo {
    gap: 8px !important;
  }
  .sticky-logo img {
    height: 40px !important;
  }
  /* School name text inside sticky logo */
  .sticky-logo h1:first-of-type {
    font-size: 1rem !important;
    font-family: 'Times New Roman', Times, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    color: #fff !important;
  }
  .sticky-logo h1:last-of-type {
    font-size: 0.68rem !important;
    font-family: 'Times New Roman', Times, serif !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.85) !important;
    letter-spacing: 0.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 3: LANDSCAPE — Use direct links instead of hamburger
   when screen is wide enough in landscape
───────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1200px) {
  /* Show compact nav links directly instead of hamburger */
  .nav-container {
    height: 50px !important;
    padding: 0 12px !important;
  }
  /* Hide hamburger, show condensed links */
  .menu-toggle,
  #mobileMenuToggle {
    display: none !important;
  }
  .mobile-nav-contact {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
    gap: 14px !important;
    font-size: 0.72rem !important;
    align-items: center !important;
    flex: 1 !important;
    justify-content: center !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .nav-links::-webkit-scrollbar { display: none !important; }
  .nav-links li a {
    color: #1e3549 !important;
    font-size: 0.72rem !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }
  .nav-links li a::after { display: none !important; }
  .translate-btn {
    display: none !important;
  }
  .alumni-btn {
    display: flex !important;
    position: static !important;
    padding: 6px 12px !important;
    font-size: 0.7rem !important;
    height: auto !important;
    border-radius: 20px !important;
    flex-shrink: 0 !important;
  }
  .sticky-logo img { height: 32px !important; }
}

/* ─────────────────────────────────────────────────────────
   FIX 4: ABOUT US — Motto section fix
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .motto-section {
    padding: 40px 20px !important;
    text-align: center !important;
  }
  .motto-light {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
  }
  .motto-gold {
    font-size: 3.6rem !important;
    margin-top: -10px !important;
    margin-bottom: -20px !important;
    line-height: 1.5 !important;
  }
  .motto-divider {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }
  .motto-divider img {
    width: 220px !important;
    margin-top: 0 !important;
    height: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 5: ABOUT US — Initiative / Admission contact alignment
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admission-contact-section {
    padding: 60px 20px !important;
    text-align: center !important;
    min-height: 280px !important;
  }
  .admission-contact-card {
    width: 100% !important;
    padding: 0 !important;
  }
  .admission-contact-card h2 {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }
  .admission-contact-card p {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
  }
  .contact-outline-btn {
    padding: 14px 24px !important;
    font-size: 0.88rem !important;
    border-radius: 50px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 6: TRUST.HTML — Serving Humanity No section
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats {
    margin-top: -40px !important;
    padding: 0 16px !important;
  }
  .stats-box {
    grid-template-columns: 1fr 1fr !important;
    padding: 20px 16px !important;
    gap: 20px !important;
    border-radius: 22px !important;
  }
  .stat h2 {
    font-size: 1.8rem !important;
  }
  .stat p {
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 7: TRUST.HTML — Our Initiative section like School Section
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .initiative-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .initiative-card {
    height: 340px !important;
    border-radius: 24px !important;
  }
  .initiative-content {
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
  }
  .initiative-content h3 {
    font-size: 1.6rem !important;
  }
  /* Always show text on mobile (like facilities/school section) */
  .initiative-content p {
    opacity: 1 !important;
    transform: translateY(0) !important;
    max-height: 200px !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    margin-top: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 8: TRUST.HTML — Together We Serve text size
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .quote-section {
    padding: 50px 20px !important;
  }
  .quote-content span {
    font-size: 0.78rem !important;
    letter-spacing: 3px !important;
  }
  .quote-content h2 {
    font-size: 1.7rem !important;
    line-height: 1.35 !important;
    margin: 18px 0 14px !important;
  }
  .quote-content p {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 9: TRUST.HTML — Our Institution arrow in center
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #heritage {
    padding: 60px 0 !important;
  }
  .heritage-title h2 {
    font-size: 1.9rem !important;
  }
  .carousel-container {
    height: 420px !important;
  }
  /* Center the nav arrows vertically between cards */
  .nav-btn1 {
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    z-index: 20 !important;
  }
  #prev {
    left: 4px !important;
  }
  #next {
    right: 4px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 10: ADMISSIONS — Age criteria table fully visible
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .age-criteria-section {
    padding: 36px 0 !important;
  }
  .age-heading {
    margin-bottom: 24px !important;
  }
  .age-heading p {
    font-size: 0.9rem !important;
  }
  /* Replace horizontal scroll table with stacked cards */
  .age-table-wrapper {
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .age-table {
    min-width: unset !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }
  /* Hide desktop table, show card layout */
  .age-table thead {
    display: none !important;
  }
  .age-table tbody tr {
    display: block !important;
    margin: 0 16px 12px !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    border: 1px solid #edf0f5 !important;
  }
  /* Label above value, plain block flow (NOT flex) so the multiple
     spans inside a cell — "born between" / date / "to" / date —
     wrap together as ordinary text instead of each becoming its
     own flex item / its own line. This is both correctly-wrapping
     AND more compact, which cuts down scroll length. */
  .age-table tbody td {
    display: block !important;
    padding: 7px 14px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .age-table tbody td:last-child {
    border-bottom: none !important;
  }
  .age-table tbody td::before {
    content: attr(data-label);
    display: block !important;
    font-weight: 700;
    color: #c79a3b;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 11: ADMISSIONS — Admission Process section redesign
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admission-process-section {
    padding: 60px 16px !important;
  }
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    position: relative !important;
  }
  /* Timeline style */
  .process-card {
    margin-left: 50px !important;
    margin-bottom: 16px !important;
    min-height: auto !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
    position: relative !important;
  }
  .process-card::before {
    /* Vertical connector line instead of horizontal */
    content: "" !important;
    position: absolute !important;
    left: -30px !important;
    top: 50px !important;
    width: 2px !important;
    height: calc(100% + 16px) !important;
    right: auto !important;
    background: #dccb9f !important;
    transform: none !important;
  }
  .process-card:last-child::before {
    display: none !important;
  }
  .step-number {
    position: absolute !important;
    left: -52px !important;
    top: 18px !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
    z-index: 2 !important;
  }
  .process-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }
  .process-icon i {
    font-size: 1.4rem !important;
  }
  .process-card h3 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }
  .process-card p {
    font-size: 0.88rem !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 12b: ACADEMICS — Pre-Primary/Primary: compact list +
   shorter photo + tighter heading gap
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 4 bullet points were stacking into a single column (992px
     breakpoint rule) — put them back into 2 columns so they take
     half the vertical space */
  .academic-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 16px !important;
  }
  .academic-list li {
    font-size: 0.92rem !important;
  }

  /* Shorter photo (was forced to 320px by an earlier mobile rule) */
  .academic-image,
  .academic-row .academic-image,
  .academic-row.reverse .academic-image {
    height: 200px !important;
  }

  /* Cut the 50px desktop heading margin so the photo starts right
     after "Academic Sections" instead of leaving a big empty gap */
  .academic-heading {
    margin-bottom: 24px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 12: ACADEMICS — Primary photo first on mobile
   (academic-row.reverse — on mobile content comes first,
   then image. We need image before content for Primary)
───────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  /* For the "reverse" row (Primary), image should come first */
  .academic-row.reverse {
    display: flex !important;
    flex-direction: column !important;
  }
  .academic-row.reverse .academic-image {
    order: 1 !important;
  }
  .academic-row.reverse .academic-content {
    order: 2 !important;
  }
  /* Normal row (Pre-Primary) keeps image first too */
  .academic-row {
    display: flex !important;
    flex-direction: column !important;
  }
  .academic-row .academic-image {
    order: 1 !important;
  }
  .academic-row .academic-content {
    order: 2 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 13: ACADEMICS — Holistic section like Facilities (swiper)
   On mobile show text always + improve card style
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Desktop CSS gives every .academic-row a 60px bottom margin,
     which — stacked on top of .academic-section's own bottom
     padding and .holistic-section's top padding — was creating a
     large blank gap before "Holistic Development" even appears. */
  .academic-row {
    margin-bottom: 28px !important;
  }
  .academic-section {
    padding-bottom: 20px !important;
  }

  .holistic-section {
    padding: 36px 5% 40px !important;
  }
  .holistic-heading {
    margin-bottom: 24px !important;
  }
  .holistic-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .holistic-card {
    height: 300px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  }
  /* Round the image + overlay too — relying only on the parent's
     overflow:hidden can fail to clip on mobile browsers once the
     child is promoted to its own layer (happens here because of
     the hover transition), leaving square corners at the bottom */
  .holistic-card img {
    border-radius: 24px !important;
  }
  .holistic-overlay {
    border-radius: 24px !important;
  }
  .holistic-overlay {
    padding: 22px 20px !important;
    justify-content: flex-end !important;
  }
  .holistic-overlay h3 {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
  }
  .holistic-overlay h3::after {
    width: 50px !important;
    height: 3px !important;
    margin-top: 8px !important;
  }
  /* Always show description on mobile */
  .holistic-overlay p {
    max-height: 120px !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 14: ACADEMICS — Subjects offered redesign on mobile
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .subjects-section {
    padding: 40px 5% !important;
  }
  /* Desktop CSS sets a 70px margin-bottom on the heading, which on
     a narrow screen leaves a large empty gap before the cards even
     start — cut it down so the section doesn't feel unnecessarily
     long / doesn't force extra scrolling for no reason. */
  .subjects-heading {
    margin-bottom: 26px !important;
  }
  .subjects-heading p {
    font-size: 0.9rem !important;
  }
  /* 2 across, with a shorter card height so the section takes up
     less vertical space and needs less scrolling */
  .subjects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .subject-card {
    height: auto !important;
    min-height: 84px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
  }
  .subject-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .subject-icon i {
    font-size: 1.15rem !important;
  }
  .subject-card h3 {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 14b: ACADEMICS — Facilities section, tighter mobile gap
   (desktop CSS's 70px top padding + 60px heading margin had no
   mobile override, leaving a large blank gray area before
   "Learning Infrastructure")
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .facilities-section {
    padding: 36px 5% 40px !important;
  }
  .facilities-heading {
    margin-bottom: 28px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 15: STUDENT CORNER — Photo side-by-side not stacked
   (login-phone-col should stay beside features on mobile)
───────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .login-body {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .login-phone-col {
    width: 90px !important;
    flex-shrink: 0 !important;
  }
  .login-phone-col img {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .login-features {
    flex: 1 !important;
  }
  .lf-item {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
}

/* uni (uniform card) image stays beside on mobile */
@media (max-width: 768px) {
  .uni-top-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .uni-img-col {
    width: 100px !important;
    flex-shrink: 0 !important;
  }
  .uni-img-col img {
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FIX 16: LEADERSHIP — One card at a time slider fix
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .committee-grid {
    /* Snap scroll for one card at a time */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .committee-card {
    scroll-snap-align: center !important;
    flex: 0 0 calc(100vw - 60px) !important;
    min-width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
  }
}
/* ─────────────────────────────────────────────────────────
   FIX 17: LOGIN MODAL — always on top, close button works
───────────────────────────────────────────────────────── */
.modal {
  z-index: 99999 !important;
}

.modal.active {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
}

#closeModal {
  z-index: 100000 !important;
  cursor: pointer !important;
  pointer-events: all !important;
}

/* Side menu must render above the fixed navbar, not behind it.
   Applies wherever the hamburger drawer is used (up to 1200px).
   The overlay (dark + blurred backdrop) must also sit above the
   navbar so the navbar appears dimmed/blurred behind it instead of
   sitting crisply on top, unaffected. */
@media (max-width: 1200px) {
  .mobile-menu-overlay {
    z-index: 100000 !important;
  }
  .mobile-menu {
    z-index: 100001 !important;
  }
}

/* Side menu — make sure it actually scrolls when its content is
   taller than the screen. The outer .mobile-menu is a fixed-size
   shell (overflow:hidden); .mobile-menu-scroll is the element that
   actually scrolls, so all of these apply to it, not the shell. */
.mobile-menu {
  overflow: hidden !important;
}

.mobile-menu-scroll {
  min-height: 0 !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

/* Keep every row at its natural height so the column can actually
   grow taller than the screen (letting it shrink is what silently
   defeats the scroll above). */
.mobile-menu-scroll > * {
  flex-shrink: 0 !important;
}

@media(max-width:768px){

.initiatives-home{

min-height:auto;

padding:70px 20px;

}

.institution-collage-bg{

grid-template-columns:1fr 1fr;

grid-template-rows:

160px
160px
160px;

gap:8px;

}

.item1,
.item2,
.item3,
.item4,
.item5,
.item6{

grid-column:auto;

grid-row:auto;

}

.init-content{

padding:20px;

}

.init-content h2{

font-size:2rem;

}

.init-stats{

gap:25px;

flex-wrap:wrap;

}

.init-stat strong{

font-size:1.8rem;

}

}

/* =============================================================
   32. TABLET FIX (769px – 1199px) — DESKTOP-STYLE NAV +
   MULTI-COLUMN CARD GRIDS FOR TABLET PORTRAIT & LANDSCAPE
   - Mobile (<=768px) is UNCHANGED.
   - Desktop (>=1200px) is UNCHANGED.
============================================================= */
@media (min-width: 768px) and (max-width: 1199px) {

  /* ── NAVBAR: show full desktop-style menu, hide hamburger ── */
  .header-top {
    display: none !important;
  }

  .nav-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    padding: 0 18px !important;
    background: #e8e9ea !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
  }

  .nav-container.sticky {
    background: #e8e9ea !important;
  }

  /* Logo on the left */
  .sticky-logo {
    display: flex !important;
    position: static !important;
    align-items: center !important;
    margin-right: 16px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .sticky-logo img {
    height: 40px !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  .sticky-logo h1:first-of-type {
    font-size: 0.92rem !important;
    color: #fff !important;
    line-height: 1 !important;
  }

  .sticky-logo h1:last-of-type {
    font-size: 0.64rem !important;
    color: #fff !important;
  }

  .sticky-logo .location-line div {
    color: #c79a3b !important;
    font-size: 0.5rem !important;
  }

  /* Hide mobile-only elements */
  .mobile-nav-contact,
  .menu-toggle,
  #mobileMenuToggle {
    display: none !important;
  }

  /* Show the full desktop nav links, condensed to fit */
  .nav-links {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  .nav-links::-webkit-scrollbar {
    display: none !important;
  }

  .nav-links li a {
    color: #1e3549 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
  }

  .nav-container.sticky .nav-links li a {
    color: #1e3549 !important;
  }

  /* Dropdowns still work on hover/tap */
  .dropdown-menu {
    top: 54px !important;
    min-width: 200px !important;
    font-size: 0.85rem !important;
  }

  /* Translate + Login buttons — compact, inline */
  .translate-btn {
    position: static !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.8rem !important;
    margin: 0 8px 0 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .alumni-btn {
    position: static !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
  }

  /* Hide Google translate select element itself */
  #google_translate_element {
    display: none !important;
  }

  /* Offset is handled once, globally, by body's padding-top (see the
     GLOBAL MOBILE FIX section) — zeroed here so it doesn't stack twice. */
  .notice-marquee-bar{
    margin-top: 0 !important;
  }

  #main,
  .hero-full,
  .about-hero,
  .academics-hero,
  .admissions-hero,
  .contact-hero,
  .gallery-hero,
  .leader-hero,
  .calendar-hero,
  .sc-hero,
  .fees-hero,
  .coming-page {
    margin-top: 0 !important;
  }

  /* ── HERO ── */
  .hero-full {
    height: 65vh !important;
    min-height: 420px !important;
  }

  .hero-content h1 {
    font-size: 3rem !important;
  }

  .hero-content p {
    font-size: 1.1rem !important;
  }

  /* ── ABOUT + CARDS: keep 2-col layout, 3 cards in one row ── */
  

  .about-left p {
    max-width: 100% !important;
  }

  .card-content {
    padding: 36px 14px 18px !important;
  }

  .card-content h1 {
    font-size: 1.05rem !important;
  }

  .card-content p {
    font-size: 0.85rem !important;
  }

  /* ── WHY CHOOSE US: 4 columns stays on landscape tablets,
       4-col still fits down to ~900px; below that use 2 ── */
  .why-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }

  .why-card {
    padding: 18px 12px !important;
    min-height: 190px !important;
  }

  .why-card h3 {
    font-size: 0.95rem !important;
  }

  .why-card p {
    font-size: 0.8rem !important;
  }

  /* ── HIGHLIGHTS / INFO CARDS: keep multi-column ── */
  .highlights-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* ── EVENT CARDS: 3 in a row stays on tablet ── */
  .event-card {
    min-width: calc((100% - 40px) / 3) !important;
  }

  .event-image {
    height: 220px !important;
  }

  /* ── COUNTER / ACHIEVEMENTS: 4 in a row ── */
  .counter-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  /* ── VISION & MISSION: keep side-by-side ── */
  .vm-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* ── FOOTER: 3 columns ── */
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr !important;
    gap: 24px !important;
    text-align: left !important;
  }

  .footer-info {
    grid-column: auto !important;
    text-align: left !important;
  }

  .footer-brand {
    justify-content: flex-start !important;
  }

  .footer-middle {
    justify-content: space-between !important;
    gap: 24px !important;
  }

  .footer-contact-box {
    align-items: flex-start !important;
  }

  /* ── MOMENTS GRID (events section) ── */
  .moments-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* ── GALLERY ── */
  .gallery-grid {
    column-count: 3 !important;
  }

  /* ── ADMISSIONS PROCESS / SUBJECTS / HOLISTIC: 3 across ── */
  .process-grid,
  .subjects-grid,
  .holistic-grid,
  .initiative-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── LEADER / STAFF GRID: 3 across ── */
  .leaders-grid,
  .staff-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* =============================================================
   33. TABLET PORTRAIT NARROW (769px – 991px) — extra refinements
   for narrower tablets where 4-col grids get too tight
============================================================= */
@media (min-width: 769px) and (max-width: 1200px) {

  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .why-card {
    min-height: 180px !important;
  }

  .highlights-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

  .leaders-grid,
  .staff-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .process-grid,
  .subjects-grid,
  .holistic-grid,
  .initiative-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================================
   34. LANDSCAPE PHONES (max-height:500px) — align with tablet nav
   Ensures landscape phones also keep visible nav links + grids
============================================================= */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 481px) and (max-width: 1200px) {

  .about-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .why-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }

  .why-card {
    min-height: 150px !important;
    padding: 14px 10px !important;
  }

  .highlights-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .event-card {
    min-width: calc((100% - 40px) / 3) !important;
  }

  .counter-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==========================================
   EVENTS SECTION - TABLET VIEW
========================================== */

@media (min-width:769px) and (max-width:1100px){

  .moments-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:22px !important;
  }

  .moment-tile.big,
  .moment-tile.tall,
  .moment-tile.tall2,
  .moment-tile.right-big{

    grid-column:auto !important;
    grid-row:auto !important;

    height:320px !important;
    min-height:320px !important;
  }

  .moment-tile img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .moment-info p{
    max-height:none !important;
    opacity:1 !important;
  }

}
/* =========================================================
   FORCE MOBILE/TABLET HAMBURGER
========================================================= */

@media screen and (max-width: 1200px){

  /* Hide desktop navigation */
  .nav-links{
    display:none !important;
    visibility:hidden !important;
  }

  /* Hide desktop buttons */
  .translate-btn,
  .alumni-btn,
  #google_translate_element{
    display:none !important;
  }

  /* Hide top desktop header */
  .header-top{
    display:none !important;
  }

  /* Mobile navbar */
  .nav-container{
    position:fixed !important;
    top:0 !important;
    left:0 !important;

    width:100% !important;
    height:65px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:0 16px !important;

    background:#1e3549 !important;

    z-index:99999 !important;
  }

  /* Show logo */
  .sticky-logo{
    display:flex !important;
    align-items:center !important;
  }

  /* FORCE hamburger visible */
  #mobileMenuToggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:45px !important;
    height:45px !important;

    background:rgba(255,255,255,0.12) !important;

    border:none !important;
    border-radius:10px !important;

    color:#fff !important;
    font-size:1.6rem !important;

    cursor:pointer !important;
  }

  /* Hide old menu icon */
  #menuToggle{
    display:none !important;
  }
}


/* =========================================================
   DESKTOP ONLY
========================================================= */

@media screen and (min-width:1201px){

  .nav-links{
    display:flex !important;
  }

  #mobileMenuToggle{
    display:none !important;
  }
}
/* TABLET + MOBILE LOGO TEXT COLOR */
@media (max-width: 1200px) {

  .sticky-logo h1,
  .logo h1,
  .school-name,
  .school-title {
    color: #fff !important; /* same color as mobile */
  }

}

/* Tablet View Specific Overrides */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .logo a, 
  .logo h1, 
  .logo .location-line {
    color: #ffffff !important; /* Forces the text to stay white on tablets */
  }
}
@media (max-width:768px){

    /* ── LEADERSHIP MESSAGE SECTION (President / VP) — MOBILE ONLY ──
       Tablet (min-width:769px) is untouched; these rules stop at 768px. */

    .message-grid{
        grid-template-columns:1fr !important;
    }

    /* Show the full photo, no cropping, no fixed/oversized box */
    .message-image{
        height:auto !important;
        border-radius:16px !important;
        overflow:hidden !important;
    }

    .message-image img{
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;   /* no cropping */
        object-position:center !important;
        display:block;
    }

    /* Lighter overlay so the photo stays visible behind the name/role */
    .message-overlay{
        background:linear-gradient(
            to top,
            rgba(30,53,73,.60),
            rgba(30,53,73,.15),
            transparent
        ) !important;
    }

    /* Name + role tag box — kept inside the image, not overflowing it */
    .message-person{
        bottom:14px !important;
        left:14px !important;
        right:14px !important;
        max-width:calc(100% - 28px) !important;
    }

    /* Name — small enough to comfortably sit over the photo */
    .message-person h4{
        font-size:1.05rem !important;
        line-height:1.25 !important;
        margin-bottom:3px !important;
        font-weight:600 !important;
    }

    /* Role tag (e.g. "President, MOCCB") — kept small, was previously
       unstyled on mobile and rendering at full desktop size */
    .message-person span{
        font-size:0.78rem !important;
        line-height:1.3 !important;
        letter-spacing:.2px !important;
    }

    /* Message text block below/beside the photo */
    .message-content{
        padding:28px 4px 0 !important;
        text-align:left !important;
    }

    .message-content .section-title{
        font-size:1.6rem !important;
        line-height:1.25 !important;
    }

    .message-content p{
        font-size:.95rem !important;
        line-height:1.75 !important;
        margin-bottom:12px !important;
    }

    .message-sign h5{
        font-size:1rem !important;
    }
}

/* =============================================================
   HOME PAGE — MOBILE-ONLY FIXES
============================================================= */
@media (max-width: 768px) {

  /* "Why Choose Us" cards: restore the 2-column layout (a broader
     max-width:1200px rule earlier in this file was forcing 1 column
     on phones too — this wins as it's later in the cascade). */
  .why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* About Us gold underline — center it under the now-centered
     heading instead of sitting at the left edge. */
  .about-left .section-title.text-left::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Hero heading — a little smaller on phones */
  .hero-content h1 {
    font-size: 2.1rem !important;
  }

  /* Hero slider arrows — the slides already auto-rotate, so the
     manual arrows just add clutter on small screens */
  .arrow-full {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .why-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 1200px) {
  #vm,
  #mt,
  #history,
  #ourschool,
  #ap,
  #admissionform {
    scroll-margin-top: 85px;
  }
}