{"id":14,"date":"2026-06-24T05:15:51","date_gmt":"2026-06-24T05:15:51","guid":{"rendered":"https:\/\/muslimacademy.online\/?page_id=14"},"modified":"2026-06-24T06:23:48","modified_gmt":"2026-06-24T06:23:48","slug":"14-2","status":"publish","type":"page","link":"https:\/\/muslimacademy.online\/index.php\/14-2\/","title":{"rendered":""},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n#ma-programs-section {\n    --ma-page: #f7fbfe;\n    --ma-card: #ffffff;\n    --ma-ink: #123449;\n    --ma-muted: #607b8a;\n    --ma-border: #d9ecf5;\n    --ma-blue: #18a9e6;\n    --ma-teal-deep: #0a4d68;\n    --ma-teal: #088395;\n    --ma-sky: #d8f3ff;\n    --ma-gold: #ffb300;\n    --ma-teal-glow: rgba(8, 131, 149, 0.35);\n    \n    width: 100vw;\n    max-width: 100vw;\n    margin-inline: calc(50% - 50vw);\n    margin-top: -1px !important; \/* \u0627\u0644\u0633\u0637\u0631 \u062f\u0647 \u0647\u064a\u0642\u0641\u0644 \u0627\u0644\u0641\u0627\u0635\u0644 \u0627\u0644\u0623\u0628\u064a\u0636 \u062a\u0645\u0627\u0645\u0627\u064b *\/\n    padding: 70px 0 50px;\n    overflow: hidden;\n    position: relative;\n    background: var(--ma-page);\n    color: var(--ma-ink);\n    font-family: \"Outfit\", system-ui, sans-serif;\n    transition: background 0.4s ease, color 0.4s ease;\n  }\n<\/style>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Alexandria:wght@500;600;700;800&#038;family=Outfit:wght@500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<!-- Original brand icons -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\">\n\n<style>\n  \/* =========================\n     ROOT & THEMING\n  ========================= *\/\n  #ma-programs-section,\n  #ma-programs-section * {\n    box-sizing: border-box;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  #ma-programs-section {\n    --ma-page: #f7fbfe;\n    --ma-card: #ffffff;\n    --ma-ink: #123449;\n    --ma-muted: #607b8a;\n    --ma-border: #d9ecf5;\n    --ma-blue: #18a9e6;\n    --ma-teal-deep: #0a4d68;\n    --ma-teal: #088395;\n    --ma-sky: #d8f3ff;\n    --ma-gold: #ffb300;\n    --ma-teal-glow: rgba(8, 131, 149, 0.35);\n    \n    width: 100vw;\n    max-width: 100vw;\n    margin-inline: calc(50% - 50vw);\n    padding: 70px 0 50px;\n    overflow: hidden;\n    position: relative;\n    background: var(--ma-page);\n    color: var(--ma-ink);\n    font-family: \"Outfit\", system-ui, sans-serif;\n    transition: background 0.4s ease, color 0.4s ease;\n  }\n\n  html.dark #ma-programs-section,\n  body.dark #ma-programs-section,\n  [data-theme=\"dark\"] #ma-programs-section {\n    --ma-page: #061d2a;\n    --ma-card: #0a2a3a;\n    --ma-ink: #f8fbff;\n    --ma-muted: #b8d0dc;\n    --ma-border: #164357;\n    --ma-teal-deep: #042533;\n    --ma-teal: #0b9fb5;\n    --ma-teal-glow: rgba(11, 159, 181, 0.45);\n  }\n\n  #ma-programs-section[dir=\"rtl\"] {\n    direction: rtl;\n    font-family: \"Alexandria\", system-ui, sans-serif;\n  }\n\n  \/* =========================\n     DYNAMIC WATERMARK\n  ========================= *\/\n  .ma-watermark {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 350px;\n    color: var(--ma-teal);\n    opacity: 0.04;\n    pointer-events: none;\n    z-index: 1;\n    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n    will-change: transform, opacity;\n  }\n  \n  html.dark .ma-watermark,\n  body.dark .ma-watermark,\n  [data-theme=\"dark\"] .ma-watermark {\n    opacity: 0.03;\n  }\n\n  .ma-watermark.is-fading {\n    opacity: 0 !important;\n    transform: translate(-50%, -45%) scale(0.9);\n  }\n\n  .ma-shell {\n    position: relative;\n    z-index: 2;\n    width: min(100%, 1200px);\n    margin: 0 auto;\n    padding: 0 18px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  \/* =========================\n     ARCH TRACK (THE CURVE)\n  ========================= *\/\n  .ma-arch-wrapper {\n    position: relative;\n    width: 100%;\n    height: 360px;\n    margin-top: 10px;\n    overflow: visible;\n    user-select: none;\n    touch-action: pan-y;\n  }\n\n  .ma-arch-track {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n  }\n\n  .ma-arch-track:active {\n    cursor: grabbing;\n  }\n\n  .ma-arch-item {\n    position: absolute;\n    left: 50%;\n    top: 30px;\n    width: 170px;\n    height: 170px;\n    margin-left: -85px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transform-origin: center center;\n    will-change: transform, opacity, filter, z-index;\n    z-index: 10;\n  }\n\n  .ma-arch-img-wrap {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    padding: 4px;\n    background: var(--ma-card);\n    border: 1px solid var(--ma-border);\n    box-shadow: 0 10px 25px rgba(0,0,0,0.06);\n    transition: all 0.4s ease;\n    overflow: hidden; \/* For Parallax *\/\n  }\n\n  .ma-arch-img-inner {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .ma-arch-item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    transform: scale(1.15); \/* Slightly larger for parallax space *\/\n    transform-origin: center;\n    will-change: transform;\n  }\n\n  \/* Smart Badge *\/\n  .ma-prog-badge {\n    position: absolute;\n    top: -5px;\n    right: 15px;\n    background: var(--ma-gold);\n    color: #fff;\n    font-size: 11px;\n    font-weight: 800;\n    padding: 4px 12px;\n    border-radius: 20px;\n    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.4);\n    opacity: 0;\n    transform: translateY(10px) scale(0.8);\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n    pointer-events: none;\n    z-index: 20;\n    font-family: inherit;\n  }\n\n  #ma-programs-section[dir=\"rtl\"] .ma-prog-badge {\n    right: auto;\n    left: 15px;\n  }\n\n  \/* Active Item Glow & States *\/\n  .ma-arch-item.is-active .ma-arch-img-wrap {\n    border: 2px solid var(--ma-gold);\n    box-shadow: 0 0 40px var(--ma-teal-glow), 0 15px 35px rgba(0,0,0,0.15);\n    background: var(--ma-card);\n  }\n\n  .ma-arch-item.is-active .ma-prog-badge {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  \/* =========================\n     CONTENT AREA\n  ========================= *\/\n  .ma-prog-content {\n    text-align: center;\n    max-width: 600px;\n    min-height: 170px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    opacity: 1;\n    transform: translateY(0);\n    transition: opacity 0.3s ease, transform 0.3s ease;\n  }\n\n  .ma-prog-content.is-fading {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n\n  .ma-prog-title {\n    margin: 0 0 10px;\n    font-size: clamp(26px, 3vw, 36px);\n    font-weight: 800;\n    color: var(--ma-ink);\n    letter-spacing: -0.02em;\n  }\n\n  .ma-prog-desc {\n    margin: 0 0 24px;\n    font-size: clamp(14px, 1.5vw, 17px);\n    line-height: 1.6;\n    color: var(--ma-muted);\n    font-weight: 500;\n  }\n\n  #ma-programs-section[dir=\"rtl\"] .ma-prog-title {\n    font-size: clamp(24px, 2.5vw, 32px);\n    font-weight: 700;\n    letter-spacing: 0;\n  }\n\n  .ma-prog-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 14px 32px;\n    border-radius: 99px;\n    background: linear-gradient(135deg, var(--ma-teal), var(--ma-teal-deep));\n    color: #ffffff !important;\n    font-size: 15px;\n    font-weight: 700;\n    text-decoration: none;\n    box-shadow: 0 8px 20px var(--ma-teal-glow);\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\n  }\n\n  .ma-prog-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 12px 25px var(--ma-teal-glow);\n  }\n\n  .ma-prog-btn i {\n    font-size: 14px;\n    transition: transform 0.3s ease;\n  }\n\n  #ma-programs-section[dir=\"ltr\"] .ma-prog-btn:hover i { transform: translateX(4px); }\n  #ma-programs-section[dir=\"rtl\"] .ma-prog-btn:hover i { transform: translateX(-4px); }\n\n  \/* =========================\n     MODERN PROGRESS BAR\n  ========================= *\/\n  .ma-progress-container {\n    width: 200px;\n    height: 4px;\n    background: var(--ma-border);\n    border-radius: 4px;\n    margin-top: 10px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .ma-progress-thumb {\n    position: absolute;\n    top: 0;\n    height: 100%;\n    background: var(--ma-gold);\n    border-radius: 4px;\n    transition: inset-inline-start 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    box-shadow: 0 0 8px rgba(255, 179, 0, 0.5);\n  }\n\n  \/* =========================\n     RESPONSIVE\n  ========================= *\/\n  @media (max-width: 768px) {\n    #ma-programs-section { padding: 40px 0; }\n    .ma-arch-wrapper { height: 260px; }\n    .ma-arch-item {\n      width: 120px;\n      height: 120px;\n      margin-left: -60px;\n      top: 20px;\n    }\n    .ma-watermark { font-size: 220px; }\n    .ma-prog-badge { font-size: 9px; padding: 3px 8px; right: 5px; top: -2px; }\n    #ma-programs-section[dir=\"rtl\"] .ma-prog-badge { left: 5px; right: auto; }\n    .ma-prog-content { min-height: 150px; }\n    .ma-prog-btn { padding: 12px 26px; font-size: 14px; }\n  }\n<\/style>\n\n<section id=\"ma-programs-section\" lang=\"en\" dir=\"ltr\">\n  <!-- Dynamic Watermark -->\n  <i class=\"fa-solid fa-book-quran ma-watermark\" id=\"maWatermarkIcon\"><\/i>\n\n  <div class=\"ma-shell\">\n    \n    <div class=\"ma-arch-wrapper\">\n      <div class=\"ma-arch-track\" id=\"maArchTrack\">\n        <!-- Items Injected by JS -->\n      <\/div>\n    <\/div>\n\n    <div class=\"ma-prog-content\" id=\"maProgContent\">\n      <h3 class=\"ma-prog-title\" id=\"maProgTitle\"><\/h3>\n      <p class=\"ma-prog-desc\" id=\"maProgDesc\"><\/p>\n      <a href=\"#\" class=\"ma-prog-btn\" id=\"maProgBtn\">\n        <span id=\"maProgBtnText\"><\/span>\n        <i class=\"fa-solid fa-arrow-right\" id=\"maProgBtnIcon\"><\/i>\n      <\/a>\n    <\/div>\n\n    <!-- Progress Indicator -->\n    <div class=\"ma-progress-container\">\n      <div class=\"ma-progress-thumb\" id=\"maProgressThumb\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  (function() {\n    const section = document.getElementById('ma-programs-section');\n    const track = document.getElementById('maArchTrack');\n    const contentBox = document.getElementById('maProgContent');\n    const titleEl = document.getElementById('maProgTitle');\n    const descEl = document.getElementById('maProgDesc');\n    const btnTextEl = document.getElementById('maProgBtnText');\n    const btnIcon = document.getElementById('maProgBtnIcon');\n    const watermarkIcon = document.getElementById('maWatermarkIcon');\n    const progressThumb = document.getElementById('maProgressThumb');\n\n    if (!section || !track) return;\n\n    \/\/ Assets & Data\n    const BASE_IMG_URL = 'https:\/\/muslimacademy.online\/wp-content\/uploads\/2026\/06\/';\n    \n    const programs = [\n      {\n        id: 'quran',\n        img: BASE_IMG_URL + 'muslim-academy-program-quran.webp',\n        icon: 'fa-book-quran',\n        en: { title: 'Quran Learning', desc: 'Learn to read and recite the Holy Quran with proper rules step by step.', badge: 'Most Popular', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/quran-learning\/' },\n        ar: { title: '\u062a\u0639\u0644\u064a\u0645 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645', desc: '\u062a\u0639\u0644\u0645 \u0642\u0631\u0627\u0621\u0629 \u0648\u062a\u0644\u0627\u0648\u0629 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645 \u0628\u0623\u062d\u0643\u0627\u0645 \u0627\u0644\u062a\u062c\u0648\u064a\u062f \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629.', badge: '\u0627\u0644\u0623\u0643\u062b\u0631 \u0637\u0644\u0628\u0627\u064b', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/quran-learning\/' },\n        fr: { title: 'Apprentissage du Coran', desc: 'Apprenez \u00e0 lire et r\u00e9citer le Saint Coran avec les r\u00e8gles appropri\u00e9es.', badge: 'Populaire', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/quran-learning\/' }\n      },\n      {\n        id: 'arabic',\n        img: BASE_IMG_URL + 'muslim-academy-program-arabic.webp',\n        icon: 'fa-language',\n        en: { title: 'Arabic Language', desc: 'Master reading, writing, and speaking Arabic fluently with expert tutors.', badge: 'All Levels', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/arabic-language\/' },\n        ar: { title: '\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629', desc: '\u0623\u062a\u0642\u0646 \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0648\u0627\u0644\u0643\u062a\u0627\u0628\u0629 \u0648\u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0629 \u0628\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0628\u0637\u0644\u0627\u0642\u0629 \u0645\u0639 \u0645\u0639\u0644\u0645\u064a\u0646 \u062e\u0628\u0631\u0627\u0621.', badge: '\u0643\u0644 \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0627\u062a', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/arabic-language\/' },\n        fr: { title: 'La Langue Arabe', desc: 'Ma\u00eetrisez la lecture, l\u2019\u00e9criture et la conversation en arabe couramment.', badge: 'Tous Niveaux', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/arabic-language\/' }\n      },\n      {\n        id: 'islamic',\n        img: BASE_IMG_URL + 'muslim-academy-program-islamic-studies.webp',\n        icon: 'fa-mosque',\n        en: { title: 'Islamic Studies', desc: 'Build a strong foundation in Islamic values, ethics, and essential knowledge.', badge: 'Essential', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/islamic-studies\/' },\n        ar: { title: '\u0627\u0644\u062f\u0631\u0627\u0633\u0627\u062a \u0627\u0644\u0625\u0633\u0644\u0627\u0645\u064a\u0629', desc: '\u0627\u0628\u0646\u0650 \u0623\u0633\u0627\u0633\u0627\u064b \u0642\u0648\u064a\u0627\u064b \u0641\u064a \u0627\u0644\u0642\u064a\u0645 \u0648\u0627\u0644\u0623\u062e\u0644\u0627\u0642 \u0648\u0627\u0644\u0645\u0639\u0627\u0631\u0641 \u0627\u0644\u0625\u0633\u0644\u0627\u0645\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629.', badge: '\u0623\u0633\u0627\u0633\u064a', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/islamic-studies\/' },\n        fr: { title: 'Les \u00c9tudes Islamiques', desc: 'B\u00e2tissez une base solide en valeurs, \u00e9thiques et connaissances islamiques.', badge: 'Essentiel', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/islamic-studies\/' }\n      },\n      {\n        id: 'tajweed',\n        img: BASE_IMG_URL + 'muslim-academy-program-tajweed.webp',\n        icon: 'fa-microphone-lines',\n        en: { title: 'Tajweed Rules', desc: 'Perfect your Quranic recitation through the theoretical and practical rules of Tajweed.', badge: 'Advanced', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/tajweed-rules\/' },\n        ar: { title: '\u0623\u062d\u0643\u0627\u0645 \u0627\u0644\u062a\u062c\u0648\u064a\u062f', desc: '\u0623\u062a\u0642\u0646 \u062a\u0644\u0627\u0648\u062a\u0643 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062f\u0631\u0627\u0633\u0629 \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u062a\u062c\u0648\u064a\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0648\u0627\u0644\u0639\u0645\u0644\u064a\u0629.', badge: '\u0645\u062a\u0642\u062f\u0645', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/tajweed-rules\/' },\n        fr: { title: 'R\u00e8gles du Tajwid', desc: 'Perfectionnez votre r\u00e9citation coranique gr\u00e2ce aux r\u00e8gles th\u00e9oriques et pratiques.', badge: 'Avanc\u00e9', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/tajweed-rules\/' }\n      },\n      {\n        id: 'fiqh',\n        img: BASE_IMG_URL + 'muslim-academy-program-fiqh.webp',\n        icon: 'fa-scale-balanced',\n        en: { title: 'Fiqh Foundations', desc: 'Understand the rulings of worship and daily life according to authentic sources.', badge: 'Core', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/fiqh-foundations\/' },\n        ar: { title: '\u0623\u0633\u0633 \u0627\u0644\u0641\u0642\u0647', desc: '\u0627\u0641\u0647\u0645 \u0623\u062d\u0643\u0627\u0645 \u0627\u0644\u0639\u0628\u0627\u062f\u0627\u062a \u0648\u0627\u0644\u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0641\u0642\u0627\u064b \u0644\u0644\u0645\u0635\u0627\u062f\u0631 \u0627\u0644\u0625\u0633\u0644\u0627\u0645\u064a\u0629 \u0627\u0644\u0645\u0648\u062b\u0648\u0642\u0629.', badge: '\u0623\u0635\u0648\u0644', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/fiqh-foundations\/' },\n        fr: { title: 'Fondements du Fiqh', desc: 'Comprenez les r\u00e8gles d\u2019adoration et de la vie quotidienne selon les sources.', badge: 'Base', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/fiqh-foundations\/' }\n      },\n      {\n        id: 'aqeedah',\n        img: BASE_IMG_URL + 'muslim-academy-program-aqeedah.webp',\n        icon: 'fa-heart',\n        en: { title: 'Aqeedah (Creed)', desc: 'Learn the core beliefs of Islam based on the Quran and authentic Sunnah.', badge: 'Foundation', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/aqeedah\/' },\n        ar: { title: '\u0627\u0644\u0639\u0642\u064a\u062f\u0629 \u0627\u0644\u0625\u0633\u0644\u0627\u0645\u064a\u0629', desc: '\u062a\u0639\u0644\u0645 \u0623\u0635\u0648\u0644 \u0627\u0644\u0625\u064a\u0645\u0627\u0646 \u0648\u0627\u0644\u0639\u0642\u064a\u062f\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0627\u0644\u0645\u0633\u062a\u0645\u062f\u0629 \u0645\u0646 \u0627\u0644\u0642\u0631\u0622\u0646 \u0648\u0627\u0644\u0633\u0646\u0629 \u0627\u0644\u0646\u0628\u0648\u064a\u0629.', badge: '\u0639\u0642\u064a\u062f\u0629', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/aqeedah\/' },\n        fr: { title: 'Croyance (Aqida)', desc: 'Apprenez les croyances fondamentales de l\u2019Islam bas\u00e9es sur le Coran.', badge: 'Fondation', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/aqeedah\/' }\n      },\n      {\n        id: 'seerah',\n        img: BASE_IMG_URL + 'muslim-academy-program-seerah.webp',\n        icon: 'fa-route',\n        en: { title: 'Prophetic Seerah', desc: 'Explore the inspiring life and biography of Prophet Muhammad (PBUH).', badge: 'Inspiring', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/prophetic-seerah\/' },\n        ar: { title: '\u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0646\u0628\u0648\u064a\u0629', desc: '\u0627\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u062f\u0631\u0648\u0633 \u0648\u0627\u0644\u0639\u0628\u0631 \u0645\u0646 \u0633\u064a\u0631\u0629 \u0627\u0644\u0646\u0628\u064a \u0645\u062d\u0645\u062f \u0635\u0644\u0649 \u0627\u0644\u0644\u0647 \u0639\u0644\u064a\u0647 \u0648\u0633\u0644\u0645 \u0648\u062d\u064a\u0627\u062a\u0647 \u0627\u0644\u0645\u0644\u0647\u0645\u0629.', badge: '\u0645\u0644\u0647\u0645', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/prophetic-seerah\/' },\n        fr: { title: 'Biographie (Sira)', desc: 'Explorez la vie inspirante et la biographie du Proph\u00e8te Muhammad (PSL).', badge: 'Inspirant', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/prophetic-seerah\/' }\n      },\n      {\n        id: 'kids',\n        img: BASE_IMG_URL + 'muslim-academy-program-kids.webp',\n        icon: 'fa-child-reaching',\n        en: { title: 'Kids Learning Path', desc: 'Engaging, interactive, and fun classes specially designed for children.', badge: 'For Kids', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/kids-learning-path\/' },\n        ar: { title: '\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0637\u0641\u0627\u0644', desc: '\u062d\u0635\u0635 \u062a\u0641\u0627\u0639\u0644\u064a\u0629\u060c \u0645\u0645\u062a\u0639\u0629 \u0648\u062c\u0630\u0627\u0628\u0629 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u062a\u0646\u0627\u0633\u0628 \u0627\u0633\u062a\u064a\u0639\u0627\u0628 \u0627\u0644\u0623\u0637\u0641\u0627\u0644.', badge: '\u0644\u0644\u0623\u0637\u0641\u0627\u0644', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/kids-learning-path\/' },\n        fr: { title: 'Parcours Enfants', desc: 'Des cours engageants, interactifs et amusants sp\u00e9cialement con\u00e7us pour les enfants.', badge: 'Enfants', url: 'https:\/\/muslimacademy.online\/index.php\/programs\/kids-learning-path\/' }\n      }\n    ];\n\n    const UI_TEXT = {\n      en: { btn: 'Explore Program' },\n      ar: { btn: '\u0627\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c' },\n      fr: { btn: 'Voir le programme' }\n    };\n\n    const totalItems = programs.length;\n    let currentPos = 0; \n    let activeIndex = 0;\n    \n    \/\/ Arch parameters mapping\n    let params = { spread: 180, drop: 40, scaleMin: 0.5 };\n\n    \/\/ Create DOM Elements\n    const itemElements = [];\n\n    programs.forEach((prog, i) => {\n      const item = document.createElement('div');\n      item.className = 'ma-arch-item';\n      \n      const badge = document.createElement('div');\n      badge.className = 'ma-prog-badge';\n      \n      const imgWrap = document.createElement('div');\n      imgWrap.className = 'ma-arch-img-wrap';\n      \n      const imgInner = document.createElement('div');\n      imgInner.className = 'ma-arch-img-inner';\n\n      const img = document.createElement('img');\n      img.src = prog.img;\n      img.alt = prog.en.title;\n      img.draggable = false;\n      \n      imgInner.appendChild(img);\n      imgWrap.appendChild(imgInner);\n      item.appendChild(imgWrap);\n      item.appendChild(badge); \/\/ Add badge to item\n      \n      track.appendChild(item);\n      itemElements.push(item);\n    });\n\n    \/\/ Progress Bar Setup\n    progressThumb.style.width = `${100 \/ totalItems}%`;\n\n    function updateParams() {\n      const isMobile = window.innerWidth <= 768;\n      params.spread = isMobile ? 100 : 200;\n      params.drop = isMobile ? 30 : 50;\n    }\n\n    window.addEventListener('resize', () => {\n      updateParams();\n      renderArch(false);\n    });\n    updateParams();\n\n    function getShortestPath(from, to) {\n      let diff = (to - from) % totalItems;\n      if (diff > totalItems \/ 2) diff -= totalItems;\n      if (diff < -totalItems \/ 2) diff += totalItems;\n      return diff;\n    }\n\n    function renderArch(withTransition = false) {\n      const isRTL = document.documentElement.dir === 'rtl';\n      const dirMult = isRTL ? -1 : 1;\n\n      itemElements.forEach((item, i) => {\n        let offset = (i - currentPos) % totalItems;\n        if (offset > totalItems \/ 2) offset -= totalItems;\n        if (offset < -totalItems \/ 2) offset += totalItems;\n\n        const absOffset = Math.abs(offset);\n        \n        \/\/ Math for Arch\n        const x = offset * params.spread * dirMult;\n        const y = Math.pow(absOffset, 2) * params.drop;\n        const scale = Math.max(params.scaleMin, 1 - (absOffset * 0.22));\n        const opacity = Math.max(0, 1 - (absOffset * 0.35));\n        const zIndex = Math.round(100 - absOffset * 10);\n\n        \/\/ Parallax Effect (Image moves opposite to curve)\n        const img = item.querySelector('img');\n        const parallaxX = -offset * 15 * dirMult; \n\n        if (withTransition) {\n          item.style.transition = 'transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease';\n          img.style.transition = 'transform 0.4s cubic-bezier(0.25, 1, 0.5, 1)';\n        } else {\n          item.style.transition = 'none';\n          img.style.transition = 'none';\n        }\n\n        item.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;\n        item.style.opacity = opacity;\n        item.style.zIndex = zIndex;\n        img.style.transform = `scale(1.15) translateX(${parallaxX}px)`;\n\n        \/\/ Active State\n        if (absOffset < 0.1) {\n          item.classList.add('is-active');\n        } else {\n          item.classList.remove('is-active');\n        }\n      });\n    }\n\n    function getActiveLanguage() {\n      const docLang = (document.documentElement.lang || '').toLowerCase().slice(0, 2);\n      if (UI_TEXT[docLang]) return docLang;\n      const localLang = (localStorage.getItem('language') || '').toLowerCase().slice(0, 2);\n      if (UI_TEXT[localLang]) return localLang;\n      return 'en';\n    }\n\n    function updateContent() {\n      const lang = getActiveLanguage();\n      const prog = programs[activeIndex];\n      const data = prog[lang];\n\n      const isRTL = lang === 'ar';\n      section.dir = isRTL ? 'rtl' : 'ltr';\n      section.lang = lang;\n      btnIcon.className = isRTL ? 'fa-solid fa-arrow-left' : 'fa-solid fa-arrow-right';\n\n      \/\/ Update Badges text\n      itemElements.forEach((item, i) => {\n        item.querySelector('.ma-prog-badge').textContent = programs[i][lang].badge;\n      });\n\n      \/\/ Update Text Content\n      contentBox.classList.add('is-fading');\n      watermarkIcon.classList.add('is-fading');\n      \n      setTimeout(() => {\n        titleEl.textContent = data.title;\n        descEl.textContent = data.desc;\n        btnTextEl.textContent = UI_TEXT[lang].btn;\n        document.getElementById('maProgBtn').href = data.url;\n        \n        \/\/ Update Watermark\n        watermarkIcon.className = `fa-solid ${prog.icon} ma-watermark`;\n        \n        contentBox.classList.remove('is-fading');\n        watermarkIcon.classList.remove('is-fading');\n      }, 300);\n\n      \/\/ Update Progress Bar\n      progressThumb.style.insetInlineStart = `${(activeIndex \/ totalItems) * 100}%`;\n    }\n\n    function snapTo(index) {\n      const diff = getShortestPath(currentPos, index);\n      currentPos += diff;\n      activeIndex = ((Math.round(currentPos) % totalItems) + totalItems) % totalItems;\n      renderArch(true);\n      updateContent();\n    }\n\n    \/\/ =========================\n    \/\/ INTERACTIONS\n    \/\/ =========================\n    let isDragging = false;\n    let startX = 0;\n    let startPos = 0;\n    const dragSensitivity = 0.008;\n\n    track.addEventListener('pointerdown', (e) => {\n      isDragging = true;\n      startX = e.clientX;\n      startPos = currentPos;\n      track.style.touchAction = 'none';\n      stopAutoPlay(); \/\/ Pause on interaction\n    });\n\n    window.addEventListener('pointermove', (e) => {\n      if (!isDragging) return;\n      const deltaX = e.clientX - startX;\n      const isRTL = document.documentElement.dir === 'rtl';\n      const dirMult = isRTL ? -1 : 1;\n      \n      currentPos = startPos - (deltaX * dragSensitivity * dirMult);\n      renderArch(false);\n    });\n\n    window.addEventListener('pointerup', (e) => {\n      if (!isDragging) return;\n      isDragging = false;\n      track.style.touchAction = 'pan-y';\n      \n      activeIndex = ((Math.round(currentPos) % totalItems) + totalItems) % totalItems;\n      currentPos = Math.round(currentPos);\n      \n      renderArch(true);\n      updateContent();\n      startAutoPlay(); \/\/ Resume\n    });\n\n    \/\/ Keyboard Navigation\n    window.addEventListener('keydown', (e) => {\n      const rect = section.getBoundingClientRect();\n      \/\/ Only trigger if section is in view\n      if(rect.top >= -rect.height && rect.bottom <= window.innerHeight + rect.height) {\n        const isRTL = document.documentElement.dir === 'rtl';\n        if (e.key === 'ArrowRight') {\n          snapTo(currentPos + (isRTL ? -1 : 1));\n          stopAutoPlay(); startAutoPlay(); \/\/ reset timer\n        } else if (e.key === 'ArrowLeft') {\n          snapTo(currentPos + (isRTL ? 1 : -1));\n          stopAutoPlay(); startAutoPlay();\n        }\n      }\n    });\n\n    \/\/ Auto-Play Logic\n    let autoPlayTimer;\n    function startAutoPlay() {\n      stopAutoPlay();\n      autoPlayTimer = setInterval(() => {\n        snapTo(currentPos + 1);\n      }, 4500);\n    }\n    function stopAutoPlay() {\n      clearInterval(autoPlayTimer);\n    }\n\n    \/\/ Pause on hover\n    section.addEventListener('mouseenter', stopAutoPlay);\n    section.addEventListener('mouseleave', startAutoPlay);\n\n    \/\/ Language Mutation Observer\n    const observer = new MutationObserver(() => {\n      updateContent();\n      renderArch(true);\n    });\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang', 'dir'] });\n\n    \/\/ Initialize\n    snapTo(0);\n    startAutoPlay();\n\n  })();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":13,"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions\/79"}],"wp:attachment":[{"href":"https:\/\/muslimacademy.online\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}