/* ================================================== MUSLIM PATH ACADEMY HOME VISUAL REFRESH ================================================== */ :root{ --mpa-brand-navy:#08284c; --mpa-brand-blue:#01478d; --mpa-brand-blue-2:#075da8; --mpa-brand-soft:#6b9dc6; --mpa-brand-gold:#fdb002; --mpa-brand-gold-dark:#d99100; --mpa-brand-ink:#234b70; --mpa-brand-muted:#567797; } /* ================================================== 1. QUALIFIED TEACHERS ================================================== */ body.home .mpa-home-teachers-enhanced{ text-align:center !important; } body.home .mpa-home-teachers-title{ display:block !important; width:100% !important; margin-inline:auto !important; color: var(--mpa-brand-gold) !important; -webkit-text-fill-color: var(--mpa-brand-gold) !important; opacity:1 !important; visibility:visible !important; text-align:center !important; text-shadow:none !important; font-weight:850 !important; line-height:1.25 !important; } body.home .mpa-home-teachers-enhanced p, body.home .mpa-home-teachers-enhanced li{ color: #315d83 !important; -webkit-text-fill-color: #315d83 !important; opacity:1 !important; visibility:visible !important; font-weight:550 !important; line-height:1.95 !important; } body.home .mpa-home-teachers-enhanced p{ max-width:920px; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } body.home .mpa-home-teachers-enhanced ul, body.home .mpa-home-teachers-enhanced ol{ color:#315d83 !important; } /* ================================================== 2. MAIN SUBSCRIBE BUTTONS ================================================== */ body.home .mpa-home-btn-subscribe{ background: var(--mpa-brand-blue) !important; border-color: var(--mpa-brand-blue) !important; color:#ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 8px 20px rgba( 1, 71, 141, .18 ) !important; font-weight:750 !important; transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important; } body.home .mpa-home-btn-subscribe:hover{ background: var(--mpa-brand-navy) !important; border-color: var(--mpa-brand-navy) !important; color:#ffffff !important; transform: translateY(-2px); box-shadow: 0 12px 25px rgba( 8, 40, 76, .22 ) !important; } /* ================================================== 3. MORE BUTTONS ================================================== */ body.home .mpa-home-btn-more{ background: var(--mpa-brand-gold) !important; border-color: var(--mpa-brand-gold) !important; color: var(--mpa-brand-navy) !important; -webkit-text-fill-color: var(--mpa-brand-navy) !important; font-weight:800 !important; box-shadow: 0 7px 18px rgba( 253, 176, 2, .18 ) !important; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important; } body.home .mpa-home-btn-more:hover{ filter: brightness(.96); transform: translateY(-2px); box-shadow: 0 11px 23px rgba( 253, 176, 2, .25 ) !important; } /* ================================================== 4. EXPLORE ALL PROGRAMS ================================================== */ body.home .mpa-home-btn-all-programs{ background: var(--mpa-brand-gold) !important; border: 1px solid var(--mpa-brand-gold) !important; color: var(--mpa-brand-navy) !important; -webkit-text-fill-color: var(--mpa-brand-navy) !important; font-weight: 850 !important; box-shadow: 0 9px 22px rgba( 253, 176, 2, .20 ) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } body.home .mpa-home-btn-all-programs:hover{ transform: translateY(-2px); filter: brightness(.96); box-shadow: 0 13px 28px rgba( 253, 176, 2, .26 ) !important; } /* ================================================== 5. PRICING - MORE SATURATED ================================================== */ body.home .mpa-home-pricing-enhanced{ color: var(--mpa-brand-ink) !important; } body.home .mpa-home-pricing-enhanced h2, body.home .mpa-home-pricing-enhanced h3, body.home .mpa-home-pricing-enhanced h4{ color: var(--mpa-brand-navy) !important; -webkit-text-fill-color: var(--mpa-brand-navy) !important; opacity:1 !important; font-weight:800 !important; } body.home .mpa-home-pricing-enhanced p, body.home .mpa-home-pricing-enhanced li{ color: #476b8e !important; -webkit-text-fill-color: #476b8e !important; opacity:1 !important; font-weight:520 !important; } body.home .mpa-home-pricing-enhanced .mpa-home-price-number{ color: var(--mpa-brand-blue) !important; -webkit-text-fill-color: var(--mpa-brand-blue) !important; opacity:1 !important; font-weight:900 !important; text-shadow:none !important; } body.home .mpa-home-pricing-enhanced .mpa-home-price-number *{ color: inherit !important; -webkit-text-fill-color: inherit !important; } body.home .mpa-home-pricing-enhanced .mpa-home-selected-plan{ border-color: var(--mpa-brand-gold) !important; box-shadow: 0 15px 40px rgba( 253, 176, 2, .13 ) !important; } body.home .mpa-home-pricing-enhanced .mpa-home-selected-plan .mpa-home-price-number{ color: var(--mpa-brand-gold) !important; -webkit-text-fill-color: var(--mpa-brand-gold) !important; font-weight: 950 !important; text-shadow: 0 2px 12px rgba( 253, 176, 2, .12 ) !important; } body.home .mpa-home-pricing-enhanced .mpa-home-selected-badge{ background: rgba( 253, 176, 2, .13 ) !important; border-color: rgba( 253, 176, 2, .35 ) !important; color: #8d6500 !important; -webkit-text-fill-color: #8d6500 !important; font-weight: 800 !important; } /* pricing duration buttons */ body.home .mpa-home-pricing-enhanced button{ opacity:1 !important; color: var(--mpa-brand-navy) !important; } body.home .mpa-home-pricing-enhanced button.active, body.home .mpa-home-pricing-enhanced button.is-active, body.home .mpa-home-pricing-enhanced button.selected, body.home .mpa-home-pricing-enhanced button[aria-selected="true"]{ background: var(--mpa-brand-blue) !important; border-color: var(--mpa-brand-blue) !important; color:#ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ================================================== 6. STATS ================================================== */ body.home .mpa-home-counter{ color: var(--mpa-brand-gold) !important; -webkit-text-fill-color: var(--mpa-brand-gold) !important; opacity:1 !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; will-change: contents; } /* ================================================== MOBILE ================================================== */ @media (max-width:700px){ body.home .mpa-home-teachers-title{ text-align:center !important; line-height: 1.3 !important; } body.home .mpa-home-teachers-enhanced p{ text-align:center !important; line-height: 1.9 !important; } body.home .mpa-home-btn-subscribe, body.home .mpa-home-btn-more, body.home .mpa-home-btn-all-programs{ min-height: 42px; } } /* MPA_ALL_PROGRAMS_BRAND_START */ body.home .mpa-home-btn-all-programs{ background:#01478d !important; border-color:#01478d !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; font-weight:850 !important; box-shadow: 0 9px 22px rgba( 1, 71, 141, .20 ) !important; } body.home .mpa-home-btn-all-programs:hover{ background:#08284c !important; border-color:#08284c !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; filter:none !important; transform:translateY(-2px); box-shadow: 0 13px 28px rgba( 8, 40, 76, .26 ) !important; } /* MPA_ALL_PROGRAMS_BRAND_END */ /* MPA_HOME_WHITE_TITLES_START */ body.home .mpa-home-white-title, body.home .mpa-home-teachers-title, body.home .mpa-home-teachers-title__line{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } body.home .mpa-home-white-title{ display:inline-block !important; text-align:center !important; } body.home .mpa-home-teachers-title{ display:block !important; text-align:center !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:0 !important; } body.home .mpa-home-teachers-title__line{ display:block !important; width:100% !important; } body.home .mpa-home-teachers-title__line + .mpa-home-teachers-title__line{ margin-top:.08em !important; } /* MPA_HOME_WHITE_TITLES_END */ /* MPA_HOME_WHITE_TITLES_FINAL_START */ /* Titles placed inside the navy polygon/banner */ body.home .mpa-home-white-title-final, body.home .mpa-home-white-title-final *, body.home .mpa-home-teachers-title-final, body.home .mpa-home-teachers-title-final *{ color:#ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity:1 !important; visibility:visible !important; text-shadow:none !important; } /* Qualified teachers */ body.home .mpa-home-teachers-title-final{ display:block !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; font-weight:850 !important; line-height:1.15 !important; } /* Other polygon headings */ body.home .mpa-home-white-title-final{ text-align:center !important; font-weight:850 !important; } /* MPA_HOME_WHITE_TITLES_FINAL_END */ /* MPA_TEACHERS_TITLE_ABOVE_IMAGE_START */ body.home .mpa-home-teachers-enhanced{ position:relative !important; } /* * Put "معلمين مؤهلين" above the image area. */ body.home .mpa-home-teachers-title-final{ display:block !important; position:relative !important; width:max-content !important; max-width:90% !important; margin: 0 auto 22px !important; padding: 16px 34px !important; background: #08284c !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-align:center !important; font-size: clamp( 2rem, 3vw, 3.2rem ) !important; font-weight: 850 !important; line-height: 1.15 !important; clip-path: polygon( 4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50% ) !important; z-index:3 !important; } /* * Remove any side-position behaviour. */ body.home .mpa-home-teachers-title, body.home .mpa-home-teachers-title-final{ float:none !important; clear:both !important; inset:auto !important; transform:none !important; } /* Mobile */ @media (max-width:700px){ body.home .mpa-home-teachers-title-final{ width:fit-content !important; max-width:92% !important; margin: 0 auto 16px !important; padding: 12px 24px !important; font-size: 1.8rem !important; } } /* MPA_TEACHERS_TITLE_ABOVE_IMAGE_END */ /* MPA_TEACHERS_TITLE_OVER_IMAGE_START */ /* * Image column becomes: * * معلمين مؤهلين * IMAGE */ /* * Keep both Arabic words on ONE line. */ body.home .mpa-home-teachers-title-over-image{ display:block !important; position:relative !important; float:none !important; clear:both !important; inset:auto !important; transform:none !important; width:max-content !important; max-width:none !important; margin: 0 auto 18px !important; padding: 14px 32px !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; background: #08284c !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-align: center !important; font-size: clamp( 1.8rem, 2.5vw, 2.8rem ) !important; font-weight: 850 !important; line-height: 1.1 !important; clip-path: polygon( 4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50% ) !important; z-index: 5 !important; } /* * Keep the actual image below it. */ body.home .mpa-home-teachers-image-stack > img, body.home .mpa-home-teachers-image-stack > picture, body.home .mpa-home-teachers-image-stack > a{ flex:none !important; } /* MOBILE */ @media (max-width:700px){ body.home .mpa-home-teachers-title-over-image{ margin: 0 auto 12px !important; padding: 11px 22px !important; font-size: clamp( 1.35rem, 6vw, 1.8rem ) !important; white-space: nowrap !important; } } /* MPA_TEACHERS_TITLE_OVER_IMAGE_END */ /* MPA_TEACHERS_CENTER_START */ body.home .mpa-home-teachers-image-stack{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } body.home .mpa-home-teachers-title-over-image{ margin: 0 auto 18px !important; left:auto !important; right:auto !important; align-self:center !important; text-align:center !important; } body.home .mpa-home-teachers-image-stack > img, body.home .mpa-home-teachers-image-stack > picture, body.home .mpa-home-teachers-image-stack > a{ display:block !important; margin-left:auto !important; margin-right:auto !important; align-self:center !important; } body.home .mpa-home-teachers-image-stack img{ object-position:center center !important; } @media (max-width:700px){ body.home .mpa-home-teachers-image-stack{ width:100% !important; } body.home .mpa-home-teachers-title-over-image{ margin: 0 auto 14px !important; text-align:center !important; } } /* MPA_TEACHERS_CENTER_END */ /* MPA_TEACHERS_GLOBAL_CENTER_CSS_START */ /* ================================================== FORCE THE ORIGINAL TWO-COLUMN ROW TO ONE COLUMN ================================================== */ body.home .mpa-home-teachers-global-row{ display:grid !important; grid-template-columns: minmax( 0, 1fr ) !important; justify-items:center !important; align-items:start !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } /* ================================================== TITLE + IMAGE GROUP ================================================== */ body.home .mpa-home-teachers-global-visual{ grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: center !important; align-self: start !important; display:flex !important; flex-direction: column !important; align-items: center !important; width: min( 100%, 760px ) !important; max-width: 760px !important; margin: 0 auto 30px !important; padding: 0 !important; float: none !important; left: auto !important; right: auto !important; transform: none !important; text-align: center !important; } /* ================================================== TITLE ================================================== */ body.home .mpa-home-teachers-global-title{ display:block !important; width: max-content !important; max-width: calc( 100vw - 40px ) !important; margin: 0 auto 22px !important; padding: 14px 34px !important; background: #08284c !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; visibility: visible !important; text-align: center !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; font-size: clamp( 1.8rem, 2.8vw, 2.9rem ) !important; font-weight: 850 !important; line-height: 1.12 !important; clip-path: polygon( 4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50% ) !important; float: none !important; clear: both !important; inset: auto !important; transform: none !important; } /* ================================================== IMAGE ITSELF ================================================== */ body.home .mpa-home-teachers-global-visual img{ display:block !important; width: auto !important; max-width: min( 100%, 600px ) !important; height: auto !important; margin: 0 auto !important; float: none !important; left: auto !important; right: auto !important; transform: none !important; object-position: center center !important; } /* ================================================== TEACHERS TEXT BELOW ================================================== */ body.home .mpa-home-teachers-global-copy{ grid-column: 1 / -1 !important; width: min( 100%, 980px ) !important; max-width: 980px !important; margin: 0 auto !important; justify-self: center !important; text-align: center !important; } body.home .mpa-home-teachers-global-copy p{ max-width: 920px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* ================================================== TABLET ================================================== */ @media ( max-width: 900px ){ body.home .mpa-home-teachers-global-visual{ width: min( 100%, 650px ) !important; } body.home .mpa-home-teachers-global-visual img{ max-width: min( 100%, 520px ) !important; } } /* ================================================== MOBILE ================================================== */ @media ( max-width: 620px ){ body.home .mpa-home-teachers-global-visual{ width: 100% !important; margin-bottom: 22px !important; } body.home .mpa-home-teachers-global-title{ max-width: calc( 100vw - 28px ) !important; margin: 0 auto 14px !important; padding: 11px 22px !important; font-size: clamp( 1.3rem, 6vw, 1.75rem ) !important; white-space: nowrap !important; } body.home .mpa-home-teachers-global-visual img{ max-width: min( 92vw, 430px ) !important; } body.home .mpa-home-teachers-global-copy{ width: 100% !important; } } /* MPA_TEACHERS_GLOBAL_CENTER_CSS_END */ /* MPA_HIDE_TEACHERS_IMAGE_START */ /* * Hide the teachers visual image on every homepage language. * Keep the title and written content visible. */ body.home .mpa-home-teachers-global-visual img, body.home .mpa-home-teachers-image-stack img{ display:none !important; visibility:hidden !important; opacity:0 !important; } /* * Remove the empty image space. */ body.home .mpa-home-teachers-global-visual, body.home .mpa-home-teachers-image-stack{ min-height:0 !important; height:auto !important; padding-top:0 !important; padding-bottom:0 !important; margin-left:auto !important; margin-right:auto !important; justify-content:center !important; align-items:center !important; } /* * Keep qualified teachers title centered. */ body.home .mpa-home-teachers-global-title, body.home .mpa-home-teachers-title-over-image{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; } /* MPA_HIDE_TEACHERS_IMAGE_END */