/* Load DM Sans (the theme's designed font) on EVERY page. Only champions-path.html was loading it before, so every other page fell back to the system sans-serif — this makes the whole site consistent. @import must be the first rule in the file. Weights 300-800 + italic. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,400&display=swap'); /* ===================================================================== Forough Abbasi — global mobile optimisation Loaded on every page (last stylesheet, so it wins). Best-practice basis: 44px+ tap targets, fluid media, no horizontal scroll, dynamic-viewport heights (no URL-bar jump), readable type. ===================================================================== */ /* 0) Kill horizontal scroll WITHOUT breaking position:sticky. The theme forces `overflow:hidden` on for mobile, which turns body into a (non-scrolling) scroll container and stops the home hero's position:sticky from pinning to the viewport → the hero image scrolls off and leaves a black void ("hero completely BUST"). overflow-x:clip clips the horizontal axis without creating a scroll container; overflow-y:visible keeps the viewport as the scrollport so sticky pins correctly. */ html, body { max-width: 100%; overflow-x: clip !important; overflow-y: visible !important; } /* Fluid media — DO NOT force height on : it would break the object-fit:cover crops used in the pillars/cards. */ img, svg, video, iframe, canvas { max-width: 100%; } /* ==================================================================== FOOTER (after the duplicate "Products" column + "Main Menu" heading are removed in markup, tidy the single remaining menu column) ==================================================================== */ @media (max-width: 1199px) { .elementor-4634 .elementor-element.elementor-element-38d529a { width: 100% !important; } } /* ==================================================================== PARTNERSHIP RATE TABLES (.fa-rate) — desktop card + mobile stack ==================================================================== */ .fa-rate { max-width: 1000px; margin: 0 auto 34px; padding: 0 16px; } .fa-rate table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #eceff2; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 30px rgba(10,30,38,.06); font-family: 'DM Sans', -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .fa-rate thead th { background: #0A1E26; color: #fff; text-align: left; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; padding: 15px 20px; } .fa-rate tbody td { padding: 15px 20px; border-top: 1px solid #eef1f4; font-size: 15px; color: #1c2b33; } .fa-rate tbody td:first-child { font-weight: 600; } .fa-rate tbody td:nth-child(2) { font-weight: 800; color: #E20B0B; white-space: nowrap; } .fa-rate tbody td:nth-child(3) { color: #5f6973; } .fa-rate tbody tr:nth-child(even) td { background: #fafbfc; } @media (max-width: 640px) { .fa-rate { padding: 0 14px; margin-bottom: 26px; } .fa-rate table, .fa-rate thead, .fa-rate tbody, .fa-rate tr, .fa-rate td { display: block; width: 100%; } .fa-rate table { border-radius: 14px; } /* header row → just the category as a dark bar; hide Price/Duration labels */ .fa-rate thead th { display: none; } .fa-rate thead th:first-child { display: block; border-radius: 14px 14px 0 0; padding: 14px 18px; font-size: 13px; } .fa-rate tbody tr { border-top: 1px solid #eef1f4; padding: 6px 0; } .fa-rate tbody tr:nth-child(even) td { background: transparent; } .fa-rate tbody td { border: 0; padding: 7px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; } .fa-rate tbody td::before { content: attr(data-label); color: #8a93a3; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; } .fa-rate tbody td:first-child { font-size: 16.5px; font-weight: 700; color: #0A1E26; padding-top: 12px; display: block; /* package name = row title, full width, no label */ } .fa-rate tbody td:first-child::before { display: none; } } /* ==================================================================== TAP TARGETS — comfortable on phones (>= 44px) ==================================================================== */ @media (max-width: 767px) { .sdh-btn, .fp-cta, .pil-link, .elementor-button, a.btn, .fa-cta { min-height: 44px; } .elementor-social-icon { width: 42px; height: 42px; line-height: 42px; } } /* ==================================================================== HOME HERO (#scroll-hero) — the mobile rescue ==================================================================== */ @media (max-width: 767px) { /* snappier scroll: less pinned distance per slide */ body.home .sdh { height: 250vh; } /* dynamic viewport height → no jump when the URL bar shows/hides */ body.home .sdh-sticky { height: 100vh; height: 100svh; } /* the cut-out figure overlapped the copy on narrow screens → drop it */ body.home #scroll-hero .sdh-figure { display: none !important; } /* sit the copy in the lower third (thumb reach) and clear the notch */ body.home .sdh-slides { align-items: flex-end; } body.home .sdh-slide { padding: 0 22px; } body.home .sdh-inner { padding-bottom: 15vh; max-width: 100%; } body.home .sdh-over { font-size: 12px; letter-spacing: .13em; margin: 0 0 12px; } body.home .sdh-title { font-size: clamp(34px, 10.5vw, 48px); line-height: 1.03; } body.home .sdh-sub { font-size: 15px; margin-top: 12px; } body.home .sdh-quote { font-size: 15px; line-height: 1.5; margin-top: 14px; } /* right-size the "About Me" button (was WAY too big) */ body.home .sdh-btn { margin-top: 20px; font-size: 14.5px; padding: 13px 24px; line-height: 1; gap: 8px; } /* subtle bottom scrim for legibility (overlay was removed on desktop by request) */ body.home .sdh-sticky::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(6,8,12,.60) 0%, rgba(6,8,12,.18) 42%, rgba(6,8,12,0) 72%); } body.home .sdh-dots { right: 12px; gap: 10px; } body.home .sdh-dot { width: 8px; height: 8px; } body.home .sdh-cue { display: none; } } /* ==================================================================== HOME PILLARS (#pillars) — comfy media heights on phones ==================================================================== */ @media (max-width: 767px) { body.home #pillars .pil-intro { padding: 56px 22px 8px; } body.home #pillars .pil-media { height: 72vw; max-height: 440px; } body.home #pillars .pil-text { padding: 34px 24px 40px; } } /* ==================================================================== SOCIAL SAFETY NET — guarantee no Facebook / Twitter / YouTube icon ever renders anywhere, even if a stray one survives the markup pass. Instagram (.-instagram) and Telegram (.-telegram) are untouched. ==================================================================== */ .elementor-social-icon-facebook, .elementor-social-icon-facebook-square, .elementor-social-icon-twitter, .elementor-social-icon-x-twitter, .elementor-social-icon-youtube { display: none !important; } /* ==================================================================== BLOG — "Featured Articles" hero: the two cards carry inline width:50% + fixed h-custom heights, so on phones they stay side-by-side and clip. Stack them full-width; let the text card grow; keep the image card tall. ==================================================================== */ @media (max-width: 767px) { .lqd-lp-column { width: 100% !important; } div.lqd-lp.h-custom { height: auto !important; min-height: 0 !important; padding: 34px 26px !important; } article.lqd-lp.h-custom { height: auto !important; min-height: 360px !important; } /* don't let card CTA labels get clipped (nowrap + letter-spacing overflows) */ .lqd-lp-read-more, .lqd-lp-read-more .btn-txt, .lqd-lp .read-more, .btn .btn-txt { white-space: normal !important; } }