/* ============================================================= DAVID MEMORIAL — mobile-responsive.css Load this LAST in , AFTER ekka.css. Covers every section of the page at 3 breakpoints: Desktop : > 1024 px (ekka.css handles this already) Tablet : 769 – 1024 px Mobile : ≤ 768 px Small : ≤ 480 px ============================================================= */ /* ── Global ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden !important; } img { max-width: 100%; height: auto; } /* ============================================================= SECTION 1 — HEADER + DROPDOWN FIX ============================================================= */ .dm-header { position: fixed !important; top: 0; left: 0; width: 100%; background-color: beige; z-index: 10000 !important; overflow: visible !important; } /* Desktop dropdown — position:fixed beats ekka's position:absolute AND the @media(max-width:900px) rule that collapses the nav */ /* .dm-dropdown-content { position: fixed !important; left: 0 !important; width: 100vw !important; display: flex !important; flex-direction: row !important; justify-content: center !important; gap: 60px !important; padding: 35px 80px !important; background: #fcf8e3 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease, visibility 0.25s ease !important; z-index: 99999 !important; } */ .dm-dropdown:hover .dm-dropdown-content, .dm-dropdown:focus-within .dm-dropdown-content { visibility: visible !important; opacity: 1 !important; pointer-events: all !important; } /* Counter ekka's @media(max-width:900px) nav-column collapse */ @media (min-width: 769px) { .dm-nav { flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; } .dm-nav > a { margin-left: 30px !important; } } /* Mobile header overrides */ @media (max-width: 768px) { .dm-header, .dm-header.scrolled { background-color: beige !important; } /* Hide desktop top bar */ .hdr-top-bar { display: none !important; } /* Nav row layout */ .hdr-nav-row { justify-content: flex-start !important; padding: 8px 55px 8px 15px !important; min-height: 60px; } @media (max-width:768px){ .hdr-hamburger span{ background:#fff !important; } } /* Logo size */ .dm-logo { margin-right: 0 !important; } .dm-logo img { width: 110px !important; } /* Show hamburger */ .hdr-hamburger { display: flex !important; } /* Nav menu — hidden until opened */ .dm-nav { display: none !important; flex-direction: column !important; align-items: stretch !important; position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; background-color: beige !important; box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important; padding: 0 0 15px !important; z-index: 9997 !important; max-height: 80vh; overflow-y: auto; } .dm-nav.open { display: flex !important; } .dm-nav > a { margin: 0 !important; padding: 12px 20px !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; font-size: 14px !important; font-weight: 600 !important; display: block !important; width: 100% !important; } /* Mobile dropdowns */ .dm-dropdown { width: 100% !important; border-bottom: 1px solid rgba(0,0,0,0.07); } .dm-dropdown .dm-dropbtn { margin: 0 !important; padding: 12px 20px !important; width: 100% !important; text-align: left !important; font-size: 14px !important; font-weight: 600 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } .dm-dropdown .dm-dropbtn::after { content: "\25BE"; font-size: 11px; margin-left: 8px; transition: transform 0.25s; } .dm-dropdown.mob-open .dm-dropbtn::after { transform: rotate(-180deg); } .dm-dropdown-content { position: static !important; width: 100% !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: all !important; display: none !important; padding: 8px 20px 12px 30px !important; gap: 8px !important; box-shadow: none !important; background: rgba(252,248,227,0.7) !important; border-left: 3px solid orange; transition: none !important; z-index: 1 !important; } .dm-dropdown.mob-open .dm-dropdown-content { display: flex !important; } .dm-dropdown:hover .dm-dropdown-content { visibility: visible !important; opacity: 1 !important; } .dm-dropdown-content .dm-column img { display: none !important; } .dm-column h4 { font-size: 13px !important; padding: 3px 0 !important; margin-bottom: 3px !important; } .dm-column a { font-size: 12px !important; margin-bottom: 3px !important; } .blink-btn { margin: 10px 20px !important; align-self: flex-start !important; font-size: 12px !important; border-radius: 12px !important; } } @media (max-width: 480px) { .dm-logo img { width: 90px !important; } } /* ============================================================= SECTION 2 — HERO SLIDESHOW + VIDEO ============================================================= */ @media (max-width: 768px) { .slide-video { width: 100% !important; height: 85vh !important; min-height: 180px !important; max-height: 320px !important; object-fit: cover !important; } .slide-content { padding: 10px 15px !important; text-align: center !important; } /* Hide the floating logo overlaid on hero */ .slide-content > img { display: none !important; } /* Fix giant inline font sizes */ .slide-content h1 { font-size: 9vw !important; margin-right: 0 !important; position: static !important; right: auto !important; } .slide-content h1 b { margin-right: 0 !important; } .slide-content .sld2 { width: auto !important; font-size: 15px !important; padding: 8px 20px !important; margin-left: 0 !important; margin-bottom: 5% !important; } .info p { font-size: 13px !important; } .program-list { flex-wrap: wrap !important; justify-content: center !important; } .program-item { font-size: 12px !important; } } @media (max-width: 480px) { .slide-video { height: 50vw !important; } .slide-content h1 { font-size: 7.5vw !important; } } /* ============================================================= SECTION 3 — FLOATING CONTACT TABS ============================================================= */ @media (max-width: 768px) { .dm-floating { right: 8px !important; height:115px!important } .dm-tab { font-size: 11px !important; } } /* ============================================================= SECTION 4 — DAVID ADVANTAGE CARDS (.card-container2) ============================================================= */ @media (max-width: 768px) { .adv { font-size: 22px !important; margin-top: 10px;} .adv h2 { font-size: 22px !important; } .card-container2 { flex-direction: column !important; align-items: center !important; gap: 20px !important; } .column2.card2 { width: 90% !important; max-width: 380px !important; height: 300px; } .column2.card2 img { width: 100% !important; height: 200px !important; object-fit: cover !important; } .column2.card2 > div > div[style*="font-size: 25px"] { font-size: 18px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .card-container2 { flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; } .column2.card2 { width: calc(47% - 10px) !important; } } /* ============================================================= SECTION 5 — PROGRAMS (.imagesView / .imgCards / .imgCardView) ============================================================= */ @media (max-width: 768px) { .imagesView { flex-direction: column !important; align-items: center !important; gap: 15px !important; margin-top: 20px !important; } .cont1.card2 { width: 90% !important; max-width: 380px !important; margin-right: 0 !important; padding: 15px !important; } .imgCards, .card-containers { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 15px !important; padding: 10px !important; } .imgCardView, .imgCardView.card2 { width: calc(48% - 8px) !important; min-width: 140px !important; height:284px; } .imgCardView img { width: 100% !important; height: 140px !important; object-fit: cover !important; } } @media (max-width: 480px) { .imgCardView, .imgCardView.card2 { width: 90% !important; max-width: 340px !important; } .imgCardView img { height: 190px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .imgCards, .card-containers { flex-wrap: wrap !important; justify-content: center !important; gap: 15px !important; } .imgCardView { width: calc(48% - 8px) !important; } } /* ============================================================= SECTION 6 — COMMUNITY (.divBlock / .cont2 / .support-grid) ============================================================= */ @media (max-width: 768px) { .divBlock { flex-direction: column !important; align-items: center !important; gap: 20px !important; padding: 15px !important; } .cont2 { width: 100% !important; padding-right: 0 !important; } /* Neutralise inline padding-left:125px / left:70px */ .cont2 > div[style] { padding-left: 15px !important; position: static !important; left: 0 !important; } .cont2 h1 { font-size: 22px !important; } .cont2 h1 b { font-size: 26px !important; } .support-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .support-card p { font-size: 12px !important; } /* Hide decorative image to save space */ .pic.card2 { display: none !important; } } @media (max-width: 480px) { .support-grid { grid-template-columns: 1fr !important; } } @media (min-width: 769px) and (max-width: 1024px) { .divBlock { flex-wrap: wrap !important; gap: 20px !important; } .cont2 { width: 100% !important; padding-right: 0 !important; } .cont2 > div[style] { padding-left: 20px !important; left: 0 !important; position: static !important; } .pic.card2 { display: none !important; } } /* ============================================================= SECTION 7 — "STEP INTO" BLOCK ← FIXED Root causes: .block has margin-left:350px in ekka.css, inline p has margin-left:-500px, buttons have relative positioning offsets that push them off-screen on mobile. ============================================================= */ @media (max-width: 768px) { /* Kill ekka's margin-left:350px AND the section's own margin-top:80px */ .block { margin-left: 0 !important; margin-right: 0 !important; margin-top: 30px !important; padding: 20px 15px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; overflow: hidden !important; text-align: center !important; } /* Kill inline margin-left:-500px on the

*/ .block p { font-size: 18px !important; margin: 0 0 25px 0 !important; text-align: center !important; width: 100% !important; position: static !important; } /* Kill inline padding-left:250px on the arrow wrapper div */ .block > div { padding-left: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; position: static !important; top: auto !important; } /* Kill inline left:100px on the inner flex div */ .block > div > div { position: static !important; left: 0 !important; display: flex !important; gap: 20px !important; justify-content: center !important; align-items: center !important; } /* Arrow buttons — reset all inline relative offsets */ .arrow-circle { position: static !important; right: auto !important; left: auto !important; top: auto !important; width: 55px !important; height: 55px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Icons inside buttons — reset inline left:20px / right:20px */ .arrow-circle i { font-size: 26px !important; position: static !important; left: 0 !important; right: 0 !important; } } /* ============================================================= SECTION 8 — VISION / RELATION CAROUSEL ============================================================= */ @media (max-width: 768px) { .carousel-container { padding: 5px !important; overflow: hidden !important; } .carousel { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 15px !important; padding-bottom: 10px !important; scroll-snap-type: x mandatory !important; scrollbar-width: none !important; } .carousel::-webkit-scrollbar { display: none !important; } .bo.card2026 { min-width: 210px !important; flex-shrink: 0 !important; scroll-snap-align: start !important; } } /* ============================================================= SECTION 9 — BY THE NUMBERS (.boxData / .boxD1-3) ============================================================= */ @media (max-width: 768px) { .student { padding: 0 15px !important; margin-top: 30px !important; } .student h1 { font-size: 20px !important; text-align: center !important; } .boxData { flex-direction: column !important; align-items: center !important; gap: 20px !important; } .boxD1, .boxD2, .boxD3 { width: 113% !important; max-width: 380px !important; height: auto !important; min-height: 400px; } .sub-box1, .sub-box2 { width: 100% !important; height: auto !important; } .sub-box2 img { width: 100% !important; height: auto !important; } .counter { font-size: 30px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .boxData { flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; } .boxD1, .boxD2, .boxD3 { width: 45% !important; } } /* ============================================================= SECTION 10a — DAVID RANKINGS ← FIXED (side-by-side) Root cause: ekka.css @media(768px) sets flex-direction:column ============================================================= */ @media (max-width: 768px) { /* Force side-by-side — override ekka's column direction */ .rankings { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; overflow-x: auto !important; padding: 10px 8px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .rankings::-webkit-scrollbar { display: none !important; } /* Override ekka's .rankings img { width:50%; margin:20px } */ .rankings img, .card3 { width: calc(33% - 8px) !important; min-width: 85px !important; max-width: 120px !important; height: auto !important; object-fit: contain !important; margin: 0 !important; flex-shrink: 0 !important; } .ranking { font-size: 18px !important; text-align: center !important; padding: 0 12px !important; } } /* ============================================================= SECTION 10b — UNIQUE PLATFORM / RANKINGS (.container / .content / .badge / .features) ============================================================= */ @media (max-width: 768px) { .container.card2 { flex-direction: column !important; gap: 20px !important; padding: 15px !important; align-items: center !important; } .content { width: 100% !important; } .content h2 { font-size: 22px !important; } .features { flex-direction: column !important; gap: 10px !important; } .left, .right { width: 100% !important; } .badge { width: 65% !important; max-width: 220px !important; margin: 0 auto !important; } .badge img { width: 100% !important; } /* Prevent line-break inside li from causing huge gaps */ .come li br { display: none !important; } .come { line-height: 1.8 !important; } } @media (min-width: 769px) and (max-width: 1024px) { .container.card2 { flex-wrap: wrap !important; gap: 20px !important; } .content { width: 60% !important; } .badge { width: 30% !important; } } /* ============================================================= SECTION 11 — ADMISSIONS SECTION (#adm-section) ============================================================= */ @media (max-width: 768px) { #adm-section { position: relative !important; top: 0 !important; transform: none !important; margin-top: 30px !important; padding: 15px !important; } .adm-inner { padding: 0 !important; } .adm-body { flex-direction: column !important; gap: 20px !important; align-items: center !important; } /* Hide the large mascot SVG */ .adm-mascot { display: none !important; } .adm-text { width: 100% !important; padding: 0 !important; text-align: center !important; } .adm-h1 { font-size: 22px !important; } .adm-p { font-size: 14px !important; } .adm-btns { flex-direction: column !important; gap: 10px !important; align-items: center !important; } .adm-btn { width: 90% !important; max-width: 260px !important; justify-content: center !important; } .adm-tag { font-size: 10px !important; padding: 4px 8px !important; } /* Slider */ .adm-sc { width: 145px !important; min-width: 145px !important; } .adm-sc img { height: 100px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .adm-mascot svg { width: 200px !important; } } /* ============================================================= SECTION 12 — PATHS FOR EVERY PASSION (.paths / .column3) Root cause: .column3 has fixed height:530px in ekka.css which clips long content like "Strong Foundation in Mathematics..." Fix: auto height everywhere, proper padding, no margin-right. ============================================================= */ /* ── Global fix: kill fixed height so content never overflows ── */ .column3 { height: auto !important; min-height: 200px !important; box-sizing: border-box !important; } .column3 ul { padding: 10px 15px !important; } .column3 ul li { margin-right: 0 !important; line-height: 1.6 !important; margin-bottom: 8px !important; } @media (max-width: 768px) { .paths { padding: 0 15px !important; text-align: center !important; } .paths p { font-size: 20px !important; } .card-container3 { flex-direction: column !important; align-items: center !important; gap: 20px !important; padding: 0 10px !important; } .column3, .column3.card2 { width: 90% !important; max-width: 400px !important; height: auto !important; min-height: unset !important; } .column3 ul { padding: 10px 15px !important; } .column3 ul li { margin-right: 0 !important; font-size: 14px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .card-container3 { flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; } .column3, .column3.card2 { width: calc(48% - 10px) !important; height: auto !important; } } /* ============================================================= SECTION 13 — STUDENT VOICE (YouTube Shorts) ← FULLY FIXED Root cause: shorts-window hardcoded at width:960px in ekka.css, shorts-item at min-width:320px, arrows use inline sizing. Fix: constrain window to viewport, make iframe fluid. ============================================================= */ @media (max-width: 768px) { /* Container */ .container5 { width: 100% !important; padding: 0 10px !important; overflow: hidden !important; box-sizing: border-box !important; } .container5 h1 { font-size: 22px !important; text-align: center !important; } /* Slider row: [prev] [window] [next] — all on one line */ .shorts-slider { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; padding: 0 !important; margin-top: 15px !important; box-sizing: border-box !important; overflow: visible !important; } /* Arrow buttons — fixed size, never squish, always visible */ .shorts-prev, .shorts-next { flex-shrink: 0 !important; width: 38px !important; min-width: 38px !important; height: 38px !important; font-size: 15px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; cursor: pointer !important; z-index: 2 !important; position: relative !important; } /* Video window — fills remaining space between arrows */ .shorts-window { flex: 1 1 0% !important; width: 0 !important; /* flex child ignores own width */ min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } /* Track — flex row of items */ .shorts-track { display: flex !important; transition: transform 0.5s ease !important; } /* Each video item — full window width */ .shorts-item { min-width: 100% !important; width: 100% !important; height: auto !important; padding: 0 4px !important; box-sizing: border-box !important; flex-shrink: 0 !important; } /* iFrame — fills item, 9:16 aspect ratio */ .shorts-item iframe { width: 100% !important; height: 56vw !important; min-height: 200px !important; max-height: 340px !important; border-radius: 10px !important; border: none !important; display: block !important; } } @media (max-width: 480px) { .shorts-prev, .shorts-next { width: 32px !important; min-width: 32px !important; height: 32px !important; font-size: 13px !important; } .shorts-item iframe { height: 62vw !important; max-height: 280px !important; } } /* ============================================================= SECTION 14 — FOOTER ============================================================= */ @media (max-width: 768px) { footer .footer, .footer.card2 { flex-direction: column !important; align-items: center !important; gap: 20px !important; padding: 20px 15px !important; text-align: center !important; } .part { width: 100% !important; text-align: center !important; padding-left: 0 !important; } .part img { padding-left: 0 !important; width: 150px !important; margin: 10px auto !important; display: block !important; } .part p { padding-left: 0 !important; text-align: center !important; } .part1 { width: 100% !important; text-align: center !important; } .part1 ul { padding-left: 0 !important; list-style: none !important; text-align: center !important; } .social-icons2 { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; margin-left: 0 !important; padding: 10px !important; } .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 6px !important; padding: 12px 15px !important; } .footer-right { text-align: center !important; } .footer-right a, .footer-right span { font-size: 12px !important; } } @media (min-width: 769px) and (max-width: 1024px) { footer .footer, .footer.card2 { flex-wrap: wrap !important; gap: 20px !important; } .part, .part1 { width: calc(47% - 10px) !important; } } /* ============================================================= SECTION 15 — APPLY NOW POPUP ============================================================= */ @media (max-width: 768px) { .popup-overlay { padding: 10px !important; align-items: flex-start !important; padding-top: 75px !important; overflow-y: auto !important; } .popup { width: 95% !important; max-width: 400px !important; margin: 0 auto !important; padding: 15px !important; } /* Fix hardcoded margin-left:200px */ .popup h3 b { margin-left: 0 !important; text-align: center !important; display: block !important; } .popup > .btn { margin-left: auto !important; margin-right: auto !important; display: block !important; width: 80% !important; } .popup .form-control, .popup .elementor-field-textual { width: 100% !important; } } /* ============================================================= SECTION 16 — "STEP INTO DAVID MEMORIAL" BLOCK + CAROUSEL Root cause: .block has margin-left:350px in ekka.css, p had margin-left:-500px inline. Carousel shows 3 cards at 33.33% width — too narrow on mobile. JS needs 1-card mode on mobile. ============================================================= */ /* ── Global: clean block layout ── */ .dm-step-block { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 20px 60px !important; margin-left: 0 !important; gap: 20px !important; } .dm-step-title { font-size: 32px !important; margin-left: 0 !important; font-family: 'Poppins', sans-serif !important; color: #292929 !important; line-height: 1.4 !important; } .dm-step-arrows { display: flex !important; gap: 16px !important; align-items: center !important; } .dm-step-arrows .arrow-circle { width: 56px !important; height: 56px !important; font-size: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; right: auto !important; left: auto !important; } .dm-step-arrows .arrow-circle i { font-size: 22px !important; position: static !important; left: auto !important; right: auto !important; } /* ── Carousel: desktop shows 3 cards ── */ .carousel-container { display: flex !important; align-items: center !important; justify-content: center !important; gap: 20px !important; padding: 0 20px !important; } .carousel { display: flex !important; width: 100% !important; max-width: 1100px !important; overflow: hidden !important; gap: 0 !important; transition: opacity 0.3s ease !important; } .card2026 { width: calc(33.33% - 20px) !important; min-width: 0 !important; flex-shrink: 0 !important; box-sizing: border-box !important; height: auto !important; } /* ── Mobile: 1 card at a time ── */ @media (max-width: 768px) { .dm-step-block { padding: 15px 20px !important; gap: 14px !important; margin-top: 40px !important; } .dm-step-title { font-size: 20px !important; line-height: 1.4 !important; } .dm-step-arrows .arrow-circle { width: 44px !important; height: 44px !important; font-size: 18px !important; } .dm-step-arrows .arrow-circle i { font-size: 18px !important; } /* Carousel wrapper */ .carousel-container { flex-direction: row !important; padding: 0 10px !important; gap: 10px !important; margin: 20px auto !important; } /* Carousel track: full width, 1 card */ .carousel { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } /* Each card = full carousel width */ .card2026 { width: 100% !important; min-width: 100% !important; margin: 0 !important; padding: 20px 15px !important; border-radius: 20px !important; height: auto !important; } .card2026 img { width: 44px !important; height: 44px !important; } .card2026 h3 { font-size: 15px !important; } .card2026 p { font-size: 13px !important; line-height: 1.6 !important; } /* Hide the old prev/next margin wrapper if it still exists */ div[style*="margin:50px"] { margin: 15px !important; } } @media (max-width: 480px) { .dm-step-title { font-size: 17px !important; } .dm-step-arrows .arrow-circle { width: 38px !important; height: 38px !important; font-size: 15px !important; } .card2026 { padding: 15px 10px !important; } } /* ============================================================= HEADER SCROLL — Beige on scroll (all screen sizes) Overrides any lingering dark navy rules from ekka.css ============================================================= */ .dm-header { transition: background-color 0.4s ease, box-shadow 0.4s ease !important; } .dm-header.scrolled { background-color: beige !important; box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important; } .dm-header.scrolled .dm-nav > a, .dm-header.scrolled .dm-dropbtn { color: #000 !important; } .dm-header.scrolled .hdr-hamburger span { background: #333 !important; } @media (max-width: 768px) { .dm-header { background-color: beige !important; } .dm-header.scrolled { background-color: beige !important; box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; } } /* ============================================================= SID-SECTION — Step Into David Memorial mobile overrides (Main styles are inline in i.html