/*
Theme Name: Alif Islam Academy
Theme URI: https://alifislamacademy.com
Author: Alif Islam Academy
Author URI: https://alifislamacademy.com
Description: Custom WordPress theme for Alif Islam Academy, an online Quran academy. Ported from a hand-built static site. Fully Elementor compatible — every page and post renders through the_content(), so Elementor (or the block editor) can take over any page without fighting the theme. Header navigation is powered by a standard WordPress menu (Appearance > Menus, "Primary Menu" location).
Version: 1.0.45
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: alif-islam-academy
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.  Reset / base
   2.  Design tokens (colors, radius)
   3.  Topbar
   4.  Header / primary nav (wp_nav_menu output)
   5.  Hero
   6.  Mission strip (photo banner)
   7.  Why-split (image + feature list)
   7b. Effective-split (home page "What Makes a Quran Course Online
       Actually Effective" — same idea as why-split, mirrored: content
       left, image right)
   7c. Why-cards (home page "Why Families..." — photo-led card grid,
       replaces the old why-split layout on the home page only; other
       pages still use why-split/why-media, untouched)
   8.  Courses (teal section)
   9.  Timeline (connected steps)
   10. Quote card
   11. Note callout
   12. Prose section
   13. Plain checklist
   14. Location cards (borough / region / city — all pages use one of
       these three class names for the same component)
   15. Generic grid / card / icon-badge system
   16. Areas-served (teal pills) — legacy component, kept for parity
   17. Comparison cards (Tajweed vs Tarteel style)
   18. "Levels" progression component
   19. Sanad chain (Ijazah page)
   20. FAQ accordion
   21. Final CTA band
   22. Footer
   23. Contact page: form + sidebar
   24. Blog: post cards (archive) + article (single post)
   25. Utility / alt backgrounds
   26. Responsive breakpoints
   ========================================================================= */

/* 1. Reset / base ------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;color:var(--ink);line-height:1.25;margin:0 0 14px}
p{margin:0 0 16px}
a{color:var(--teal)}
img{max-width:100%;display:block}
ul,ol{margin:0 0 16px;padding-left:22px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:60px 0}

/* Elementor / editor takeover: the theme never wraps the_content() in
   extra padding boxes, so when a page is edited with Elementor the
   canvas starts flush under the header with no leftover theme chrome. */
.site-main{min-height:200px}

/* 2. Design tokens -------------------------------------------------------- */
:root{
  --blue:#5582BC;
  --teal:#156991;
  --maroon:#A64D53;
  --bg:#ffffff;
  --ink:#1c2530;
  --muted:#5b6572;
  --border:#e9edf2;
  --radius:16px;
}

/* 3. Topbar --------------------------------------------------------------- */
.topbar{background:var(--teal);color:#eaf3f8;font-size:.86rem;padding:8px 24px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.topbar a{color:#eaf3f8;text-decoration:none}
.topbar .contact-line a{margin-right:18px;white-space:nowrap}
.topbar .contact-line a:hover{text-decoration:underline}
.social-icons{display:flex;align-items:center;gap:8px}
.social-icons a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;transition:.15s}
.social-icons a:hover{background:var(--maroon)}
.social-icons svg{width:14px;height:14px;fill:#fff}

/* 4. Header / primary nav --------------------------------------------------
   Markup here is produced by wp_nav_menu() in header.php using WordPress's
   default menu walker, so the class names below are WP's own conventions
   (.menu-item-has-children, .sub-menu) rather than the old static-site
   classes (.has-dropdown, .dropdown). This is what makes the menu fully
   editable from Appearance > Menus. */
header.site{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.04)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--teal);text-decoration:none;white-space:nowrap}
.brand .logo-img{height:68px;width:auto;display:block}

