and .container makes iOS/Android think those elements might be scrollable, which causes touch events that start inside them to get consumed locally rather than passed to the page scroll handler. */ section, .container, footer { max-width: 100vw; overflow-x: clip; } img, video, iframe { max-width: 100%; height: auto; } /* Prevent horizontal carousels from bubbling scroll momentum up to the page and trapping vertical scroll. NOTE: touch-action is intentionally omitted — setting pan-x would block vertical scrolling for any touch starting on these elements. overscroll-behavior-x: contain is enough. */ .faculty-scroll-row, .tcarousel-scroller, .upcoming-cards-row, .persona-tabs, .faq-tabs-wrapper, .market-items { overscroll-behavior-x: contain; } /* ── 3.1 Container ── */ .container { padding-left: 1.1rem; padding-right: 1.1rem; } /* ── 3.2 Section rhythm ── */ section { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* Anchor jump target offset — mobile navbar is 62px tall. Bump scroll-margin-top so sections land cleanly below the navbar rather than partially obscured (which felt "stuck"). */ section[id], div[id] { scroll-margin-top: 70px !important; } .section-divider { margin: 0; opacity: 0.3; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent) !important; } /* ── 3.2a Per-section spacing fixes ── */ /* Global section padding above is already 2rem on both sides. Add overrides here only if a specific section needs MORE or LESS than that default. Example: .hero-section { padding-top: 3rem !important; } */ .section-intro, .section-header { margin-bottom: 2rem !important; } /* ── 3.3 Typography scale ── */ h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; } h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; } h3 { font-size: clamp(1.15rem, 4.5vw, 1.6rem) !important; } h4 { font-size: clamp(1rem, 4vw, 1.25rem) !important; } .section-title, .section-heading { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; line-height: 1.25 !important; } .section-label, .section-tag { font-size: 0.7rem !important; letter-spacing: 1.5px !important; } .section-desc, .section-description { font-size: 0.9rem !important; line-height: 1.65 !important; } /* ── 3.4 NAVBAR ── */ .nav-inner { height: 62px; padding: 0 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .nav-logo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; } .nav-logo img { height: 36px !important; width: auto; flex-shrink: 0; } .nav-logo-text { font-size: 0.82rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hide tagline — too cramped on phones */ .nav-logo-text span { display: none; } .hamburger { flex-shrink: 0; width: 40px; height: 40px; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; order: 3; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--clr-white, #fff); border-radius: 2px; transition: all 0.3s ease; } .theme-toggle-btn { order: 2; flex-shrink: 0; width: 40px !important; height: 40px !important; margin-left: auto; } /* Mobile nav panel — slides down from navbar */ .nav-links { position: fixed; top: 62px; left: 0; right: 0; background: var(--clr-dark-card, #1a1a2e); border-bottom: 1px solid var(--clr-dark-border, rgba(255, 255, 255, 0.08)); flex-direction: column; padding: 1rem 1.1rem 1.5rem; gap: 0.1rem; overflow-y: auto; max-height: calc(100vh - 62px); display: none; z-index: 1000; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .nav-links.active, .nav-links.open { display: flex !important; } .nav-links li { width: 100%; } .nav-links a, .nav-links .dropbtn { display: flex; align-items: center; padding: 0.75rem 0.5rem; font-size: 0.95rem; border-radius: 8px; width: 100%; transition: background 0.2s; } .nav-links a:hover, .nav-links .dropbtn:hover { background: rgba(255, 255, 255, 0.05); } .nav-cta-inner { display: inline-flex !important; margin-top: 0.5rem; width: 100%; justify-content: center; padding: 0.8rem !important; border-radius: 10px !important; font-size: 0.95rem !important; min-height: 46px; } /* Resources dropdown inside mobile nav */ .dropdown { position: static; width: 100%; } /* Rotate chevron when open */ .dropdown.active .dropbtn i.fa-chevron-down { transform: rotate(180deg); transition: transform 0.25s ease; } .dropbtn i.fa-chevron-down { transition: transform 0.25s ease; } .dropdown-content { position: static !important; display: none; box-shadow: none !important; background: transparent !important; border: none !important; border-left: 2px solid var(--clr-accent, #e8732a) !important; border-radius: 0 !important; margin: 0.1rem 0 0.4rem 1.1rem !important; padding: 0 !important; opacity: 1 !important; transform: none !important; } /* Neutralise home.css hover rule — touch devices get stuck in hover state */ .dropdown:hover .dropdown-content { display: none !important; } .dropdown.active .dropdown-content { display: block !important; } .dropdown-content a { display: flex !important; align-items: center !important; gap: 0.6rem !important; padding: 0.6rem 0.9rem !important; font-size: 0.88rem !important; color: rgba(255, 255, 255, 0.7) !important; text-align: left !important; border-bottom: none !important; border-radius: 6px !important; transition: background 0.18s, color 0.18s !important; } .dropdown-content a::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--clr-accent, #e8732a); opacity: 0.7; flex-shrink: 0; } .dropdown-content a:hover, .dropdown-content a:focus { background: rgba(232, 115, 42, 0.08) !important; color: #fff !important; } .dropdown-content a:hover::before, .dropdown-content a:focus::before { opacity: 1; } /* ── 3.5 HERO ── */ .hero { padding: 5rem 0 3rem !important; min-height: auto !important; height: auto !important; align-items: flex-start !important; /* iOS Safari treats overflow:hidden on tall elements as an internal scroll container — the first swipe gets consumed by the hero rather than moving the page. Setting overflow to visible breaks that internal context so touches go straight to page scroll. */ overflow: visible !important; /* Also kill the flex centering so the hero doesn't size itself to fill the viewport even when min-height is auto. */ display: block !important; } .hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .hero-content { text-align: center; } .hero-badge { margin: 0 auto 1.25rem !important; font-size: 0.72rem !important; padding: 0.35rem 0.9rem !important; } .hero h1 { font-size: clamp(1.9rem, 7vw, 2.8rem) !important; line-height: 1.2 !important; white-space: normal !important; } .hero-desc { font-size: 0.95rem !important; line-height: 1.65 !important; margin: 0 auto 1.75rem !important; } .fork-btns { flex-direction: column; gap: 0.75rem; } .fork-btn { min-width: 0 !important; width: 100%; text-align: left; } .hero-ctas { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; justify-content: center; } .hero-ctas .btn { width: 100%; max-width: 320px; justify-content: center; } /* Hero stats — 2-column grid */ .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; padding-top: 1.5rem !important; max-width: 100%; } .hero-stat { background: var(--clr-dark-card, #17171e); border: 1px solid var(--clr-dark-border, rgba(255, 255, 255, 0.07)); border-radius: 12px; padding: 1rem 1.1rem !important; text-align: center; } .stat-number { font-size: 2rem !important; } .stat-label { font-size: 0.66rem !important; letter-spacing: 0.9px !important; } /* Hero conversion panel (batch list) */ .hero-conversion-panel { position: static !important; max-width: 100% !important; margin-top: 0 !important; border-radius: var(--radius-lg, 28px) !important; border: 1px solid rgba(232, 115, 42, 0.25) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; /* overflow:clip clips border-radius visually (same as hidden) but NEVER creates a scroll container — so iOS/Android never intercept vertical page swipes that start on this element. */ overflow: clip !important; } .panel-trust-header { background: linear-gradient(135deg, rgba(178, 34, 52, 0.18), rgba(232, 115, 42, 0.10)) !important; border-bottom: 1px solid rgba(232, 115, 42, 0.2) !important; border-radius: 0 !important; padding: 1rem 1.25rem !important; position: relative; } .panel-trust-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #B22234, #E8732A); } .trust-label { font-size: 0.65rem !important; margin-bottom: 0.75rem !important; display: block; } .panel-logos-row { gap: 1rem !important; flex-wrap: wrap; justify-content: center; } .panel-logos-row img { height: 24px !important; } .panel-body { padding: 1.25rem !important; } .panel-body h3 { font-size: 1.05rem !important; } /* Hero batch items (batches.css classes) */ .batch-item { padding: 0.9rem 0 !important; } .batch-row-top { gap: 0.5rem !important; } .batch-course-name { font-size: 0.85rem !important; } .batch-seats { font-size: 0.68rem !important; padding: 0.25rem 0.65rem !important; white-space: nowrap; } .batch-date { font-size: 0.76rem !important; } /* ── 3.5a Batch container & panel-body — scroll-trap prevention ── Both elements are dynamically filled from a Google Sheet. Without an explicit height cap the browser on iOS/Android may treat them as internal scroll containers, consuming vertical swipe gestures before the page ever sees them. overflow:visible = no scroll container possible on either engine. overscroll-behavior:none = no rubber-band bounce on the element. touch-action:pan-y = explicitly declare vertical panning intent so neither iOS nor Android misclassify these as horizontal lists. */ #upcoming-batches-container, .panel-body { overflow: visible !important; overscroll-behavior: none; touch-action: pan-y !important; } /* ── 3.6 TRIPWIRE BANNER ── */ .tripwire-section { padding: 1.5rem 0; } .tripwire-container { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .tripwire-content { gap: 1rem; } .tripwire-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 1.4rem !important; } .tripwire-details h3 { font-size: 1.2rem !important; } .tripwire-action { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 1rem; } .tripwire-price { text-align: left; } .tripwire-price .amount { font-size: 1.5rem !important; } /* ── 3.6b TRIPWIRE CAROUSEL — touch + compact controls ── */ .tripwire-carousel { touch-action: pan-y; /* let JS read horizontal swipes, page still scrolls vertically */ } .tripwire-track { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; /* snappier on phones */ } .tripwire-dots { gap: 0.7rem !important; /* a bit more breathing room between tap targets */ padding-top: 0.85rem !important; } /* Dots stay visually small but get an invisible 24px+ tap target, so they're easy to hit with a thumb without looking oversized */ .tripwire-dot { position: relative; } .tripwire-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); } /* Enroll button — shrink from the desktop size so it sits comfortably next to the price on narrow screens */ .tripwire-enroll-btn { padding: 0.8rem 1.4rem !important; font-size: 0.92rem !important; box-shadow: 0 6px 16px rgba(224, 88, 62, 0.35) !important; white-space: nowrap; } /* ── 3.7 ROI CALCULATOR & MARKET DATA ── */ .roi-calculator { padding: 1.5rem 1.25rem !important; border-radius: 1rem !important; gap: 2rem !important; grid-template-columns: 1fr !important; } .roi-calculator h3 { font-size: 1.4rem !important; } .calc-value { font-size: 1.6rem !important; } .calc-box { padding: 1.1rem 1.25rem !important; } .calc-box-highlight p { overflow-wrap: break-word !important; word-break: break-word !important; max-width: 100% !important; } .slider-header { flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; } /* Market data cards */ .market-data-grid { grid-template-columns: 1fr !important; } .market-data-card { padding: 1.5rem !important; } /* ── 3.8 ABOUT SECTION ── */ .hero-grid-fix { gap: 2rem !important; } .about-milestones { grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; } .milestone-card { padding: 1rem; } .milestone-num { font-size: 1.5rem !important; } .about-badge-float { padding: 0.9rem 1rem !important; right: 0.25rem !important; bottom: 0.25rem !important; } .about-badge-float strong { font-size: 1.5rem !important; } /* ── 3.8b MILESTONE SLIDESHOW (mobile) ── */ .milestone-slideshow { height: 280px !important; } .ms-caption { padding: 2rem 0.9rem 0.75rem !important; min-height: 3.5rem !important; } .ms-caption span { font-size: 0.82rem !important; line-height: 1.45 !important; } .ms-nav-btn { width: 2.1rem !important; height: 2.1rem !important; font-size: 0.8rem !important; } .ms-nav-btn.ms-prev { left: 0.5rem !important; } .ms-nav-btn.ms-next { right: 0.5rem !important; } .ms-dots { bottom: 0.45rem !important; right: 0.75rem !important; gap: 0.28rem !important; } /* ── 3.9 PERSONA / COURSE TABS ── */ .persona-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 0.25rem; justify-content: flex-start !important; gap: 0.5rem !important; } .persona-tabs::-webkit-scrollbar { display: none; } .persona-tab { white-space: nowrap; flex-shrink: 0; padding: 0.55rem 1rem !important; font-size: 0.83rem !important; } .persona-tab-content { padding: 1.5rem 1.25rem !important; border-radius: 16px !important; } /* Services grid -> single column */ .services-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .sc-body { padding: 1rem 1.25rem !important; } .sc-footer { padding: 0.85rem 1.25rem 1.25rem !important; flex-direction: column !important; gap: 0.6rem !important; border-top: none !important; } .sc-enroll, .sc-details-btn { flex: none !important; width: 100% !important; height: 46px !important; font-size: 0.87rem !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* MOU partner grid — 2-up */ .mou-firms-grid { grid-template-columns: 1fr 1fr !important; gap: 0.6rem; } .mou-firm-card { padding: 0.75rem !important; } .mou-section-inner { padding: 1.5rem 1.1rem; } /* ── 3.10 CAREER SUCCESS / INLINE GLASS CARDS ── */ /* Glass cards with inline min-width style override on mobile */ .glass-card[style*="min-width"] { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* ── 3.11 FACULTY ── */ .faculty-lead { grid-template-columns: 1fr !important; /* overflow:clip = same visual clipping as hidden, zero scroll-container side-effects on iOS/Android. Image cropping still works perfectly. */ overflow: clip !important; } .faculty-lead-img img { height: 320px !important; object-fit: cover !important; object-position: top center !important; width: 100% !important; } .faculty-strategic { grid-template-columns: 1fr !important; overflow: clip !important; } .faculty-strategic-img { height: 260px !important; border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0 !important; } .faculty-strategic-img img { height: 260px !important; object-fit: cover !important; object-position: center 30% !important; width: 100% !important; } /* Faculty highlight cards — stack vertically */ .faculty-highlights { display: grid !important; grid-template-columns: 1fr !important; gap: 0.85rem !important; margin-top: 1.5rem !important; } .faculty-highlight { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 14px !important; padding: 1.25rem !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 0.5rem !important; } .faculty-highlight i { font-size: 1.25rem !important; } .faculty-highlight h6 { margin: 0 !important; font-size: 1.05rem !important; color: #fff !important; } .faculty-highlight p { margin: 0 !important; font-size: 0.88rem !important; line-height: 1.6 !important; color: var(--clr-text-muted, rgba(255, 255, 255, 0.5)) !important; } /* Horizontal scroll carousel for other faculty */ .faculty-scroll-row { /* Use 'proximity' instead of 'mandatory' — mandatory snap can hijack vertical page scroll on iOS/Android and trap the user inside the section. Proximity only snaps when the user is already near a snap point. */ scroll-snap-type: x proximity; scroll-padding: 0 1.1rem; padding-left: 1.1rem !important; padding-right: 1.1rem !important; gap: 1rem !important; /* -webkit-overflow-scrolling:touch is deprecated on iOS 13+ and creates a stacking context that can trap scroll events on Android. overscroll-behavior-x:contain is the modern, cross-browser fix that prevents horizontal scroll from chaining up to the page. */ overscroll-behavior-x: contain; touch-action: pan-x pan-y; } .faculty-hcard { min-width: 85vw !important; max-width: 85vw !important; scroll-snap-align: start; } .hcard-img { height: 360px !important; } .hcard-img img { object-position: top center !important; } /* Carousel nav buttons */ .carousel-btn { background: rgba(26, 26, 46, 0.9) !important; border: 1.5px solid rgba(232, 115, 42, 0.4) !important; color: #E8732A !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .carousel-btn:active { transform: scale(0.9); background: #E8732A !important; color: #fff !important; } /* LinkedIn pills */ .linkedin-pill { padding: 0.45rem 0.75rem !important; gap: 0.4rem !important; } .pill-name { font-size: 0.82rem !important; } .pill-email { font-size: 0.72rem !important; } /* ── 3.12 PARTNERS / ACCREDITATION ── */ .accred-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .accred-card { padding: 1.5rem 1.25rem !important; border-radius: 14px !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .accred-logo-box { width: 100px !important; height: 90px !important; margin: 0 auto; } .accred-logo-box.iia-logo { width: 140px !important; height: 120px !important; padding: 0.85rem !important; } .accred-logo-box.iia-logo img { max-height: 100px !important; max-width: 100px !important; } .ticker-item { padding: 0.6rem 1rem !important; font-size: 0.8rem !important; } .partners-section { padding: 2.5rem 0 !important; } /* Prevent ticker horizontal overflow. overflow:clip = same visual result as hidden but never creates a scroll container, so vertical page swipes aren't intercepted. */ .ticker-track-outer, .usp-bar { max-width: 100vw; overflow: clip; } /* USP ticker */ .usp-grid { animation-duration: 15s !important; } .usp-item { flex: 0 0 220px !important; } /* Zoho banner */ .zoho-banner { flex-direction: column; padding: 1.5rem !important; gap: 1.25rem; } .zoho-banner-left { gap: 1rem; } .zoho-feats { gap: 0.75rem; } /* ── 3.13 TESTIMONIALS ── */ /* overflow-x:clip masks the sliding track visually without creating an internal scroll container (unlike overflow:hidden). This means vertical swipes starting on the testimonials section pass straight through to the page on both iOS and Android. */ .testimonials-scroll-wrapper { overflow-x: clip !important; width: 100%; max-width: 100vw; position: relative; padding-bottom: 0.5rem; } /* Neutralise mandatory x-snap on the tcard carousel so vertical page scrolling is never hijacked by the horizontal carousel. 'proximity' only snaps when the user intentionally swipes sideways. -webkit-overflow-scrolling:touch is deprecated (iOS 13+) and on modern WebKit creates a stacking context that can trap scroll events — removed. overscroll-behavior-x:contain is the modern replacement for preventing scroll chaining. */ .tcarousel-scroller { scroll-snap-type: x proximity !important; overscroll-behavior-x: contain; touch-action: pan-x pan-y !important; } /* Testimonial tcard carousel */ .tcard { width: 82vw !important; min-width: 82vw !important; max-width: 82vw !important; } /* Stats row below testimonials */ .tv-stats-row { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } .tv-stat-box { padding: 1rem !important; } .tv-stat-num { font-size: 1.5rem !important; } /* ── 3.14 FREE DEMO MODULE ── */ .demo-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .demo-left { text-align: center; } /* ── 3.15 CORPORATE SECTION ── */ .corp-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .corp-cta-card { position: static !important; min-width: 0 !important; width: 100%; } .corp-left { min-width: 0 !important; } .corp-feature { gap: 0.85rem; } .corp-feat-icon { width: 42px !important; height: 42px !important; font-size: 1rem !important; } .corp-benefits { padding: 1.1rem !important; } .corp-cta-card form { padding: 0 1.1rem 1.1rem !important; } /* ── 3.16 CONTACT ── */ .contact-grid, .contact-wrapper { flex-direction: column !important; gap: 2rem !important; } .contact-form, .corp-cta-card { min-width: 0 !important; width: 100%; } .contact-info { min-width: 0 !important; } .contact-item { gap: 0.75rem; margin-bottom: 1.1rem; } .contact-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; flex-shrink: 0; } .form-row, .input-row { grid-template-columns: 1fr !important; gap: 0.85rem !important; } /* Prevent iOS auto-zoom on focus */ .form-group input, .form-group select, .form-group textarea, input, textarea, select { font-size: 16px !important; } .form-group input, .form-group select { padding: 0.8rem 1rem !important; } textarea { min-height: 120px !important; } /* ── 3.17 ENROLLMENT STEPS ── */ .steps-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; } .step-card { padding: 1.5rem 1rem !important; } .step-num { width: 52px !important; height: 52px !important; font-size: 1.25rem !important; } /* ── 3.18 FAQ ── */ .faq-item { border-radius: 12px !important; } .faq-question { font-size: 0.92rem !important; padding: 1.1rem 1rem !important; gap: 0.75rem; min-height: 48px; } .faq-answer { font-size: 0.88rem !important; padding: 0 1rem !important; line-height: 1.65 !important; } .faq-item.active .faq-answer { padding: 0 1rem 1.1rem !important; } /* ── 3.19 FOOTER ── */ .footer { padding: 3rem 0 0 !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .footer-brand { text-align: center; } .footer-brand p { font-size: 0.88rem !important; line-height: 1.6 !important; max-width: 100%; } .footer-brand .nav-logo { justify-content: center; margin-bottom: 0.75rem; } .footer-social { justify-content: center !important; flex-wrap: wrap !important; gap: 0.6rem !important; margin-top: 1rem !important; } .social-btn { width: 40px !important; height: 40px !important; font-size: 0.95rem !important; } .footer-col { padding: 0 !important; } .footer-col h5 { font-size: 0.82rem !important; letter-spacing: 1.5px !important; margin-bottom: 0.75rem !important; } .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; } .footer-links a { font-size: 0.85rem !important; padding: 0.25rem 0 !important; } .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.4rem !important; padding: 1.25rem 1.1rem !important; } .footer-bottom p, .footer-bottom-links p { font-size: 0.78rem !important; } /* WhatsApp — icon-only circle on mobile, placed on bottom left */ .wa-float, .whatsapp-float, .whatsapp-float-btn { bottom: 1.25rem !important; left: 1.25rem !important; right: auto !important; padding: 0 !important; border-radius: 50% !important; width: 52px !important; height: 52px !important; font-size: 0 !important; gap: 0 !important; justify-content: center; } .wa-float i, .whatsapp-float i, .whatsapp-float-btn i { font-size: 1.5rem !important; line-height: 1 !important; margin: 0 !important; display: block !important; } .scroll-top { bottom: 5.5rem !important; right: 1.25rem !important; width: 42px !important; height: 42px !important; font-size: 0.85rem !important; } /* ── 3.21 TOUCH TARGETS ── */ .btn, a.btn { min-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .faq-question, .persona-tab, .modal-tab { min-height: 48px !important; } /* ── 3.22 MODALS ── */ .modal-box { max-height: 96dvh !important; border-radius: var(--radius-md, 18px) !important; } .modal-header { padding: 1rem !important; gap: 0.75rem; } .modal-icon { width: 40px !important; height: 40px !important; font-size: 1.1rem !important; } .modal-title-block h3 { font-size: 1rem !important; } .modal-inner-tabs { padding: 0.75rem 1rem 0 !important; overflow-x: auto; scrollbar-width: none; } .modal-inner-tabs::-webkit-scrollbar { display: none; } .modal-tab { padding: 0.55rem 0.85rem !important; font-size: 0.82rem !important; white-space: nowrap; } .modal-content { padding: 1rem !important; } .fee-boxes { grid-template-columns: 1fr 1fr !important; gap: 0.65rem; } .fee-box .fb-value { font-size: 1.3rem !important; } .iia-parts, .cia-parts-modal { flex-direction: column; gap: 0.5rem; } /* ── 3.23 COMMON CTA SECTION ── */ .common-cta-section { padding: 3rem 1.1rem !important; text-align: center !important; } .cta-inner { flex-direction: column !important; gap: 1.25rem !important; text-align: center !important; } .cta-inner .btn { width: 100% !important; max-width: 280px !important; margin: 0 auto !important; } .course-benefits-bar { grid-template-columns: 1fr !important; gap: 0.85rem !important; } /* ── 3.24 TABLES ── */ table { display: block; overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; } /* ── 3.25 DISABLE HOVER TRANSFORMS ON TOUCH DEVICES ── */ @media (hover: none) { .ticker-track, .usp-grid { animation-play-state: running !important; } } /* ── 3.26 LIGHT MODE — TRIPWIRE ── */ html.light-mode .tripwire-section { background: linear-gradient(90deg, #fffbeb, #fef3c7) !important; border-top: 1px solid #fde68a !important; border-bottom: 1px solid #fde68a !important; } html.light-mode .tripwire-section * { color: #1e293b !important; } html.light-mode .tripwire-details span { color: #e0583e !important; } html.light-mode .tripwire-details p { color: #4a5568 !important; } html.light-mode .tripwire-price span.label { color: #64748b !important; } html.light-mode .tripwire-icon { background: #e0583e !important; } html.light-mode .tripwire-icon i { color: #ffffff !important; } /* ── 3.27 LIGHT MODE — CAROUSEL BUTTONS ── */ html.light-mode .carousel-btn { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(224, 88, 62, 0.3) !important; color: #e0583e !important; } /* ── 3.28 GLOBAL overflow:hidden → clip SWEEP ──────────────── Every element below has overflow:hidden set in home.css for visual reasons (border-radius clipping, masking, etc.). On mobile, overflow:hidden on ANY element with enough content to overflow creates an implicit scroll container on iOS Safari and Android Chrome/WebView. The browser then routes touch events to that element first, causing the "stuck scroll" / "swipe doesn't move the page" symptoms reported by users. overflow:clip is the modern fix: identical visual result, zero scroll-container side-effects. It is supported in all browsers that matter (Chrome 90+, Firefox 102+, Safari 16+, Android WebView 90+). Elements that legitimately need to scroll (tcarousel-scroller, faculty-scroll-row, modal-content, nav-links) are excluded — those keep overflow:auto/scroll and are handled with overscroll-behavior instead. Elements where overflow:hidden is integral to a CSS animation (ticker-track-outer, usp-bar) are already handled in §3.12. DO NOT add overflow:clip to .faq-answer — its max-height:0 / overflow:hidden collapse animation requires hidden. */ /* Hero & hero panel */ .hero { overflow: clip !important; } .hero-panel { overflow: clip !important; } /* Cards and containers */ .service-card { overflow: clip !important; } .course-card { overflow: clip !important; } .cal-card { overflow: clip !important; } .blog-card { overflow: clip !important; } .demo-form-card { overflow: clip !important; } .corp-cta-card { overflow: clip !important; } .trusted-logos-card { overflow: clip !important; } .trusted-video-card { overflow: clip !important; } .market-data-card { overflow: clip !important; } .mou-section-highlight { overflow: clip !important; } /* Sections that use overflow:hidden to prevent decorative bleed */ .faculty-section { overflow: clip !important; } .testimonials-section { overflow: clip !important; } .partners-section { overflow: clip !important; } /* Image containers — fixed pixel height guarantees all images same size */ .hcard-img { overflow: clip !important; height: 180px !important; aspect-ratio: unset !important; } .hcard-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 25% !important; } .faculty-strategic-img { overflow: clip !important; } .logo-carousel-track-wrap { overflow: clip !important; } .blog-img { overflow: clip !important; } /* Modals — modal-box uses overflow:hidden for layout; the *actual* scrollable zone is .modal-content (overflow-y:auto). Switch the wrapper to clip so the rounded corners still clip without creating a competing scroll container for the page. */ .modal-box { overflow: clip !important; } } /* end @media (max-width: 768px) */ /* ────────────────────────────────────────────────────────────── §4 SMALL PHONE <= 480px ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .container { padding-left: 1rem; padding-right: 1rem; } .hero { padding: 4.5rem 0 2.5rem !important; } .hero h1 { font-size: clamp(1.75rem, 8vw, 2.2rem) !important; } .hero-desc { font-size: 0.92rem !important; } .hero-stats { gap: 0.65rem !important; } .hero-stat { padding: 0.85rem 0.9rem !important; } .stat-number { font-size: 1.75rem !important; } /* Buttons */ .btn { padding: 0.75rem 1.5rem !important; font-size: 0.88rem !important; } /* Service card footer — both buttons full-width, equal height */ .sc-footer { padding: 0 1.1rem 1.25rem !important; flex-direction: column !important; gap: 0.5rem !important; border-top: none !important; } .sc-enroll, .sc-details-btn { flex: none !important; width: 100% !important; height: 46px !important; font-size: 0.85rem !important; padding: 0 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* Faculty hcard — reinforce 85vw so exactly one card shows on small phones */ .faculty-hcard { min-width: 85vw !important; max-width: 85vw !important; } /* Keep image at 360px to see full portrait */ .hcard-img { height: 360px !important; aspect-ratio: unset !important; } .hcard-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; background: none !important; } /* Persona tabs — full-width buttons */ .persona-tabs-wrapper { flex-direction: column !important; width: 100% !important; background: transparent !important; border: none !important; gap: 0.75rem !important; padding: 0 !important; margin-bottom: 2rem !important; } .persona-tab { width: 100% !important; justify-content: center !important; background: var(--clr-dark-card, #17171e) !important; border: 1px solid var(--clr-dark-border, rgba(255, 255, 255, 0.07)) !important; border-radius: var(--radius-md, 18px) !important; padding: 1rem !important; font-size: 0.9rem !important; gap: 0.6rem !important; color: var(--clr-text-muted, rgba(255, 255, 255, 0.5)) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; } .persona-tab.active { background: var(--grad-primary) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 25px rgba(178, 34, 52, 0.3) !important; } /* MOU firms */ .mou-firms-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; } /* Alumni */ .alumni-cards-row { flex-direction: column; } .alumni-mini-card { min-width: 0 !important; width: 100%; } /* Steps */ .steps-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } /* Gallery */ .gallery-grid, .gallery-masonry { grid-template-columns: 1fr !important; } /* Footer */ .footer-links { grid-template-columns: 1fr !important; } .social-btn { width: 36px !important; height: 36px !important; font-size: 0.85rem !important; } /* Outcome stats */ .outcome-num { font-size: 2.2rem !important; } .outcome-stat-card { padding: 1.5rem 1rem !important; } /* Accreditation */ .accred-card { padding: 1.25rem !important; gap: 0.85rem; } /* Scroll top */ .scroll-top { bottom: 1.25rem !important; right: 1.25rem !important; width: 42px !important; height: 42px !important; } .section-title { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; } /* Corp */ .corp-cta-card form { padding: 0 1rem 1rem !important; } .form-group input, .form-group select, .form-group textarea { padding: 0.8rem 0.9rem !important; } } /* end @media (max-width: 480px) */ /* ────────────────────────────────────────────────────────────── §5 VERY SMALL PHONE <= 400px ────────────────────────────────────────────────────────────── */ @media (max-width: 400px) { .container { padding-left: 0.85rem; padding-right: 0.85rem; } .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; } .stat-number { font-size: 1.6rem !important; } .hero-stat { padding: 0.75rem 0.65rem !important; } /* Footer links → 1 column */ .footer-links { grid-template-columns: 1fr !important; } /* MOU partners → 1 column */ .mou-firms-grid { grid-template-columns: 1fr !important; } } /* end @media (max-width: 400px) */ /* ────────────────────────────────────────────────────────────── §6 EVENTS PAGE — events.html specific overrides events.html has its own inline