{"id":1924,"date":"2026-07-20T11:50:14","date_gmt":"2026-07-20T11:50:14","guid":{"rendered":"https:\/\/learnpureislam.com\/?page_id=1924"},"modified":"2026-07-23T02:08:07","modified_gmt":"2026-07-23T02:08:07","slug":"home","status":"publish","type":"page","link":"https:\/\/learnpureislam.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Islamic Learning Hub | Learn Islam with Expert<\/title>\r\n <meta name=\"description\" content=\"Learn Islam, Quran, Hadith, Fiqh, Aqeedah, Arabic and more from qualified scholars. Interactive orbit-based Islamic learning platform.\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n :root {\r\n --bg: #05080F;\r\n --accent-digital: #0d9488;\r\n --accent-glow-soft: #d4a853;\r\n --card-bg: rgba(14, 23, 38, 0.65);\r\n --border-subtle: rgba(212, 168, 83, 0.25);\r\n --text-soft: #e8dcc8;\r\n --text-muted: #c4b99a;\r\n --teal-glow: rgba(13, 148, 136, 0.35);\r\n }\r\n body {\r\n background: var(--bg);\r\n font-family: 'Inter', 'Space Grotesk', sans-serif;\r\n color: #fff;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1.2rem 1rem;\r\n position: relative;\r\n overflow-x: hidden;\r\n }\r\n @media (max-width: 600px) {\r\n body {\r\n padding: 0.7rem 0.4rem;\r\n }\r\n }\r\n body::before {\r\n content: \"\";\r\n position: fixed;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, rgba(13, 148, 136, 0.025) 0px, rgba(13, 148, 136, 0.025) 2px, transparent 2px, transparent 8px),\r\n radial-gradient(circle at 30% 40%, rgba(13, 148, 136, 0.13) 0%, transparent 45%),\r\n radial-gradient(circle at 80% 70%, rgba(212, 168, 83, 0.09) 0%, transparent 55%);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: bgShift 22s infinite alternate;\r\n }\r\n @keyframes bgShift {\r\n 0% { opacity: 0.6; transform: scale(1); }\r\n 100% { opacity: 1; transform: scale(1.03); }\r\n }\r\n .stars {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n overflow: hidden;\r\n }\r\n .star {\r\n position: absolute;\r\n background-color: #ffffff;\r\n border-radius: 50%;\r\n opacity: 0;\r\n animation: blinkStar 3s infinite ease-in-out;\r\n box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);\r\n }\r\n @keyframes blinkStar {\r\n 0%, 100% { opacity: 0; transform: scale(0.8); }\r\n 50% { opacity: 0.9; transform: scale(1); }\r\n }\r\n .main-container {\r\n position: relative;\r\n z-index: 5;\r\n max-width: 1300px;\r\n width: 100%;\r\n margin: 0 auto;\r\n }\r\n .layout-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 1.6rem 2.2rem;\r\n width: 100%;\r\n }\r\n @media (max-width: 850px) {\r\n .layout-row {\r\n grid-template-columns: 1fr;\r\n gap: 2rem;\r\n }\r\n }\r\n\r\n .left-hero {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n gap: 1.3rem;\r\n padding: 0.5rem 0.2rem;\r\n margin-top: 20px;\r\n }\r\n @media (max-width: 850px) {\r\n .left-hero {\r\n gap: 1rem;\r\n margin-top: 20px;\r\n }\r\n }\r\n\r\n .accent-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n background: rgba(13, 148, 136, 0.15);\r\n border: 1px solid rgba(13, 148, 136, 0.5);\r\n border-radius: 40px;\r\n padding: 0.35rem 1.1rem;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n letter-spacing: 1.2px;\r\n text-transform: uppercase;\r\n color: #b2f0e8;\r\n backdrop-filter: blur(6px);\r\n }\r\n .accent-badge i {\r\n color: #f0d078;\r\n font-size: 0.8rem;\r\n }\r\n\r\n .hero-heading {\r\n font-weight: 700;\r\n font-size: clamp(2.4rem, 8vw, 3.8rem);\r\n line-height: 1.15;\r\n letter-spacing: -0.01em;\r\n text-shadow: 2px 2px 0 #00000070;\r\n margin: 0;\r\n text-align: center;\r\n }\r\n .hero-heading .line-1 {\r\n display: block;\r\n color: #f5e7c6;\r\n font-size: 0.85em;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n margin-bottom: 0.25rem;\r\n font-weight: 500;\r\n }\r\n .hero-heading .line-2 {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: baseline;\r\n justify-content: center;\r\n gap: 0.45rem;\r\n }\r\n .word-learn {\r\n position: relative;\r\n color: #f0d078;\r\n text-shadow: 0 0 14px rgba(240, 208, 120, 0.7);\r\n font-weight: 800;\r\n }\r\n .word-learn::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: -2px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, #0d9488, #f0d078);\r\n border-radius: 6px;\r\n }\r\n .word-islam {\r\n background: linear-gradient(145deg, #34d399, #fbbf24, #fef3c7);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n font-weight: 800;\r\n }\r\n .word-expert {\r\n font-weight: 600;\r\n color: #d1d5db;\r\n font-size: 0.75em;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .glass-panel {\r\n background: var(--card-bg);\r\n backdrop-filter: blur(10px);\r\n border-radius: 24px;\r\n border: 1px solid var(--border-subtle);\r\n padding: 1.8rem 1.8rem;\r\n width: 100%;\r\n box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.5rem;\r\n text-align: center;\r\n }\r\n @media (max-width: 850px) {\r\n .glass-panel {\r\n max-width: 500px;\r\n margin: 0 auto;\r\n padding: 1.4rem 1.4rem;\r\n }\r\n }\r\n\r\n .hadith-block {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .hadith-block.typing-started {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .hadith-block + .hadith-block {\r\n border-top: 1px solid rgba(212, 168, 83, 0.2);\r\n padding-top: 1.2rem;\r\n }\r\n\r\n .hadith-arabic {\r\n font-family: 'Amiri', 'Times New Roman', serif;\r\n font-size: clamp(2.6rem, 10vw, 3.2rem);\r\n font-weight: 700;\r\n color: #f0d078;\r\n line-height: 1.8;\r\n direction: rtl;\r\n text-align: center;\r\n letter-spacing: 0.4px;\r\n min-height: 2.2em;\r\n display: inline-block;\r\n width: 100%;\r\n transition: text-shadow 0.4s ease, color 0.4s ease;\r\n }\r\n .hadith-english {\r\n font-family: 'Inter', sans-serif;\r\n font-size: clamp(1.6rem, 7.5vw, 2.1rem);\r\n font-weight: 500;\r\n color: #e8dcc8;\r\n line-height: 1.5;\r\n font-style: italic;\r\n text-align: center;\r\n padding: 0;\r\n border: none;\r\n min-height: 1.6em;\r\n display: inline-block;\r\n width: 100%;\r\n transition: text-shadow 0.4s ease, color 0.4s ease;\r\n }\r\n\r\n .typing-active {\r\n color: #ffffff !important;\r\n text-shadow: 0 0 28px rgba(240, 208, 120, 0.8), 0 0 60px rgba(13, 148, 136, 0.5) !important;\r\n }\r\n\r\n .typing-cursor::after {\r\n content: '|';\r\n display: inline-block;\r\n color: #f0d078;\r\n animation: blink 0.8s step-end infinite;\r\n margin-left: 4px;\r\n vertical-align: middle;\r\n font-weight: 100;\r\n font-size: 0.9em;\r\n }\r\n .hadith-arabic.typing-cursor::after {\r\n font-size: 0.8em;\r\n }\r\n @keyframes blink {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n }\r\n\r\n .hadith-reference {\r\n font-size: 0.9rem;\r\n color: #a89f84;\r\n letter-spacing: 0.5px;\r\n font-weight: 400;\r\n text-transform: uppercase;\r\n text-align: center;\r\n }\r\n\r\n .feature-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.8rem 1.6rem;\r\n color: var(--text-muted);\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n justify-content: center;\r\n }\r\n .feature-row span {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.35rem;\r\n }\r\n .feature-row i {\r\n color: #0d9488;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .orbit-module-wrapper {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .orbit-module {\r\n width: 100%;\r\n aspect-ratio: 1 \/ 1;\r\n background: rgba(6, 14, 22, 0.4);\r\n backdrop-filter: blur(6px);\r\n border-radius: 50%;\r\n border: 1px solid rgba(13, 148, 136, 0.4);\r\n padding: 0.5rem;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 0 16px rgba(13, 148, 136, 0.3), 0 0 6px rgba(255, 255, 255, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);\r\n max-width: 420px;\r\n margin: 0 auto;\r\n }\r\n @media (max-width: 600px) {\r\n .orbit-module { max-width: 340px; padding: 0.4rem; }\r\n }\r\n @media (max-width: 420px) {\r\n .orbit-module { max-width: 280px; }\r\n }\r\n .orbit-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 150px;\r\n }\r\n .center-orb {\r\n position: relative;\r\n width: 48%;\r\n max-width: 130px;\r\n min-width: 85px;\r\n aspect-ratio: 1 \/ 1;\r\n background: radial-gradient(circle at 35% 35%, #142836, #0a121f);\r\n border-radius: 50%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n z-index: 15;\r\n box-shadow: 0 0 28px #0d9488, inset 0 0 10px rgba(13, 148, 136, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.6);\r\n border: 2px solid #0d9488;\r\n backdrop-filter: blur(4px);\r\n }\r\n @media (max-width: 600px) {\r\n .center-orb { width: 52%; min-width: 70px; }\r\n }\r\n .center-orb .center-text {\r\n font-weight: 800;\r\n font-size: clamp(1.2rem, 6vw, 1.8rem);\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n color: #ffffff;\r\n text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);\r\n line-height: 1.3;\r\n padding: 0 3px;\r\n }\r\n .rotating-ring {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 85%;\r\n height: 85%;\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n border: 1.5px dashed rgba(212, 168, 83, 0.7);\r\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 6px #ffffff, 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.2);\r\n pointer-events: none;\r\n animation: orbitSpinReverse 95s linear infinite;\r\n }\r\n @keyframes orbitSpinReverse {\r\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\r\n 100% { transform: translate(-50%, -50%) rotate(-360deg); }\r\n }\r\n .glow-ring {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 95%;\r\n height: 95%;\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n background: radial-gradient(circle, rgba(13, 148, 136, 0.08) 0%, transparent 70%);\r\n pointer-events: none;\r\n animation: pulseRing 5s infinite alternate;\r\n }\r\n @keyframes pulseRing {\r\n 0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.96); }\r\n 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.04); }\r\n }\r\n .orbit-items {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n }\r\n .orbit-card {\r\n position: absolute;\r\n width: clamp(44px, 13vw, 65px);\r\n aspect-ratio: 1 \/ 1;\r\n background: rgba(12, 28, 38, 0.94);\r\n backdrop-filter: blur(10px);\r\n border-radius: 50%;\r\n padding: 0.25rem 0.05rem;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1.5px solid rgba(13, 148, 136, 0.7);\r\n box-shadow: 0 6px 12px -3px #000000, 0 0 12px rgba(13, 148, 136, 0.3), 0 0 12px rgba(255, 255, 255, 0.5);\r\n transition: transform 0.2s ease, box-shadow 0.2s;\r\n cursor: pointer;\r\n pointer-events: auto;\r\n z-index: 20;\r\n will-change: transform;\r\n line-height: 1;\r\n }\r\n @media (max-width: 600px) {\r\n .orbit-card { width: clamp(40px, 14vw, 55px); }\r\n }\r\n @media (max-width: 420px) {\r\n .orbit-card { width: clamp(36px, 15vw, 48px); padding: 0.15rem 0; }\r\n }\r\n .orbit-card:hover {\r\n transform: scale(1.08) translateZ(0);\r\n background: #0f2838;\r\n border-color: #d4a853;\r\n box-shadow: 0 0 22px #0d9488, 0 0 18px #ffffff, 0 0 8px rgba(255, 255, 255, 0.9);\r\n }\r\n .orbit-card i {\r\n font-size: clamp(1.3rem, 7vw, 1.7rem);\r\n margin-bottom: 2px;\r\n display: block;\r\n color: #fff;\r\n filter: drop-shadow(0 0 3px rgba(13, 148, 136, 0.8));\r\n }\r\n .orbit-card h5 {\r\n font-size: clamp(0.8rem, 5vw, 1.1rem);\r\n font-weight: 700;\r\n letter-spacing: 0.2px;\r\n text-transform: uppercase;\r\n margin: 0;\r\n color: #fff;\r\n line-height: 1.1;\r\n text-shadow: 0 0 2px black;\r\n padding: 0 2px;\r\n }\r\n .orb {\r\n position: fixed;\r\n border-radius: 50%;\r\n filter: blur(55px);\r\n opacity: 0.2;\r\n z-index: 1;\r\n }\r\n .orb-1 { width: 240px; height: 240px; background: #0d9488; top: -70px; right: -70px; }\r\n .orb-2 { width: 200px; height: 200px; background: #d4a853; bottom: -50px; left: -50px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"orb orb-1\"><\/div>\r\n <div class=\"orb orb-2\"><\/div>\r\n <div class=\"stars\" id=\"starsContainer\"><\/div>\r\n <div class=\"main-container\">\r\n <div class=\"layout-row\">\r\n <div class=\"left-hero\">\r\n <div class=\"accent-badge\">\r\n <i class=\"fas fa-graduation-cap\"><\/i> TRUSTED ISLAMIC EDUCATION\r\n <\/div>\r\n\r\n <div class=\"hero-heading\">\r\n <span class=\"line-1\">Begin Your Journey<\/span>\r\n <span class=\"line-2\">\r\n <span class=\"word-learn\">Learn<\/span>\r\n <span class=\"word-islam\">Islam<\/span>\r\n <span class=\"word-expert\">with Expert Scholars<\/span>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"glass-panel\">\r\n <div class=\"hadith-block\" id=\"block1\">\r\n <div class=\"hadith-arabic\" data-original=\"\u0637\u064e\u0644\u064e\u0628\u064f \u0627\u0644\u0652\u0639\u0650\u0644\u0652\u0645\u0650 \u0641\u064e\u0631\u0650\u064a\u0636\u064e\u0629\u064c \u0639\u064e\u0644\u064e\u0649 \u0643\u064f\u0644\u0650\u0651 \u0645\u064f\u0633\u0652\u0644\u0650\u0645\u064d\">\u0637\u064e\u0644\u064e\u0628\u064f \u0627\u0644\u0652\u0639\u0650\u0644\u0652\u0645\u0650 \u0641\u064e\u0631\u0650\u064a\u0636\u064e\u0629\u064c \u0639\u064e\u0644\u064e\u0649 \u0643\u064f\u0644\u0650\u0651 \u0645\u064f\u0633\u0652\u0644\u0650\u0645\u064d<\/div>\r\n <div class=\"hadith-english\" data-original=\"\ud83d\udcd6 "Seeking knowledge is an obligation upon every Muslim."\"><\/div>\r\n <div class=\"hadith-reference\">\u2014 Prophet Muhammad \ufdfa \u2022 Sunan Ibn Majah 224<\/div>\r\n <\/div>\r\n <div class=\"hadith-block\" id=\"block2\">\r\n <div class=\"hadith-arabic\" data-original=\"\u062e\u064e\u064a\u0652\u0631\u064f\u0643\u064f\u0645\u0652 \u0645\u064e\u0646\u0652 \u062a\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e \u0627\u0644\u0652\u0642\u064f\u0631\u0652\u0622\u0646\u064e \u0648\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e\u0647\u064f\">\u062e\u064e\u064a\u0652\u0631\u064f\u0643\u064f\u0645\u0652 \u0645\u064e\u0646\u0652 \u062a\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e \u0627\u0644\u0652\u0642\u064f\u0631\u0652\u0622\u0646\u064e \u0648\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e\u0647\u064f<\/div>\r\n <div class=\"hadith-english\" data-original=\"\ud83d\udcd6 "The best among you are those who learn the Quran and teach it."\"><\/div>\r\n <div class=\"hadith-reference\">\u2014 Prophet Muhammad \ufdfa \u2022 Sahih al-Bukhari 5027<\/div>\r\n <\/div>\r\n\r\n <div class=\"feature-row\">\r\n <span><i class=\"fas fa-check-circle\"><\/i> Live & Interactive<\/span>\r\n <span><i class=\"fas fa-check-circle\"><\/i> Qualified Scholars<\/span>\r\n <span><i class=\"fas fa-check-circle\"><\/i> Structured Curriculum<\/span>\r\n <span><i class=\"fas fa-check-circle\"><\/i> All Levels Welcome<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"orbit-module-wrapper\">\r\n <div class=\"orbit-module module-digital\">\r\n <div class=\"orbit-container\" id=\"digitalContainer\">\r\n <div class=\"center-orb\">\r\n <div class=\"center-text\">ISLAMIC<br>MASTERY<\/div>\r\n <\/div>\r\n <div class=\"rotating-ring\"><\/div>\r\n <div class=\"glow-ring\"><\/div>\r\n <div class=\"orbit-items\" id=\"digitalItems\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ---- ORBIT SETUP ----\r\n const islamicTopics = [\r\n { icon: \"fas fa-book-open\", title: \"Quran\" },\r\n { icon: \"fas fa-scroll\", title: \"Hadith\" },\r\n { icon: \"fas fa-balance-scale\", title: \"Fiqh\" },\r\n { icon: \"fas fa-star\", title: \"Aqeedah\" },\r\n { icon: \"fas fa-history\", title: \"Seerah\" },\r\n { icon: \"fas fa-language\", title: \"Arabic\" },\r\n { icon: \"fas fa-mosque\", title: \"History\" },\r\n { icon: \"fas fa-heart\", title: \"Spirituality\" }\r\n ];\r\n\r\n function setupOrbit(containerId, itemsData, angularSpeedRadPerMs) {\r\n const container = document.getElementById(containerId);\r\n if (!container) return;\r\n const itemsWrapper = container.parentElement?.querySelector('.orbit-items');\r\n if (!itemsWrapper) return;\r\n itemsWrapper.innerHTML = '';\r\n\r\n const cards = [], angles = [];\r\n const count = itemsData.length;\r\n const angleStep = (Math.PI * 2) \/ count;\r\n\r\n for (let i = 0; i < count; i++) {\r\n const item = itemsData[i];\r\n const card = document.createElement('div');\r\n card.className = 'orbit-card';\r\n card.innerHTML = `<i class=\"${item.icon}\"><\/i><h5>${item.title}<\/h5>`;\r\n card.addEventListener('click', () => {\r\n card.style.transform = 'scale(1.12) translateZ(0)';\r\n setTimeout(() => card.style.transform = '', 150);\r\n console.log(`\u2728 Explore ${item.title} \u2014 comprehensive Islamic module available!`);\r\n });\r\n itemsWrapper.appendChild(card);\r\n cards.push(card);\r\n angles.push(i * angleStep);\r\n }\r\n\r\n let lastTimestamp = null, animFrame = null;\r\n\r\n function getDynamicRadius() {\r\n const cw = container.clientWidth;\r\n let factor = 0.34;\r\n if (window.innerWidth <= 600) factor = 0.36;\r\n if (window.innerWidth <= 420) factor = 0.39;\r\n let r = cw * factor;\r\n return Math.min(Math.max(r, 48), 115);\r\n }\r\n\r\n function updatePositions() {\r\n const cx = container.clientWidth \/ 2, cy = container.clientHeight \/ 2;\r\n const radius = getDynamicRadius();\r\n for (let i = 0; i < cards.length; i++) {\r\n const angle = angles[i];\r\n const x = cx + radius * Math.cos(angle);\r\n const y = cy + radius * Math.sin(angle);\r\n const card = cards[i];\r\n const w = card.offsetWidth, h = card.offsetHeight;\r\n card.style.transform = `translate3d(${x - w\/2}px, ${y - h\/2}px, 0)`;\r\n }\r\n }\r\n\r\n function animate(now) {\r\n if (!lastTimestamp) { lastTimestamp = now; animFrame = requestAnimationFrame(animate); return; }\r\n let delta = Math.min(100, now - lastTimestamp);\r\n if (delta > 0) {\r\n const angleDelta = angularSpeedRadPerMs * delta;\r\n for (let i = 0; i < angles.length; i++) {\r\n angles[i] += angleDelta;\r\n if (angles[i] > Math.PI * 2) angles[i] -= Math.PI * 2;\r\n }\r\n updatePositions();\r\n }\r\n lastTimestamp = now;\r\n animFrame = requestAnimationFrame(animate);\r\n }\r\n\r\n setTimeout(updatePositions, 20);\r\n animFrame = requestAnimationFrame(animate);\r\n\r\n let resizeTimeout;\r\n const handleResize = () => {\r\n clearTimeout(resizeTimeout);\r\n resizeTimeout = setTimeout(updatePositions, 60);\r\n };\r\n window.addEventListener('resize', handleResize);\r\n const ro = new ResizeObserver(() => updatePositions());\r\n ro.observe(container);\r\n\r\n return () => {\r\n cancelAnimationFrame(animFrame);\r\n ro.disconnect();\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }\r\n\r\n setupOrbit('digitalContainer', islamicTopics, 0.000024);\r\n\r\n \/\/ ---- STARS ----\r\n const starsContainer = document.getElementById('starsContainer');\r\n if (starsContainer) {\r\n for (let i = 0; i < 120; i++) {\r\n const star = document.createElement('div');\r\n star.classList.add('star');\r\n const size = Math.random() * 2.2 + 0.7;\r\n star.style.cssText = `\r\n width:${size}px; height:${size}px;\r\n left:${Math.random()*100}%; top:${Math.random()*100}%;\r\n animation-duration:${Math.random()*4+1.2}s;\r\n animation-delay:${Math.random()*5}s;\r\n `;\r\n starsContainer.appendChild(star);\r\n }\r\n }\r\n\r\n \/\/ ---- REFINED PROFESSIONAL TYPING SOUND (soft, official click) ----\r\n let audioCtx = null;\r\n\r\n function playTypingSound() {\r\n try {\r\n if (!audioCtx) {\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n }\r\n \/\/ Use a triangle wave for a rounder, softer click \u2013 more official\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n \/\/ Frequency 950 Hz gives a crisp but pleasant tone\r\n osc.frequency.setValueAtTime(950, audioCtx.currentTime);\r\n osc.type = 'triangle';\r\n\r\n \/\/ Volume reduced to 0.07 for a subtle, professional feel\r\n gain.gain.setValueAtTime(0.07, audioCtx.currentTime);\r\n gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.02);\r\n\r\n osc.start(audioCtx.currentTime);\r\n osc.stop(audioCtx.currentTime + 0.025);\r\n } catch (e) {\r\n \/\/ Fail silently if audio context not available\r\n }\r\n }\r\n\r\n \/\/ ---- TYPING ENGINE (English only) ----\r\n function typeTextPromise(element, text, speed, withSound) {\r\n return new Promise((resolve) => {\r\n if (!element) { resolve(); return; }\r\n element.textContent = '';\r\n element.classList.add('typing-active', 'typing-cursor');\r\n let index = 0;\r\n const interval = setInterval(() => {\r\n if (index < text.length) {\r\n element.textContent += text.charAt(index);\r\n index++;\r\n if (withSound) {\r\n playTypingSound();\r\n }\r\n } else {\r\n clearInterval(interval);\r\n element.classList.remove('typing-cursor');\r\n setTimeout(() => {\r\n element.classList.remove('typing-active');\r\n resolve();\r\n }, 400);\r\n }\r\n }, speed);\r\n });\r\n }\r\n\r\n async function startTyping() {\r\n const block1 = document.getElementById('block1');\r\n const block2 = document.getElementById('block2');\r\n const english1 = block1?.querySelector('.hadith-english');\r\n const english2 = block2?.querySelector('.hadith-english');\r\n\r\n const t1e = english1?.dataset.original || '';\r\n const t2e = english2?.dataset.original || '';\r\n\r\n \/\/ Arabic text remains visible \u2013 no typing effect\r\n if (block1) block1.classList.add('typing-started');\r\n if (block2) block2.classList.add('typing-started');\r\n\r\n \/\/ Only English texts type with the refined sound\r\n await Promise.all([\r\n typeTextPromise(english1, t1e, 90, true),\r\n typeTextPromise(english2, t2e, 90, true)\r\n ]);\r\n }\r\n\r\n \/\/ Observe glass panel to start typing when visible\r\n const glassPanel = document.querySelector('.glass-panel');\r\n if (glassPanel) {\r\n \/\/ Ensure English texts are empty for the typing effect; Arabic already filled\r\n const allEnglish = glassPanel.querySelectorAll('.hadith-english');\r\n allEnglish.forEach(el => {\r\n if (!el.dataset.original) el.dataset.original = el.textContent;\r\n el.textContent = '';\r\n });\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n setTimeout(startTyping, 500);\r\n observer.disconnect();\r\n }\r\n });\r\n }, { threshold: 0.25 });\r\n observer.observe(glassPanel);\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c221ca6 e-con e-atomic-element e-flexbox-base e-890c529 \" data-id=\"c221ca6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c221ca6\" data-e-type=\"e-flexbox\" data-id=\"c221ca6\">\n \t\t<div class=\"elementor-element elementor-element-6043da2 elementor-widget elementor-widget-html\" data-id=\"6043da2\" 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<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Explore Courses \u00b7 Official Professional<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Syne:wght@600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n @property --border-angle {\r\n syntax: '<angle>';\r\n initial-value: 0deg;\r\n inherits: false;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n background: #0B0D12;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Inter', sans-serif;\r\n padding: 0;\r\n \/* Updated professional ambient glows \u2013 deep blue, teal, and warm gold *\/\r\n background-image:\r\n radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 70%, rgba(20, 184, 166, 0.08) 0%, transparent 50%),\r\n radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.06) 0%, transparent 55%),\r\n radial-gradient(circle at 85% 20%, rgba(251, 191, 36, 0.05) 0%, transparent 45%);\r\n }\r\n\r\n .full-width-heading {\r\n --border-width: 3px;\r\n --border-radius: 28px;\r\n width: 100%;\r\n max-width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1.5rem;\r\n padding: 2rem 1.5rem;\r\n position: relative;\r\n background: rgba(11, 13, 18, 0.6);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border-radius: var(--border-radius);\r\n }\r\n\r\n \/* Animated border \u2013 professional blue\/teal\/indigo + golden yellow palette *\/\r\n .full-width-heading::before {\r\n content: '';\r\n position: absolute;\r\n inset: calc(-1 * var(--border-width));\r\n border-radius: inherit;\r\n background: conic-gradient(\r\n from var(--border-angle),\r\n #0EA5E9,\r\n #06B6D4,\r\n #F59E0B,\r\n #EAB308,\r\n #3B82F6,\r\n #FBBF24,\r\n #6366F1,\r\n #D97706,\r\n #0EA5E9\r\n );\r\n animation: borderColorSpin 4s linear infinite;\r\n mask:\r\n linear-gradient(#fff 0 0) content-box,\r\n linear-gradient(#fff 0 0);\r\n mask-composite: exclude;\r\n -webkit-mask:\r\n linear-gradient(#fff 0 0) content-box,\r\n linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n padding: var(--border-width);\r\n z-index: -1;\r\n }\r\n\r\n @keyframes borderColorSpin {\r\n to {\r\n --border-angle: 360deg;\r\n }\r\n }\r\n\r\n .text-block {\r\n text-align: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Explore line \u2013 warm golden silver *\/\r\n .explore-line {\r\n font-family: 'Syne', sans-serif;\r\n font-size: clamp(1rem, 3vw, 1.5rem);\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: #D4C8A0;\r\n line-height: 1;\r\n margin-bottom: 0.3rem;\r\n text-shadow: 0 0 20px rgba(234, 179, 8, 0.2);\r\n }\r\n\r\n \/* Courses line \u2013 blue to indigo with golden\/yellow glow *\/\r\n .courses-line {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: clamp(2.2rem, 8vw, 4.5rem);\r\n font-weight: 700;\r\n letter-spacing: -0.03em;\r\n line-height: 1;\r\n text-transform: uppercase;\r\n background: linear-gradient(135deg, #0EA5E9 0%, #F59E0B 30%, #FBBF24 50%, #3B82F6 70%, #6366F1 100%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.35)) drop-shadow(0 0 6px rgba(14, 165, 233, 0.25));\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n \/* Accent underline \u2013 blue to gold gradient *\/\r\n .accent-underline {\r\n width: 70px;\r\n height: 3px;\r\n margin: 0 auto 0.8rem;\r\n background: linear-gradient(90deg, #0EA5E9, #F59E0B, #FBBF24, #3B82F6, #6366F1);\r\n border-radius: 3px;\r\n opacity: 0.9;\r\n box-shadow: 0 0 10px rgba(245, 158, 11, 0.4), 0 0 20px rgba(14, 165, 233, 0.25);\r\n }\r\n\r\n \/* Description \u2013 subtle warm grey *\/\r\n .heading-description {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: #A8A091;\r\n word-spacing: 5px;\r\n text-shadow: 0 0 10px rgba(234, 179, 8, 0.1);\r\n }\r\n\r\n \/* Arrows *\/\r\n .arrow-down {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n animation: pulseArrow 2s ease-in-out infinite;\r\n z-index: 1;\r\n }\r\n\r\n .arrow-left {\r\n animation-delay: 0s;\r\n }\r\n .arrow-right {\r\n animation-delay: 0.6s;\r\n }\r\n\r\n \/* Arrow color \u2013 warm golden amber with blue undertone *\/\r\n .arrow-down::before {\r\n content: '';\r\n width: 0;\r\n height: 0;\r\n border-left: 14px solid transparent;\r\n border-right: 14px solid transparent;\r\n border-top: 18px solid rgba(234, 179, 8, 0.75);\r\n filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55)) drop-shadow(0 0 3px rgba(14, 165, 233, 0.3));\r\n transition: border-top-color 0.3s, filter 0.3s;\r\n }\r\n\r\n @keyframes pulseArrow {\r\n 0%,\r\n 100% {\r\n opacity: 0.3;\r\n transform: translateY(0);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: translateY(6px);\r\n }\r\n }\r\n\r\n \/* Hover arrow \u2013 brighter gold with blue spark *\/\r\n .full-width-heading:hover .arrow-down::before {\r\n border-top-color: rgba(251, 191, 36, 1);\r\n filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.85)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 700px) {\r\n .full-width-heading {\r\n --border-radius: 20px;\r\n gap: 0.8rem;\r\n padding: 1.5rem 1rem;\r\n }\r\n .arrow-down::before {\r\n border-left-width: 10px;\r\n border-right-width: 10px;\r\n border-top-width: 14px;\r\n }\r\n .courses-line {\r\n font-size: clamp(1.8rem, 10vw, 3rem);\r\n }\r\n .accent-underline {\r\n width: 50px;\r\n height: 2px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .full-width-heading {\r\n --border-radius: 16px;\r\n gap: 0.5rem;\r\n }\r\n .arrow-down::before {\r\n border-left-width: 8px;\r\n border-right-width: 8px;\r\n border-top-width: 12px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"full-width-heading\">\r\n <div class=\"arrow-down arrow-left\" aria-hidden=\"true\"><\/div>\r\n <div class=\"text-block\">\r\n <div class=\"explore-line\">Explore<\/div>\r\n <div class=\"courses-line\">Our Courses<\/div>\r\n <div class=\"accent-underline\"><\/div>\r\n <div class=\"heading-description\">Where knowledge meets transformation<\/div>\r\n <\/div>\r\n <div class=\"arrow-down arrow-right\" aria-hidden=\"true\"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c826671 e-con e-atomic-element e-flexbox-base e-c826671-dfdb37e \" data-id=\"c826671\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c826671\" data-e-type=\"e-flexbox\" data-id=\"c826671\">\n \t\t<div class=\"elementor-element elementor-element-2ffafab elementor-widget elementor-widget-html\" data-id=\"2ffafab\" 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<!DOCTYPE html>\r\n<html lang=\"ur\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\" \/>\r\n <title>Quran Reading with Tajweed & Tarteel in Urdu \u00b7 13 Classes \u00b7 \u20b999<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --primary: #c8963e;\r\n --primary-rgb: 200, 150, 62;\r\n --primary-light: #d4a853;\r\n --primary-light-rgb: 212, 168, 83;\r\n --primary-lighter: #e8cc8a;\r\n --primary-lighter-rgb: 232, 204, 138;\r\n --primary-text: #d4a853;\r\n --primary-text-rgb: 212, 168, 83;\r\n --primary-border-op40: rgba(var(--primary-rgb), 0.4);\r\n --primary-glow-weak: rgba(var(--primary-rgb), 0.2);\r\n --primary-glow-strong: rgba(var(--primary-rgb), 0.3);\r\n --primary-hover-bg: rgba(var(--primary-rgb), 0.2);\r\n --primary-btn-bg: rgba(100, 70, 30, 0.28);\r\n --completed: #10b981;\r\n --completed-rgb: 16, 185, 129;\r\n --completed-light: #34d399;\r\n --completed-light-rgb: 52, 211, 153;\r\n --gold: #f0c860;\r\n --gold-rgb: 240, 200, 96;\r\n --educator-name-color: var(--gold);\r\n }\r\n\r\n .lang-en {\r\n --primary: #b8862d;\r\n --primary-rgb: 184, 134, 45;\r\n --primary-light: #c99840;\r\n --primary-light-rgb: 201, 152, 64;\r\n --primary-lighter: #dab870;\r\n --primary-lighter-rgb: 218, 184, 112;\r\n --primary-text: #c99840;\r\n --primary-text-rgb: 201, 152, 64;\r\n --primary-btn-bg: rgba(90, 60, 25, 0.28);\r\n --completed: #0d9e6e;\r\n --completed-rgb: 13, 158, 110;\r\n --completed-light: #2ec492;\r\n --completed-light-rgb: 46, 196, 146;\r\n --gold: #e8b840;\r\n --gold-rgb: 232, 184, 64;\r\n --educator-name-color: var(--gold);\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Inter', 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n padding: 12px;\r\n transition: background 0.4s ease, background-image 0.4s ease;\r\n }\r\n\r\n body.lang-ur {\r\n background: #0a1610;\r\n background-image:\r\n radial-gradient(circle at 15% 20%, #1a3a2a55 0%, transparent 50%),\r\n radial-gradient(circle at 80% 75%, #2a3a1a45 0%, transparent 55%),\r\n radial-gradient(circle at 50% 50%, #1a2a1a30 0%, transparent 70%);\r\n }\r\n\r\n body.lang-en {\r\n background: #0c1814;\r\n background-image:\r\n radial-gradient(circle at 15% 20%, #1a302a50 0%, transparent 50%),\r\n radial-gradient(circle at 80% 75%, #2a2a1a40 0%, transparent 55%),\r\n radial-gradient(circle at 50% 50%, #182a1a30 0%, transparent 70%);\r\n }\r\n\r\n .majlis-panel {\r\n position: relative;\r\n z-index: 10;\r\n width: 100%;\r\n max-width: 1300px;\r\n height: 700px;\r\n background: rgba(14, 28, 18, 0.62);\r\n backdrop-filter: blur(28px) saturate(160%);\r\n -webkit-backdrop-filter: blur(28px) saturate(160%);\r\n border-radius: 44px 18px 44px 18px;\r\n padding: 20px 0 24px 0;\r\n border: 1px solid rgba(var(--primary-rgb), 0.30);\r\n box-shadow:\r\n 0 28px 42px rgba(0, 0, 0, 0.60),\r\n 0 0 0 1px rgba(180, 140, 60, 0.06) inset,\r\n 0 0 60px rgba(180, 130, 40, 0.10);\r\n display: flex;\r\n flex-direction: column;\r\n transition: all 0.3s;\r\n overflow: visible;\r\n }\r\n\r\n .lang-switch {\r\n position: absolute;\r\n top: 16px;\r\n right: 20px;\r\n z-index: 100;\r\n display: flex;\r\n gap: 6px;\r\n background: rgba(14, 28, 18, 0.75);\r\n backdrop-filter: blur(8px);\r\n padding: 4px 8px;\r\n border-radius: 30px;\r\n border: 1px solid rgba(var(--primary-rgb), 0.35);\r\n box-shadow: 0 0 18px rgba(180, 130, 40, 0.15);\r\n }\r\n .lang-switch button {\r\n background: transparent;\r\n border: none;\r\n color: var(--primary-lighter);\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n padding: 5px 14px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n letter-spacing: 0.5px;\r\n white-space: nowrap;\r\n }\r\n .lang-switch button.active {\r\n background: var(--primary);\r\n color: #1a0e00;\r\n box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.6);\r\n font-weight: 700;\r\n }\r\n .lang-switch button:hover:not(.active) {\r\n color: #fff;\r\n background: var(--primary-hover-bg);\r\n }\r\n\r\n .header-arabic {\r\n text-align: center;\r\n margin-bottom: 8px;\r\n padding: 0 20px 6px 20px;\r\n \/* removed border-bottom *\/\r\n flex-shrink: 0;\r\n }\r\n\r\n .quran-title {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 700;\r\n font-size: 1.8rem;\r\n letter-spacing: 2px;\r\n color: var(--primary-text);\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n line-height: 1.3;\r\n }\r\n\r\n .tajweed-sub {\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n font-weight: 700;\r\n font-size: clamp(2rem, 5vw, 3.2rem);\r\n color: var(--primary-lighter);\r\n text-shadow: 0 0 14px rgba(var(--primary-rgb), 0.30);\r\n line-height: 1.4;\r\n letter-spacing: 0.5px;\r\n margin-bottom: 6px;\r\n margin-top: 0;\r\n direction: rtl;\r\n }\r\n\r\n .tagline {\r\n font-size: 1.3rem;\r\n color: var(--primary-lighter);\r\n font-weight: 400;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n opacity: 0.9;\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n direction: rtl;\r\n }\r\n\r\n .ayat-badge {\r\n display: inline-block;\r\n background: rgba(25, 45, 25, 0.55);\r\n backdrop-filter: blur(8px);\r\n padding: 8px 28px;\r\n border-radius: 60px;\r\n border: 1px solid var(--primary-light);\r\n box-shadow: 0 0 20px var(--primary-glow-strong);\r\n margin-top: 12px;\r\n }\r\n\r\n .badge-arabic {\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n color: #f5ecd7;\r\n direction: rtl;\r\n letter-spacing: 0.3px;\r\n }\r\n .badge-arabic span {\r\n font-weight: 700;\r\n color: var(--gold);\r\n }\r\n\r\n .tajweed-orbit {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 50px 20px;\r\n align-items: start;\r\n flex: 1 1 auto;\r\n margin-bottom: 10px;\r\n margin-top: 16px;\r\n min-height: 0;\r\n padding-bottom: 12px;\r\n padding-left: 0%;\r\n padding-right: 10px;\r\n overflow: visible;\r\n }\r\n\r\n .tajweed-orbit .tajweed-module:nth-child(odd) {\r\n justify-self: start;\r\n margin-left: 35%;\r\n margin-right: auto;\r\n }\r\n\r\n .tajweed-orbit .tajweed-module:nth-child(even) {\r\n justify-self: end;\r\n margin-right: 35%;\r\n margin-left: auto;\r\n }\r\n\r\n .educator-center {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 25;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n pointer-events: none;\r\n text-align: center;\r\n }\r\n\r\n .educator-label {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 1.6rem;\r\n font-weight: 700;\r\n color: #FFF8EC;\r\n text-shadow: 0 0 14px var(--primary), 0 0 30px var(--primary);\r\n letter-spacing: 4px;\r\n background: rgba(14, 28, 18, 0.58);\r\n backdrop-filter: blur(8px);\r\n padding: 6px 28px;\r\n border-radius: 40px;\r\n border: 1px solid rgba(var(--primary-rgb), 0.55);\r\n pointer-events: none;\r\n }\r\n\r\n .educator-name {\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n font-weight: 700;\r\n font-size: 2rem;\r\n color: var(--educator-name-color);\r\n text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.30);\r\n letter-spacing: 1px;\r\n margin-top: 8px;\r\n background: rgba(14, 28, 18, 0.50);\r\n backdrop-filter: blur(4px);\r\n padding: 4px 26px;\r\n border-radius: 20px;\r\n border: 1px solid rgba(var(--gold-rgb), 0.25);\r\n direction: rtl;\r\n }\r\n\r\n .educator-exp {\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n font-weight: 400;\r\n font-size: 1.2rem;\r\n color: var(--primary-lighter);\r\n letter-spacing: 0.5px;\r\n background: rgba(14, 28, 18, 0.38);\r\n backdrop-filter: blur(4px);\r\n padding: 4px 22px;\r\n border-radius: 20px;\r\n border: 1px solid rgba(var(--primary-rgb), 0.18);\r\n direction: rtl;\r\n }\r\n\r\n .tajweed-module {\r\n width: 82%;\r\n min-width: 250px;\r\n max-width: 440px;\r\n background: rgba(18, 32, 20, 0.78);\r\n backdrop-filter: blur(12px);\r\n border-radius: 28px 10px 28px 10px;\r\n padding: 24px 28px;\r\n border: 1px solid var(--primary-border-op40);\r\n box-shadow: 0 12px 20px rgba(0, 0, 0, 0.50), 0 0 24px var(--primary-glow-weak);\r\n transition: all 0.25s ease-out;\r\n cursor: pointer;\r\n color: #f5ecd7;\r\n z-index: 5;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .tajweed-module:hover {\r\n background: rgba(24, 42, 26, 0.90);\r\n border-color: var(--primary-text);\r\n box-shadow: 0 0 42px var(--primary), 0 10px 18px rgba(0, 0, 0, 0.55);\r\n transform: translateY(-2px) scale(1.01);\r\n z-index: 30;\r\n }\r\n\r\n .tajweed-module.completed {\r\n border-color: var(--completed);\r\n box-shadow: 0 0 32px var(--completed), inset 0 0 18px rgba(var(--completed-light-rgb), 0.55);\r\n background: rgba(14, 48, 34, 0.88);\r\n }\r\n\r\n .module-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .module-icon {\r\n font-size: 2.4rem;\r\n filter: drop-shadow(0 0 6px var(--primary));\r\n }\r\n\r\n .module-title {\r\n font-weight: 800;\r\n font-size: 2.2rem;\r\n letter-spacing: -0.2px;\r\n color: #fffdf7;\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n direction: rtl;\r\n }\r\n\r\n .module-desc {\r\n font-size: 1.4rem;\r\n line-height: 1.65;\r\n opacity: 0.93;\r\n margin-bottom: 16px;\r\n flex: 1;\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n\r\n .tajweed-progress {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-top: auto;\r\n }\r\n\r\n .progress-label {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n opacity: 0.8;\r\n letter-spacing: 1px;\r\n font-family: 'Inter', sans-serif;\r\n color: var(--primary-lighter);\r\n white-space: nowrap;\r\n }\r\n\r\n .noor-bar {\r\n height: 8px;\r\n flex: 1;\r\n background: #1a3020;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n\r\n .noor-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, var(--primary), var(--primary-light));\r\n box-shadow: 0 0 10px var(--primary);\r\n transition: width 0.5s ease;\r\n border-radius: 10px;\r\n }\r\n\r\n .completed .noor-fill {\r\n background: linear-gradient(90deg, var(--completed-light), var(--completed));\r\n box-shadow: 0 0 10px var(--completed);\r\n width: 100%;\r\n }\r\n\r\n .action-section {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 16px;\r\n margin-top: 32px;\r\n flex-shrink: 0;\r\n padding-top: 8px;\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n\r\n .class-schedule {\r\n font-family: 'Inter', 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n font-size: 1.4rem;\r\n font-weight: 500;\r\n color: #f0e8d0;\r\n background: rgba(20, 40, 25, 0.48);\r\n backdrop-filter: blur(8px);\r\n padding: 10px 28px;\r\n border-radius: 40px;\r\n border: 1px solid var(--primary-border-op40);\r\n letter-spacing: 0.8px;\r\n box-shadow: 0 0 12px var(--primary-glow-weak);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n .class-schedule .price-tag {\r\n background: var(--gold);\r\n color: #1a0e00;\r\n padding: 2px 20px;\r\n border-radius: 40px;\r\n font-weight: 700;\r\n font-size: 1.4rem;\r\n margin-left: 8px;\r\n }\r\n .class-schedule .date-highlight {\r\n color: var(--gold);\r\n font-weight: 700;\r\n }\r\n\r\n .begin-btn {\r\n display: inline-block;\r\n background: transparent;\r\n border: 2px solid var(--primary-light);\r\n color: #fffdf5;\r\n font-family: 'Inter', 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n font-weight: 700;\r\n font-size: 1.5rem;\r\n padding: 14px 50px;\r\n border-radius: 60px;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n backdrop-filter: blur(12px);\r\n background: var(--primary-btn-bg);\r\n box-shadow: 0 0 20px var(--primary-glow-strong);\r\n transition: all 0.2s ease;\r\n text-decoration: none;\r\n }\r\n\r\n .begin-btn:hover {\r\n background: var(--primary);\r\n color: #1a0e00;\r\n box-shadow: 0 0 40px var(--primary-light);\r\n border-color: var(--primary-lighter);\r\n transform: scale(1.02);\r\n }\r\n\r\n .progress-status {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: rgba(20, 40, 25, 0.58);\r\n padding: 8px 28px;\r\n border-radius: 50px;\r\n border: 1px solid rgba(var(--primary-rgb), 0.32);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .status-dot {\r\n width: 12px;\r\n height: 12px;\r\n background: var(--primary-light);\r\n border-radius: 50%;\r\n box-shadow: 0 0 14px var(--primary);\r\n animation: pulseSoft 2s infinite;\r\n }\r\n\r\n @keyframes pulseSoft {\r\n 0%,\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n transform: scale(1.18);\r\n }\r\n }\r\n\r\n .counter-text {\r\n color: #f5ecd7;\r\n font-weight: 600;\r\n font-size: 1.3rem;\r\n letter-spacing: 0.5px;\r\n font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;\r\n direction: rtl;\r\n }\r\n\r\n \/* ---------- URDU : right aligned, larger line-height ---------- *\/\r\n .lang-ur .tajweed-sub {\r\n font-size: clamp(2.4rem, 6vw, 3.8rem);\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n .lang-ur .tagline {\r\n font-size: 1.6rem;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n .lang-ur .badge-arabic {\r\n font-size: 1.8rem;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n .lang-ur .educator-name {\r\n font-size: 2.4rem;\r\n direction: rtl;\r\n }\r\n .lang-ur .educator-exp {\r\n font-size: 1.5rem;\r\n direction: rtl;\r\n }\r\n .lang-ur .module-title {\r\n font-size: 2.6rem;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n .lang-ur .module-desc {\r\n font-size: 1.8rem;\r\n line-height: 1.8;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n .lang-ur .class-schedule {\r\n font-size: 1.6rem;\r\n }\r\n .lang-ur .counter-text {\r\n font-size: 1.6rem;\r\n direction: rtl;\r\n }\r\n .lang-ur .begin-btn {\r\n font-size: 1.8rem;\r\n padding: 16px 56px;\r\n }\r\n .lang-ur .progress-label {\r\n font-size: 1.2rem;\r\n }\r\n\r\n \/* ---------- ENGLISH : left aligned, no Urdu words, larger size ---------- *\/\r\n .lang-en .tajweed-sub {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .tagline {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .badge-arabic {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .educator-name {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .educator-exp {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .module-title {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .module-desc {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .counter-text {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n .lang-en .class-schedule {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .majlis-panel {\r\n height: auto;\r\n min-height: 650px;\r\n overflow: visible;\r\n padding: 20px 0 24px 0;\r\n }\r\n .tajweed-orbit {\r\n gap: 40px 30px;\r\n padding-left: 0;\r\n padding-right: 0;\r\n }\r\n .tajweed-module {\r\n width: 90%;\r\n min-width: 200px;\r\n }\r\n .tajweed-orbit .tajweed-module:nth-child(odd) {\r\n margin-left: 0;\r\n }\r\n .tajweed-orbit .tajweed-module:nth-child(even) {\r\n margin-right: 0;\r\n }\r\n .module-title {\r\n font-size: 2rem;\r\n }\r\n .module-desc {\r\n font-size: 1.3rem;\r\n }\r\n .tajweed-sub {\r\n font-size: clamp(1.8rem, 4.5vw, 2.6rem);\r\n }\r\n .lang-ur .module-title {\r\n font-size: 2.4rem;\r\n }\r\n .lang-ur .module-desc {\r\n font-size: 1.7rem;\r\n }\r\n .lang-ur .tajweed-sub {\r\n font-size: clamp(2.2rem, 5.5vw, 3.4rem);\r\n }\r\n }\r\n\r\n @media (max-width: 650px) {\r\n .majlis-panel {\r\n height: auto;\r\n min-height: auto;\r\n padding: 20px 0 20px 0;\r\n overflow: visible;\r\n }\r\n .tajweed-orbit {\r\n grid-template-columns: 1fr;\r\n gap: 24px;\r\n margin-bottom: auto;\r\n margin-top: 12px;\r\n padding-bottom: 16px;\r\n padding-left: 0;\r\n padding-right: 0;\r\n }\r\n .tajweed-module {\r\n width: 100%;\r\n max-width: 420px;\r\n justify-self: center !important;\r\n margin: 0 auto !important;\r\n }\r\n .educator-center {\r\n position: relative;\r\n top: auto;\r\n left: auto;\r\n transform: none;\r\n margin: 24px auto 12px auto;\r\n order: -1;\r\n }\r\n .module-title {\r\n font-size: 1.9rem;\r\n }\r\n .module-desc {\r\n font-size: 1.25rem;\r\n }\r\n .tajweed-sub {\r\n font-size: clamp(1.7rem, 5vw, 2.4rem);\r\n }\r\n .class-schedule {\r\n font-size: 1.2rem;\r\n padding: 8px 22px;\r\n }\r\n .begin-btn {\r\n font-size: 1.3rem;\r\n padding: 12px 36px;\r\n }\r\n .lang-ur .module-title {\r\n font-size: 2.2rem;\r\n }\r\n .lang-ur .module-desc {\r\n font-size: 1.6rem;\r\n }\r\n .lang-ur .tajweed-sub {\r\n font-size: clamp(2rem, 5.5vw, 3rem);\r\n }\r\n }\r\n\r\n @media (max-width: 400px) {\r\n .tajweed-module {\r\n padding: 20px 22px;\r\n }\r\n .module-title {\r\n font-size: 1.7rem;\r\n }\r\n .module-desc {\r\n font-size: 1.15rem;\r\n }\r\n .class-schedule {\r\n font-size: 1.05rem;\r\n padding: 6px 18px;\r\n }\r\n .begin-btn {\r\n font-size: 1.2rem;\r\n padding: 10px 30px;\r\n }\r\n }\r\n\r\n @media (min-width: 1400px) {\r\n .tajweed-module {\r\n padding: 28px 32px;\r\n max-width: 480px;\r\n width: 80%;\r\n }\r\n .module-title {\r\n font-size: 2.4rem;\r\n }\r\n .module-desc {\r\n font-size: 1.5rem;\r\n }\r\n .tajweed-orbit {\r\n gap: 60px 140px;\r\n margin-top: 16px;\r\n padding-bottom: 20px;\r\n }\r\n .tajweed-orbit .tajweed-module:nth-child(odd) {\r\n margin-left: 0;\r\n }\r\n .tajweed-orbit .tajweed-module:nth-child(even) {\r\n margin-right: 0;\r\n }\r\n .action-section {\r\n margin-top: 40px;\r\n }\r\n .lang-switch {\r\n top: 20px;\r\n right: 30px;\r\n }\r\n .lang-ur .module-title {\r\n font-size: 3rem;\r\n }\r\n .lang-ur .module-desc {\r\n font-size: 2rem;\r\n }\r\n }\r\n\r\n .tajweed-orbit {\r\n margin-bottom: auto;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"lang-en\">\r\n <div class=\"majlis-panel lang-en\">\r\n\r\n <div class=\"lang-switch\">\r\n <button id=\"langEn\" class=\"active\" data-lang=\"en\">\ud83c\uddec\ud83c\udde7 English<\/button>\r\n <button id=\"langUr\" data-lang=\"ur\">\ud83c\uddf5\ud83c\uddf0 \u0627\u0631\u062f\u0648<\/button>\r\n <\/div>\r\n\r\n <div class=\"header-arabic\">\r\n <div class=\"quran-title\" data-ur=\"\ud83d\udcd6 \u062a\u062c\u0648\u06cc\u062f \u0648 \u062a\u0631\u062a\u06cc\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0642\u0631\u0622\u0646 \u067e\u0691\u06be\u0646\u0627 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"\ud83d\udcd6 LEARN QURAN READING WITH TAJWEED & TARTEEL\">\ud83d\udcd6 LEARN QURAN READING WITH TAJWEED & TARTEEL<\/div>\r\n <div class=\"tajweed-sub\" data-ur=\"\u0627\u0631\u062f\u0648 \u0645\u06cc\u06ba \u0642\u0631\u0622\u0646 \u067e\u0691\u06be\u0646\u0627 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"Learn Quran in Urdu\">Learn Quran in Urdu<\/div>\r\n <div class=\"tagline\" data-ur=\"\u062a\u062c\u0648\u06cc\u062f \u0648 \u062a\u0631\u062a\u06cc\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0642\u0631\u0622\u0646 \u067e\u0691\u06be\u0646\u0627 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"Learn Quran with Tajweed & Tarteel\">Learn Quran with Tajweed & Tarteel<\/div>\r\n <div class=\"ayat-badge\">\r\n <span class=\"badge-arabic\">\r\n \ud83d\udcc5 <span id=\"startDateDisplay\"><\/span> \u00b7\r\n <span data-ur=\"\u0635\u0628\u062d\" data-en=\"Morning\">Morning<\/span> 9:00 AM \u00b7 \u20b9<span>99<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tajweed-orbit\">\r\n\r\n <div class=\"educator-center\">\r\n <div class=\"educator-label\" data-ur=\"\ud83d\udcd6 \u0627\u0633\u062a\u0627\u062f\" data-en=\"\ud83d\udcd6 EDUCATOR\">\ud83d\udcd6 EDUCATOR<\/div>\r\n <div class=\"educator-name\" data-ur=\"\u0642\u0627\u0631\u06cc \u0645\u062d\u0645\u062f \u0641\u0627\u0631\u0648\u0642\" data-en=\"Qari Muhammad Farooq\">Qari Muhammad Farooq<\/div>\r\n <div class=\"educator-exp\" data-ur=\"10 \u0633\u0627\u0644 \u06a9\u0627 \u062a\u062c\u0631\u0628\u06c1\" data-en=\"10 years experience\">10 years experience<\/div>\r\n <\/div>\r\n\r\n <div class=\"tajweed-module\" data-id=\"0\">\r\n <div class=\"module-header\">\r\n <span class=\"module-icon\">\ud83d\udd24<\/span>\r\n <span class=\"module-title\" data-ur=\"\u062d\u0631\u0648\u0641 \u0627\u0648\u0631 \u0645\u062e\u0627\u0631\u062c\" data-en=\"Arabic Letters & Makharij\">Arabic Letters & Makharij<\/span>\r\n <\/div>\r\n <div class=\"module-desc\" data-ur=\"\u0639\u0631\u0628\u06cc \u062d\u0631\u0648\u0641 \u06a9\u06cc \u067e\u06c1\u0686\u0627\u0646\u060c \u0627\u0646 \u06a9\u06d2 \u062f\u0631\u0633\u062a \u062a\u0644\u0641\u0638 \u0627\u0648\u0631 \u0645\u062e\u0627\u0631\u062c (\u0622\u0648\u0627\u0632 \u06a9\u06d2 \u0646\u06a9\u0627\u0644\u0646\u06d2 \u06a9\u06cc \u062c\u06af\u06c1\u06cc\u06ba) \u0633\u06cc\u06a9\u06be\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0628\u0646\u06cc\u0627\u062f \u0645\u0636\u0628\u0648\u0637 \u06c1\u0648\u06d4\" data-en=\"Learn to recognize Arabic letters, their correct pronunciation and articulation points (Makharij) for a strong foundation.\">Learn to recognize Arabic letters, their correct pronunciation and articulation points (Makharij) for a strong foundation.<\/div>\r\n <div class=\"tajweed-progress\">\r\n <span class=\"progress-label\" data-ur=\"\u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"Learn\">Learn<\/span>\r\n <div class=\"noor-bar\"><div class=\"noor-fill\" id=\"fill0\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tajweed-module\" data-id=\"1\">\r\n <div class=\"module-header\">\r\n <span class=\"module-icon\">\ud83d\udcd0<\/span>\r\n <span class=\"module-title\" data-ur=\"\u062a\u062c\u0648\u06cc\u062f \u06a9\u06d2 \u0627\u0635\u0648\u0644\" data-en=\"Tajweed Rules\">Tajweed Rules<\/span>\r\n <\/div>\r\n <div class=\"module-desc\" data-ur=\"\u0646\u0648\u0646 \u0633\u0627\u06a9\u0646\u060c \u0645\u06cc\u0645 \u0633\u0627\u06a9\u0646\u060c \u0645\u062f\u060c \u063a\u0646\u06c1\u060c \u0627\u0642\u0644\u0627\u0628 \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u062a\u062c\u0648\u06cc\u062f\u06cc \u0642\u0648\u0627\u0639\u062f \u06a9\u0648 \u0639\u0645\u0644\u06cc \u0645\u062b\u0627\u0644\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0645\u062c\u06be\u06cc\u06ba\u06d4\" data-en=\"Understand Noon Saakin, Meem Saakin, Madd, Ghunnah, Iqlaab and other Tajweed rules with practical examples.\">Understand Noon Saakin, Meem Saakin, Madd, Ghunnah, Iqlaab and other Tajweed rules with practical examples.<\/div>\r\n <div class=\"tajweed-progress\">\r\n <span class=\"progress-label\" data-ur=\"\u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"Learn\">Learn<\/span>\r\n <div class=\"noor-bar\"><div class=\"noor-fill\" id=\"fill1\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tajweed-module\" data-id=\"2\">\r\n <div class=\"module-header\">\r\n <span class=\"module-icon\">\ud83c\udfb6<\/span>\r\n <span class=\"module-title\" data-ur=\"\u062a\u0631\u062a\u06cc\u0644 \u0627\u0648\u0631 \u0644\u064e\u06d2\" data-en=\"Tarteel & Rhythm\">Tarteel & Rhythm<\/span>\r\n <\/div>\r\n <div class=\"module-desc\" data-ur=\"\u0642\u0631\u0622\u0646 \u06a9\u0648 \u0679\u06be\u06c1\u0631 \u0679\u06be\u06c1\u0631 \u06a9\u0631 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 (\u062a\u0631\u062a\u06cc\u0644)\u060c \u0648\u0642\u0641 \u0627\u0648\u0631 \u0627\u0628\u062a\u062f\u0627 \u06a9\u06d2 \u0627\u0635\u0648\u0644\u060c \u0627\u0648\u0631 \u0622\u0648\u0627\u0632 \u0645\u06cc\u06ba \u0631\u0648\u0627\u0646\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u0646\u0627\u06d4\" data-en=\"Learn to recite Quran slowly and distinctly (Tarteel), rules of stopping (Waqf) and starting, and develop rhythmic fluency.\">Learn to recite Quran slowly and distinctly (Tarteel), rules of stopping (Waqf) and starting, and develop rhythmic fluency.<\/div>\r\n <div class=\"tajweed-progress\">\r\n <span class=\"progress-label\" data-ur=\"\u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"Learn\">Learn<\/span>\r\n <div class=\"noor-bar\"><div class=\"noor-fill\" id=\"fill2\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tajweed-module\" data-id=\"3\">\r\n <div class=\"module-header\">\r\n <span class=\"module-icon\">\ud83d\udcd6<\/span>\r\n <span class=\"module-title\" data-ur=\"\u0639\u0645\u0644\u06cc \u0642\u0631\u0622\u0646 \u067e\u0691\u06be\u0646\u0627\" data-en=\"Quran Reading Practice\">Quran Reading Practice<\/span>\r\n <\/div>\r\n <div class=\"module-desc\" data-ur=\"\u0633\u06cc\u06a9\u06be\u06d2 \u06af\u0626\u06d2 \u062a\u0645\u0627\u0645 \u0627\u0635\u0648\u0644\u0648\u06ba \u06a9\u0648 \u0645\u0644\u0627 \u06a9\u0631 \u0642\u0631\u0622\u0646 \u06a9\u06cc \u062a\u0644\u0627\u0648\u062a \u06a9\u0631\u06cc\u06ba\u060c \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u06cc \u062a\u0635\u062d\u06cc\u062d \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0631\u0648\u0627\u0646\u06cc \u0633\u06d2 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06cc \u0645\u0634\u0642 \u06a9\u0631\u06cc\u06ba\u06d4\" data-en=\"Apply all the rules you've learned to recite Quran, correct mistakes, and practice reading fluently with Tajweed and Tarteel.\">Apply all the rules you've learned to recite Quran, correct mistakes, and practice reading fluently with Tajweed and Tarteel.<\/div>\r\n <div class=\"tajweed-progress\">\r\n <span class=\"progress-label\" data-ur=\"\u0633\u06cc\u06a9\u06be\u06cc\u06ba\" data-en=\"Learn\">Learn<\/span>\r\n <div class=\"noor-bar\"><div class=\"noor-fill\" id=\"fill3\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-section\">\r\n <div class=\"class-schedule\">\r\n \ud83d\udcc5 <span class=\"date-highlight\" id=\"scheduleDateDisplay\"><\/span> \u00b7 9:00 AM\r\n <span class=\"price-tag\">\u20b999<\/span>\r\n <span style=\"opacity:0.7; margin-left:6px;\" data-ur=\"\u00b7 13 \u06a9\u0644\u0627\u0633\u0632\" data-en=\"\u00b7 13 Classes\">\u00b7 13 Classes<\/span>\r\n <\/div>\r\n\r\n <a class=\"begin-btn\" id=\"beginJourney\"\r\n data-ur=\"\ud83d\ude80 \u0633\u0641\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\"\r\n data-en=\"\ud83d\ude80 Start Journey\"\r\n href=\"https:\/\/sehabacademy.com\/quran-reading-urdu\/\">\r\n \ud83d\ude80 Start Journey\r\n <\/a>\r\n\r\n <div class=\"progress-status\">\r\n <span class=\"status-dot\"><\/span>\r\n <span class=\"counter-text\" id=\"progressCounter\" data-ur=\"0\/4 \u0642\u0631\u0622\u0646\u06cc \u0627\u0631\u06a9\u0627\u0646 \u0645\u06a9\u0645\u0644\" data-en=\"0\/4 Reading Pillars Mastered\">0\/4 Reading Pillars Mastered<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n (function() {\r\n\r\n function getNextWednesday() {\r\n const today = new Date();\r\n const day = today.getDay();\r\n let daysUntilWed = 3 - day;\r\n if (daysUntilWed <= 0) daysUntilWed += 7;\r\n const nextWed = new Date(today);\r\n nextWed.setDate(today.getDate() + daysUntilWed);\r\n return nextWed;\r\n }\r\n\r\n function formatDateUrdu(date) {\r\n const daysUrdu = ['\u0627\u062a\u0648\u0627\u0631', '\u067e\u06cc\u0631', '\u0645\u0646\u06af\u0644', '\u0628\u062f\u06be', '\u062c\u0645\u0639\u0631\u0627\u062a', '\u062c\u0645\u0639\u06c1', '\u06c1\u0641\u062a\u06c1'];\r\n const monthsUrdu = ['\u062c\u0646\u0648\u0631\u06cc', '\u0641\u0631\u0648\u0631\u06cc', '\u0645\u0627\u0631\u0686', '\u0627\u067e\u0631\u06cc\u0644', '\u0645\u0626\u06cc', '\u062c\u0648\u0646', '\u062c\u0648\u0644\u0627\u0626\u06cc', '\u0627\u06af\u0633\u062a', '\u0633\u062a\u0645\u0628\u0631', '\u0627\u06a9\u062a\u0648\u0628\u0631', '\u0646\u0648\u0645\u0628\u0631', '\u062f\u0633\u0645\u0628\u0631'];\r\n const d = date.getDate();\r\n const m = monthsUrdu[date.getMonth()];\r\n const y = date.getFullYear();\r\n const dayName = daysUrdu[date.getDay()];\r\n return `${dayName}, ${d} ${m} ${y}`;\r\n }\r\n\r\n function formatDateEnglish(date) {\r\n const daysEng = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\r\n const monthsEng = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\n const dayName = daysEng[date.getDay()];\r\n const d = date.getDate();\r\n const m = monthsEng[date.getMonth()];\r\n const y = date.getFullYear();\r\n return `${dayName}, ${d} ${m} ${y}`;\r\n }\r\n\r\n const startDate = getNextWednesday();\r\n const startDateDisplay = document.getElementById('startDateDisplay');\r\n const scheduleDateDisplay = document.getElementById('scheduleDateDisplay');\r\n\r\n let currentLang = 'en';\r\n const panel = document.querySelector('.majlis-panel');\r\n const body = document.body;\r\n\r\n function updateDateDisplay() {\r\n const dateStr = currentLang === 'ur' ? formatDateUrdu(startDate) : formatDateEnglish(startDate);\r\n startDateDisplay.textContent = dateStr;\r\n scheduleDateDisplay.textContent = dateStr;\r\n }\r\n\r\n function setLanguage(lang) {\r\n currentLang = lang;\r\n body.classList.remove('lang-ur', 'lang-en');\r\n body.classList.add('lang-' + lang);\r\n panel.classList.remove('lang-ur', 'lang-en');\r\n panel.classList.add('lang-' + lang);\r\n\r\n document.querySelectorAll('[data-ur][data-en]').forEach(el => {\r\n el.textContent = lang === 'ur' ? el.getAttribute('data-ur') : el.getAttribute('data-en');\r\n });\r\n document.querySelectorAll('.lang-switch button').forEach(btn => {\r\n btn.classList.toggle('active', btn.dataset.lang === lang);\r\n });\r\n updateDateDisplay();\r\n updateCounter();\r\n }\r\n\r\n const modules = document.querySelectorAll('.tajweed-module');\r\n const fills = [\r\n document.getElementById('fill0'),\r\n document.getElementById('fill1'),\r\n document.getElementById('fill2'),\r\n document.getElementById('fill3')\r\n ];\r\n const counterEl = document.getElementById('progressCounter');\r\n const beginBtn = document.getElementById('beginJourney');\r\n\r\n let completed = [false, false, false, false];\r\n\r\n function updateCounter() {\r\n const count = completed.filter(v => v).length;\r\n if (count === 4) {\r\n const text = currentLang === 'ur' ? '\u2728 4\/4 \u00b7 \u0622\u067e \u062a\u06cc\u0627\u0631 \u06c1\u06cc\u06ba! \u2728' : '\u2728 4\/4 \u00b7 You\\'re ready! \u2728';\r\n counterEl.textContent = text;\r\n beginBtn.textContent = currentLang === 'ur' ? '\ud83c\udf89 \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0627' : '\ud83c\udf89 Completed';\r\n } else {\r\n const prefix = currentLang === 'ur' ? '\u0642\u0631\u0622\u0646\u06cc \u0627\u0631\u06a9\u0627\u0646 \u0645\u06a9\u0645\u0644' : 'Reading Pillars Mastered';\r\n counterEl.textContent = `${count}\/4 ${prefix}`;\r\n beginBtn.textContent = currentLang === 'ur' ? '\ud83d\ude80 \u0633\u0641\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba' : '\ud83d\ude80 Start Journey';\r\n }\r\n }\r\n\r\n function refreshDisplay() {\r\n modules.forEach((mod, idx) => {\r\n if (completed[idx]) {\r\n mod.classList.add('completed');\r\n if (fills[idx]) fills[idx].style.width = '100%';\r\n } else {\r\n mod.classList.remove('completed');\r\n if (fills[idx]) fills[idx].style.width = '0%';\r\n }\r\n });\r\n updateCounter();\r\n }\r\n\r\n function togglePillar(index) {\r\n completed[index] = !completed[index];\r\n refreshDisplay();\r\n }\r\n\r\n modules.forEach((mod, idx) => {\r\n mod.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n togglePillar(idx);\r\n });\r\n });\r\n\r\n beginBtn.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n if (!completed.every(v => v)) {\r\n completed = [true, true, true, true];\r\n refreshDisplay();\r\n } else {\r\n this.style.transform = 'scale(0.97)';\r\n setTimeout(() => { this.style.transform = ''; }, 150);\r\n const statusEl = document.querySelector('.progress-status');\r\n if (statusEl) {\r\n statusEl.style.backgroundColor = 'rgba(40, 100, 60, 0.40)';\r\n setTimeout(() => { statusEl.style.backgroundColor = ''; }, 350);\r\n }\r\n }\r\n setTimeout(() => {\r\n window.location.href = \"https:\/\/sehabacademy.com\/quran-reading-urdu\/\";\r\n }, 300);\r\n });\r\n\r\n document.addEventListener('dblclick', (e) => {\r\n if (e.target.closest('.majlis-panel')) {\r\n completed = [false, false, false, false];\r\n refreshDisplay();\r\n }\r\n });\r\n\r\n document.getElementById('langUr').addEventListener('click', () => setLanguage('ur'));\r\n document.getElementById('langEn').addEventListener('click', () => setLanguage('en'));\r\n\r\n \/\/ Start with English \u2013 absolutely no Urdu text visible\r\n setLanguage('en');\r\n refreshDisplay();\r\n\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Islamic Learning Hub | Learn Islam with Expert TRUSTED ISLAMIC EDUCATION Begin Your Journey Learn Islam with Expert Scholars \u0637\u064e\u0644\u064e\u0628\u064f \u0627\u0644\u0652\u0639\u0650\u0644\u0652\u0645\u0650 \u0641\u064e\u0631\u0650\u064a\u0636\u064e\u0629\u064c \u0639\u064e\u0644\u064e\u0649 \u0643\u064f\u0644\u0650\u0651 \u0645\u064f\u0633\u0652\u0644\u0650\u0645\u064d \u2014 Prophet Muhammad \ufdfa \u2022 Sunan Ibn Majah 224 \u062e\u064e\u064a\u0652\u0631\u064f\u0643\u064f\u0645\u0652 \u0645\u064e\u0646\u0652 \u062a\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e \u0627\u0644\u0652\u0642\u064f\u0631\u0652\u0622\u0646\u064e \u0648\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e\u0647\u064f \u2014 Prophet Muhammad \ufdfa \u2022 Sahih al-Bukhari 5027 Live & Interactive Qualified Scholars Structured Curriculum All Levels Welcome ISLAMICMASTERY Explore Courses \u00b7 Official Professional Explore Our Courses Where knowledge meets transformation Quran Reading with Tajweed & Tarteel in Urdu \u00b7 13 Classes \u00b7 \u20b999 \ud83c\uddec\ud83c\udde7 English \ud83c\uddf5\ud83c\uddf0 \u0627\u0631\u062f\u0648 \ud83d\udcd6 LEARN QURAN READING WITH TAJWEED & TARTEEL Learn Quran in Urdu Learn Quran with Tajweed & Tarteel \ud83d\udcc5 \u00b7 Morning 9:00 AM \u00b7 \u20b999 \ud83d\udcd6 EDUCATOR Qari Muhammad Farooq 10 years experience \ud83d\udd24 Arabic Letters & Makharij Learn to recognize Arabic letters, their correct pronunciation and articulation points (Makharij) for a strong foundation. Learn \ud83d\udcd0 Tajweed Rules Understand Noon Saakin, Meem Saakin, Madd, Ghunnah, Iqlaab and other Tajweed rules with practical examples. Learn \ud83c\udfb6 Tarteel & Rhythm Learn to recite Quran slowly and distinctly (Tarteel), rules of stopping (Waqf) and starting, and develop rhythmic fluency. Learn \ud83d\udcd6 Quran Reading Practice Apply all the rules you’ve learned to recite Quran, correct mistakes, and practice reading fluently with Tajweed and Tarteel. Learn \ud83d\udcc5 \u00b7 9:00 AM \u20b999 \u00b7 13 Classes \ud83d\ude80 Start Journey 0\/4 Reading Pillars Mastered<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1924","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages\/1924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1924"}],"version-history":[{"count":103,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages\/1924\/revisions"}],"predecessor-version":[{"id":2196,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages\/1924\/revisions\/2196"}],"wp:attachment":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}