nav.main{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav.main ul.primary-menu{display:flex;list-style:none;margin:0;padding:0;gap:2px;align-items:center}
nav.main ul.primary-menu > li{position:relative}
nav.main ul.primary-menu > li > a{display:flex;align-items:center;gap:5px;color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:600;padding:10px 12px;border-radius:8px}
nav.main ul.primary-menu > li > a:hover,
nav.main ul.primary-menu > li.open > a{color:var(--teal);background:#f3f7fb}
nav.main ul.primary-menu > li.current-menu-item > a,
nav.main ul.primary-menu > li.current-menu-parent > a{color:var(--teal)}
nav.main ul.primary-menu > li.menu-item-has-children > a:after{content:'\25BE';font-size:.7em;margin-left:2px;transition:transform .15s}
nav.main ul.primary-menu > li.open > a:after{transform:rotate(180deg)}

.sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(20,40,60,.14);min-width:230px;padding:8px;list-style:none;margin:8px 0 0}
li.open > .sub-menu{display:block}
.sub-menu li a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.92rem}
.sub-menu li a:hover{background:#f3f7fb;color:var(--teal)}
.sub-menu li.view-all a{color:var(--maroon);font-weight:700;border-top:1px solid var(--border);margin-top:6px;padding-top:10px}

.cta-btn{background:var(--maroon);color:#fff;height:35px;padding:0 12px;font-size:.8rem;border-radius:10px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--maroon);transition:.15s}
.cta-btn:hover{background:#8f3d43;border-color:#8f3d43;color:#fff}
.cta-secondary{border:2px solid var(--blue);color:var(--blue);height:35px;padding:0 10px;font-size:.8rem;border-radius:10px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;justify-content:center;background:#fff}
.cta-secondary:hover{background:var(--blue);color:#fff}

.cta-secondary.on-dark{border-color:#fff;color:#fff}
.cta-secondary.on-dark:hover{background:#fff;color:var(--teal)}

.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--teal);cursor:pointer}

/* 5. Hero ------------------------------------------------------------------ */
.hero{padding:64px 0 40px;background:linear-gradient(180deg,#f3f7fb,#fff)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero.hero-center .wrap{display:block;max-width:820px;text-align:center}
.eyebrow{display:inline-block;color:var(--maroon);text-transform:uppercase;letter-spacing:1.5px;font-size:.78rem;font-weight:700;background:#fbeeef;padding:6px 14px;border-radius:20px;margin-bottom:14px}
.hero h1{font-size:2.2rem;margin-bottom:16px}
.hero p.sub{color:var(--muted);font-size:1.06rem;max-width:600px}
.hero.hero-center p.sub{margin-left:auto;margin-right:auto}
.hero .ctas{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}
.hero.hero-center .ctas{justify-content:center}
.hero-art{width:100%;height:auto;border-radius:20px;box-shadow:0 24px 50px rgba(21,105,145,.22);object-fit:cover;aspect-ratio:4/3}

/* quick contact chips (contact page hero) */
.quick-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.quick-chips a{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:30px;padding:9px 18px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;box-shadow:0 4px 12px rgba(20,40,60,.05);transition:.15s}
.quick-chips a:hover{border-color:var(--teal);color:var(--teal)}

/* trust bar (about page) */
.trust-bar{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.trust-bar span{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:30px;padding:8px 16px;font-size:.86rem;font-weight:600;color:var(--ink);box-shadow:0 4px 12px rgba(20,40,60,.05)}

/* 6. Mission strip ----------------------------------------------------------
   Background image is set inline per-page (style="background-image:...")
   since different pages use different photos; base look lives here. */
.mission{position:relative;padding:54px 0;background-color:var(--teal);background-size:cover;background-position:center;color:#fff}
.mission .wrap{max-width:900px;text-align:center}
.mission h2{color:#fff;margin-bottom:12px}
.mission p{margin:0;font-size:1.15rem;color:#eef3fa}

/* Scrolling marquee ticker (home page): short icon + phrase items slide
   continuously right-to-left in one compact line, full-bleed edge to edge,
   pausing on hover. The item list is duplicated once in the markup so the
   loop is seamless. Kept deliberately shorter/smaller than the plain
   .mission strip used on other pages via the extra .mission-ticker class.
   Dressed up with a depth gradient, glassy icon chips, a soft edge fade
   (mask-image) so items dissolve in/out instead of hard-cutting, and a
   glowing accent dot pulled from the brand's maroon for a bit of sparkle. */
.mission-ticker{
	padding:5px 0;
	background:linear-gradient(120deg,#0e4c61 0%,#156991 45%,#1c85ab 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.1);
	position:relative;
}
.mission-marquee{
	overflow:hidden;width:100%;
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.mission-marquee-track{display:flex;width:max-content;align-items:center;animation:aia-marquee 34s linear infinite}
.mission-marquee:hover .mission-marquee-track{animation-play-state:paused}
.mm-group{display:flex;align-items:center;flex:none}
.mm-item{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.01em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.18);white-space:nowrap;flex:none}
.mm-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);box-shadow:0 1px 4px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.2);font-size:.58rem;line-height:1;flex:none}
.mm-sep{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--maroon);box-shadow:0 0 0 3px rgba(166,77,83,.18),0 0 7px rgba(166,77,83,.85);margin:0 22px;flex:none}
@keyframes aia-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 7. Why-split -------------------------------------------------------------- */
.why-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.why-media img{width:100%;border-radius:20px;box-shadow:0 20px 45px rgba(20,40,60,.16);aspect-ratio:3/4;object-fit:cover}

/* 7b. Effective-split (home page) --------------------------------------- */
.effective-split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.effective-content .section-head{text-align:left;margin:0 0 22px;max-width:none}
.effective-media img{width:100%;border-radius:20px;box-shadow:0 20px 45px rgba(20,40,60,.16);aspect-ratio:3/4;object-fit:cover}

/* 7c. Why-cards (home page, photo-led card grid) ------------------------ */
.why-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px}
.why-card{border-radius:28px;padding:20px;display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(20,40,60,.12)}
.why-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:20px}
.why-card h3{font-size:1.25rem;margin-bottom:10px}
.why-card p{font-size:.95rem;margin:0;line-height:1.6}
.why-card:nth-child(odd){background:var(--ink)}
.why-card:nth-child(odd) h3{color:var(--teal)}
.why-card:nth-child(odd) p{color:rgba(255,255,255,.82)}
.why-card:nth-child(even){background:var(--teal)}
.why-card:nth-child(even) h3{color:var(--ink)}
.why-card:nth-child(even) p{color:rgba(255,255,255,.92)}
.why-content .section-head{text-align:left;margin:0 0 22px;max-width:none}
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feature-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.feature-list li:last-child{border-bottom:none;padding-bottom:0}
.feature-list .f-icon{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.feature-list h3{font-size:1rem;margin-bottom:4px}
.feature-list p{color:var(--muted);font-size:.93rem;margin:0}

/* 8. Courses (teal section) -------------------------------------------------- */
.courses-teal{background:var(--teal)}
.courses-teal .section-head h2{color:#fff}
.courses-teal .section-head p{color:#dcecf2}
.courses-teal .card{border:none}
.courses-teal .badge-blue{background:#eaf0f8;color:var(--blue)}
.courses-teal .badge-teal{background:#dff0f5;color:var(--teal)}
.courses-teal .badge-maroon{background:#fbeeef;color:var(--maroon)}

/* 9. Timeline ----------------------------------------------------------------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.timeline:before{content:'';position:absolute;top:23px;left:9%;right:9%;height:2px;background:repeating-linear-gradient(90deg,var(--maroon) 0 10px,transparent 10px 18px)}
.timeline .step{position:relative;text-align:center}
.timeline .num{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px;font-family:Georgia,serif;box-shadow:0 0 0 6px #fdf2f3}
.timeline h3{font-size:1rem;margin-bottom:6px}
.timeline p{color:var(--muted);font-size:.92rem;margin:0}

/* 10. Quote card ----------------------------------------------------------------- */
.quote-section{background:#faf5f6}
.quote-section.tone-blue{background:#f3f7fb}
.quote-card{max-width:780px;margin:0 auto;text-align:center;background:#fff;border-radius:20px;padding:44px 40px;box-shadow:0 20px 50px rgba(166,77,83,.14);border-top:4px solid var(--maroon)}
.quote-card.teal-top{border-top-color:var(--teal);box-shadow:0 20px 50px rgba(21,105,145,.14);text-align:left}
.quote-card .quote-icon{width:60px;height:60px;border-radius:50%;background:#fbeeef;color:var(--maroon);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 20px;font-family:Georgia,serif;font-weight:700}
.quote-card.teal-top .quote-icon{background:#e4f1f5;color:var(--teal);margin:0 0 20px}
.quote-card h2{font-size:1.8rem}
.quote-card p{font-size:1.05rem;color:var(--muted);margin:0 0 16px}

/* 10b. PDF download card (Dua e Jameela page) ------------------------------------ */
.pdf-card{max-width:700px;margin:0 auto;text-align:center;background:#fff;border-radius:20px;padding:44px 40px;box-shadow:0 20px 50px rgba(20,40,60,.15)}
.pdf-card .icon-badge{margin:0 auto 18px}
.pdf-card p{color:var(--muted)}
.quote-card p:last-child{margin-bottom:0}
.arabic-text{font-size:1.02rem;line-height:1.95;color:var(--ink);background:#faf7f0;border:1px solid var(--border);border-radius:12px;padding:22px 26px;margin:6px 0 18px}

/* 11. Note callout ------------------------------------------------------------ */
.note-callout{background:#f3f7fb;border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:12px;padding:26px 30px;max-width:820px;margin:24px auto 0}
.note-callout .note-label{display:flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.78rem;margin-bottom:12px}
.note-callout p{color:var(--muted);font-size:1rem;margin:0}
.note-callout p:last-child{margin-bottom:0}

/* 12. Prose section ------------------------------------------------------------ */
.prose{max-width:820px;margin:0 auto}
.prose p{color:var(--muted);font-size:1.03rem}
.prose .section-head{text-align:left;margin:0 0 20px;max-width:none}

/* 13. Plain checklist (no image) ------------------------------------------------ */
.plain-checklist{max-width:760px;margin:0 auto}
.plain-checklist p.closing{text-align:center;font-weight:600;color:var(--ink);margin-top:22px}
.on-dark-fallback{border-color:#fff;color:#fff}
.trailing-note{max-width:820px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:.95rem;font-style:italic}

/* 14. Location cards -----------------------------------------------------------
   Three different class names were used on different location pages for the
   same visual component (borough / region / city) — all kept as aliases so
   every ported page renders identically without editing markup. */
.borough-card,.region-card,.city-card{background:#fff;border-left:4px solid var(--blue);border-radius:12px;padding:24px 26px;box-shadow:0 8px 20px rgba(20,40,60,.06)}
.borough-card.teal,.region-card.teal,.city-card.teal{border-left-color:var(--teal)}
.borough-card.maroon,.region-card.maroon,.city-card.maroon{border-left-color:var(--maroon)}
.borough-card h3,.region-card h3,.city-card h3{font-size:1.08rem;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.borough-card p,.region-card p,.city-card p{color:var(--muted);font-size:.93rem;margin:0}

/* 15. Generic grid / card / icon-badge system ------------------------------------ */
.section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.section-head h2{font-size:2rem}
.section-head p{color:var(--muted);font-size:1.05rem}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-5{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:0 8px 24px rgba(20,40,60,.05);display:flex;flex-direction:column}
.icon-badge{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:14px}
.badge-blue{background:#eaf0f8;color:var(--blue)}
.badge-teal{background:#e4f1f5;color:var(--teal)}
.badge-maroon{background:#fbeeef;color:var(--maroon)}
.card h3{font-size:1.1rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:16px;flex:1}
.card .card-link{font-weight:700;color:var(--teal);text-decoration:none;font-size:.92rem}
.card .card-link:hover{text-decoration:underline}
.who-card,.value-card{text-align:center}
.who-card .icon-badge,.value-card .icon-badge{margin:0 auto 14px}

/* 16. Areas-served (teal pills) --------------------------------------------------- */
.areas{background:var(--teal);color:#fff}
.areas .section-head h2{color:#fff}
.areas .section-head p{color:#dcecf2}
.pill-group h3{color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;text-align:center}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:7px 16px;border-radius:20px;font-size:.88rem}
.pill.city{background:var(--maroon);border-color:var(--maroon);font-weight:600}
.areas .note{text-align:center;color:#dcecf2;max-width:700px;margin:0 auto}

/* 17. Comparison cards ------------------------------------------------------------- */
.compare-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 8px 24px rgba(20,40,60,.05)}
.compare-card h3{font-size:1.2rem}
.compare-card p{color:var(--muted);margin-bottom:0}
.compare-card.blue{border-top:4px solid var(--blue)}
.compare-card.teal{border-top:4px solid var(--teal)}
.compare-note{max-width:820px;margin:24px auto 0;text-align:center;color:var(--muted);font-size:.98rem;font-style:italic}
.path-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 8px 24px rgba(20,40,60,.05)}
.path-card h3{font-size:1.15rem}
.path-card p{color:var(--muted);margin-bottom:0}
.path-note{max-width:820px;margin:24px auto 0;text-align:center;color:var(--muted);font-size:.95rem;font-style:italic}

/* 18. "Levels" progression component (Islamic education page) ---------------------- */
.levels{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.levels:before{content:'';position:absolute;top:23px;left:11%;right:11%;height:2px;background:repeating-linear-gradient(90deg,var(--maroon) 0 10px,transparent 10px 18px)}
.levels .level{position:relative;text-align:center}
.levels .num{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px;font-family:Georgia,serif;box-shadow:0 0 0 6px #fdf2f3}
.levels h3{font-size:1rem;margin-bottom:6px}
.levels p{color:var(--muted);font-size:.92rem;margin:0}

/* 19. Sanad chain (Ijazah page) ------------------------------------------------------ */
.sanad-chain{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;margin:28px 0 8px}
.sanad-node{background:#fff;border:2px solid var(--teal);border-radius:14px;padding:14px 18px;text-align:center;font-weight:700;font-size:.86rem;color:var(--ink);min-width:120px;box-shadow:0 6px 16px rgba(20,40,60,.06)}
.sanad-node.start,.sanad-node.end{border-color:var(--maroon);background:#fbeeef;color:var(--maroon)}
.sanad-arrow{color:var(--muted);font-size:1.3rem;padding:0 10px;flex:none}
.sanad-caption{text-align:center;color:var(--muted);font-size:.88rem;font-style:italic}

/* 20. FAQ accordion ------------------------------------------------------------------- */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;box-shadow:0 4px 14px rgba(20,40,60,.04)}
.faq-item summary{font-weight:700;cursor:pointer;padding:18px 22px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'+';font-size:1.4rem;color:var(--maroon);flex:none}
.faq-item[open] summary:after{content:'\2212'}
.faq-item .faq-a{padding:0 22px 20px;color:var(--muted)}

/* 21. Final CTA band -------------------------------------------------------------------- */
.cta-band{position:relative;background-color:var(--maroon);background-size:cover;background-position:center;color:#fff;text-align:center;padding:64px 0}
.cta-band h2{color:#fff;font-size:1.9rem}
.cta-band p{color:#eaf3fa;max-width:680px;margin:0 auto 22px;font-size:1.03rem}
.cta-band .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.inline-cta{background:var(--teal);color:#fff;border-radius:var(--radius);padding:30px 32px;margin:36px 0;text-align:center}
.inline-cta h3{color:#fff;margin-bottom:10px}
.inline-cta p{color:#dcecf2;margin-bottom:18px}
.callout{background:#fdf2f3;border-left:4px solid var(--maroon);border-radius:12px;padding:22px 26px;margin:24px 0}
.callout p{margin:0;color:var(--ink)}
.callout p + p{margin-top:10px}

/* 22. Footer ----------------------------------------------------------------------------- */
footer.site{background:var(--teal);color:#d6e7ee;padding:56px 0 20px}
footer.site h4{color:#fff;font-size:1rem;margin-bottom:16px}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px}
footer.site a{color:#d6e7ee;text-decoration:none;font-size:.92rem}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer.site .brand{color:#fff}
footer.site .brand .logo-img{height:44px;filter:brightness(0) invert(1)}
footer.site p.tag{font-size:.9rem;color:#bcdae6;margin:14px 0 18px}
footer.site .social-icons a{background:rgba(255,255,255,.15)}
footer.site .social-icons a:hover{background:var(--maroon)}
.bottom-bar{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:20px;text-align:center;font-size:.85rem;color:#bcdae6}

/* 23. Contact page: form + sidebar ---------------------------------------------------------- */
.contact-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:36px;box-shadow:0 8px 24px rgba(20,40,60,.06)}
.form-row{margin-bottom:18px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.form-row textarea{resize:vertical;min-height:110px}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.form-note{font-size:.85rem;color:var(--muted);margin-top:10px}

/* Contact Form 7 output — reuses the .form-row/.form-row-2 layout above; these
   rules cover the extra markup CF7 itself renders (wrapper spans, submit
   button, validation tips, response message). */
.contact-form input[type="submit"].cta-btn{border:none!important;cursor:pointer;width:100%;text-align:center;font-family:inherit}
.wpcf7-not-valid-tip{color:var(--maroon)!important;font-size:.82rem!important;margin-top:4px!important;display:block!important}
.wpcf7-response-output{border-radius:10px!important;padding:12px 16px!important;font-size:.9rem!important;margin:16px 0 0!important}
.contact-form form.sent .wpcf7-response-output{border-color:var(--teal)!important;color:var(--teal)!important}
.contact-form form.invalid .wpcf7-response-output,.contact-form form.unaccepted .wpcf7-response-output,.contact-form form.payment-required .wpcf7-response-output{border-color:var(--maroon)!important;color:var(--maroon)!important}
.wpcf7-spinner{margin:0 0 0 8px!important}
.contact-sidebar{background:var(--teal);color:#fff;border-radius:var(--radius);padding:32px}
.contact-sidebar h3{color:#fff;font-size:1.2rem}
.contact-sidebar dl{margin:18px 0 0}
.contact-sidebar dt{font-weight:700;color:#fff}
.contact-sidebar dd{margin:4px 0 16px;color:#dcecf2;font-size:.9rem}
.contact-sidebar dd:last-child{margin-bottom:0}
.contact-sidebar .quick-links{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.contact-sidebar .quick-links a{background:rgba(255,255,255,.14);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:8px;font-size:.92rem}
.contact-sidebar .quick-links a:hover{background:rgba(255,255,255,.26)}

/* 24. Blog: post cards (archive) + article (single post) ---------------------------------- */
.page-hero{padding:56px 0 40px;background:linear-gradient(180deg,#f3f7fb,#fff);text-align:center}
.page-hero h1{font-size:2.2rem}
.page-hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:1.05rem}

.post-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 24px rgba(20,40,60,.05);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.15s}
.post-card:hover{box-shadow:0 16px 34px rgba(20,40,60,.12);transform:translateY(-2px)}
.post-card img{width:100%;height:200px;object-fit:cover}
.post-card .post-body{padding:22px}
.post-card .post-tag{color:var(--maroon);text-transform:uppercase;letter-spacing:1px;font-size:.72rem;font-weight:700;margin-bottom:8px;display:block}
.post-card h2{font-size:1.15rem;margin-bottom:8px;color:var(--ink)}
.post-card p{color:var(--muted);font-size:.94rem;margin-bottom:0}

.article-hero{padding:48px 0 36px;background:linear-gradient(180deg,#f3f7fb,#fff)}
.article-hero .wrap{max-width:820px}
.article-hero h1{font-size:2.1rem;margin-bottom:14px}
.article-meta{color:var(--muted);font-size:.9rem;margin-bottom:0}
.article-cover{margin:0 0 8px}
.article-cover img{width:100%;border-radius:20px;box-shadow:0 20px 45px rgba(20,40,60,.14);aspect-ratio:16/9;object-fit:cover}
article{padding:8px 0 56px}
.article-body{max-width:820px;margin:0 auto}
.article-body h2{font-size:1.5rem;margin-top:42px}
.article-body h3{font-size:1.15rem;margin-top:24px}
.article-body p{color:var(--ink);font-size:1.05rem}
.article-body ul,.article-body ol{color:var(--ink);font-size:1.05rem;padding-left:22px}
.article-body li{margin-bottom:8px}
.tldr-box{background:#eef3fb;border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:12px;padding:24px 26px;margin:24px 0 32px}
.tldr-box .tldr-label{display:flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.78rem;margin-bottom:12px}
.tldr-box ol{margin:0;padding-left:20px}
.tldr-box li{margin-bottom:6px;font-size:.98rem}
.steps-table{width:100%;border-collapse:collapse;margin:22px 0 32px;font-size:.95rem}
.steps-table th,.steps-table td{border:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top}
.steps-table th{background:var(--teal);color:#fff;font-family:Georgia,serif}
.steps-table tr:nth-child(even) td{background:#f7f9fc}
.steps-table td.step-num{font-weight:700;color:var(--maroon);width:36px;text-align:center}

/* 25. Utility / alt backgrounds --------------------------------------------------------------- */
.alt-bg{background:#f7f9fc}
.tint-maroon{background:#fdf2f3}

/* 26. Responsive breakpoints ------------------------------------------------------------------- */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{max-width:460px;margin:0 auto}
  footer.site .cols{grid-template-columns:1fr 1fr 1fr}
  .why-split,.effective-split{grid-template-columns:1fr}
  .why-media,.effective-media{max-width:420px;margin:0 auto}
  .why-cards-grid{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(3,1fr)}
  .timeline:before{display:none}
  .levels{grid-template-columns:repeat(2,1fr)}
  .levels:before{display:none}
  .contact-split{grid-template-columns:1fr}
}
@media(max-width:600px){
  .timeline{grid-template-columns:1fr}
  .sanad-chain{flex-direction:column}
  .sanad-arrow{transform:rotate(90deg)}
}
@media(max-width:840px){
  .nav-toggle{display:block}
  nav.main{position:fixed;top:0;right:-100%;height:100vh;width:280px;background:#fff;flex-direction:column;align-items:stretch;padding:80px 20px 20px;box-shadow:-10px 0 30px rgba(0,0,0,.15);transition:right .2s;overflow-y:auto}
  nav.main.open{right:0}
  nav.main ul.primary-menu{flex-direction:column;align-items:stretch;gap:0}
  nav.main ul.primary-menu > li{width:100%}
  nav.main ul.primary-menu > li > a{width:100%;justify-content:space-between}
  .sub-menu{position:static;box-shadow:none;border:none;padding:0 0 0 14px;margin:0}
  nav.main .cta-btn{margin-top:14px;text-align:center}
  header.site .wrap{flex-wrap:wrap}
  .topbar .wrap{justify-content:center;text-align:center}
}
@media(max-width:640px){
  .hero{padding:40px 0}
  .hero h1{font-size:1.8rem}
  section{padding:46px 0}
  .section-head h2{font-size:1.6rem}
  .why-cards-grid{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  .quote-card,.pdf-card{padding:32px 24px}
  .quote-card h2{font-size:1.5rem}
  .form-row-2{grid-template-columns:1fr}
  .contact-form{padding:26px 22px}
  .note-callout{padding:24px 22px}
}

/* 27. Blog pagination (home.php) ------------------------------------------------ */
.pagination{display:flex;justify-content:center;gap:8px;margin:8px 0 56px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.pagination .page-numbers.current{background:var(--teal);border-color:var(--teal);color:#fff}
.pagination .page-numbers.dots{border-color:transparent}

/* 28. Elementor compatibility (Home page container conversion) ------------------
   The Home page is now built from Elementor containers/widgets so every
   section, heading, paragraph, image, and button is individually editable.
   Elementor's own container defaults (flex display, its own button/image
   markup) can win over the rules above on specificity or load order, so
   these targeted overrides make the Elementor-rendered markup match the
   original design exactly. */
.hero .wrap{display:grid!important;grid-template-columns:1.1fr .9fr!important;gap:44px!important;align-items:center!important}
.why-cards-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:28px!important;margin-top:8px!important}
.grid.grid-4{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:24px!important}
.grid.grid-5{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:24px!important}
.grid.grid-2{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;gap:24px!important}
.timeline{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:24px!important}
.levels{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:24px!important}
.effective-split{display:grid!important;grid-template-columns:1.15fr .85fr!important;gap:48px!important;align-items:center!important}
.ctas{display:flex!important;flex-direction:row!important;gap:14px!important;flex-wrap:wrap!important}
.ctas .cta-btn,.ctas .cta-secondary{flex:none!important;width:auto!important}
.pills{display:flex!important;flex-wrap:wrap!important;gap:10px!important;justify-content:center!important;margin-bottom:36px!important}
.sanad-chain{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:2px!important}
.sanad-chain .sanad-node,.sanad-chain .sanad-arrow{flex:none!important;width:auto!important}

.feature-list{display:flex!important;flex-direction:column!important}
.feature-list .feature-li{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.feature-list .feature-li>.e-con:not(.f-icon){flex:1 1 auto!important;width:auto!important}
.feature-list .feature-li:last-child{border-bottom:none;padding-bottom:0}

.eyebrow p,.icon-badge p,.f-icon p,.num p,.card-link p{margin:0}
.eyebrow{display:inline-flex!important;align-self:flex-start!important;width:auto!important}
.icon-badge,.f-icon,.num{display:flex!important;align-items:center!important;justify-content:center!important;flex:none!important;align-self:flex-start!important}
.icon-badge{width:52px!important;height:52px!important;border-radius:14px!important;margin-bottom:14px!important;padding:0!important}
.f-icon{width:44px!important;height:44px!important;padding:0!important}
.num{width:46px!important;height:46px!important;align-self:center!important;margin:0 auto 16px!important;padding:0!important}
.who-card .icon-badge,.value-card .icon-badge{align-self:center!important;margin:0 auto 14px!important}

.hero-art img{width:100%!important;height:auto!important;border-radius:20px!important;box-shadow:0 24px 50px rgba(21,105,145,.22)!important;object-fit:cover!important;aspect-ratio:4/3!important}

.cta-btn .elementor-button{background:var(--maroon)!important;color:#fff!important;height:35px!important;padding:0 12px!important;font-size:.8rem!important;border-radius:10px!important;font-weight:700!important;border:2px solid var(--maroon)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.cta-btn .elementor-button:hover{background:#8f3d43!important;border-color:#8f3d43!important}
.cta-secondary .elementor-button{border:2px solid var(--blue)!important;color:var(--blue)!important;background:#fff!important;height:35px!important;padding:0 10px!important;font-size:.8rem!important;border-radius:10px!important;font-weight:700!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.cta-secondary .elementor-button:hover{background:var(--blue)!important;color:#fff!important}

.mission{background-image:linear-gradient(120deg,rgba(21,105,145,.92),rgba(85,130,188,.88)),url('assets/images/twilight-mosque.webp')!important}
.cta-band{background-image:linear-gradient(120deg,rgba(166,77,83,.93),rgba(28,37,48,.88)),url('assets/images/zayed-mosque.webp')!important}

/* Elementor's own heading-widget default color wins over the theme's plain
   `.hero h1` / `.card h3` style selectors on specificity, so headings were
   rendering in Elementor's default blue instead of the original design's
   colors. Restore the exact same colors the static design used everywhere. */
.elementor-heading-title{color:var(--ink)!important}
.courses-teal .section-head .elementor-heading-title{color:#fff!important}
.areas .section-head .elementor-heading-title,.areas .pill-group .elementor-heading-title{color:#fff!important}
.cta-band .elementor-heading-title{color:#fff!important}
.why-card:nth-child(odd) .elementor-heading-title{color:var(--teal)!important}
.why-card:nth-child(even) .elementor-heading-title{color:var(--ink)!important}

/* Elementor gives every container a default 10px padding, 0 border-radius, no
   border, and "start" text-align unless told otherwise — these silently beat
   the theme's plain class selectors above on load order. Re-declare the exact
   original values, !important, everywhere a container stands in for what used
   to be a plain styled div. */
.wrap,.ctas,.pill-group,.step,.faq-list,.section-head,.why-cards-grid,.grid.grid-4,
.timeline,.effective-split,.feature-list,.pills,.feature-li{padding:0!important}
.wrap{max-width:1160px!important;margin:0 auto!important;padding:0 24px!important}
.faq-list{max-width:820px!important;margin:0 auto!important}

.why,.courses-teal,.tint-maroon,.areas,.alt-bg{padding:60px 0!important}
#effective,#who-can-join{padding:60px 0!important}
.hero{padding:64px 0 40px!important}
.mission{padding:54px 0!important}
.cta-band{padding:64px 0!important}

.card{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:26px!important;box-shadow:0 8px 24px rgba(20,40,60,.05)!important}
.why-card{border-radius:28px!important;padding:20px!important;box-shadow:0 16px 40px rgba(20,40,60,.12)!important}
.why-card img{border-radius:18px!important;margin-bottom:20px!important}
.effective-media img{border-radius:20px!important;box-shadow:0 20px 45px rgba(20,40,60,.16)!important}
.faq-item{background:#fff!important;border:1px solid var(--border)!important;border-radius:12px!important;margin-bottom:12px!important;box-shadow:0 4px 14px rgba(20,40,60,.04)!important;padding:0!important}
.plain-checklist{max-width:760px!important;margin:0 auto!important;padding:0!important}
.plain-checklist .closing{text-align:center!important;font-weight:600!important;color:var(--ink)!important;margin-top:22px!important}

/* FAQ section: native Elementor Accordion widget, styled to match the rest
   of the site (same card look as everything else) and left fully
   responsive — the accordion is block-level/full-width by default, so it
   naturally stacks correctly at any viewport width. */
.faq-list .elementor-accordion-item{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;box-shadow:0 4px 14px rgba(20,40,60,.04);overflow:hidden}
.faq-list .elementor-tab-title{font-weight:700;padding:18px 22px;cursor:pointer;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px}
.faq-list .elementor-tab-title .elementor-accordion-icon{color:var(--teal);flex:none}
.faq-list .elementor-tab-title .elementor-accordion-title{color:var(--teal)!important}
.faq-list .elementor-tab-title.elementor-active .elementor-accordion-title{color:var(--teal)!important}
.faq-list .elementor-tab-title:hover .elementor-accordion-title{color:var(--maroon)!important}
.faq-list .elementor-tab-content{padding:0 22px 20px;color:var(--muted);border-top:none}

.section-head{text-align:center!important;max-width:760px!important;margin:0 auto 40px!important}
.effective-content .section-head{text-align:left!important;margin:0 0 22px!important;max-width:none!important}
.why-content .section-head{text-align:left!important;margin:0 0 22px!important;max-width:none!important}
.prose .section-head{text-align:left!important;margin:0 0 20px!important;max-width:none!important}
.who-card,.value-card{text-align:center!important}
.step{text-align:center!important}

/* About page components (quote card, why-split, trust-bar) — same
   Elementor-default-vs-theme-CSS fight as everywhere else, fixed the same
   way: re-declare the original values with !important. */
.why-split{display:grid!important;grid-template-columns:.85fr 1.15fr!important;gap:48px!important;align-items:center!important}
.why-media img{border-radius:20px!important;box-shadow:0 20px 45px rgba(20,40,60,.16)!important;aspect-ratio:3/4!important;object-fit:cover!important}
.trust-bar{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin-top:26px!important;padding:0!important}
.trust-bar .elementor-widget-text-editor .elementor-text-editor{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
.trust-bar span{display:inline-flex!important;padding:8px 16px!important;border-radius:30px!important}
.quote-card{max-width:780px!important;margin:0 auto!important;text-align:center!important;background:#fff!important;border-radius:20px!important;padding:44px 40px!important;box-shadow:0 20px 50px rgba(166,77,83,.14)!important;border-top:4px solid var(--maroon)!important}
.quote-card.teal-top{border-top-color:var(--teal)!important;box-shadow:0 20px 50px rgba(21,105,145,.14)!important;text-align:left!important}
.quote-icon{width:60px!important;height:60px!important;border-radius:50%!important;background:#fbeeef!important;color:var(--maroon)!important;margin:0 auto 20px!important;font-size:1.7rem!important}
.quote-card.teal-top .quote-icon{background:#e4f1f5!important;color:var(--teal)!important;margin:0 auto 20px!important}
.quote-icon p{color:var(--maroon)!important;margin:0!important}

/* Contact page hero: "Quick Contact" teal card replacing the plain
   centered layout other pages don't need (they use a text+photo split
   instead — Contact has no hero photo, so this fills that spot). */
.hero-contact-card{background:var(--teal)!important;border-radius:var(--radius)!important;padding:32px!important;color:#fff!important}
.hero-contact-card .elementor-heading-title{color:#fff!important;margin-bottom:18px!important}
.hero-contact-row{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;margin-bottom:18px!important;padding:0!important}
.hero-contact-row:last-child{margin-bottom:0!important}
.hero-contact-row .icon-badge{background:rgba(255,255,255,.16)!important;color:#fff!important}
.hero-contact-row p{margin:0!important}
.hero-contact-label{color:#bcdae6!important;font-size:.78rem!important;text-transform:uppercase;letter-spacing:.5px;font-weight:700!important}
.hero-contact-row a{color:#fff!important;font-weight:700!important;text-decoration:none!important}
.hero-contact-row a:hover{text-decoration:underline!important}

/* Contact page: hero quick-chips (same nested-widget flex-wrap fix as
   trust-bar), the two-column form/sidebar layout, and the sidebar's
   vertical quick-links list. */
.quick-chips{display:flex!important;flex-wrap:wrap!important;gap:12px!important;justify-content:center!important;margin-top:28px!important;padding:0!important}
.quick-chips .elementor-widget-text-editor .elementor-text-editor{display:flex!important;flex-wrap:wrap!important;gap:12px!important;justify-content:center!important}
.quick-chips a{display:inline-flex!important;padding:9px 18px!important;border-radius:30px!important}

.contact-split{display:grid!important;grid-template-columns:1.15fr .85fr!important;gap:40px!important;align-items:start!important;padding:0!important}
.contact-form{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:36px!important;box-shadow:0 8px 24px rgba(20,40,60,.06)!important}
.contact-sidebar{background:var(--teal)!important;color:#fff!important;border-radius:var(--radius)!important;padding:32px!important}
.contact-sidebar .elementor-heading-title{color:#fff!important}
.contact-sidebar .quick-links{margin-top:22px!important;padding:0!important}
.contact-sidebar .quick-links .elementor-widget-text-editor .elementor-text-editor{display:flex!important;flex-direction:column!important;gap:10px!important}
.contact-sidebar .quick-links a{display:flex!important;padding:10px 16px!important;border-radius:10px!important}

/* Elementor's default paragraph color (muted gray) wins over small "leaf"
   text like the timeline numbers, icon-badge emoji, and the eyebrow label,
   which relied on inheriting color from their wrapper. Restore explicitly. */
.num p{color:#fff!important}
.eyebrow p{color:var(--maroon)!important}
.badge-blue p{color:var(--blue)!important}
.badge-teal p{color:var(--teal)!important}
.badge-maroon p{color:var(--maroon)!important}

/* The header's nav CTA is visually distinct from the in-page CTA buttons
   (smaller radius), so it gets its own class rather than touching .cta-btn
   globally, which would also affect every page's Elementor buttons. */
.nav-cta{border-radius:10px!important;height:35px!important;padding:0 12px!important;font-size:.8rem!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px}
.nav-cta::after{content:'\2192';font-size:.95em;line-height:1}

/* Responsive: the !important grid overrides above are needed to beat
   Elementor's own container defaults, but that also silently overrides the
   original responsive breakpoints below them in the file. Re-declare those
   breakpoints with matching !important so the layout still stacks/reflows
   on tablet and mobile exactly like the original design did. */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr!important}
  .why-cards-grid{grid-template-columns:repeat(2,1fr)!important}
  .timeline{grid-template-columns:repeat(3,1fr)!important}
  .levels{grid-template-columns:repeat(2,1fr)!important}
  .effective-split{grid-template-columns:1fr!important}
  .why-split{grid-template-columns:1fr!important}
  .contact-split{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  .why-cards-grid{grid-template-columns:1fr!important}
  .levels{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .timeline{grid-template-columns:1fr!important}
}

/* "Our Online Quran Courses" reworked so it no longer reads as a repeat of
   the "Why Families" section above it: white background instead of a solid
   teal band, with each card getting its own colored top accent instead of
   uniform teal. Scoped to #courses only — the shared .courses-teal class
   stays untouched for reuse on other pages later. */
#courses.courses-teal{background:#fff!important}
#courses .section-head .elementor-heading-title{color:var(--ink)!important}
#courses .section-head p{color:var(--muted)!important}
#courses .card{border-top:4px solid var(--blue)!important}
#courses .card:nth-child(2){border-top-color:var(--teal)!important}
#courses .card:nth-child(3){border-top-color:var(--maroon)!important}
#courses .card:nth-child(4){border-top-color:var(--blue)!important}

/* Reusable version of the same "fresh courses" look above, for any other
   page whose Courses section sits directly next to another teal-background
   section (e.g. Areas/Who We Serve) and would otherwise blend into it.
   Add this class alongside .courses-teal instead of the #courses ID hack. */
.courses-fresh{background:#fff!important}
.courses-fresh .section-head .elementor-heading-title{color:var(--ink)!important}
.courses-fresh .section-head p{color:var(--muted)!important}
.courses-fresh .card{border-top:4px solid var(--blue)!important}
.courses-fresh .card:nth-child(2){border-top-color:var(--teal)!important}
.courses-fresh .card:nth-child(3){border-top-color:var(--maroon)!important}
.courses-fresh .card:nth-child(4){border-top-color:var(--blue)!important}

/* 29. Repeated-section differentiation ---------------------------------------------
   Most pages reuse the same card-grid / icon-list pattern for 2-3 different
   sections. Two of those pairings repeat on nearly every page site-wide, so
   they get a real, universal shape change here instead of a per-page hack:
   - .who-card / .value-card (the "who enrolls" / "who joins" style grids)
     always sits alongside a plain .card grid on the same page — give it a
     distinct ring-icon, top-accent-border treatment instead of the same
     flat icon-on-top card.
   - .plain-checklist (the icon-list that always pairs with a why-split
     photo-list earlier on the page) becomes boxed/chip rows instead of the
     same divided-list look. */
.who-card,.value-card{
	background:#fbfbfd!important;
	border:1px solid var(--border)!important;
	border-top:3px solid var(--teal)!important;
	border-radius:20px!important;
	box-shadow:0 14px 34px rgba(20,40,60,.07)!important;
	padding:30px 26px 26px!important;
}
.who-card .icon-badge,.value-card .icon-badge{
	background:#fff!important;
	border:2px solid currentColor!important;
	box-shadow:0 4px 10px rgba(20,40,60,.08)!important;
	width:50px!important;
	height:50px!important;
	border-radius:50%!important;
}
.who-card h3,.value-card h3{margin-top:2px!important}

.plain-checklist .feature-list{display:flex!important;flex-direction:column!important;gap:12px!important}
.plain-checklist .feature-li{
	background:#f7fafb!important;
	border:1px solid var(--border)!important;
	border-left:3px solid var(--teal)!important;
	border-radius:12px!important;
	padding:16px 18px!important;
	margin:0!important;
}
.plain-checklist .feature-li:last-child{
	border:1px solid var(--border)!important;
	border-left:3px solid var(--teal)!important;
	padding:16px 18px!important;
}
.plain-checklist .f-icon{background:#fff!important;border:1px solid var(--border)!important;border-radius:10px!important}

/* Framed prose block — used on the couple of pages (Ijazah, Dua e Jameela)
   where a second plain-text "prose" section follows an earlier one; gives
   it a bordered box instead of reading as the same gray paragraph again. */
.prose.prose-framed{
	background:#f7fafb!important;
	border:1px solid var(--border)!important;
	border-left:4px solid var(--maroon)!important;
	border-radius:14px!important;
	padding:28px 30px!important;
}

/* "Islamic Studies Classes Online" (Courses page) reuses the same
   why-cards-grid photo cards as "Why Learn Quran Online" right above it on
   the same page, with the identical bold dark/teal overlay treatment —
   give it a lighter, catalog-style card (white background, colored top
   border, normal text colors) so the two sections read as different
   components instead of a repeat. */
#islamic-studies .why-card{
	background:#fff!important;
	border:1px solid var(--border)!important;
	border-top:4px solid var(--blue)!important;
	box-shadow:0 10px 26px rgba(20,40,60,.07)!important;
}
#islamic-studies .why-card:nth-child(2){border-top-color:var(--teal)!important}
#islamic-studies .why-card:nth-child(3){border-top-color:var(--maroon)!important}
#islamic-studies .why-card .elementor-heading-title{color:var(--ink)!important}
#islamic-studies .why-card p{color:var(--muted)!important}