{"id":3774,"date":"2026-05-19T19:23:18","date_gmt":"2026-05-19T16:23:18","guid":{"rendered":"https:\/\/ummahacademy.net\/?page_id=3774"},"modified":"2026-09-20T00:30:21","modified_gmt":"2026-09-19T21:30:21","slug":"about","status":"publish","type":"page","link":"https:\/\/ummahacademy.net\/ar\/about\/","title":{"rendered":"\u0645\u0646 \u0646\u062d\u0646"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3774\" class=\"elementor elementor-3774\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4176d2 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f4176d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0dd6df7 elementor-widget elementor-widget-html\" data-id=\"0dd6df7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\/* ============================================================\r\n   UMMAH ACADEMY \u2014 GLOBAL STYLESHEET\r\n   One stylesheet, enqueued once, shared by every section widget.\r\n   Built incrementally, one homepage section per pass.\r\n\r\n   Sections completed so far: Header\/Nav, Footer, Hero, Trust Bar, Why Ummah Academy, Comparison, About page, Blog page, FAQ page, Teachers page (v2, expanded), Career page, Contact page, Courses page, Family Portal page.\r\n\r\n   IMPORTANT \u2014 WordPress\/Elementor scoping:\r\n   Every base rule below (margins, list-style, colors, fonts) is\r\n   scoped under .ua-homepage rather than applied to bare tags like\r\n   `h1` or `ul`. That's deliberate: this stylesheet is meant to sit\r\n   on a real WordPress site alongside a theme's own header, footer,\r\n   and widgets, and a bare `ul, ol { list-style: none }`-style reset\r\n   would silently break navigation menus and widgets elsewhere on\r\n   the page. Add the class `ua-homepage` once, to whichever Elementor\r\n   Section\/Container wraps all the pasted homepage widgets (Advanced\r\n   tab -> CSS Classes) \u2014 everything below then applies only inside it.\r\n   ============================================================ *\/\r\n\r\n\/* ===== Design Tokens ===== *\/\r\n:root {\r\n  \/* ---- Brand palette, read from the client's palette board ----\r\n     Values below are my best visual read of the swatches, not\r\n     values you handed me numerically \u2014 if your Figma\/brand file has\r\n     exact hex\/RGB, swap them in here and nothing else needs to\r\n     change (every rule in this file reads the *role* variables\r\n     further down, never these raw ones, directly). *\/\r\n  --ua-brand-primary:        #2E1D46; \/* Primary \u2014 deep aubergine *\/\r\n  --ua-brand-neutral-dark:   #24393C; \/* Neutrals \u2014 dark slate-teal *\/\r\n  --ua-brand-neutral-light:  #FAFAFA; \/* Neutrals \u2014 paper white *\/\r\n  --ua-brand-blue:           #1D5FA8; \/* Secondary *\/\r\n  --ua-brand-indigo:         #453163; \/* Secondary *\/\r\n  --ua-brand-magenta:        #8F2F9E; \/* Secondary *\/\r\n  --ua-brand-rose:           #C87B80; \/* Secondary *\/\r\n  --ua-brand-blue-tint:      #AFCCEA; \/* Accent *\/\r\n  --ua-brand-lavender-tint:  #ADA7C9; \/* Accent *\/\r\n  --ua-brand-mauve-tint:     #CEB3C1; \/* Accent *\/\r\n  --ua-brand-blush-tint:     #F1E8EC; \/* Accent *\/\r\n\r\n  \/* ---- Functional roles (what every component rule below actually\r\n     uses). Only this block needs to change for a future palette\r\n     revision \u2014 components never reference --ua-brand-* directly. ---- *\/\r\n  --ua-ink:          var(--ua-brand-neutral-dark); \/* headings, dark section backgrounds *\/\r\n  --ua-ink-soft:     #34494C; \/* derived: a lighter step of the dark neutral, for cards on dark sections *\/\r\n  --ua-body:         #5C6C6E; \/* derived: body text *\/\r\n  --ua-muted:        #5F6F70; \/* derived: muted\/meta text *\/\r\n\r\n  --ua-accent:       var(--ua-brand-primary); \/* primary CTAs, eyebrows, key highlights *\/\r\n  --ua-accent-hover: var(--ua-brand-indigo); \/* derived: a step lighter than Primary for hover states *\/\r\n  --ua-accent-tint:  var(--ua-brand-blush-tint); \/* soft badge backgrounds *\/\r\n\r\n  --ua-highlight: var(--ua-brand-magenta); \/* reserved for later sections: category tags, secondary badges *\/\r\n\r\n  --ua-verified:      var(--ua-brand-blue); \/* checkmarks \/ verified badges (replaces the old emerald role) *\/\r\n  --ua-verified-tint: var(--ua-brand-blue-tint);\r\n\r\n  --ua-bg:      var(--ua-brand-neutral-light);\r\n  --ua-surface: #FFFFFF;\r\n  --ua-line:    #E4E1E6; \/* derived: neutral border tuned to sit with the cooler palette *\/\r\n  --ua-line-dark: rgba(255,255,255,0.14);\r\n  \/* A deeper-darkened step of --ua-brand-primary, for the nav's glass\r\n     background specifically \u2014 plain --ua-accent at reduced opacity\r\n     wasn't dark enough to guarantee contrast for white nav text over\r\n     arbitrary page content scrolling underneath it. *\/\r\n  --ua-nav-glass: rgba(28,17,42,0.92);\r\n\r\n  \/* Typography \u2014 no CDN \/ no external font files, so these are the\r\n     best-available system serif\/sans per OS. Prepend a self-hosted\r\n     brand font name here later (Plus Jakarta Sans \/ Instrument Serif,\r\n     per the Website Audit's design system) with zero other changes. *\/\r\n  --ua-font-display: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', Georgia, 'Times New Roman', serif;\r\n  --ua-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;\r\n\r\n  \/* Fluid type scale *\/\r\n  --ua-step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);\r\n  --ua-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);\r\n  --ua-step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);\r\n  --ua-step-2:  clamp(1.5rem, 1.3rem + 1vw, 1.9rem);\r\n  --ua-step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.5rem);\r\n  --ua-step-4:  clamp(2.4rem, 1.9rem + 2.5vw, 3.5rem);\r\n  --ua-step-5:  clamp(3rem, 2.2rem + 4vw, 4.5rem);\r\n\r\n  \/* Spacing scale (4px base) *\/\r\n  --ua-sp-1: 0.25rem;  --ua-sp-2: 0.5rem;   --ua-sp-3: 0.75rem;\r\n  --ua-sp-4: 1rem;     --ua-sp-5: 1.5rem;   --ua-sp-6: 2rem;\r\n  --ua-sp-7: 2.5rem;   --ua-sp-8: 3rem;     --ua-sp-9: 4rem;\r\n  --ua-sp-10: 5rem;    --ua-sp-11: 6.5rem;  --ua-sp-12: 8rem;\r\n\r\n  \/* Radii, shadows, motion *\/\r\n  --ua-radius-sm: 8px;\r\n  --ua-radius-md: 14px;\r\n  --ua-radius-lg: 24px;\r\n  --ua-radius-pill: 999px;\r\n  \/* Retinted toward the actual brand ink (#2E1D46) rather than a flat\r\n     navy-black \u2014 this is the single highest-leverage change in this\r\n     pass, since every card and button shadow inherits from here. *\/\r\n  --ua-shadow-sm: 0 1px 3px rgba(46,29,70,0.10), 0 1px 2px rgba(46,29,70,0.07);\r\n  --ua-shadow-md: 0 12px 28px rgba(46,29,70,0.12), 0 2px 8px rgba(46,29,70,0.08);\r\n  --ua-shadow-lg: 0 28px 56px rgba(46,29,70,0.18);\r\n  --ua-shadow-glow: 0 12px 32px rgba(46,29,70,0.24);\r\n  --ua-ease: cubic-bezier(0.2, 0.7, 0.3, 1);\r\n  --ua-dur-fast: 160ms;\r\n  --ua-dur-med: 320ms;\r\n\r\n  --ua-wrap-max: 1200px;\r\n}\r\n\r\n\/* ===== Reset & Base (scoped to .ua-homepage, see note above) ===== *\/\r\n.ua-homepage, .ua-homepage *, .ua-homepage *::before, .ua-homepage *::after {\r\n  box-sizing: border-box;\r\n}\r\n.ua-homepage h1, .ua-homepage h2, .ua-homepage h3, .ua-homepage h4,\r\n.ua-homepage p, .ua-homepage figure, .ua-homepage dl, .ua-homepage dd {\r\n  margin: 0;\r\n}\r\n.ua-homepage ul, .ua-homepage ol { list-style: none; margin: 0; padding: 0; }\r\n.ua-homepage img, .ua-homepage svg { display: block; max-width: 100%; }\r\n.ua-homepage a { color: inherit; text-decoration: none; }\r\n.ua-homepage button {\r\n  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0;\r\n}\r\n.ua-homepage h1, .ua-homepage h2, .ua-homepage h3, .ua-homepage h4 {\r\n  font-family: var(--ua-font-display); font-weight: 600; line-height: 1.15; color: var(--ua-ink);\r\n}\r\n.ua-homepage {\r\n  font-family: var(--ua-font-body);\r\n  font-size: var(--ua-step-0);\r\n  line-height: 1.6;\r\n  color: var(--ua-body);\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n\/* Global, low-risk a11y rule \u2014 safe to apply outside .ua-homepage too,\r\n   since it only affects the visible focus ring and nothing else. *\/\r\n.ua-homepage :focus-visible {\r\n  outline: 3px solid var(--ua-accent);\r\n  outline-offset: 3px;\r\n  border-radius: 4px;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ua-homepage *, .ua-homepage *::before, .ua-homepage *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n    scroll-behavior: auto !important;\r\n  }\r\n}\r\n\r\n\/* ===== Utilities ===== *\/\r\n.ua-wrap { max-width: var(--ua-wrap-max); margin-inline: auto; padding-inline: var(--ua-sp-6); }\r\n\r\n.ua-visually-hidden {\r\n  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;\r\n  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;\r\n}\r\n\r\n.ua-skip-link {\r\n  position: fixed; top: -100%; left: var(--ua-sp-4); z-index: 10000;\r\n  background: var(--ua-ink); color: var(--ua-brand-neutral-light);\r\n  padding: var(--ua-sp-3) var(--ua-sp-5); border-radius: var(--ua-radius-sm);\r\n  transition: top var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-skip-link:focus { top: var(--ua-sp-4); }\r\n\r\n.ua-eyebrow {\r\n  display: inline-flex; align-items: center; gap: var(--ua-sp-2);\r\n  font-size: var(--ua-step--1); font-weight: 600; letter-spacing: 0.06em;\r\n  text-transform: uppercase; color: var(--ua-accent); margin-bottom: var(--ua-sp-3);\r\n}\r\n\/* Pill variant \u2014 a rounded, tinted badge instead of bare text. Introduced\r\n   here for the first content section after Hero\/Trust Bar; reusable by\r\n   every later section's header without redefining anything. *\/\r\n.ua-eyebrow--pill {\r\n  background: var(--ua-accent-tint); padding: var(--ua-sp-2) var(--ua-sp-4);\r\n  border-radius: var(--ua-radius-pill); text-transform: none; letter-spacing: 0.02em;\r\n}\r\n.ua-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ua-verified); flex-shrink: 0; }\r\n\r\n.ua-section-head { max-width: 640px; margin-bottom: var(--ua-sp-9); }\r\n.ua-section-head h2 { font-size: var(--ua-step-3); letter-spacing: -0.02em; margin-bottom: var(--ua-sp-4); }\r\n.ua-section-head h2 em { font-style: normal; color: var(--ua-accent); }\r\n.ua-section-head-lede { font-size: var(--ua-step-1); color: var(--ua-body); }\r\n.ua-section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }\r\n.ua-section-head--center .ua-eyebrow--pill { margin-inline: auto; }\r\n.ua-section-head-lede--center { margin-inline: auto; }\r\n\r\n\/* Reveal-on-scroll target class \u2014 used by script.js's initAnimations().\r\n   Content stays fully visible (opacity:1) until the .ua-js-ready flag is\r\n   added by script.js, so nothing depends on JavaScript running at all. *\/\r\n.ua-reveal { opacity: 1; transform: none; }\r\n.ua-js-ready .ua-reveal {\r\n  opacity: 0; transform: translateY(18px);\r\n  transition: opacity var(--ua-dur-med) var(--ua-ease), transform var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-js-ready .ua-reveal.ua-is-visible { opacity: 1; transform: none; }\r\n\r\n\/* ===== Button System ===== *\/\r\n.ua-btn {\r\n  display: inline-flex; align-items: center; justify-content: center; gap: var(--ua-sp-2);\r\n  font-family: var(--ua-font-body); font-weight: 600; font-size: var(--ua-step-0);\r\n  padding: 0.85em 1.6em; border-radius: var(--ua-radius-pill);\r\n  border: 1px solid transparent;\r\n  transition: transform var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease),\r\n              background-color var(--ua-dur-fast) var(--ua-ease), color var(--ua-dur-fast) var(--ua-ease);\r\n  white-space: nowrap;\r\n}\r\n.ua-btn svg { flex-shrink: 0; }\r\n.ua-btn:hover { transform: translateY(-2px) scale(1.01); }\r\n.ua-btn:active { transform: translateY(0) scale(1); }\r\n\r\n.ua-btn-primary {\r\n  background: var(--ua-accent); color: var(--ua-bg);\r\n  box-shadow: var(--ua-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.14);\r\n}\r\n.ua-btn-primary:hover {\r\n  background: var(--ua-accent-hover);\r\n  box-shadow: var(--ua-shadow-glow), inset 0 1px 0 rgba(255,255,255,0.18);\r\n}\r\n\r\n.ua-btn-ghost { background: transparent; color: var(--ua-ink); border-color: var(--ua-line); }\r\n.ua-btn-ghost:hover { border-color: var(--ua-ink); }\r\n\r\n.ua-btn-outline { background: transparent; color: var(--ua-ink); border-color: var(--ua-ink); }\r\n.ua-btn-outline:hover { background: var(--ua-ink); color: var(--ua-bg); }\r\n\r\n.ua-btn-small { padding: 0.55em 1.2em; font-size: var(--ua-step--1); }\r\n.ua-btn-large { padding: 1em 2em; font-size: var(--ua-step-1); }\r\n.ua-btn-block { width: 100%; }\r\n\r\n\/* ===== Hero (cinematic photo variant) =====\r\n   Full-bleed background photo + a left-to-right dark-to-transparent\r\n   gradient, combined in one background-image so no extra DOM layer is\r\n   needed for the scrim. Swap the URL below if the asset moves; nothing\r\n   else in this block depends on the image's exact composition beyond\r\n   \"subject on the right, open space on the left,\" which the gradient\r\n   stops assume. *\/\r\n.ua-hero {\r\n  position: relative;\r\n  min-height: 92vh;\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  background-image:\r\n    linear-gradient(90deg, rgba(21,13,22,0.90) 0%, rgba(21,13,22,0.62) 38%, rgba(21,13,22,0.22) 62%, rgba(21,13,22,0.05) 85%),\r\n    url('https:\/\/ummahacademy.net\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-23-2026-03_20_04-PM.png');\r\n  background-size: cover;\r\n  background-position: center right;\r\n  background-repeat: no-repeat;\r\n}\r\n\r\n.ua-hero-inner { position: relative; z-index: 1; width: 100%; }\r\n\r\n.ua-hero-copy { max-width: 640px; }\r\n\r\n\/* Same pill language as .ua-eyebrow--pill elsewhere, adapted for a photo\r\n   backdrop: frosted glass instead of a solid tint, since a flat fill\r\n   would look pasted-on over an image. *\/\r\n.ua-eyebrow--on-dark {\r\n  color: var(--ua-brand-mauve-tint);\r\n  background: rgba(255,255,255,0.08);\r\n  border: 1px solid rgba(255,255,255,0.16);\r\n  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\r\n  padding: var(--ua-sp-2) var(--ua-sp-4); border-radius: var(--ua-radius-pill);\r\n  text-transform: none; letter-spacing: 0.02em;\r\n}\r\n\r\n.ua-hero-title {\r\n  font-size: var(--ua-step-5); letter-spacing: -0.015em; margin-bottom: var(--ua-sp-5);\r\n  color: var(--ua-brand-neutral-light);\r\n  text-shadow: 0 2px 24px rgba(0,0,0,0.25);\r\n}\r\n.ua-hero-title em { font-style: normal; color: var(--ua-brand-mauve-tint); }\r\n\r\n.ua-hero-subtitle {\r\n  font-size: var(--ua-step-1); max-width: 46ch; margin-bottom: var(--ua-sp-7);\r\n  color: rgba(250,250,249,0.82);\r\n}\r\n\r\n.ua-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ua-sp-4); }\r\n\r\n\/* Buttons need the opposite contrast treatment here vs. the rest of the\r\n   site: light and solid against a dark photo, rather than the site-wide\r\n   dark-on-light default. Applied as an additive modifier so the base\r\n   .ua-btn-primary \/ .ua-btn-ghost rules stay untouched for every other\r\n   section. *\/\r\n.ua-btn--on-dark.ua-btn-primary { background: var(--ua-brand-neutral-light); color: var(--ua-ink); }\r\n.ua-btn--on-dark.ua-btn-primary:hover { background: #FFFFFF; }\r\n.ua-btn--on-dark.ua-btn-ghost { color: var(--ua-brand-neutral-light); border-color: rgba(250,250,249,0.45); }\r\n.ua-btn--on-dark.ua-btn-ghost:hover { border-color: var(--ua-brand-neutral-light); }\r\n\r\n\/* ---- Hero responsive ---- *\/\r\n@media (max-width: 860px) {\r\n  .ua-hero { min-height: 78vh; background-position: center 30%; }\r\n  .ua-hero-title { font-size: var(--ua-step-4); }\r\n}\r\n@media (max-width: 560px) {\r\n  .ua-wrap { padding-inline: var(--ua-sp-5); }\r\n  .ua-hero { min-height: 82vh; }\r\n  .ua-hero-copy { max-width: 100%; }\r\n  .ua-hero-actions { flex-direction: column; align-items: stretch; }\r\n  .ua-hero-actions .ua-btn { width: 100%; }\r\n}\r\n\r\n\/* ===== Trust Bar (merges the original \"Statistics\" file \u2014 see the\r\n   note at the top of trust-bar.html) =====\r\n   Light background deliberately, to alternate against the dark\r\n   cinematic Hero right above it \u2014 two dark sections back to back\r\n   would flatten the page's rhythm. *\/\r\n.ua-trust-bar {\r\n  background: var(--ua-surface); border-bottom: 1px solid var(--ua-line); padding-block: var(--ua-sp-8);\r\n  box-shadow: 0 32px 48px -36px rgba(46,29,70,0.20);\r\n  position: relative; z-index: 1;\r\n}\r\n\r\n.ua-trust-bar-inner {\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  flex-wrap: wrap; gap: var(--ua-sp-6);\r\n}\r\n\r\n.ua-trust-item { flex: 1 1 160px; text-align: center; transition: transform var(--ua-dur-med) var(--ua-ease); }\r\n.ua-trust-item:hover { transform: translateY(-3px); }\r\n.ua-trust-num {\r\n  font-family: var(--ua-font-display); font-size: var(--ua-step-3); color: var(--ua-accent); line-height: 1;\r\n  margin-bottom: var(--ua-sp-2); transition: color var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-trust-item:hover .ua-trust-num { color: var(--ua-accent-hover); }\r\n.ua-trust-lbl { font-size: var(--ua-step--1); font-weight: 700; color: var(--ua-ink); }\r\n.ua-trust-lbl-sub { font-size: 0.75rem; color: var(--ua-muted); margin-top: 2px; }\r\n\r\n\/* Soft fade instead of a hard 1px rule \u2014 a full-strength line at the\r\n   very top\/bottom edge of a divider reads as a stray stroke; fading it\r\n   in and out reads as considered. *\/\r\n.ua-trust-div {\r\n  width: 1px; align-self: stretch;\r\n  background: linear-gradient(180deg, transparent, var(--ua-line) 25%, var(--ua-line) 75%, transparent);\r\n}\r\n\r\n@media (max-width: 860px) {\r\n  .ua-trust-div { display: none; }\r\n  .ua-trust-item { flex: 1 1 40%; }\r\n}\r\n@media (max-width: 560px) {\r\n  .ua-trust-bar-inner { gap: var(--ua-sp-5); }\r\n  .ua-trust-num { font-size: var(--ua-step-2); }\r\n}\r\n\r\n\/* ===== Why Ummah Academy ===== *\/\r\n\/* --ua-bg (off-white) rather than --ua-surface (pure white) here on\r\n   purpose \u2014 Trust Bar above is pure white, so this needs to read as a\r\n   distinct section rather than a continuation of the same slab. *\/\r\n.ua-why-ummah { padding-block: var(--ua-sp-12); background: var(--ua-bg); }\r\n\r\n.ua-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ua-sp-6); }\r\n\r\n.ua-why-card {\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-7) var(--ua-sp-6); position: relative; overflow: hidden;\r\n  transition: transform var(--ua-dur-med) var(--ua-ease), box-shadow var(--ua-dur-med) var(--ua-ease), border-color var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-why-card::before {\r\n  content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n  background: linear-gradient(90deg, var(--ua-accent), var(--ua-brand-magenta));\r\n  opacity: 0; transition: opacity var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-why-card:hover, .ua-why-card:focus-within {\r\n  transform: translateY(-6px); box-shadow: var(--ua-shadow-glow); border-color: transparent;\r\n}\r\n.ua-why-card:hover::before, .ua-why-card:focus-within::before { opacity: 1; }\r\n\r\n.ua-why-icon {\r\n  width: 52px; height: 52px; border-radius: var(--ua-radius-sm);\r\n  background: var(--ua-accent-tint); color: var(--ua-accent);\r\n  display: flex; align-items: center; justify-content: center;\r\n  margin-bottom: var(--ua-sp-5);\r\n  transition: background-color var(--ua-dur-med) var(--ua-ease), color var(--ua-dur-med) var(--ua-ease), transform var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-why-card:hover .ua-why-icon { background: var(--ua-accent); color: var(--ua-brand-neutral-light); transform: scale(1.08); }\r\n\r\n.ua-why-card h3 { font-size: var(--ua-step-1); margin-bottom: var(--ua-sp-3); }\r\n.ua-why-card p { font-size: var(--ua-step--1); color: var(--ua-body); line-height: 1.7; }\r\n.ua-why-card p em { font-style: normal; color: var(--ua-accent); font-weight: 600; }\r\n\r\n.ua-why-tag {\r\n  display: inline-flex; align-items: center; gap: var(--ua-sp-2); margin-top: var(--ua-sp-5);\r\n  font-size: 0.72rem; font-weight: 700; color: var(--ua-verified);\r\n  background: var(--ua-verified-tint); padding: var(--ua-sp-2) var(--ua-sp-3); border-radius: var(--ua-radius-pill);\r\n}\r\n\r\n\/* Staggered reveal \u2014 same .ua-reveal mechanism as every other section,\r\n   just offset per card via nth-child so they arrive one after another\r\n   instead of all at once. CSS-only, no inline styles, no extra JS. *\/\r\n.ua-why-grid .ua-why-card:nth-child(2) { transition-delay: 80ms; }\r\n.ua-why-grid .ua-why-card:nth-child(3) { transition-delay: 160ms; }\r\n.ua-why-grid .ua-why-card:nth-child(4) { transition-delay: 240ms; }\r\n\r\n@media (max-width: 1024px) { .ua-why-grid { grid-template-columns: repeat(2, 1fr); } }\r\n@media (max-width: 640px) { .ua-why-grid { grid-template-columns: 1fr; } }\r\n\r\n\/* ===== Comparison Table =====\r\n   Real table markup kept for accessibility (see the comment at the\r\n   top of comparison.html), but display is overridden to grid on each\r\n   row so columns align cleanly across the header and every row.\r\n   Deliberately NOT a floating-card treatment \u2014 one unified container,\r\n   rows separated by hairline dividers, tight padding throughout. Think\r\n   Linear's feature-comparison table or an Apple spec sheet: compact,\r\n   quiet, no per-row shadows or gaps. *\/\r\n.ua-comparison { padding-block: var(--ua-sp-10); background: var(--ua-surface); }\r\n\r\n.ua-comparison-table {\r\n  width: 100%; border-collapse: separate; border-spacing: 0;\r\n  border-radius: var(--ua-radius-lg); overflow: hidden;\r\n  box-shadow: var(--ua-shadow-sm); border: 1px solid var(--ua-line);\r\n}\r\n\r\n.ua-comparison-headrow { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; }\r\n.ua-comparison-th {\r\n  padding: var(--ua-sp-4) var(--ua-sp-6);\r\n  font-family: var(--ua-font-display); font-size: var(--ua-step--1); font-weight: 700; text-align: left;\r\n}\r\n.ua-comparison-th--aspect { background: var(--ua-bg); color: var(--ua-muted); }\r\n.ua-comparison-th--ummah {\r\n  background: linear-gradient(135deg, var(--ua-accent) 0%, var(--ua-accent-hover) 100%);\r\n  color: var(--ua-brand-neutral-light);\r\n}\r\n.ua-comparison-th--generic { background: var(--ua-ink-soft); color: rgba(250,250,249,0.6); }\r\n\r\n.ua-comparison-table tbody { display: block; background: var(--ua-surface); }\r\n\r\n.ua-comparison-row {\r\n  display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; align-items: center;\r\n  border-bottom: 1px solid var(--ua-line);\r\n  transition: background-color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-comparison-row:last-child { border-bottom: 0; }\r\n.ua-comparison-row:hover { background: var(--ua-bg); }\r\n\r\n.ua-comparison-aspect {\r\n  padding: var(--ua-sp-4) var(--ua-sp-6);\r\n  font-size: var(--ua-step--1); font-weight: 700; color: var(--ua-ink);\r\n}\r\n\r\n.ua-comparison-cell {\r\n  display: flex; align-items: flex-start; gap: var(--ua-sp-2);\r\n  padding: var(--ua-sp-4) var(--ua-sp-6);\r\n  font-size: var(--ua-step--1); font-weight: 500; line-height: 1.5;\r\n}\r\n.ua-comparison-cell--yes { color: var(--ua-ink); }\r\n.ua-comparison-cell--no { color: var(--ua-muted); }\r\n\r\n.ua-comparison-icon {\r\n  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;\r\n  display: flex; align-items: center; justify-content: center; margin-top: 2px;\r\n}\r\n.ua-comparison-icon svg { width: 11px; height: 11px; }\r\n\/* Green\/red aren't in the brand palette, so \"positive\" reuses the same\r\n   blue --ua-verified token every other checkmark on the site already\r\n   uses, and \"negative\" uses the dusty rose secondary \u2014 the closest\r\n   thing to red actually on the palette board, rather than introducing\r\n   an off-brand color for this one component. *\/\r\n.ua-comparison-icon--yes { background: var(--ua-verified); color: var(--ua-brand-neutral-light); }\r\n.ua-comparison-icon--no { background: var(--ua-line); color: var(--ua-brand-rose); }\r\n\r\n@media (max-width: 900px) {\r\n  .ua-comparison-headrow { display: none; }\r\n\r\n  .ua-comparison-row { grid-template-columns: 1fr; }\r\n  .ua-comparison-aspect {\r\n    font-size: var(--ua-step-0);\r\n    padding: var(--ua-sp-5) var(--ua-sp-6) var(--ua-sp-2);\r\n  }\r\n  .ua-comparison-cell { padding: var(--ua-sp-2) var(--ua-sp-6); }\r\n  .ua-comparison-cell--no { padding-bottom: var(--ua-sp-5); }\r\n\r\n  \/* Small \"Ummah Academy\" \/ \"Generic Platforms\" mini-heading above each\r\n     stacked value on mobile, pulled straight from the data-label\r\n     attribute already in the HTML \u2014 no JS, no extra wrapper markup.\r\n     flex-wrap + a full-width ::before forces it onto its own line\r\n     while the icon and text stay side by side beneath it. *\/\r\n  .ua-comparison-cell { flex-wrap: wrap; }\r\n  .ua-comparison-cell[data-label]::before {\r\n    content: attr(data-label); flex-basis: 100%;\r\n    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;\r\n    letter-spacing: 0.06em; color: var(--ua-muted); margin-bottom: var(--ua-sp-1);\r\n  }\r\n}\r\n\r\n\/* ===== Header \/ Primary Navigation =====\r\n   Global chrome, not a body section \u2014 see the note at the top of\r\n   header.html for where this actually gets pasted in Elementor.\r\n\r\n   Centering approach used throughout this block: every element that\r\n   holds a lone glyph or a short icon+text pair gets explicit\r\n   `display:flex; align-items:center; justify-content:center` (or\r\n   `center` on the cross-axis only, where text needs to stay\r\n   left-aligned) plus `line-height:1` where relevant, rather than\r\n   relying on a parent's height percentage to do the job indirectly. *\/\r\n.ua-header { position: relative; }\r\n\r\n.ua-nav-wrap {\r\n  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\r\n  padding: var(--ua-sp-4) clamp(16px, 4vw, 48px) 0;\r\n  pointer-events: none;\r\n  transition: padding var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-nav-wrap.is-scrolled { padding-top: var(--ua-sp-2); }\r\n\r\n.ua-nav {\r\n  pointer-events: auto;\r\n  max-width: var(--ua-wrap-max); margin-inline: auto;\r\n  background: var(--ua-nav-glass);\r\n  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  border-radius: var(--ua-radius-pill);\r\n  height: 72px; padding-inline: var(--ua-sp-3);\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  position: relative;\r\n  box-shadow: var(--ua-shadow-lg);\r\n  transition: box-shadow var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-nav-wrap.is-scrolled .ua-nav { box-shadow: var(--ua-shadow-glow); }\r\n\r\n.ua-nav-logo {\r\n  display: flex; align-items: center; justify-content: center;\r\n  height: 100%; padding-inline: var(--ua-sp-3); flex-shrink: 0; z-index: 1;\r\n}\r\n.ua-nav-logo img { height: 40px; width: auto; }\r\n\r\n\/* The actual centering fix: one transform doing both axes against the\r\n   pill's own box, not left+translateX for one axis and a parent\r\n   height for the other. *\/\r\n.ua-nav-center {\r\n  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n  display: flex; align-items: center; gap: var(--ua-sp-1);\r\n  margin: 0;\r\n}\r\n.ua-nav-center a {\r\n  display: flex; align-items: center; gap: var(--ua-sp-1);\r\n  height: 44px; padding-inline: var(--ua-sp-4);\r\n  border-radius: var(--ua-radius-pill);\r\n  font-size: var(--ua-step--1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;\r\n  line-height: 1;\r\n  color: rgba(255,255,255,0.55);\r\n  transition: color var(--ua-dur-fast) var(--ua-ease), background-color var(--ua-dur-fast) var(--ua-ease);\r\n  white-space: nowrap;\r\n}\r\n.ua-nav-center a:hover, .ua-nav-center a.is-active {\r\n  color: var(--ua-brand-neutral-light); background: rgba(255,255,255,0.08);\r\n}\r\n.ua-nav-center a svg { transition: transform var(--ua-dur-fast) var(--ua-ease); }\r\n\r\n.ua-nav-dropdown { position: relative; }\r\n.ua-nav-dropdown-menu {\r\n  position: absolute; top: calc(100% + var(--ua-sp-4)); left: 50%; transform: translateX(-50%);\r\n  background: var(--ua-nav-glass);\r\n  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);\r\n  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-3); min-width: 260px;\r\n  box-shadow: var(--ua-shadow-lg);\r\n  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px);\r\n  transition: opacity var(--ua-dur-fast) var(--ua-ease), visibility var(--ua-dur-fast), transform var(--ua-dur-fast) var(--ua-ease);\r\n  z-index: 10;\r\n}\r\n.ua-nav-dropdown:hover .ua-nav-dropdown-menu,\r\n.ua-nav-dropdown:focus-within .ua-nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }\r\n.ua-nav-dropdown:hover > a svg, .ua-nav-dropdown:focus-within > a svg { transform: rotate(180deg); }\r\n\r\n.ua-nav-dgroup { padding-block: var(--ua-sp-2); border-bottom: 1px solid rgba(255,255,255,0.06); }\r\n.ua-nav-dgroup:last-child { border-bottom: 0; }\r\n.ua-nav-dlabel { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: var(--ua-sp-2) var(--ua-sp-3); }\r\n.ua-nav-dropdown-menu a {\r\n  display: block; padding: var(--ua-sp-2) var(--ua-sp-3); border-radius: var(--ua-radius-sm);\r\n  font-size: var(--ua-step--1); font-weight: 500; text-transform: none; letter-spacing: normal;\r\n  color: rgba(255,255,255,0.55); height: auto;\r\n}\r\n.ua-nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: var(--ua-brand-neutral-light); }\r\n\r\n.ua-nav-right { display: flex; align-items: center; gap: var(--ua-sp-2); flex-shrink: 0; z-index: 1; }\r\n\r\n.ua-lang-toggle {\r\n  display: flex; align-items: center; justify-content: center; line-height: 1;\r\n  width: 44px; height: 44px; border-radius: 50%;\r\n  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);\r\n  color: rgba(255,255,255,0.5); font-family: var(--ua-font-display); font-size: 1rem;\r\n  transition: color var(--ua-dur-fast) var(--ua-ease), background-color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-lang-toggle:hover, .ua-lang-toggle[aria-pressed=\"true\"] { color: var(--ua-brand-neutral-light); background: rgba(255,255,255,0.1); }\r\n\r\n.ua-nav-toggle {\r\n  display: none; width: 44px; height: 44px; border-radius: var(--ua-radius-sm);\r\n  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);\r\n  flex-direction: column; align-items: center; justify-content: center; gap: 5px;\r\n}\r\n.ua-nav-toggle span { width: 18px; height: 2px; background: var(--ua-brand-neutral-light); border-radius: 2px; transition: transform var(--ua-dur-med) var(--ua-ease), opacity var(--ua-dur-med) var(--ua-ease); }\r\n.ua-nav-toggle[aria-expanded=\"true\"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n.ua-nav-toggle[aria-expanded=\"true\"] span:nth-child(2) { opacity: 0; }\r\n.ua-nav-toggle[aria-expanded=\"true\"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n.ua-mobile-overlay {\r\n  position: fixed; inset: 0; z-index: 999;\r\n  background: var(--ua-nav-glass);\r\n  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);\r\n  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ua-sp-2);\r\n  padding: var(--ua-sp-9) var(--ua-sp-6);\r\n  opacity: 0; visibility: hidden;\r\n  transition: opacity var(--ua-dur-med) var(--ua-ease), visibility var(--ua-dur-med);\r\n}\r\n.ua-mobile-overlay[data-open=\"true\"] { opacity: 1; visibility: visible; }\r\n.ua-mobile-overlay a:not(.ua-btn) {\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: var(--ua-step-1); font-weight: 600; color: rgba(255,255,255,0.5);\r\n  padding: var(--ua-sp-4); border-radius: var(--ua-radius-md);\r\n  width: 100%; max-width: 340px; text-align: center;\r\n}\r\n.ua-mobile-overlay a:hover, .ua-mobile-overlay a.is-active { color: var(--ua-brand-neutral-light); background: rgba(255,255,255,0.06); }\r\n.ua-mobile-divider { width: 48px; height: 1px; background: rgba(255,255,255,0.1); margin-block: var(--ua-sp-2); }\r\n.ua-mobile-overlay .ua-btn { margin-top: var(--ua-sp-2); }\r\n.ua-mobile-lang {\r\n  display: flex; align-items: center; justify-content: center;\r\n  margin-top: var(--ua-sp-3); font-size: var(--ua-step--1); font-weight: 600;\r\n  color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1);\r\n  border-radius: var(--ua-radius-pill); padding: var(--ua-sp-3) var(--ua-sp-5);\r\n}\r\n\r\n@media (max-width: 960px) { .ua-nav-center a { font-size: 0.72rem; padding-inline: var(--ua-sp-3); } }\r\n@media (max-width: 768px) {\r\n  .ua-nav-wrap { padding: var(--ua-sp-3) var(--ua-sp-3) 0; }\r\n  .ua-nav { height: 60px; }\r\n  .ua-nav-center, .ua-nav-right .ua-btn, .ua-lang-toggle { display: none; }\r\n  .ua-nav-toggle { display: flex; }\r\n  .ua-nav-logo img { height: 32px; }\r\n}\r\n\r\n\/* ===== About Page ===== *\/\r\n\r\n\/* ---- About Hero ---- *\/\r\n.ua-about-hero {\r\n  position: relative; overflow: hidden;\r\n  padding-block: var(--ua-sp-12) var(--ua-sp-11) !important;\r\n  background: linear-gradient(135deg, var(--ua-ink) 0%, var(--ua-accent) 60%, var(--ua-brand-magenta) 100%);\r\n}\r\n.ua-about-hero-glow {\r\n  position: absolute; top: -120px; right: -120px; width: 560px; height: 560px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\r\n}\r\n.ua-about-hero-inner {\r\n  position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr;\r\n  gap: var(--ua-sp-10); align-items: center;\r\n}\r\n.ua-about-hero-copy h1 {\r\n  font-size: var(--ua-step-5); color: var(--ua-brand-neutral-light); letter-spacing: -0.015em; margin-block: var(--ua-sp-4);\r\n}\r\n.ua-about-hero-copy h1 em { font-style: normal; color: var(--ua-brand-blue-tint); }\r\n.ua-about-hero-lede { font-size: var(--ua-step-1); color: rgba(255,255,255,0.72); max-width: 52ch; }\r\n\r\n.ua-about-hero-card {\r\n  position: relative; border-radius: var(--ua-radius-lg); overflow: hidden;\r\n  aspect-ratio: 4 \/ 5; border: 1px solid rgba(255,255,255,0.14);\r\n  background: rgba(255,255,255,0.05);\r\n}\r\n.ua-about-hero-card img { width: 100%; height: 100%; object-fit: cover; }\r\n.ua-about-hero-card-scrim {\r\n  position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,17,42,0.75) 0%, transparent 55%);\r\n}\r\n.ua-about-hero-card-badge {\r\n  position: absolute; left: var(--ua-sp-5); right: var(--ua-sp-5); bottom: var(--ua-sp-5);\r\n  background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--ua-radius-md); padding: var(--ua-sp-4);\r\n}\r\n.ua-about-hero-card-badge-title { font-weight: 700; color: var(--ua-brand-neutral-light); }\r\n.ua-about-hero-card-badge-sub { font-size: var(--ua-step--1); color: rgba(255,255,255,0.65); margin-top: 2px; }\r\n\r\n\/* ---- Mission ---- *\/\r\n.ua-mission { padding-block: var(--ua-sp-12); background: var(--ua-surface); }\r\n.ua-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-sp-10); align-items: center; }\r\n.ua-mission-img { position: relative; border-radius: var(--ua-radius-lg); overflow: hidden; aspect-ratio: 4 \/ 3; }\r\n.ua-mission-img img { width: 100%; height: 100%; object-fit: cover; }\r\n.ua-mission-img-badge {\r\n  position: absolute; bottom: var(--ua-sp-5); right: var(--ua-sp-5);\r\n  background: var(--ua-surface); border-radius: var(--ua-radius-md); padding: var(--ua-sp-4) var(--ua-sp-5);\r\n  box-shadow: var(--ua-shadow-md);\r\n}\r\n.ua-mission-img-badge-num { font-family: var(--ua-font-display); font-size: var(--ua-step-2); color: var(--ua-accent); line-height: 1; }\r\n.ua-mission-img-badge-lbl { font-size: var(--ua-step--1); color: var(--ua-muted); margin-top: var(--ua-sp-1); }\r\n\r\n.ua-mission-text h2 { font-size: var(--ua-step-3); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-mission-text p { color: var(--ua-body); line-height: 1.8; margin-bottom: var(--ua-sp-4); }\r\n\r\n.ua-mission-values { display: flex; flex-direction: column; gap: var(--ua-sp-3); margin-top: var(--ua-sp-5); }\r\n.ua-mission-value {\r\n  display: flex; align-items: flex-start; gap: var(--ua-sp-4);\r\n  background: var(--ua-bg); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-4) var(--ua-sp-5); transition: border-color var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-mission-value:hover { border-color: transparent; box-shadow: var(--ua-shadow-sm); }\r\n.ua-mission-value-icon {\r\n  width: 44px; height: 44px; border-radius: var(--ua-radius-sm); flex-shrink: 0;\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-accent-hover)); color: var(--ua-brand-neutral-light);\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-mission-value h3 { font-size: var(--ua-step-0); margin-bottom: 2px; }\r\n.ua-mission-value p { font-size: var(--ua-step--1); color: var(--ua-muted); margin-bottom: 0; }\r\n\r\n\/* ---- Timeline ---- *\/\r\n.ua-timeline-section { padding-block: var(--ua-sp-12); background: var(--ua-bg); }\r\n.ua-timeline-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--ua-sp-10); align-items: start; }\r\n.ua-timeline-heading { font-size: var(--ua-step-3); letter-spacing: -0.02em; margin-bottom: var(--ua-sp-8); }\r\n\r\n.ua-timeline { position: relative; padding-left: var(--ua-sp-7); list-style: none; }\r\n.ua-timeline::before {\r\n  content: \"\"; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;\r\n  background: linear-gradient(to bottom, var(--ua-accent), var(--ua-brand-rose));\r\n}\r\n.ua-timeline-item { position: relative; padding-left: var(--ua-sp-5); margin-bottom: var(--ua-sp-7); }\r\n.ua-timeline-item:last-child { margin-bottom: 0; }\r\n.ua-timeline-item::before {\r\n  content: \"\"; position: absolute; left: calc(-1 * var(--ua-sp-7) + 2px); top: 4px;\r\n  width: 12px; height: 12px; border-radius: 50%; background: var(--ua-accent);\r\n  box-shadow: 0 0 0 4px var(--ua-bg), 0 0 0 5px var(--ua-line);\r\n}\r\n.ua-timeline-year { font-size: var(--ua-step--1); font-weight: 800; color: var(--ua-brand-rose); letter-spacing: 0.04em; margin-bottom: var(--ua-sp-2); }\r\n.ua-timeline-item h3 { font-size: var(--ua-step-1); margin-bottom: var(--ua-sp-2); }\r\n.ua-timeline-item p { font-size: var(--ua-step--1); color: var(--ua-muted); line-height: 1.7; }\r\n\r\n.ua-timeline-aside { display: flex; flex-direction: column; gap: var(--ua-sp-5); margin-top: var(--ua-sp-9); }\r\n.ua-name-card {\r\n  background: linear-gradient(135deg, var(--ua-ink) 0%, var(--ua-ink-soft) 100%);\r\n  border-radius: var(--ua-radius-lg); padding: var(--ua-sp-7);\r\n}\r\n.ua-name-card h3 { font-size: var(--ua-step-2); color: var(--ua-brand-neutral-light); margin-block: var(--ua-sp-3); }\r\n.ua-name-card p { font-size: var(--ua-step--1); color: rgba(255,255,255,0.68); line-height: 1.8; }\r\n\r\n.ua-stat-card { background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-lg); padding: var(--ua-sp-7); }\r\n.ua-stat-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-sp-5); text-align: center; }\r\n.ua-stat-card-num { font-family: var(--ua-font-display); font-size: var(--ua-step-3); color: var(--ua-accent); line-height: 1; }\r\n.ua-stat-card-lbl { font-size: var(--ua-step--1); color: var(--ua-muted); font-weight: 600; margin-top: var(--ua-sp-1); }\r\n\r\n\/* ---- About Page: Teachers ---- *\/\r\n.ua-about-teachers { padding-block: var(--ua-sp-12); background: var(--ua-surface); }\r\n.ua-about-teacher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ua-sp-6); }\r\n.ua-about-teacher-card {\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  overflow: hidden; transition: transform var(--ua-dur-med) var(--ua-ease), box-shadow var(--ua-dur-med) var(--ua-ease);\r\n}\r\n.ua-about-teacher-card:hover { transform: translateY(-6px); box-shadow: var(--ua-shadow-glow); border-color: transparent; }\r\n\r\n.ua-about-teacher-photo { position: relative; height: 260px; overflow: hidden; }\r\n.ua-about-teacher-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ua-ease); }\r\n.ua-about-teacher-photo-placeholder {\r\n  width: 100%; height: 100%;\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-brand-magenta));\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-about-teacher-photo-placeholder span {\r\n  font-family: var(--ua-font-display); font-size: var(--ua-step-3); font-weight: 700; color: rgba(255,255,255,0.85);\r\n}\r\n.ua-about-teacher-card:hover .ua-about-teacher-photo img { transform: scale(1.05); }\r\n.ua-about-teacher-photo::after {\r\n  content: \"\"; position: absolute; inset: 0;\r\n  background: linear-gradient(to top, rgba(28,17,42,0.85) 0%, rgba(28,17,42,0.1) 55%, transparent 100%);\r\n}\r\n.ua-about-teacher-badge {\r\n  position: absolute; top: var(--ua-sp-4); left: var(--ua-sp-4); z-index: 1;\r\n  background: var(--ua-accent); color: var(--ua-brand-neutral-light); font-size: 0.68rem; font-weight: 800;\r\n  padding: var(--ua-sp-1) var(--ua-sp-3); border-radius: var(--ua-radius-pill);\r\n}\r\n.ua-about-teacher-name-ovl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--ua-sp-5); }\r\n.ua-about-teacher-name-ovl h3 { font-size: var(--ua-step-1); color: var(--ua-brand-neutral-light); }\r\n.ua-about-teacher-name-ovl p { font-size: var(--ua-step--1); color: rgba(255,255,255,0.65); margin-top: 2px; }\r\n\r\n.ua-about-teacher-body { padding: var(--ua-sp-5); }\r\n.ua-about-teacher-creds { display: flex; flex-direction: column; gap: var(--ua-sp-2); margin-bottom: var(--ua-sp-4); list-style: none; }\r\n.ua-about-teacher-creds li { display: flex; align-items: center; gap: var(--ua-sp-2); font-size: var(--ua-step--1); color: var(--ua-muted); }\r\n.ua-about-teacher-cred-icon {\r\n  width: 22px; height: 22px; border-radius: var(--ua-radius-sm); flex-shrink: 0;\r\n  background: var(--ua-accent-tint); color: var(--ua-accent);\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-about-teacher-tags { display: flex; gap: var(--ua-sp-2); flex-wrap: wrap; }\r\n.ua-about-teacher-tag {\r\n  background: var(--ua-bg); color: var(--ua-accent); font-size: 0.68rem; font-weight: 700;\r\n  padding: var(--ua-sp-1) var(--ua-sp-3); border-radius: var(--ua-radius-pill);\r\n}\r\n.ua-about-teachers-cta { text-align: center; margin-top: var(--ua-sp-8); }\r\n\r\n\/* ---- About Page: Methodology ---- *\/\r\n.ua-about-methodology { padding-block: var(--ua-sp-12); background: var(--ua-bg); }\r\n.ua-about-methodology-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--ua-sp-10); align-items: start; }\r\n.ua-about-methodology h2 { font-size: var(--ua-step-3); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-about-methodology-lede { color: var(--ua-body); line-height: 1.8; margin-bottom: var(--ua-sp-6); }\r\n\r\n.ua-pillar-list { display: flex; flex-direction: column; gap: var(--ua-sp-4); }\r\n.ua-pillar {\r\n  display: flex; gap: var(--ua-sp-4); align-items: flex-start;\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-5); transition: border-color var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-pillar:hover { border-color: transparent; box-shadow: var(--ua-shadow-sm); }\r\n.ua-pillar-icon {\r\n  width: 46px; height: 46px; border-radius: var(--ua-radius-sm); flex-shrink: 0;\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-accent-hover)); color: var(--ua-brand-neutral-light);\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-pillar h3 { font-size: var(--ua-step-0); margin-bottom: var(--ua-sp-1); }\r\n.ua-pillar p { font-size: var(--ua-step--1); color: var(--ua-muted); line-height: 1.6; }\r\n\r\n.ua-about-methodology-aside { display: flex; flex-direction: column; gap: var(--ua-sp-5); }\r\n.ua-azhar-card {\r\n  background: linear-gradient(135deg, var(--ua-ink), var(--ua-ink-soft));\r\n  border-radius: var(--ua-radius-lg); padding: var(--ua-sp-8); color: var(--ua-brand-neutral-light);\r\n}\r\n.ua-azhar-card-num { font-family: var(--ua-font-display); font-size: var(--ua-step-4); color: var(--ua-brand-mauve-tint); line-height: 1; margin-bottom: var(--ua-sp-2); }\r\n.ua-azhar-card h3 { font-size: var(--ua-step-2); color: var(--ua-brand-neutral-light); margin-bottom: var(--ua-sp-3); }\r\n.ua-azhar-card > p { font-size: var(--ua-step--1); color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: var(--ua-sp-5); }\r\n.ua-azhar-certs { display: flex; flex-direction: column; gap: var(--ua-sp-3); list-style: none; }\r\n.ua-azhar-certs li {\r\n  display: flex; align-items: center; gap: var(--ua-sp-3);\r\n  background: rgba(255,255,255,0.08); border-radius: var(--ua-radius-sm);\r\n  padding: var(--ua-sp-3) var(--ua-sp-4); font-size: var(--ua-step--1); font-weight: 600; color: rgba(255,255,255,0.8);\r\n}\r\n.ua-azhar-certs li span { flex-shrink: 0; color: var(--ua-brand-mauve-tint); }\r\n\r\n.ua-cert-preview-card { background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-lg); padding: var(--ua-sp-7); }\r\n.ua-cert-preview-placeholder {\r\n  width: 100%; height: 160px; border-radius: var(--ua-radius-md); margin-bottom: var(--ua-sp-5);\r\n  background: var(--ua-bg); color: var(--ua-accent);\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-cert-preview-card h4 { font-size: var(--ua-step-1); margin-bottom: var(--ua-sp-2); }\r\n.ua-cert-preview-card p { font-size: var(--ua-step--1); color: var(--ua-muted); line-height: 1.7; }\r\n\r\n\/* ---- About Page: CTA ---- *\/\r\n.ua-about-cta { padding-block: var(--ua-sp-11); background: linear-gradient(135deg, var(--ua-ink), var(--ua-brand-magenta)); }\r\n.ua-about-cta-inner { text-align: center; }\r\n.ua-about-cta h2 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-about-cta p { font-size: var(--ua-step-1); color: rgba(255,255,255,0.65); max-width: 46ch; margin-inline: auto; margin-bottom: var(--ua-sp-7); }\r\n.ua-about-cta-actions { display: flex; gap: var(--ua-sp-4); justify-content: center; flex-wrap: wrap; }\r\n\r\n\/* ---- About Page: Responsive ---- *\/\r\n@media (max-width: 1024px) {\r\n  .ua-about-hero-inner { grid-template-columns: 1fr; }\r\n  .ua-about-hero-visual { max-width: 380px; margin-inline: auto; width: 100%; }\r\n  .ua-mission-grid, .ua-timeline-grid, .ua-about-methodology-grid { grid-template-columns: 1fr; }\r\n  .ua-timeline-aside { margin-top: 0; }\r\n  .ua-about-teacher-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 640px) {\r\n  .ua-about-teacher-grid { grid-template-columns: 1fr; }\r\n  .ua-about-cta-actions { flex-direction: column; align-items: stretch; }\r\n  .ua-stat-card-grid { gap: var(--ua-sp-4); }\r\n}\r\n\r\n\/* ===== Blog Page ===== *\/\r\n.ua-blog-hero { padding-block: var(--ua-sp-11) var(--ua-sp-9) !important; background: var(--ua-bg); }\r\n\r\n.ua-blog-listing { padding-block: 0 var(--ua-sp-12); background: var(--ua-bg); }\r\n\r\n.ua-blog-toolbar {\r\n  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;\r\n  gap: var(--ua-sp-5); margin-bottom: var(--ua-sp-8);\r\n}\r\n.ua-blog-search {\r\n  display: flex; align-items: center; gap: var(--ua-sp-3);\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-pill);\r\n  padding: var(--ua-sp-3) var(--ua-sp-5); flex: 1 1 280px; max-width: 360px;\r\n  color: var(--ua-muted);\r\n}\r\n.ua-blog-search input {\r\n  border: 0; outline: 0; background: none; font: inherit; color: var(--ua-ink); width: 100%;\r\n}\r\n.ua-blog-search input::placeholder { color: var(--ua-muted); }\r\n\r\n.ua-blog-filters { display: flex; gap: var(--ua-sp-2); flex-wrap: wrap; }\r\n.ua-filter-pill {\r\n  padding: 0.55em 1.2em; border-radius: var(--ua-radius-pill); border: 1px solid var(--ua-line);\r\n  font-size: var(--ua-step--1); font-weight: 600; color: var(--ua-muted);\r\n  transition: border-color var(--ua-dur-fast) var(--ua-ease), color var(--ua-dur-fast) var(--ua-ease), background-color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-filter-pill:hover { border-color: var(--ua-ink); color: var(--ua-ink); }\r\n.ua-filter-pill.is-active { background: var(--ua-ink); border-color: var(--ua-ink); color: var(--ua-brand-neutral-light); }\r\n\r\n.ua-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ua-sp-6); }\r\n.ua-blog-card {\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-6); display: flex; flex-direction: column;\r\n  transition: transform var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-blog-card:hover { transform: translateY(-4px); box-shadow: var(--ua-shadow-md); }\r\n\r\n.ua-blog-card-thumb {\r\n  width: 48px; height: 48px; border-radius: var(--ua-radius-sm);\r\n  background: var(--ua-accent-tint); color: var(--ua-accent);\r\n  display: flex; align-items: center; justify-content: center; margin-bottom: var(--ua-sp-5);\r\n}\r\n.ua-blog-card-cat {\r\n  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;\r\n  color: var(--ua-accent); margin-bottom: var(--ua-sp-2);\r\n}\r\n.ua-blog-card-title { font-size: var(--ua-step-1); margin-bottom: var(--ua-sp-3); }\r\n.ua-blog-card-excerpt { font-size: var(--ua-step--1); color: var(--ua-body); line-height: 1.7; flex-grow: 1; margin-bottom: var(--ua-sp-4); }\r\n.ua-blog-card-meta { display: flex; align-items: center; gap: var(--ua-sp-2); font-size: 0.75rem; color: var(--ua-muted); margin-bottom: var(--ua-sp-4); }\r\n.ua-blog-card-link {\r\n  display: inline-flex; align-items: center; gap: var(--ua-sp-2);\r\n  font-weight: 600; font-size: var(--ua-step--1); color: var(--ua-ink);\r\n  transition: color var(--ua-dur-fast) var(--ua-ease), gap var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-blog-card-link:hover { color: var(--ua-accent); gap: var(--ua-sp-3); }\r\n\r\n@media (max-width: 860px) {\r\n  .ua-blog-grid { grid-template-columns: 1fr; }\r\n  .ua-blog-toolbar { flex-direction: column; align-items: stretch; }\r\n  .ua-blog-search { max-width: 100%; }\r\n}\r\n\r\n\/* ===== FAQ Page =====\r\n   .ua-faq-item here uses native <details>\/<summary> \u2014 zero JS needed\r\n   for the accordion, and the \"name\" attribute on each <details> (in\r\n   the HTML) gives native exclusive-open behavior in modern browsers,\r\n   degrading gracefully to \"more than one can be open\" in older ones. *\/\r\n.ua-faq-page-hero { padding-block: var(--ua-sp-11) var(--ua-sp-9) !important; background: var(--ua-bg); }\r\n.ua-faq-page { padding-block: 0 var(--ua-sp-12); background: var(--ua-bg); }\r\n\r\n.ua-faq-page-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--ua-sp-9); align-items: start; }\r\n\r\n.ua-faq-page-toc {\r\n  position: sticky; top: calc(72px + var(--ua-sp-6));\r\n  display: flex; flex-direction: column; gap: var(--ua-sp-1);\r\n}\r\n.ua-faq-page-toc a {\r\n  padding: var(--ua-sp-2) var(--ua-sp-4); border-radius: var(--ua-radius-sm);\r\n  font-size: var(--ua-step--1); font-weight: 600; color: var(--ua-muted);\r\n  transition: background-color var(--ua-dur-fast) var(--ua-ease), color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-faq-page-toc a:hover { background: var(--ua-surface); color: var(--ua-ink); }\r\n\r\n.ua-faq-category { margin-bottom: var(--ua-sp-9); scroll-margin-top: calc(72px + var(--ua-sp-5)); }\r\n.ua-faq-category:last-child { margin-bottom: 0; }\r\n.ua-faq-category h2 { font-size: var(--ua-step-2); letter-spacing: -0.01em; margin-bottom: var(--ua-sp-4); }\r\n\r\n.ua-faq-item {\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-5); margin-bottom: var(--ua-sp-3);\r\n}\r\n.ua-faq-item:last-child { margin-bottom: 0; }\r\n.ua-faq-item summary {\r\n  cursor: pointer; list-style: none; font-weight: 600; color: var(--ua-ink); font-size: var(--ua-step-0);\r\n  display: flex; align-items: center; justify-content: space-between; gap: var(--ua-sp-4);\r\n}\r\n.ua-faq-item summary::-webkit-details-marker { display: none; }\r\n.ua-faq-item summary::after {\r\n  content: \"\"; flex-shrink: 0; width: 18px; height: 18px;\r\n  background: currentColor; color: var(--ua-muted);\r\n  -webkit-mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\r\n  mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\r\n  transition: transform var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-faq-item[open] summary::after { transform: rotate(180deg); }\r\n.ua-faq-item p { padding-top: var(--ua-sp-4); color: var(--ua-body); line-height: 1.7; max-width: 68ch; }\r\n\r\n@media (max-width: 860px) {\r\n  .ua-faq-page-grid { grid-template-columns: 1fr; }\r\n  .ua-faq-page-toc {\r\n    position: static; flex-direction: row; overflow-x: auto; gap: var(--ua-sp-2);\r\n    padding-bottom: var(--ua-sp-2); margin-bottom: var(--ua-sp-2);\r\n  }\r\n  .ua-faq-page-toc a { flex-shrink: 0; white-space: nowrap; }\r\n}\r\n\r\n\r\n\/* ===== Teachers Page v2 (replaces the earlier simpler grid) ===== *\/\r\n\r\n\/* ---- Hero ---- *\/\r\n.ua-teachers-hero {\r\n  position: relative; overflow: hidden; padding-block: var(--ua-sp-12) var(--ua-sp-10) !important;\r\n  background: linear-gradient(160deg, var(--ua-ink) 0%, var(--ua-brand-primary) 62%, var(--ua-brand-indigo) 100%);\r\n}\r\n.ua-teachers-hero-texture {\r\n  position: absolute; inset: 0; opacity: 0.5;\r\n  background-image:\r\n    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 46px),\r\n    repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 46px);\r\n}\r\n.ua-teachers-hero-glow {\r\n  position: absolute; top: -140px; right: -100px; width: 520px; height: 520px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(206,179,193,0.16) 0%, transparent 70%);\r\n}\r\n.ua-teachers-hero-grid {\r\n  position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr;\r\n  gap: var(--ua-sp-10); align-items: center;\r\n}\r\n.ua-teachers-hero-copy h1 {\r\n  font-size: var(--ua-step-4); letter-spacing: -0.015em; color: var(--ua-brand-neutral-light);\r\n  text-shadow: 0 2px 24px rgba(0,0,0,0.25); margin-block: var(--ua-sp-5);\r\n}\r\n.ua-teachers-hero-copy h1 em { font-style: normal; color: var(--ua-brand-lavender-tint); }\r\n.ua-teachers-hero-lede { font-size: var(--ua-step-1); color: rgba(250,250,249,0.78); max-width: 48ch; margin-bottom: var(--ua-sp-8); }\r\n.ua-teachers-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ua-sp-4); margin-bottom: var(--ua-sp-9); }\r\n\r\n.ua-teachers-hero-stats {\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ua-sp-5);\r\n  border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--ua-sp-6);\r\n}\r\n\/* Overrides for the reused .ua-trust-item\/.ua-trust-num pattern on this\r\n   dark background \u2014 the base Trust Bar styling assumes a light card. *\/\r\n.ua-teachers-hero-stats .ua-trust-item { text-align: left; }\r\n.ua-trust-num--on-dark { color: var(--ua-brand-neutral-light) !important; }\r\n.ua-teachers-hero-stat-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: var(--ua-sp-1); }\r\n\r\n.ua-teachers-hero-visual { position: relative; }\r\n.ua-teachers-hero-portrait {\r\n  position: relative; aspect-ratio: 4 \/ 5; border-radius: var(--ua-radius-lg); overflow: hidden;\r\n  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 28px 56px rgba(0,0,0,0.28);\r\n  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35);\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-teachers-hero-badge {\r\n  position: absolute; background: rgba(255,255,255,0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);\r\n  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-3) var(--ua-sp-4); box-shadow: 0 16px 32px rgba(0,0,0,0.2);\r\n}\r\n.ua-teachers-hero-badge-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ua-brand-lavender-tint); }\r\n.ua-teachers-hero-badge-title { font-size: var(--ua-step-0); font-weight: 700; color: var(--ua-brand-neutral-light); margin-top: 2px; }\r\n.ua-teachers-hero-badge--top { top: 36px; left: -28px; }\r\n.ua-teachers-hero-badge--bottom { bottom: 44px; right: -24px; }\r\n\r\n\/* ---- Why Different ---- *\/\r\n.ua-teachers-why { padding-block: var(--ua-sp-12); background: var(--ua-surface); }\r\n.ua-teachers-why-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--ua-sp-6); }\r\n.ua-teachers-why-feature {\r\n  background: linear-gradient(160deg, var(--ua-ink), var(--ua-ink-soft));\r\n  border-radius: var(--ua-radius-lg); padding: var(--ua-sp-9); color: var(--ua-brand-neutral-light);\r\n}\r\n.ua-teachers-why-feature-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ua-brand-lavender-tint); margin-bottom: var(--ua-sp-5); }\r\n.ua-teachers-why-feature h3 { font-size: var(--ua-step-2); color: var(--ua-brand-neutral-light); margin-bottom: var(--ua-sp-4); max-width: 22ch; }\r\n.ua-teachers-why-feature p { font-size: var(--ua-step-0); color: rgba(255,255,255,0.68); line-height: 1.75; max-width: 44ch; }\r\n.ua-teachers-why-stack { display: flex; flex-direction: column; gap: var(--ua-sp-6); }\r\n.ua-teachers-why-stack .ua-why-card { flex: 1; }\r\n\r\n\/* ---- Philosophy ---- *\/\r\n.ua-teachers-philosophy { position: relative; padding-block: var(--ua-sp-12); background: var(--ua-ink); overflow: hidden; }\r\n.ua-teachers-philosophy-texture {\r\n  position: absolute; inset: 0; opacity: 0.4;\r\n  background-image:\r\n    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 46px),\r\n    repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 46px);\r\n}\r\n.ua-teachers-philosophy-inner { position: relative; max-width: 880px; text-align: center; }\r\n.ua-teachers-quote-mark { font-family: var(--ua-font-display); font-size: 5rem; line-height: 1; color: var(--ua-brand-magenta); opacity: 0.5; margin-bottom: -8px; }\r\n.ua-teachers-quote { font-family: var(--ua-font-display); font-size: var(--ua-step-3); line-height: 1.5; color: var(--ua-brand-neutral-light); margin-bottom: var(--ua-sp-6); }\r\n.ua-teachers-quote-attr { font-size: var(--ua-step--1); font-weight: 600; color: var(--ua-brand-lavender-tint); letter-spacing: 0.02em; }\r\n\r\n.ua-teachers-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ua-sp-6); margin-top: var(--ua-sp-10); text-align: left; }\r\n.ua-teachers-pillar-num { font-family: var(--ua-font-display); font-size: var(--ua-step-1); color: var(--ua-brand-mauve-tint); margin-bottom: var(--ua-sp-3); }\r\n.ua-teachers-pillar h3 { font-size: var(--ua-step-0); color: var(--ua-brand-neutral-light); margin-bottom: var(--ua-sp-2); }\r\n.ua-teachers-pillar p { font-size: 0.92rem; color: rgba(255,255,255,0.6); line-height: 1.7; }\r\n\r\n\/* ---- Featured Faculty (alternating split layout) ---- *\/\r\n.ua-teachers-featured { padding-block: var(--ua-sp-12) var(--ua-sp-6); background: var(--ua-surface); }\r\n.ua-teacher-split {\r\n  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--ua-sp-9); align-items: center;\r\n  margin-bottom: var(--ua-sp-11);\r\n}\r\n.ua-teacher-split:last-child { margin-bottom: 0; }\r\n.ua-teacher-split--reverse { grid-template-columns: 1.15fr 0.85fr; }\r\n.ua-teacher-split--reverse .ua-teacher-split-visual { order: 2; }\r\n\r\n.ua-teacher-split-portrait {\r\n  position: relative; aspect-ratio: 4 \/ 5; border-radius: var(--ua-radius-lg); overflow: hidden;\r\n  box-shadow: var(--ua-shadow-glow);\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-brand-magenta));\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-teacher-split-portrait span { font-family: var(--ua-font-display); font-size: var(--ua-step-4); font-weight: 700; color: rgba(255,255,255,0.85); }\r\n.ua-teacher-split-portrait--sm { box-shadow: var(--ua-shadow-md); border-radius: var(--ua-radius-md); }\r\n\r\n.ua-teacher-split-badge {\r\n  display: inline-block; background: var(--ua-accent-tint); color: var(--ua-accent);\r\n  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;\r\n  padding: var(--ua-sp-2) var(--ua-sp-4); border-radius: var(--ua-radius-pill); margin-bottom: var(--ua-sp-5);\r\n}\r\n.ua-teacher-split-badge--solid { background: var(--ua-accent); color: var(--ua-brand-neutral-light); }\r\n.ua-teacher-split-body h3 { font-size: var(--ua-step-3); margin-bottom: var(--ua-sp-1); }\r\n.ua-teacher-split-subject { font-size: var(--ua-step-0); font-weight: 600; color: var(--ua-accent); margin-bottom: var(--ua-sp-5); }\r\n.ua-teacher-split-bio { font-size: var(--ua-step-0); color: var(--ua-body); line-height: 1.8; margin-bottom: var(--ua-sp-5); }\r\n.ua-teacher-split-tags { display: flex; flex-wrap: wrap; gap: var(--ua-sp-3); list-style: none; margin-bottom: var(--ua-sp-6); }\r\n.ua-teacher-split-tags li {\r\n  display: flex; align-items: center; gap: var(--ua-sp-2); font-size: var(--ua-step--1); font-weight: 600; color: var(--ua-ink);\r\n  background: var(--ua-bg); border: 1px solid var(--ua-line); padding: var(--ua-sp-2) var(--ua-sp-4); border-radius: var(--ua-radius-pill);\r\n}\r\n.ua-teacher-split-tags li svg { color: var(--ua-verified); flex-shrink: 0; }\r\n\r\n\/* ---- Selection Process ---- *\/\r\n.ua-teachers-process { padding-block: var(--ua-sp-12); background: var(--ua-bg); }\r\n.ua-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ua-sp-6); position: relative; }\r\n.ua-process-line { position: absolute; top: 23px; left: 12%; right: 12%; height: 1px; background: var(--ua-line); display: none; }\r\n.ua-process-step { position: relative; }\r\n.ua-process-num {\r\n  width: 46px; height: 46px; border-radius: 50%; background: var(--ua-surface); border: 1px solid var(--ua-line);\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-family: var(--ua-font-display); font-weight: 700; color: var(--ua-accent); margin-bottom: var(--ua-sp-5);\r\n  position: relative; z-index: 1;\r\n}\r\n.ua-process-step h3 { font-size: var(--ua-step-0); margin-bottom: var(--ua-sp-2); }\r\n.ua-process-step p { font-size: var(--ua-step--1); color: var(--ua-body); line-height: 1.7; }\r\n\r\n\/* ---- CTA ---- *\/\r\n.ua-teachers-cta { padding-block: var(--ua-sp-11); background: linear-gradient(135deg, var(--ua-ink), var(--ua-brand-magenta)); text-align: center; }\r\n.ua-teachers-cta-inner { max-width: 640px; }\r\n.ua-teachers-cta h2 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.02em; margin-bottom: var(--ua-sp-5); }\r\n.ua-teachers-cta p { font-size: var(--ua-step-1); color: rgba(255,255,255,0.7); margin-bottom: var(--ua-sp-8); }\r\n.ua-teachers-cta-actions { display: flex; gap: var(--ua-sp-4); justify-content: center; flex-wrap: wrap; }\r\n\r\n\/* ---- Responsive ---- *\/\r\n@media (min-width: 900px) { .ua-process-line { display: block; } }\r\n@media (max-width: 900px) {\r\n  .ua-teachers-hero-grid { grid-template-columns: 1fr; }\r\n  .ua-teachers-hero-visual { max-width: 420px; margin-inline: auto; width: 100%; }\r\n  .ua-teachers-why-grid { grid-template-columns: 1fr; }\r\n  .ua-teachers-pillars { grid-template-columns: 1fr; gap: var(--ua-sp-7); }\r\n  .ua-teacher-split, .ua-teacher-split--reverse { grid-template-columns: 1fr; }\r\n  .ua-teacher-split--reverse .ua-teacher-split-visual { order: -1; }\r\n  .ua-teacher-split-visual { max-width: 420px; margin-inline: auto; width: 100%; order: -1; }\r\n  .ua-process-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--ua-sp-7); }\r\n}\r\n@media (max-width: 640px) {\r\n  .ua-teachers-hero-stats { grid-template-columns: repeat(2, 1fr); }\r\n  .ua-process-grid { grid-template-columns: 1fr; }\r\n}\r\n\r\n\/* ===== Footer ===== *\/\r\n.ua-footer { background: var(--ua-ink); color: rgba(250,250,249,0.68); padding-top: var(--ua-sp-11); }\r\n.ua-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--ua-sp-8); padding-bottom: var(--ua-sp-9); border-bottom: 1px solid var(--ua-line-dark); }\r\n.ua-footer-brand p { margin-block: var(--ua-sp-4); max-width: 34ch; font-size: var(--ua-step--1); }\r\n.ua-footer .ua-brand-word { color: var(--ua-brand-neutral-light); font-family: var(--ua-font-display); font-weight: 700; font-size: var(--ua-step-1); }\r\n.ua-footer .ua-brand { display: inline-flex; align-items: center; gap: var(--ua-sp-2); }\r\n.ua-footer .ua-brand-mark { color: var(--ua-brand-mauve-tint); }\r\n.ua-footer-cert { display: flex; align-items: center; gap: var(--ua-sp-2); font-size: var(--ua-step--1); color: var(--ua-brand-mauve-tint); font-weight: 600; }\r\n.ua-footer-col h2 { font-size: var(--ua-step--1); color: var(--ua-brand-neutral-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--ua-sp-4); }\r\n.ua-footer-col ul { display: flex; flex-direction: column; gap: var(--ua-sp-3); list-style: none; }\r\n.ua-footer-col a { font-size: var(--ua-step--1); transition: color var(--ua-dur-fast) var(--ua-ease); }\r\n.ua-footer-col a:hover { color: var(--ua-brand-neutral-light); }\r\n.ua-footer-contact li { font-size: var(--ua-step--1); }\r\n.ua-footer-bottom { padding-block: var(--ua-sp-6); text-align: center; font-size: var(--ua-step--1); }\r\n\r\n\/* ===== Shared form system (Career \/ Contact) ===== *\/\r\n.ua-form-group--full { grid-column: 1 \/ -1; }\r\n.ua-form-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ua-ink); margin-bottom: var(--ua-sp-2); }\r\n.ua-form-input, .ua-form-select, .ua-form-textarea {\r\n  width: 100%; padding: var(--ua-sp-3) var(--ua-sp-4); border-radius: var(--ua-radius-sm);\r\n  border: 2px solid var(--ua-line); background: var(--ua-surface);\r\n  font: inherit; font-size: var(--ua-step--1); color: var(--ua-ink); outline: none;\r\n  transition: border-color var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-form-input:focus, .ua-form-select:focus, .ua-form-textarea:focus {\r\n  border-color: var(--ua-accent); box-shadow: 0 0 0 4px var(--ua-accent-tint);\r\n}\r\n.ua-form-textarea { resize: vertical; min-height: 100px; }\r\n.ua-form-select { appearance: none; cursor: pointer; }\r\n.ua-form-note { font-size: 0.72rem; color: var(--ua-muted); text-align: center; margin-top: var(--ua-sp-4); line-height: 1.6; }\r\n\r\n\/* ===== Career Page ===== *\/\r\n.ua-career-hero { position: relative; overflow: hidden; padding-block: var(--ua-sp-12) var(--ua-sp-10) !important; }\r\n.ua-career-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.14; }\r\n.ua-career-hero-bg::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(135deg, var(--ua-ink) 0%, var(--ua-accent) 60%, var(--ua-brand-magenta) 100%); opacity: 0.9; }\r\n.ua-career-hero { background: linear-gradient(135deg, var(--ua-ink) 0%, var(--ua-accent) 60%, var(--ua-brand-magenta) 100%); }\r\n.ua-career-hero .ua-section-head h1 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.015em; margin-block: var(--ua-sp-4); }\r\n.ua-career-hero .ua-section-head-lede { color: rgba(255,255,255,0.72); }\r\n.ua-career-hero-glow { position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%); }\r\n.ua-career-hero-actions { display: flex; gap: var(--ua-sp-4); justify-content: center; flex-wrap: wrap; margin-top: var(--ua-sp-6); position: relative; z-index: 1; }\r\n\r\n.ua-career-why { padding-block: var(--ua-sp-12); background: var(--ua-surface); }\r\n.ua-career-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ua-sp-6); }\r\n\r\n.ua-career-req { padding-block: var(--ua-sp-12); background: var(--ua-bg); }\r\n.ua-career-req-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--ua-sp-9); align-items: start; }\r\n.ua-career-req h2 { font-size: var(--ua-step-3); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-career-req-lede { color: var(--ua-body); margin-bottom: var(--ua-sp-6); }\r\n.ua-career-req-list { display: flex; flex-direction: column; gap: var(--ua-sp-3); list-style: none; }\r\n.ua-career-req-item {\r\n  display: flex; gap: var(--ua-sp-4); align-items: flex-start;\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-4) var(--ua-sp-5); transition: border-color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-career-req-item:hover { border-color: var(--ua-accent); }\r\n.ua-career-req-icon {\r\n  width: 40px; height: 40px; border-radius: var(--ua-radius-sm); flex-shrink: 0;\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-accent-hover)); color: var(--ua-brand-neutral-light);\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.ua-career-req-item h4 { font-size: var(--ua-step-0); margin-bottom: 2px; }\r\n.ua-career-req-item p { font-size: var(--ua-step--1); color: var(--ua-muted); }\r\n\r\n.ua-career-openings {\r\n  background: linear-gradient(160deg, var(--ua-ink), var(--ua-ink-soft)); border-radius: var(--ua-radius-lg);\r\n  padding: var(--ua-sp-8);\r\n}\r\n.ua-career-openings-eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ua-brand-mauve-tint); margin-bottom: var(--ua-sp-5); }\r\n.ua-career-opening { background: rgba(255,255,255,0.08); border-radius: var(--ua-radius-sm); padding: var(--ua-sp-4) var(--ua-sp-5); margin-bottom: var(--ua-sp-3); }\r\n.ua-career-opening:last-child { margin-bottom: 0; }\r\n.ua-career-opening-title { font-size: var(--ua-step-0); font-weight: 700; color: var(--ua-brand-neutral-light); margin-bottom: 2px; }\r\n.ua-career-opening-sub { font-size: 0.78rem; color: rgba(255,255,255,0.55); }\r\n\r\n.ua-career-process { padding-block: var(--ua-sp-12); background: var(--ua-surface); }\r\n.ua-career-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ua-sp-6); }\r\n.ua-career-process-card {\r\n  background: var(--ua-bg); border-radius: var(--ua-radius-md); padding: var(--ua-sp-6); text-align: center;\r\n  transition: transform var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-career-process-card:hover { transform: translateY(-4px); box-shadow: var(--ua-shadow-sm); }\r\n.ua-career-process-card .ua-process-num { margin-inline: auto; }\r\n.ua-career-process-card h3 { font-size: var(--ua-step-0); margin-block: var(--ua-sp-3) var(--ua-sp-2); }\r\n.ua-career-process-card p { font-size: var(--ua-step--1); color: var(--ua-muted); line-height: 1.7; }\r\n\r\n.ua-career-apply { padding-block: var(--ua-sp-12); background: var(--ua-bg); }\r\n.ua-career-apply-card {\r\n  background: linear-gradient(135deg, var(--ua-accent-tint), var(--ua-brand-blush-tint));\r\n  border: 1px solid var(--ua-line); border-radius: var(--ua-radius-lg); padding: var(--ua-sp-9);\r\n}\r\n.ua-career-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-sp-5); }\r\n\r\n@media (max-width: 1024px) {\r\n  .ua-career-why-grid { grid-template-columns: repeat(2, 1fr); }\r\n  .ua-career-req-grid { grid-template-columns: 1fr; }\r\n  .ua-career-process-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 640px) {\r\n  .ua-career-why-grid, .ua-career-process-grid, .ua-career-form { grid-template-columns: 1fr; }\r\n  .ua-career-apply-card { padding: var(--ua-sp-6); }\r\n}\r\n\r\n\/* ===== Contact Page ===== *\/\r\n.ua-contact { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 100vh; padding-top: 88px !important; }\r\n.ua-contact-left {\r\n  position: relative; overflow: hidden; padding: var(--ua-sp-11) var(--ua-sp-9);\r\n  background: linear-gradient(135deg, var(--ua-ink), var(--ua-accent), var(--ua-brand-magenta));\r\n  display: flex; flex-direction: column; justify-content: center;\r\n}\r\n.ua-contact-left-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.08; }\r\n.ua-contact-left > * { position: relative; z-index: 1; }\r\n.ua-contact-left h1 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.015em; margin-block: var(--ua-sp-4); }\r\n.ua-contact-lede { font-size: var(--ua-step-0); color: rgba(255,255,255,0.68); max-width: 42ch; margin-bottom: var(--ua-sp-8); }\r\n\r\n.ua-contact-channels { display: flex; flex-direction: column; gap: var(--ua-sp-4); margin-bottom: var(--ua-sp-8); }\r\n.ua-contact-channel {\r\n  display: flex; align-items: center; gap: var(--ua-sp-4);\r\n  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--ua-radius-md);\r\n  padding: var(--ua-sp-4) var(--ua-sp-5); transition: background-color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-contact-channel:hover { background: rgba(255,255,255,0.1); }\r\n.ua-contact-channel--static { cursor: default; }\r\n.ua-contact-channel-icon { color: var(--ua-brand-mauve-tint); flex-shrink: 0; }\r\n.ua-contact-channel-lbl { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.4); font-weight: 700; margin-bottom: 2px; }\r\n.ua-contact-channel-val { display: block; font-size: var(--ua-step-0); color: var(--ua-brand-neutral-light); font-weight: 700; }\r\n\r\n.ua-contact-guarantees { display: flex; flex-direction: column; gap: var(--ua-sp-3); list-style: none; }\r\n.ua-contact-guarantees li { display: flex; align-items: center; gap: var(--ua-sp-2); font-size: var(--ua-step--1); color: rgba(255,255,255,0.68); }\r\n.ua-contact-guarantees li svg { color: var(--ua-brand-mauve-tint); flex-shrink: 0; }\r\n\r\n.ua-contact-right { background: var(--ua-bg); padding: var(--ua-sp-11) var(--ua-sp-9); display: flex; flex-direction: column; justify-content: center; }\r\n.ua-contact-form-title { font-size: var(--ua-step-2); margin-bottom: var(--ua-sp-2); }\r\n.ua-contact-form-subtitle { font-size: var(--ua-step--1); color: var(--ua-muted); margin-bottom: var(--ua-sp-7); line-height: 1.6; }\r\n.ua-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-sp-4); }\r\n\r\n@media (max-width: 1024px) { .ua-contact { grid-template-columns: 1fr; } .ua-contact-left, .ua-contact-right { padding: var(--ua-sp-9) var(--ua-sp-6); } }\r\n@media (max-width: 640px) { .ua-contact-form { grid-template-columns: 1fr; } }\r\n\r\n\/* ===== Courses Page ===== *\/\r\n.ua-courses-page-hero { position: relative; overflow: hidden; padding-block: var(--ua-sp-12) var(--ua-sp-9) !important; }\r\n.ua-courses-page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center right; }\r\n.ua-courses-page-hero-bg::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,13,22,0.92) 0%, rgba(21,13,22,0.68) 45%, rgba(21,13,22,0.3) 100%); }\r\n.ua-courses-page-hero .ua-section-head h1 { color: var(--ua-brand-neutral-light); font-size: var(--ua-step-4); letter-spacing: -0.015em; margin-block: var(--ua-sp-4); position: relative; z-index: 1; }\r\n.ua-courses-page-hero .ua-eyebrow, .ua-courses-page-hero .ua-section-head-lede { position: relative; z-index: 1; }\r\n.ua-courses-page-hero .ua-section-head-lede { color: rgba(255,255,255,0.72); }\r\n\r\n.ua-courses-page { padding-block: var(--ua-sp-11) var(--ua-sp-12); background: var(--ua-bg); }\r\n\r\n.ua-track-tabs { display: flex; gap: var(--ua-sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--ua-sp-9); }\r\n.ua-track-tab {\r\n  padding: var(--ua-sp-3) var(--ua-sp-5); border-radius: var(--ua-radius-pill); border: 2px solid var(--ua-line);\r\n  background: var(--ua-surface); color: var(--ua-muted); font-weight: 700; font-size: var(--ua-step--1);\r\n  transition: background-color var(--ua-dur-fast) var(--ua-ease), color var(--ua-dur-fast) var(--ua-ease), border-color var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-track-tab:hover, .ua-track-tab.is-active { background: var(--ua-accent); color: var(--ua-brand-neutral-light); border-color: var(--ua-accent); }\r\n\r\n.ua-track-section { margin-bottom: var(--ua-sp-11); scroll-margin-top: var(--ua-sp-9); }\r\n.ua-track-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-sp-9); align-items: center; margin-bottom: var(--ua-sp-8); }\r\n.ua-track-header--reverse .ua-track-header-img { order: 2; }\r\n.ua-track-header-img { position: relative; border-radius: var(--ua-radius-lg); overflow: hidden; aspect-ratio: 16 \/ 9; }\r\n.ua-track-header-img img { width: 100%; height: 100%; object-fit: cover; }\r\n.ua-track-header-badge {\r\n  position: absolute; bottom: var(--ua-sp-4); left: var(--ua-sp-4);\r\n  background: var(--ua-accent); color: var(--ua-brand-neutral-light); font-size: 0.7rem; font-weight: 800;\r\n  padding: var(--ua-sp-2) var(--ua-sp-3); border-radius: var(--ua-radius-pill);\r\n}\r\n.ua-track-header-info h2 { font-size: var(--ua-step-3); letter-spacing: -0.02em; margin-bottom: var(--ua-sp-3); }\r\n.ua-track-header-desc { color: var(--ua-body); line-height: 1.8; margin-bottom: var(--ua-sp-5); }\r\n.ua-track-features { display: flex; flex-direction: column; gap: var(--ua-sp-3); list-style: none; margin-bottom: var(--ua-sp-6); }\r\n.ua-track-features li { position: relative; padding-left: var(--ua-sp-5); font-size: var(--ua-step--1); color: var(--ua-muted); font-weight: 500; }\r\n.ua-track-features li::before { content: \"\"; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ua-accent); }\r\n\r\n.ua-courses-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ua-sp-5); }\r\n.ua-course-page-card {\r\n  background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md); overflow: hidden;\r\n  transition: transform var(--ua-dur-fast) var(--ua-ease), box-shadow var(--ua-dur-fast) var(--ua-ease);\r\n}\r\n.ua-course-page-card:hover { transform: translateY(-4px); box-shadow: var(--ua-shadow-md); }\r\n.ua-course-page-thumb { position: relative; height: 140px; }\r\n.ua-course-page-thumb img { width: 100%; height: 100%; object-fit: cover; }\r\n.ua-course-page-thumb::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,17,42,0.82) 0%, transparent 55%); }\r\n.ua-course-page-tag {\r\n  position: absolute; top: var(--ua-sp-3); left: var(--ua-sp-3); z-index: 1;\r\n  background: var(--ua-accent); color: var(--ua-brand-neutral-light); font-size: 0.65rem; font-weight: 800;\r\n  padding: var(--ua-sp-1) var(--ua-sp-3); border-radius: var(--ua-radius-pill);\r\n}\r\n.ua-course-page-title { position: absolute; left: var(--ua-sp-4); bottom: var(--ua-sp-3); z-index: 1; font-size: var(--ua-step-0); font-weight: 700; color: var(--ua-brand-neutral-light); }\r\n.ua-course-page-body { padding: var(--ua-sp-5); }\r\n.ua-course-page-desc { font-size: var(--ua-step--1); color: var(--ua-muted); line-height: 1.6; margin-bottom: var(--ua-sp-4); min-height: 3em; }\r\n.ua-course-page-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--ua-sp-4); border-top: 1px solid var(--ua-line); }\r\n.ua-course-page-price { font-size: var(--ua-step-0); font-weight: 800; color: var(--ua-accent); }\r\n\r\n.ua-track-divider { height: 2px; background: linear-gradient(90deg, var(--ua-accent), var(--ua-brand-magenta), transparent); border-radius: var(--ua-radius-pill); margin-block: var(--ua-sp-9); }\r\n\r\n.ua-courses-page-cta { padding-block: var(--ua-sp-11); background: linear-gradient(135deg, var(--ua-ink), var(--ua-brand-magenta)); text-align: center; }\r\n.ua-courses-page-cta-inner { max-width: 560px; }\r\n.ua-courses-page-cta h2 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-courses-page-cta p { color: rgba(255,255,255,0.68); margin-bottom: var(--ua-sp-7); }\r\n.ua-courses-page-cta-actions { display: flex; gap: var(--ua-sp-4); justify-content: center; flex-wrap: wrap; }\r\n\r\n@media (max-width: 1024px) {\r\n  .ua-track-header, .ua-track-header--reverse .ua-track-header-img { grid-template-columns: 1fr; order: 0; }\r\n  .ua-track-header { grid-template-columns: 1fr; }\r\n  .ua-courses-page-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 640px) { .ua-courses-page-grid { grid-template-columns: 1fr; } }\r\n\r\n\/* ===== Family Portal Page ===== *\/\r\n.ua-family-hero { position: relative; overflow: hidden; padding-block: var(--ua-sp-12) var(--ua-sp-10) !important; }\r\n.ua-family-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }\r\n.ua-family-hero-bg::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(135deg, var(--ua-ink) 0%, var(--ua-accent) 55%, var(--ua-brand-magenta) 100%); opacity: 0.94; }\r\n.ua-family-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-sp-10); align-items: center; }\r\n.ua-family-hero-copy h1 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.015em; margin-block: var(--ua-sp-4); }\r\n.ua-family-hero-copy h1 em { font-style: normal; color: var(--ua-brand-blue-tint); }\r\n.ua-family-hero-lede { color: rgba(255,255,255,0.72); font-size: var(--ua-step-1); max-width: 46ch; margin-bottom: var(--ua-sp-7); }\r\n.ua-family-hero-actions { display: flex; gap: var(--ua-sp-4); flex-wrap: wrap; }\r\n\r\n.ua-family-mockup {\r\n  background: var(--ua-surface); border-radius: var(--ua-radius-lg); padding: var(--ua-sp-6);\r\n  box-shadow: var(--ua-shadow-lg); max-width: 420px; margin-inline: auto;\r\n}\r\n.ua-family-mockup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ua-sp-5); padding-bottom: var(--ua-sp-4); border-bottom: 1px solid var(--ua-line); }\r\n.ua-family-mockup-logo { font-family: var(--ua-font-display); font-weight: 700; color: var(--ua-accent); }\r\n.ua-family-mockup-user { display: flex; align-items: center; gap: var(--ua-sp-2); font-size: var(--ua-step--1); font-weight: 700; color: var(--ua-ink); }\r\n.ua-family-mockup-avatar {\r\n  width: 26px; height: 26px; border-radius: 50%; font-size: 0.65rem; font-weight: 700;\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-brand-magenta)); color: var(--ua-brand-neutral-light);\r\n  display: inline-flex; align-items: center; justify-content: center;\r\n}\r\n.ua-family-mockup-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ua-muted); margin-bottom: var(--ua-sp-3); }\r\n.ua-family-mockup-children { display: flex; gap: var(--ua-sp-2); margin-bottom: var(--ua-sp-5); }\r\n.ua-family-mockup-child { flex: 1; background: var(--ua-bg); border-radius: var(--ua-radius-sm); padding: var(--ua-sp-3) var(--ua-sp-2); text-align: center; border: 2px solid transparent; }\r\n.ua-family-mockup-child.is-active { background: var(--ua-accent-tint); border-color: var(--ua-accent); }\r\n.ua-family-mockup-child-avatar {\r\n  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;\r\n  background: var(--ua-ink); color: var(--ua-brand-neutral-light); font-size: 0.7rem; font-weight: 700; margin-bottom: var(--ua-sp-1);\r\n}\r\n.ua-family-mockup-child-name { font-size: 0.72rem; font-weight: 700; color: var(--ua-ink); }\r\n.ua-family-mockup-child-level { font-size: 0.65rem; color: var(--ua-muted); }\r\n.ua-family-mockup-session { background: linear-gradient(135deg, var(--ua-ink), var(--ua-ink-soft)); border-radius: var(--ua-radius-sm); padding: var(--ua-sp-4); margin-bottom: var(--ua-sp-4); }\r\n.ua-family-mockup-session-label { font-size: 0.65rem; color: rgba(255,255,255,0.4); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--ua-sp-2); }\r\n.ua-family-mockup-session-time { font-size: var(--ua-step-0); font-weight: 700; color: var(--ua-brand-mauve-tint); margin-bottom: 2px; }\r\n.ua-family-mockup-session-teacher { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-bottom: var(--ua-sp-3); }\r\n.ua-family-mockup-join { width: 100%; background: var(--ua-accent); color: var(--ua-brand-neutral-light); border: 0; border-radius: var(--ua-radius-sm); padding: var(--ua-sp-2) var(--ua-sp-3); font-size: 0.72rem; font-weight: 700; }\r\n.ua-family-mockup-progress { margin-bottom: var(--ua-sp-4); }\r\n.ua-family-mockup-progress-head { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: var(--ua-ink); margin-bottom: var(--ua-sp-2); }\r\n.ua-family-mockup-progress-pct { color: var(--ua-accent); }\r\n.ua-family-mockup-progress-bar { height: 8px; background: var(--ua-bg); border-radius: var(--ua-radius-pill); overflow: hidden; }\r\n.ua-family-mockup-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ua-accent), var(--ua-brand-magenta)); border-radius: inherit; }\r\n.ua-family-mockup-notifications { background: var(--ua-accent-tint); border-radius: var(--ua-radius-sm); padding: var(--ua-sp-3); font-size: 0.72rem; color: var(--ua-body); }\r\n.ua-family-mockup-notifications p { margin-bottom: var(--ua-sp-2); }\r\n.ua-family-mockup-notifications p:last-child { margin-bottom: 0; }\r\n\r\n.ua-family-features { padding-block: var(--ua-sp-12); background: var(--ua-surface); }\r\n.ua-family-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ua-sp-6); }\r\n\r\n.ua-family-cta { padding-block: var(--ua-sp-11); background: linear-gradient(135deg, var(--ua-ink), var(--ua-brand-magenta)); text-align: center; }\r\n.ua-family-cta-inner { max-width: 560px; }\r\n.ua-family-cta h2 { font-size: var(--ua-step-4); color: var(--ua-brand-neutral-light); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-family-cta p { color: rgba(255,255,255,0.68); margin-bottom: var(--ua-sp-7); }\r\n.ua-family-cta-actions { display: flex; gap: var(--ua-sp-4); justify-content: center; flex-wrap: wrap; }\r\n\r\n@media (max-width: 1024px) {\r\n  .ua-family-hero-grid { grid-template-columns: 1fr; }\r\n  .ua-family-mockup { max-width: 380px; }\r\n  .ua-family-features-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 640px) { .ua-family-features-grid { grid-template-columns: 1fr; } }\r\n\r\n\/* ===== Text link utility (used in Contact) ===== *\/\r\n.ua-text-link { color: var(--ua-ink); text-decoration: underline; text-underline-offset: 3px; }\r\n.ua-text-link:hover { color: var(--ua-accent); }\r\n\r\n\/* ===== Course Detail Page (template, shared by all 10 individual course pages) =====\r\n   One shared block styles every course-*.html file \u2014 keeps 10 pages\r\n   visually identical and means a design change happens once, not 10\r\n   times. Content-only differences live in each page's own HTML. *\/\r\n.ua-course-detail { padding-block: var(--ua-sp-11) var(--ua-sp-12) !important; background: var(--ua-bg); }\r\n\r\n.ua-course-breadcrumb { display: flex; align-items: center; gap: var(--ua-sp-2); font-size: var(--ua-step--1); color: var(--ua-muted); margin-bottom: var(--ua-sp-8); }\r\n.ua-course-breadcrumb a { font-weight: 600; color: var(--ua-accent); }\r\n.ua-course-breadcrumb a:hover { text-decoration: underline; }\r\n\r\n.ua-course-detail-header { max-width: 760px; margin-bottom: var(--ua-sp-10); }\r\n.ua-course-detail-header h1 { font-size: var(--ua-step-4); letter-spacing: -0.02em; margin-block: var(--ua-sp-4); }\r\n.ua-course-detail-lede { font-size: var(--ua-step-1); color: var(--ua-body); margin-bottom: var(--ua-sp-6); }\r\n.ua-course-detail-meta {\r\n  display: flex; flex-wrap: wrap; gap: var(--ua-sp-3); align-items: center;\r\n  font-size: var(--ua-step--1); font-weight: 600; color: var(--ua-muted); margin-bottom: var(--ua-sp-7);\r\n}\r\n.ua-course-detail-meta span:not(:last-child)::after { content: \"\u00b7\"; margin-left: var(--ua-sp-3); color: var(--ua-line); }\r\n\r\n.ua-course-detail-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--ua-sp-9); align-items: start; }\r\n.ua-course-detail-main h2 { font-size: var(--ua-step-2); margin-bottom: var(--ua-sp-4); }\r\n.ua-course-detail-main p { font-size: var(--ua-step-0); color: var(--ua-body); line-height: 1.8; margin-bottom: var(--ua-sp-5); }\r\n.ua-course-detail-points { display: flex; flex-direction: column; gap: var(--ua-sp-3); margin-top: var(--ua-sp-6); list-style: none; }\r\n.ua-course-detail-points li { display: flex; align-items: flex-start; gap: var(--ua-sp-3); font-size: var(--ua-step-0); color: var(--ua-ink); }\r\n.ua-course-detail-points li svg { flex-shrink: 0; margin-top: 4px; color: var(--ua-verified); }\r\n\r\n.ua-course-detail-sidebar { display: flex; flex-direction: column; gap: var(--ua-sp-5); position: sticky; top: calc(72px + var(--ua-sp-6)); }\r\n.ua-course-detail-card { background: var(--ua-surface); border: 1px solid var(--ua-line); border-radius: var(--ua-radius-md); padding: var(--ua-sp-6); }\r\n.ua-course-detail-card h3 { font-size: var(--ua-step-0); margin-bottom: var(--ua-sp-4); }\r\n.ua-course-detail-facts { display: flex; flex-direction: column; gap: var(--ua-sp-3); list-style: none; }\r\n.ua-course-detail-facts li { display: flex; justify-content: space-between; gap: var(--ua-sp-3); font-size: var(--ua-step--1); }\r\n.ua-course-detail-facts li span:first-child { color: var(--ua-muted); }\r\n.ua-course-detail-facts li span:last-child { font-weight: 700; color: var(--ua-ink); text-align: right; }\r\n.ua-course-detail-card .ua-btn { width: 100%; margin-top: var(--ua-sp-5); }\r\n\r\n.ua-course-detail-teacher { display: flex; align-items: center; gap: var(--ua-sp-4); }\r\n.ua-course-detail-teacher-avatar {\r\n  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;\r\n  background: linear-gradient(135deg, var(--ua-accent), var(--ua-brand-magenta));\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-family: var(--ua-font-display); font-weight: 700; color: rgba(255,255,255,0.9); font-size: var(--ua-step--1);\r\n}\r\n.ua-course-detail-teacher-name { font-weight: 700; color: var(--ua-ink); font-size: var(--ua-step--1); }\r\n.ua-course-detail-teacher-role { font-size: 0.75rem; color: var(--ua-muted); }\r\n\r\n@media (max-width: 900px) {\r\n  .ua-course-detail-body { grid-template-columns: 1fr; }\r\n  .ua-course-detail-sidebar { position: static; }\r\n}<\/style><section class=\"ua-about-hero\">\r\n  <div class=\"ua-about-hero-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ua-wrap ua-about-hero-inner\">\r\n    <div class=\"ua-about-hero-copy\">\r\n      <p class=\"ua-eyebrow ua-eyebrow--on-dark\">Our Story &amp; Mission<\/p>\r\n      <h1>About <em>Ummah Academy<\/em><\/h1>\r\n      <p class=\"ua-about-hero-lede\">We were founded with a single conviction: every Muslim deserves access to authentic Qur'anic education \u2014 regardless of where they live. We bridge the 1,000-year legacy of Al-Azhar with the flexibility modern Muslim families need.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ua-about-hero-visual\">\r\n      <div class=\"ua-about-hero-card\">\r\n        \r\n        <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/02\/pexels-faheem-ahamad-422934800-16732786.jpg\" alt=\"Ummah Academy students and teachers in prayer together\" loading=\"eager\" width=\"1600\" height=\"1067\">\r\n        <div class=\"ua-about-hero-card-scrim\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"ua-about-hero-card-badge\">\r\n          <p class=\"ua-about-hero-card-badge-title\">Our Teaching Family<\/p>\r\n          <p class=\"ua-about-hero-card-badge-sub\">100+ Al-Azhar certified scholars worldwide<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ua-mission\">\r\n  <div class=\"ua-wrap ua-mission-grid\">\r\n    <div class=\"ua-mission-img\">\r\n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ummahacademy.net\/wp-content\/uploads\/2026\/08\/ummah-academy-about-content-1.webp\" alt=\"An Ummah Academy teacher during a live session\" loading=\"lazy\" width=\"1280\" height=\"1280\">\r\n      <div class=\"ua-mission-img-badge\">\r\n        <p class=\"ua-mission-img-badge-num\">1,000+<\/p>\r\n        <p class=\"ua-mission-img-badge-lbl\">Years of Al-Azhar<br>scholarship tradition<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ua-mission-text\">\r\n      <p class=\"ua-eyebrow ua-eyebrow--pill\"><span class=\"ua-eyebrow-dot\" aria-hidden=\"true\"><\/span> Our Vision<\/p>\r\n      <h2>Empowering every Muslim to return to Allah's Book<\/h2>\r\n      <p>Our vision is to create a comprehensive, integrated program that motivates Muslims worldwide to return to the Qur'an \u2014 not merely for display recitation, but for genuine mastery (Itqan), deep contemplation (Tadabbur), and a heartfelt connection to Allah's words.<\/p>\r\n      <p>We believe authentic Islamic knowledge should never be a privilege of geography. Whether you're in London, Toronto, Sydney, or Dubai \u2014 you deserve the same quality of teaching Al-Azhar has maintained for over a millennium.<\/p>\r\n\r\n      <div class=\"ua-mission-values\">\r\n        <div class=\"ua-mission-value\">\r\n          <div class=\"ua-mission-value-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><circle cx=\"12\" cy=\"12\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/div>\r\n          <div><h3>Itqan (Perfection)<\/h3><p>We teach for deep mastery and retention, not surface-level display of knowledge.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ua-mission-value\">\r\n          <div class=\"ua-mission-value-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path d=\"M12 20s-7-4.4-9.5-9C.7 7.5 2 4 5.5 4c2 0 3.4 1.2 4.2 2.3C10.5 5.2 11.9 4 13.9 4 17.4 4 18.7 7.5 17 11c-2.5 4.6-9.5 9-9.5 9z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n          <div><h3>Tadabbur (Contemplation)<\/h3><p>Every session connects the student to the deeper meaning of what they're learning.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ua-mission-value\">\r\n          <div class=\"ua-mission-value-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\"\/><path d=\"M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\"\/><\/svg><\/div>\r\n          <div><h3>Accessibility for the Ummah<\/h3><p>Our name says it all \u2014 we serve the entire Muslim Ummah, regardless of location.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ua-timeline-section\">\r\n  <div class=\"ua-wrap ua-timeline-grid\">\r\n    <div>\r\n      <p class=\"ua-eyebrow ua-eyebrow--pill\"><span class=\"ua-eyebrow-dot\" aria-hidden=\"true\"><\/span> Our Journey<\/p>\r\n      <h2 class=\"ua-timeline-heading\">How Ummah Academy Began<\/h2>\r\n\r\n      <ol class=\"ua-timeline\">\r\n        <li class=\"ua-timeline-item ua-reveal\">\r\n          <p class=\"ua-timeline-year\">2022 \u2014 The Seed<\/p>\r\n          <h3>A Problem We Couldn't Ignore<\/h3>\r\n          <p>Our founder noticed Muslim families in the West struggled to find qualified, authentic Qur'an teachers \u2014 relying on uncertified volunteers or expensive local schools with inflexible schedules.<\/p>\r\n        <\/li>\r\n        <li class=\"ua-timeline-item ua-reveal\">\r\n          <p class=\"ua-timeline-year\">2023 \u2014 The Solution<\/p>\r\n          <h3>Building the Al-Azhar Connection<\/h3>\r\n          <p>We began recruiting directly from Al-Azhar University \u2014 focusing on scholars holding Ijazah certificates with documented chains to the Prophet \ufdfa.<\/p>\r\n        <\/li>\r\n        <li class=\"ua-timeline-item ua-reveal\">\r\n          <p class=\"ua-timeline-year\">2024 \u2014 Launch<\/p>\r\n          <h3>Ummah Academy Goes Live<\/h3>\r\n          <p>We officially launched with 20 teachers and 150 students across 12 countries. Our first Ijazah was granted to a student in the UK within our first year.<\/p>\r\n        <\/li>\r\n        <li class=\"ua-timeline-item ua-reveal\">\r\n          <p class=\"ua-timeline-year\">2025 \u2014 Growth<\/p>\r\n          <h3>Expanding the Family<\/h3>\r\n          <p>Expanded to 100+ scholars, 1,000+ students, 50+ countries, and introduced the Ummah Cubs program for children age 5+.<\/p>\r\n        <\/li>\r\n        <li class=\"ua-timeline-item ua-reveal\">\r\n          <p class=\"ua-timeline-year\">2026 \u2014 Today<\/p>\r\n          <h3>A Platform for the Ummah<\/h3>\r\n          <p>Today we deliver 400+ live teaching hours monthly, with 12+ Ijazah certificates issued, 95% student retention, and a complete Family Portal.<\/p>\r\n        <\/li>\r\n      <\/ol>\r\n    <\/div>\r\n\r\n    <div class=\"ua-timeline-aside\">\r\n      <div class=\"ua-name-card\">\r\n        <p class=\"ua-eyebrow ua-eyebrow--on-dark\">Our Name, Our Mission<\/p>\r\n        <h3>What Does \"Ummah\" Mean?<\/h3>\r\n        \r\n        <p>In the Qur'an, \"Ummah\" (\u0623\u0645\u0629) refers to the global Muslim community \u2014 a united body of believers bound by faith. Our name is our promise: this academy exists to serve every member of that community.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ua-stat-card\">\r\n        <div class=\"ua-stat-card-grid\">\r\n          <div><p class=\"ua-stat-card-num\">50+<\/p><p class=\"ua-stat-card-lbl\">Countries<\/p><\/div>\r\n          <div><p class=\"ua-stat-card-num\">1K+<\/p><p class=\"ua-stat-card-lbl\">Students<\/p><\/div>\r\n          <div><p class=\"ua-stat-card-num\">100+<\/p><p class=\"ua-stat-card-lbl\">Scholars<\/p><\/div>\r\n          <div><p class=\"ua-stat-card-num\">12+<\/p><p class=\"ua-stat-card-lbl\">Ijazahs<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ua-about-teachers\">\r\n  <div class=\"ua-wrap\">\r\n    <div class=\"ua-section-head ua-section-head--center\">\r\n      <p class=\"ua-eyebrow ua-eyebrow--pill\"><span class=\"ua-eyebrow-dot\" aria-hidden=\"true\"><\/span> The Teaching Family<\/p>\r\n      <h2>Meet Our Certified <em>Al-Azhar Scholars<\/em><\/h2>\r\n      <p class=\"ua-section-head-lede ua-section-head-lede--center\">Every teacher is personally vetted \u2014 verified Al-Azhar graduate, Ijazah holder, and experienced in teaching both Arabs and non-Arabic speakers.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ua-about-teacher-grid\">\r\n\r\n      <article class=\"ua-about-teacher-card ua-reveal\">\r\n        <div class=\"ua-about-teacher-photo\">\r\n          \r\n          <div class=\"ua-about-teacher-photo-placeholder\" role=\"img\" aria-label=\"Photo of Ustadha Omneya Ali, not yet available\">\r\n            <span aria-hidden=\"true\">OA<\/span>\r\n          <\/div>\r\n          <p class=\"ua-about-teacher-badge\">Featured Scholar<\/p>\r\n          <div class=\"ua-about-teacher-name-ovl\">\r\n            <h3>Omneya Ali<\/h3>\r\n            <p>Head of Tajweed Department<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ua-about-teacher-body\">\r\n          <ul class=\"ua-about-teacher-creds\">\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>Al-Azhar University \u2014 Faculty of Sharia<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Ijazah in Hafs 'an 'Asim<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>Specialist in Al-Ajrumiyyah &amp; Al-Jazariyyah<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><path d=\"M12 7.5V12l3 2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>10+ years teaching experience<\/li>\r\n          <\/ul>\r\n          <div class=\"ua-about-teacher-tags\">\r\n            <span class=\"ua-about-teacher-tag\">Arabic<\/span>\r\n            <span class=\"ua-about-teacher-tag\">English<\/span>\r\n            <span class=\"ua-about-teacher-tag\">Qur'an \u00b7 Tajweed \u00b7 Arabic<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"ua-about-teacher-card ua-reveal\">\r\n        <div class=\"ua-about-teacher-photo\">\r\n          <div class=\"ua-about-teacher-photo-placeholder\" role=\"img\" aria-label=\"Photo of Ustadha Sara Ahmed, not yet available\">\r\n            <span aria-hidden=\"true\">SA<\/span>\r\n          <\/div>\r\n          <p class=\"ua-about-teacher-badge\">Noor Al-Bayan<\/p>\r\n          <div class=\"ua-about-teacher-name-ovl\">\r\n            <h3>Sara Ahmed<\/h3>\r\n            <p>Arabic Foundation Specialist<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ua-about-teacher-body\">\r\n          <ul class=\"ua-about-teacher-creds\">\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>Al-Azhar \u2014 Arabic Language Faculty<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Certified in Noor Al-Bayan<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>Specialist in beginners &amp; children<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><path d=\"M12 7.5V12l3 2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>8 years online education<\/li>\r\n          <\/ul>\r\n          <div class=\"ua-about-teacher-tags\">\r\n            <span class=\"ua-about-teacher-tag\">Arabic<\/span>\r\n            <span class=\"ua-about-teacher-tag\">English<\/span>\r\n            <span class=\"ua-about-teacher-tag\">Noor Al-Bayan \u00b7 Grammar<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"ua-about-teacher-card ua-reveal\">\r\n        <div class=\"ua-about-teacher-photo\">\r\n          <div class=\"ua-about-teacher-photo-placeholder\" role=\"img\" aria-label=\"Photo of Ustadha Nour Hassan, not yet available\">\r\n            <span aria-hidden=\"true\">NH<\/span>\r\n          <\/div>\r\n          <p class=\"ua-about-teacher-badge\">Kids Specialist<\/p>\r\n          <div class=\"ua-about-teacher-name-ovl\">\r\n            <h3>Nour Hassan<\/h3>\r\n            <p>Ummah Cubs Programme Lead<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ua-about-teacher-body\">\r\n          <ul class=\"ua-about-teacher-creds\">\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>Al-Azhar \u2014 Islamic Education<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Certified Early Islamic Education<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/span>Expert in gamified Qur'an learning<\/li>\r\n            <li><span class=\"ua-about-teacher-cred-icon\" aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><path d=\"M12 7.5V12l3 2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>7 years teaching children ages 5\u201314<\/li>\r\n          <\/ul>\r\n          <div class=\"ua-about-teacher-tags\">\r\n            <span class=\"ua-about-teacher-tag\">Arabic<\/span>\r\n            <span class=\"ua-about-teacher-tag\">English<\/span>\r\n            <span class=\"ua-about-teacher-tag\">Ummah Cubs \u00b7 Qur'an<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"ua-about-teachers-cta\">\r\n      <a href=\"https:\/\/ummahacademy.net\/teachers\/\" class=\"ua-btn ua-btn-outline\">Meet All Our Teachers<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ua-about-methodology\">\r\n  <div class=\"ua-wrap ua-about-methodology-grid\">\r\n    <div>\r\n      <p class=\"ua-eyebrow ua-eyebrow--pill\"><span class=\"ua-eyebrow-dot\" aria-hidden=\"true\"><\/span> Our Teaching Philosophy<\/p>\r\n      <h2>The Itqan Methodology \u2014 Perfection Over Display<\/h2>\r\n      <p class=\"ua-about-methodology-lede\">Most platforms teach memorization as performance. We fundamentally reject this. Our \"Itqan\" (perfection) method insists on mastery, precision, and Tadabbur at every stage.<\/p>\r\n\r\n      <div class=\"ua-pillar-list\">\r\n        <div class=\"ua-pillar\">\r\n          <div class=\"ua-pillar-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><circle cx=\"12\" cy=\"12\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/div>\r\n          <div><h3>Thematic Verse Grouping<\/h3><p>We group verses by theme and meaning \u2014 allowing students to understand context.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ua-pillar\">\r\n          <div class=\"ua-pillar-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14M12 3v18M16 5v14M4 9v6M20 9v6\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/div>\r\n          <div><h3>Real-Time Makhraj Correction<\/h3><p>Live 1-on-1 sessions let teachers instantly correct articulation points.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ua-pillar\">\r\n          <div class=\"ua-pillar-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path d=\"M4 19V10M10 19V5M16 19v-7M22 19H2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n          <div><h3>Progressive Level System<\/h3><p>Three clearly defined levels with measurable milestones per track.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"ua-pillar\">\r\n          <div class=\"ua-pillar-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg><\/div>\r\n          <div><h3>Chain of Transmission (Sanad)<\/h3><p>Ijazah graduates receive a documented chain tracing back to the Prophet \ufdfa.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ua-about-methodology-aside\">\r\n      <div class=\"ua-azhar-card\">\r\n        <p class=\"ua-azhar-card-num\">1,000+<\/p>\r\n        <h3>Years of Al-Azhar Academic Tradition<\/h3>\r\n        <p>Founded in 970 CE, Al-Azhar University is the oldest university in the world and the global authority on Qur'anic sciences. Every Ummah Academy teacher carries this living tradition into your home.<\/p>\r\n        <ul class=\"ua-azhar-certs\">\r\n          <li><span aria-hidden=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>Ijazah with Sanad \u2014 documented chain to the Prophet \ufdfa<\/li>\r\n          <li><span aria-hidden=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"\/><path d=\"M12 7.5V12l3 2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Al-Azhar University degree verification on request<\/li>\r\n          <li><span aria-hidden=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Bilingual teaching \u2014 Arabic &amp; English available<\/li>\r\n          <li><span aria-hidden=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path d=\"M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\" stroke-linejoin=\"round\"\/><\/svg><\/span>Female teachers for women &amp; children \u2014 fully vetted<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"ua-cert-preview-card\">\r\n        \r\n        <div class=\"ua-cert-preview-placeholder\" role=\"img\" aria-label=\"Sample completion certificate\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path d=\"M4 19.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v13.5\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"\/><path d=\"M8 7h8M8 10.5h8M8 14h5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n        <\/div>\r\n        <h4>Official Completion Certificates<\/h4>\r\n        <p>Every student receives a formal certificate upon finishing each level \u2014 recognized and verifiable. Advanced students pursuing Ijazah receive a documented chain of transmission.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section style=\"padding:56px 0;\">\r\n  <div class=\"ua-wrap\">\r\n    <p class=\"ua-eyebrow ua-eyebrow--pill\"><span class=\"ua-eyebrow-dot\" aria-hidden=\"true\"><\/span> About Ummah Academy<\/p>\r\n    <h2>About Ummah Academy: Our Mission &amp; Story<\/h2>\r\n    <p>About Ummah Academy: we are an online academy dedicated to making authentic, certified Islamic education accessible to every Muslim, wherever they live. Our certified Al-Azhar teachers deliver live, 1-on-1 Quran, Tajweed, Arabic, and Islamic Studies classes to students of all ages in over 50 countries, combining traditional scholarship with the convenience of modern online learning.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"ua-about-cta\">\r\n  <div class=\"ua-wrap ua-about-cta-inner\">\r\n    <p class=\"ua-eyebrow ua-eyebrow--on-dark\">Join Our Family<\/p>\r\n    <h2>Ready to Begin Your Islamic Education Journey?<\/h2>\r\n    <p>Your first 2 sessions are completely free. Experience the Ummah Academy difference \u2014 authentic, certified, and personalized for you.<\/p>\r\n    <div class=\"ua-about-cta-actions\">\r\n      <a href=\"https:\/\/ummahacademy.net\/contact\/\" class=\"ua-btn ua-btn-primary ua-btn-large ua-btn--on-dark\">Book Your Free Trial \u2192<\/a>\r\n      <a href=\"https:\/\/ummahacademy.net\/teachers\/\" class=\"ua-btn ua-btn-ghost ua-btn-large ua-btn--on-dark\">Meet Our Teachers<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var toggle = document.querySelector(\".ua-nav-toggle\");\r\n  var overlay = document.querySelector(\".ua-mobile-overlay\");\r\n  if (!toggle || !overlay) return;\r\n  function openMenu(){\r\n    overlay.removeAttribute(\"hidden\");\r\n    overlay.setAttribute(\"data-open\", \"true\");\r\n    toggle.setAttribute(\"aria-expanded\", \"true\");\r\n    document.body.style.overflow = \"hidden\";\r\n  }\r\n  function closeMenu(){\r\n    overlay.setAttribute(\"data-open\", \"false\");\r\n    overlay.setAttribute(\"hidden\", \"\");\r\n    toggle.setAttribute(\"aria-expanded\", \"false\");\r\n    document.body.style.overflow = \"\";\r\n  }\r\n  toggle.addEventListener(\"click\", function(){\r\n    var isOpen = toggle.getAttribute(\"aria-expanded\") === \"true\";\r\n    if (isOpen) { closeMenu(); } else { openMenu(); }\r\n  });\r\n  Array.prototype.forEach.call(overlay.querySelectorAll(\"a\"), function(link){\r\n    link.addEventListener(\"click\", closeMenu);\r\n  });\r\n  document.addEventListener(\"keydown\", function(e){\r\n    if (e.key === \"Escape\" && toggle.getAttribute(\"aria-expanded\") === \"true\") closeMenu();\r\n  });\r\n})();\r\n<\/script>\r\n\r\n<style>#trp-floater-ls{display:none !important;}<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Story &amp; Mission About Ummah Academy We were founded with a single conviction: every Muslim deserves access to authentic Qur&#8217;anic education \u2014 regardless of where they live. We bridge the 1,000-year legacy of Al-Azhar with the flexibility modern Muslim families need. Our Teaching Family 100+ Al-Azhar certified scholars worldwide 1,000+ Years of Al-Azharscholarship tradition Our Vision Empowering every Muslim to return to Allah&#8217;s Book Our vision is to create a comprehensive, integrated program that motivates Muslims worldwide to return to the Qur&#8217;an \u2014 not merely for display recitation, but for genuine mastery (Itqan), deep contemplation (Tadabbur), and a heartfelt connection to Allah&#8217;s words. We believe authentic Islamic knowledge should never be a privilege of geography. Whether you&#8217;re in London, Toronto, Sydney, or Dubai \u2014 you deserve the same quality of teaching Al-Azhar has maintained for over a millennium. Itqan (Perfection) We teach for deep mastery and retention, not surface-level display of knowledge. Tadabbur (Contemplation) Every session connects the student to the deeper meaning of what they&#8217;re learning. Accessibility for the Ummah Our name says it all \u2014 we serve the entire Muslim Ummah, regardless of location. Our Journey How Ummah Academy Began 2022 \u2014 The Seed A Problem We Couldn&#8217;t Ignore Our founder noticed Muslim families in the West struggled to find qualified, authentic Qur&#8217;an teachers \u2014 relying on uncertified volunteers or expensive local schools with inflexible schedules. 2023 \u2014 The Solution Building the Al-Azhar Connection We began recruiting directly from Al-Azhar University \u2014 focusing on scholars holding Ijazah certificates with documented chains to the Prophet \ufdfa. 2024 \u2014 Launch Ummah Academy Goes Live We officially launched with 20 teachers and 150 students across 12 countries. Our first Ijazah was granted to a student in the UK within our first year. 2025 \u2014 Growth Expanding the Family Expanded to 100+ scholars, 1,000+ students, 50+ countries, and introduced the Ummah Cubs program for children age 5+. 2026 \u2014 Today A Platform for the Ummah Today we deliver 400+ live teaching hours monthly, with 12+ Ijazah certificates issued, 95% student retention, and a complete Family Portal. Our Name, Our Mission What Does &#8220;Ummah&#8221; Mean? In the Qur&#8217;an, &#8220;Ummah&#8221; (\u0623\u0645\u0629) refers to the global Muslim community \u2014 a united body of believers bound by faith. Our name is our promise: this academy exists to serve every member of that community. 50+ Countries 1K+ Students 100+ Scholars 12+ Ijazahs The Teaching Family Meet Our Certified Al-Azhar Scholars Every teacher is personally vetted \u2014 verified Al-Azhar graduate, Ijazah holder, and experienced in teaching both Arabs and non-Arabic speakers. OA Featured Scholar Omneya Ali Head of Tajweed Department Al-Azhar University \u2014 Faculty of Sharia Ijazah in Hafs &#8216;an &#8216;Asim Specialist in Al-Ajrumiyyah &amp; Al-Jazariyyah 10+ years teaching experience Arabic English Qur&#8217;an \u00b7 Tajweed \u00b7 Arabic SA Noor Al-Bayan Sara Ahmed Arabic Foundation Specialist Al-Azhar \u2014 Arabic Language Faculty Certified in Noor Al-Bayan Specialist in beginners &amp; children 8 years online education Arabic English Noor Al-Bayan \u00b7 Grammar NH Kids Specialist Nour Hassan Ummah Cubs Programme Lead Al-Azhar \u2014 Islamic Education Certified Early Islamic Education Expert in gamified Qur&#8217;an learning 7 years teaching children ages 5\u201314 Arabic English Ummah Cubs \u00b7 Qur&#8217;an Meet All Our Teachers Our Teaching Philosophy The Itqan Methodology \u2014 Perfection Over Display Most platforms teach memorization as performance. We fundamentally reject this. Our &#8220;Itqan&#8221; (perfection) method insists on mastery, precision, and Tadabbur at every stage. Thematic Verse Grouping We group verses by theme and meaning \u2014 allowing students to understand context. Real-Time Makhraj Correction Live 1-on-1 sessions let teachers instantly correct articulation points. Progressive Level System Three clearly defined levels with measurable milestones per track. Chain of Transmission (Sanad) Ijazah graduates receive a documented chain tracing back to the Prophet \ufdfa. 1,000+ Years of Al-Azhar Academic Tradition Founded in 970 CE, Al-Azhar University is the oldest university in the world and the global authority on Qur&#8217;anic sciences. Every Ummah Academy teacher carries this living tradition into your home. Ijazah with Sanad \u2014 documented chain to the Prophet \ufdfa Al-Azhar University degree verification on request Bilingual teaching \u2014 Arabic &amp; English available Female teachers for women &amp; children \u2014 fully vetted Official Completion Certificates Every student receives a formal certificate upon finishing each level \u2014 recognized and verifiable. Advanced students pursuing Ijazah receive a documented chain of transmission. About Ummah Academy About Ummah Academy: Our Mission &amp; Story About Ummah Academy: we are an online academy dedicated to making authentic, certified Islamic education accessible to every Muslim, wherever they live. Our certified Al-Azhar teachers deliver live, 1-on-1 Quran, Tajweed, Arabic, and Islamic Studies classes to students of all ages in over 50 countries, combining traditional scholarship with the convenience of modern online learning. Join Our Family Ready to Begin Your Islamic Education Journey? Your first 2 sessions are completely free. Experience the Ummah Academy difference \u2014 authentic, certified, and personalized for you. Book Your Free Trial \u2192 Meet Our Teachers<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3774","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Learn about Ummah Academy and our mission to make authentic Islamic education accessible through qualified teachers and personalized online learning.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/ummahacademy.net\/ar\/about\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"ar_AR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Ummah Academy - Authentic Online Quran, Arabic &amp; Islamic Studies\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"About Ummah Academy | Authentic Islamic Education Online\" \/>\n\t\t<meta property=\"og:description\" content=\"Discover Ummah Academy\u2019s mission to make authentic, certified Islamic education accessible to every Muslim, wherever they live.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/ummahacademy.net\/ar\/about\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"2646\" \/>\n\t\t<meta property=\"og:image:height\" content=\"2646\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-05-19T16:23:18+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-09-19T21:30:21+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/UmmahACA\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"About Ummah Academy | Authentic Islamic Education Online\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Discover Ummah Academy\u2019s mission to make authentic, certified Islamic education accessible to every Muslim, wherever they live.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ummahacademy.net\\\/ar\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#listItem\",\"name\":\"About\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#listItem\",\"position\":2,\"name\":\"About\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/#organization\",\"name\":\"Ummah Academy\",\"description\":\"At Ummah Academy, we are committed to providing high-quality, accessible Islamic education to students of all ages, backgrounds, and levels. Our goal is to nurture a deep, meaningful connection with Islam through comprehensive learning experiences in Quranic studies, Arabic language, Islamic history, and much more.\",\"url\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/ummahacademy.net\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Asset-1@2x.png\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#organizationLogo\",\"width\":2646,\"height\":2646,\"caption\":\"Ummah Academy Logo\"},\"image\":{\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/UmmahACA\",\"https:\\\/\\\/www.instagram.com\\\/ummah.aca\\\/\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#webpage\",\"url\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/\",\"name\":\"About Ummah Academy | Our Mission & Story\",\"description\":\"Learn about Ummah Academy and our mission to make authentic Islamic education accessible through qualified teachers and personalized online learning.\",\"inLanguage\":\"ar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/about\\\/#breadcrumblist\"},\"datePublished\":\"2026-05-19T19:23:18+03:00\",\"dateModified\":\"2026-09-20T00:30:21+03:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/#website\",\"url\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/\",\"name\":\"Ummah Academy\",\"description\":\"Authentic Online Quran, Arabic & Islamic Studies\",\"inLanguage\":\"ar\",\"publisher\":{\"@id\":\"https:\\\/\\\/ummahacademy.net\\\/ar\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"About Ummah Academy | Our Mission & Story","description":"Learn about Ummah Academy and our mission to make authentic Islamic education accessible through qualified teachers and personalized online learning.","canonical_url":"https:\/\/ummahacademy.net\/ar\/about\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/ummahacademy.net\/ar\/about\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/ummahacademy.net\/ar#listItem","position":1,"name":"Home","item":"https:\/\/ummahacademy.net\/ar","nextItem":{"@type":"ListItem","@id":"https:\/\/ummahacademy.net\/ar\/about\/#listItem","name":"About"}},{"@type":"ListItem","@id":"https:\/\/ummahacademy.net\/ar\/about\/#listItem","position":2,"name":"About","previousItem":{"@type":"ListItem","@id":"https:\/\/ummahacademy.net\/ar#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/ummahacademy.net\/ar\/#organization","name":"Ummah Academy","description":"At Ummah Academy, we are committed to providing high-quality, accessible Islamic education to students of all ages, backgrounds, and levels. Our goal is to nurture a deep, meaningful connection with Islam through comprehensive learning experiences in Quranic studies, Arabic language, Islamic history, and much more.","url":"https:\/\/ummahacademy.net\/ar\/","logo":{"@type":"ImageObject","url":"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png","@id":"https:\/\/ummahacademy.net\/ar\/about\/#organizationLogo","width":2646,"height":2646,"caption":"Ummah Academy Logo"},"image":{"@id":"https:\/\/ummahacademy.net\/ar\/about\/#organizationLogo"},"sameAs":["https:\/\/www.facebook.com\/UmmahACA","https:\/\/www.instagram.com\/ummah.aca\/"]},{"@type":"WebPage","@id":"https:\/\/ummahacademy.net\/ar\/about\/#webpage","url":"https:\/\/ummahacademy.net\/ar\/about\/","name":"About Ummah Academy | Our Mission & Story","description":"Learn about Ummah Academy and our mission to make authentic Islamic education accessible through qualified teachers and personalized online learning.","inLanguage":"ar","isPartOf":{"@id":"https:\/\/ummahacademy.net\/ar\/#website"},"breadcrumb":{"@id":"https:\/\/ummahacademy.net\/ar\/about\/#breadcrumblist"},"datePublished":"2026-05-19T19:23:18+03:00","dateModified":"2026-09-20T00:30:21+03:00"},{"@type":"WebSite","@id":"https:\/\/ummahacademy.net\/ar\/#website","url":"https:\/\/ummahacademy.net\/ar\/","name":"Ummah Academy","description":"Authentic Online Quran, Arabic & Islamic Studies","inLanguage":"ar","publisher":{"@id":"https:\/\/ummahacademy.net\/ar\/#organization"}}]},"og:locale":"ar_AR","og:site_name":"Ummah Academy - Authentic Online Quran, Arabic &amp; Islamic Studies","og:type":"article","og:title":"About Ummah Academy | Authentic Islamic Education Online","og:description":"Discover Ummah Academy\u2019s mission to make authentic, certified Islamic education accessible to every Muslim, wherever they live.","og:url":"https:\/\/ummahacademy.net\/ar\/about\/","og:image":"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png","og:image:secure_url":"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png","og:image:width":"2646","og:image:height":"2646","article:published_time":"2026-05-19T16:23:18+00:00","article:modified_time":"2026-09-19T21:30:21+00:00","article:publisher":"https:\/\/www.facebook.com\/UmmahACA","twitter:card":"summary_large_image","twitter:title":"About Ummah Academy | Authentic Islamic Education Online","twitter:description":"Discover Ummah Academy\u2019s mission to make authentic, certified Islamic education accessible to every Muslim, wherever they live.","twitter:image":"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png"},"aioseo_meta_data":{"post_id":"3774","title":"About Ummah Academy | Our Mission &amp; Story","description":"Learn about Ummah Academy and our mission to make authentic Islamic education accessible through qualified teachers and personalized online learning.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"About Ummah Academy | Authentic Islamic Education Online","og_description":"Discover Ummah Academy\u2019s mission to make authentic, certified Islamic education accessible to every Muslim, wherever they live.","og_object_type":"default","og_image_type":"featured","og_image_url":"https:\/\/ummahacademy.net\/wp-content\/uploads\/2025\/04\/Asset-1@2x.png","og_image_width":"2646","og_image_height":"2646","og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-05-19 16:23:18","updated":"2026-09-19 21:32:26","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/ummahacademy.net\/ar\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tAbout\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/ummahacademy.net\/ar"},{"label":"About","link":"https:\/\/ummahacademy.net\/ar\/about\/"}],"_links":{"self":[{"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/pages\/3774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/comments?post=3774"}],"version-history":[{"count":88,"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/pages\/3774\/revisions"}],"predecessor-version":[{"id":5806,"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/pages\/3774\/revisions\/5806"}],"wp:attachment":[{"href":"https:\/\/ummahacademy.net\/ar\/wp-json\/wp\/v2\/media?parent=3774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}