/* ══ FinDarts — Global Mobile Fixes ══ Linked last in so it wins over page-level styles. Covers the 769–991px tablet gap that individual pages miss, and adds universal overflow / image guards. */ /* 1 — Universal overflow guard (prevents any element pushing page wide) */ html, body { overflow-x: hidden; max-width: 100%; } /* 2 — Images never overflow their container */ img { max-width: 100%; height: auto; } /* 3 — Tables always scroll inside their box */ table { max-width: 100%; } .table-responsive, .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Tablet (769–991px) gap fixes ── */ @media (max-width: 991px) { /* Hero headings — prevent giant text on tablet */ .pms-hero h1, .aif-hero h1, .hero-copy h1, .hero-right h1, .sip-hero-section h1, .section-title, .sec-title { font-size: clamp(24px, 4vw, 38px) !important; } /* Stat/trust bars — wrap instead of overflow */ .hero-stats, .hero-trust-bar, .stat-bar, .fd-bottom-trust-bar { flex-wrap: wrap !important; gap: 12px !important; } /* Two-column info grids collapse to single on tablet */ .info-grid { grid-template-columns: 1fr 1fr !important; } /* 3+ column grids cap at 2 columns on tablet */ .rev-row { flex-wrap: wrap !important; } .rev-item { flex: 1 1 calc(50% - 9px) !important; } /* Partner page — product grid */ .mfd-product-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Ben cards — 2 col on tablet */ .ben-grid { grid-template-columns: repeat(2, 1fr) !important; } /* AIF vs PMS strip — wrap items */ .avp-items { flex-wrap: wrap !important; } .avp-item { flex: 1 1 50% !important; border-bottom: 1px solid #e9e0ff; } /* Comparison tables — always scrollable */ .cmp-table { min-width: 560px; } .table-responsive { overflow-x: auto !important; } } /* ── Small phone (≤480px) gap fixes ── */ @media (max-width: 480px) { /* Single-column everything */ .info-grid, .stat-grid, .rev-row, .mfd-product-grid, .ben-grid, .cat-grid { grid-template-columns: 1fr !important; } .rev-item { flex: none !important; width: 100% !important; } /* Font sizes — minimum readable on 375px */ .pms-hero h1, .aif-hero h1, .hero-copy h1 { font-size: 22px !important; } .sec-title, .section-title { font-size: 20px !important; } /* Partner page stat strip — stack vertically */ .fd-bottom-trust-bar { flex-direction: column !important; align-items: stretch !important; } .fd-bottom-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15) !important; padding: 14px 20px !important; } /* Paddings — avoid cramped content on 375px */ .aif-section, .pms-section, .aif-section-alt, .pms-section-alt { padding: 44px 0 !important; } .rev-banner, .aif-cta, .pms-cta { padding: 32px 16px !important; } /* AIF category cards — tighter padding */ .cat-card { padding: 22px 18px !important; } /* AIF vs PMS strip — stack */ .avp-inner { flex-direction: column !important; } .avp-badge { border-radius: 8px !important; width: 100% !important; justify-content: center !important; } .avp-items { border: 1px solid #e9e0ff !important; border-radius: 8px !important; width: 100% !important; } .avp-item { flex: none !important; width: 100% !important; } } /* ── Nav — never wrap on desktop, always collapse on mobile ── */ @media (min-width: 992px) { .navbar-nav { flex-wrap: nowrap !important; } } @media (max-width: 991px) { .navbar-nav { flex-wrap: wrap !important; flex-direction: column !important; } /* The template's own style.css forces .navbar-collapse to display:block unconditionally, so the full menu renders open on every phone load instead of hiding behind the hamburger. Restore Bootstrap's collapse behaviour here since this file loads last. */ .navbar-collapse:not(.show):not(.collapsing) { display: none !important; } .navbar-collapse.show { display: block !important; } } /* ── Floating widgets — keep off hero text on phones ── .enquire-now-btn sits at top:50% and .whatsapp-float at right:100px, both fine on desktop but they land on top of hero copy on short/narrow phone viewports. */ @media (max-width: 768px) { .enquire-now-btn { display: none !important; } .whatsapp-float { right: 16px !important; bottom: 16px !important; transition: opacity 0.25s ease !important; } /* Hero copy (badges, trust rows, etc.) sits right where this fixed button lives on short-viewport phones, and exact clearance varies too much by device width/height to guarantee with fixed offsets. assets/header.js toggles this class based on scroll position so the button is invisible (but still functional as a fallback if JS fails — it just won't fade) while the hero's first screenful is in view. */ .whatsapp-float.fd-hide-until-scroll { opacity: 0 !important; pointer-events: none !important; } }