Why Choose Us - Online Hifz Madrasa<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #0a5c3e;\r\n --primary-dark: #064029;\r\n --primary-light: #0e7a52;\r\n --gold: #d4a937;\r\n --gold-light: #e6c458;\r\n --cream: #faf8f3;\r\n --cream-dark: #f0ece0;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: smooth; }\r\n body { font-family: 'Inter', sans-serif; background: var(--cream); color: #1a2e1f; }\r\n h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; }\r\n \r\n .pattern-bg {\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40L40 0zm0 15L15 40l25 25 25-25L40 15z' fill='%230a5c3e' fill-opacity='0.03'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n .page-hero {\r\n min-height: 70vh;\r\n background: linear-gradient(160deg, #052e1e 0%, #0a5c3e 50%, #0e7a52 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(212, 169, 55, 0.25) 0%, transparent 70%);\r\n animation: float 12s ease-in-out infinite;\r\n }\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0) scale(1); }\r\n 50% { transform: translateY(-30px) scale(1.05); }\r\n }\r\n\r\n .nav-link {\r\n color: rgba(255, 255, 255, 0.85);\r\n font-weight: 500;\r\n transition: color 0.3s ease;\r\n position: relative;\r\n }\r\n .nav-link:hover, .nav-link.active { color: var(--gold); }\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--gold);\r\n transition: width 0.3s ease;\r\n }\r\n .nav-link:hover::after { width: 100%; }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\r\n color: var(--primary-dark);\r\n font-weight: 600;\r\n padding: 16px 36px;\r\n border-radius: 12px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 20px rgba(212, 169, 55, 0.3);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 30px rgba(212, 169, 55, 0.5);\r\n }\r\n\r\n .btn-outline {\r\n border: 2px solid rgba(255,255,255,0.4);\r\n color: white;\r\n padding: 14px 32px;\r\n border-radius: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n .btn-outline:hover {\r\n background: rgba(255,255,255,0.1);\r\n border-color: var(--gold);\r\n color: var(--gold);\r\n }\r\n\r\n .feature-card {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 36px;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(10, 92, 62, 0.08);\r\n }\r\n .feature-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px rgba(10, 92, 62, 0.12);\r\n }\r\n .feature-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .feature-card:hover .feature-icon {\r\n transform: scale(1.1) rotate(-5deg);\r\n }\r\n\r\n .teacher-card {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(10, 92, 62, 0.08);\r\n }\r\n .teacher-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px rgba(10, 92, 62, 0.12);\r\n }\r\n .teacher-avatar {\r\n height: 220px;\r\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .teacher-initials {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 60px;\r\n font-weight: 700;\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n .method-step {\r\n position: relative;\r\n padding-left: 90px;\r\n margin-bottom: 40px;\r\n }\r\n .method-step::before {\r\n content: '';\r\n position: absolute;\r\n left: 32px;\r\n top: 70px;\r\n bottom: -30px;\r\n width: 2px;\r\n background: linear-gradient(180deg, var(--gold), rgba(212, 169, 55, 0.2));\r\n }\r\n .method-step:last-child::before { display: none; }\r\n .step-number {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 66px;\r\n height: 66px;\r\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: var(--primary-dark);\r\n box-shadow: 0 8px 24px rgba(212, 169, 55, 0.3);\r\n }\r\n\r\n .comparison-table {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 40px rgba(10, 92, 62, 0.08);\r\n }\r\n .table-row {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr;\r\n padding: 18px 24px;\r\n border-bottom: 1px solid rgba(10, 92, 62, 0.08);\r\n align-items: center;\r\n }\r\n .table-row:last-child { border-bottom: none; }\r\n .table-header {\r\n background: var(--primary);\r\n color: white;\r\n font-weight: 600;\r\n }\r\n\r\n .story-card {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 32px;\r\n box-shadow: 0 10px 40px rgba(10, 92, 62, 0.08);\r\n position: relative;\r\n }\r\n .story-card::before {\r\n content: '\"';\r\n position: absolute;\r\n top: 16px;\r\n left: 24px;\r\n font-size: 80px;\r\n font-family: 'Cormorant Garamond', serif;\r\n color: var(--gold);\r\n opacity: 0.2;\r\n line-height: 1;\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 56px;\r\n font-weight: 700;\r\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .whatsapp-btn {\r\n position: fixed;\r\n bottom: 24px;\r\n right: 24px;\r\n width: 60px;\r\n height: 60px;\r\n background: #25D366;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);\r\n z-index: 1000;\r\n transition: transform 0.3s ease;\r\n }\r\n .whatsapp-btn:hover { transform: scale(1.1); }\r\n\r\n .mobile-menu {\r\n position: fixed;\r\n inset: 0;\r\n background: var(--primary-dark);\r\n z-index: 999;\r\n padding: 100px 32px;\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n .mobile-menu.open { transform: translateX(0); }\r\n\r\n @media (max-width: 768px) {\r\n .table-row { grid-template-columns: 1fr; text-align: center; gap: 8px; }\r\n .method-step { padding-left: 70px; }\r\n .step-number { width: 50px; height: 50px; font-size: 22px; }\r\n .method-step::before { left: 24px; top: 55px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <nav class=\"fixed top-0 left-0 right-0 z-50\" id=\"navbar\" style=\"background: transparent; transition: all 0.3s ease;\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n <a href=\"#\" class=\"flex items-center gap-3\">\r\n <div class=\"w-12 h-12 rounded-xl flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--gold), var(--gold-light));\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0a5c3e\" stroke-width=\"2\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"text-white font-semibold text-lg hidden sm:block\" style=\"font-family: 'Cormorant Garamond', serif;\">Online Hifz Madrasa<\/span>\r\n <\/a>\r\n <div class=\"hidden lg:flex items-center gap-10\">\r\n <a href=\"#\" class=\"nav-link\">Home<\/a>\r\n <a href=\"#\" class=\"nav-link active\">Why Us<\/a>\r\n <a href=\"#\" class=\"nav-link\">Courses<\/a>\r\n <a href=\"#\" class=\"nav-link\">About<\/a>\r\n <a href=\"#\" class=\"nav-link\">Pricing<\/a>\r\n <a href=\"#\" class=\"nav-link\">Contact<\/a>\r\n <a href=\"#\" class=\"btn-primary\">Enroll Now<\/a>\r\n <\/div>\r\n <button class=\"lg:hidden text-white p-2\" id=\"menuBtn\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <button class=\"absolute top-6 right-6 text-white\" id=\"closeMenuBtn\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>\r\n <\/svg>\r\n <\/button>\r\n <div class=\"flex flex-col gap-6\">\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">Home<\/a>\r\n <a href=\"#\" class=\"text-2xl\" style=\"font-family: 'Cormorant Garamond', serif; color: var(--gold);\">Why Us<\/a>\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">Courses<\/a>\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">About<\/a>\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">Contact<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"page-hero flex items-center\">\r\n <div class=\"orb\" style=\"width: 400px; height: 400px; top: -10%; left: -5%;\"><\/div>\r\n <div class=\"orb\" style=\"width: 300px; height: 300px; bottom: 5%; right: -3%; animation-delay: 4s;\"><\/div>\r\n \r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 relative z-10\">\r\n <div class=\"max-w-3xl\">\r\n <div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm px-5 py-2.5 rounded-full mb-8\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse\"><\/span>\r\n <span class=\"text-white\/90 text-sm font-medium\">2,500+ Students Trust Us<\/span>\r\n <\/div>\r\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-8\" style=\"font-family: 'Cormorant Garamond', serif;\">\r\n Why Choose<br><span style=\"color: var(--gold);\">Online Hifz Madrasa<\/span>\r\n <\/h1>\r\n <p class=\"text-xl text-white\/80 mb-10\">Discover what makes us different. From certified teachers to personalized learning paths, we're committed to your Quranic journey.<\/p>\r\n <div class=\"flex flex-wrap gap-5\">\r\n <a href=\"#features\" class=\"btn-primary\">Explore Features<\/a>\r\n <a href=\"#\" class=\"btn-outline\">Contact Us<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16\" style=\"background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-8 text-center\">\r\n <div>\r\n <div class=\"stat-number\" data-target=\"15\">15+<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Years Experience<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-number\" data-target=\"2500\">2,500+<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Students Enrolled<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-number\" data-target=\"50\">50+<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Expert Teachers<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-number\" data-target=\"98\">98%<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Success Rate<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"features\" class=\"py-24 pattern-bg\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Our Advantages<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">What Sets Us Apart<\/h2>\r\n <div class=\"w-24 h-1 mx-auto rounded\" style=\"background: linear-gradient(90deg, var(--gold), var(--primary));\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Certified Teachers<\/h3>\r\n <p class=\"text-gray-600\">All teachers hold Ijazah certifications with rigorous training. Qualified educators, not just reciters.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Flexible Scheduling<\/h3>\r\n <p class=\"text-gray-600\">Learn at your pace, anytime. Available across all time zones, 7 days a week.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">One-on-One Sessions<\/h3>\r\n <p class=\"text-gray-600\">Personalized attention for faster progress. Dedicated time with your teacher.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Structured Curriculum<\/h3>\r\n <p class=\"text-gray-600\">Proven methodology with clear milestones. Regular assessments keep you on track.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Modern Technology<\/h3>\r\n <p class=\"text-gray-600\">Interactive whiteboards, screen sharing, and recording capabilities.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #b8942f, var(--gold));\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Safe Environment<\/h3>\r\n <p class=\"text-gray-600\">Separate sections for sisters with female teachers. Your privacy is our priority.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24\" style=\"background: var(--cream-dark);\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Our Team<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">Expert Teachers<\/h2>\r\n <div class=\"w-24 h-1 mx-auto rounded\" style=\"background: linear-gradient(90deg, var(--gold), var(--primary));\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\"><span class=\"teacher-initials\">QMA<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Qari Muhammad Amin<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Lead Hifz Instructor<\/p>\r\n <p class=\"text-gray-500 text-sm\">Ijazah in Hafs. 15+ years experience.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\"><span class=\"teacher-initials\">SFA<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Sheikh Fahad Ahmed<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Tajweed Specialist<\/p>\r\n <p class=\"text-gray-500 text-sm\">Expert in Makharij & Tajweed rules.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\" style=\"background: linear-gradient(135deg, #b8942f, var(--gold));\"><span class=\"teacher-initials\">UF<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Ustadha Fatima<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Female Section Head<\/p>\r\n <p class=\"text-gray-500 text-sm\">Hafiza with 10+ years teaching sisters.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\"><span class=\"teacher-initials\">ARK<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Abdur Rahman Khan<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Kids Quran Teacher<\/p>\r\n <p class=\"text-gray-500 text-sm\">Specialized in engaging kids' methods.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24 pattern-bg\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\r\n <div>\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Our Approach<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-8\" style=\"color: var(--primary-dark);\">Proven Teaching Methodology<\/h2>\r\n <div class=\"w-24 h-1 mb-10 rounded\" style=\"background: linear-gradient(90deg, var(--gold), var(--primary));\"><\/div>\r\n\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">1<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Assessment<\/h3>\r\n <p class=\"text-gray-600\">Comprehensive evaluation of your current level, goals, and learning style.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">2<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Personalized Plan<\/h3>\r\n <p class=\"text-gray-600\">Structured learning path with clear milestones designed just for you.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">3<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Interactive Sessions<\/h3>\r\n <p class=\"text-gray-600\">Live one-on-one sessions with adaptive teaching methods.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">4<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Regular Revision<\/h3>\r\n <p class=\"text-gray-600\">Unique revision system ensures strong retention of memorization.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">5<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Progress Tracking<\/h3>\r\n <p class=\"text-gray-600\">Detailed reports and regular parent updates on advancement.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-3xl p-10 shadow-xl\">\r\n <div class=\"text-center mb-8\">\r\n <div class=\"w-20 h-20 mx-auto mb-4 rounded-2xl flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--primary), var(--primary-light));\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold\" style=\"color: var(--primary-dark);\">Your Learning Journey<\/h3>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl\" style=\"background: rgba(10, 92, 62, 0.05);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center\" style=\"background: var(--primary);\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold\" style=\"color: var(--primary-dark);\">Assessment Complete<\/div><div class=\"text-sm text-gray-500\">Plan created<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl\" style=\"background: rgba(10, 92, 62, 0.05);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center\" style=\"background: var(--primary);\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold\" style=\"color: var(--primary-dark);\">Classes Scheduled<\/div><div class=\"text-sm text-gray-500\">Flexible timing<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl\" style=\"background: rgba(212, 169, 55, 0.1);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center\" style=\"background: var(--gold);\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold\" style=\"color: var(--primary-dark);\">In Progress<\/div><div class=\"text-sm text-gray-500\">Juz 3 - 65% complete<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl border-2 border-dashed\" style=\"border-color: rgba(10, 92, 62, 0.2);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center bg-gray-100\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#9ca3af\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold text-gray-400\">Complete Hifz<\/div><div class=\"text-sm text-gray-400\">Your goal awaits<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24\" style=\"background: var(--cream-dark);\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Comparison<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">Why We're Different<\/h2>\r\n <\/div>\r\n\r\n <div class=\"comparison-table\">\r\n <div class=\"table-row table-header\">\r\n <div>Features<\/div>\r\n <div class=\"text-center\">Online Hifz Madrasa<\/div>\r\n <div class=\"text-center\">Others<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Certified Ijazah Teachers<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Limited<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>One-on-One Sessions<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Group only<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Flexible Scheduling<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Fixed times<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Female Teachers for Sisters<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Not always<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Progress Reports<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Rarely<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Free Trial Class<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Sometimes<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Money-Back Guarantee<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-red-400\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24 pattern-bg\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Testimonials<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">Success Stories<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8\">\r\n <div class=\"story-card\">\r\n <p class=\"text-gray-600 mb-6 pt-8 relative z-10\">\"I started Hifz at 35, thinking it was too late. Alhamdulillah, with Online Hifz Madrasa, I completed memorization in 4 years. The flexible timing allowed me to balance work and study.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-14 h-14 rounded-full flex items-center justify-center text-white text-lg font-bold\" style=\"background: var(--primary);\">AH<\/div>\r\n <div><h4 class=\"font-semibold\" style=\"color: var(--primary-dark);\">Ahmed Hassan<\/h4><p class=\"text-gray-500 text-sm\">Completed Hifz at 39 - UK<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"story-card\">\r\n <p class=\"text-gray-600 mb-6 pt-8 relative z-10\">\"My daughter was struggling with Quran reading. Within 6 months, she improved her recitation and memorized 5 Juz. The female teachers made her so comfortable.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-14 h-14 rounded-full flex items-center justify-center text-white text-lg font-bold\" style=\"background: var(--gold);\">SR<\/div>\r\n <div><h4 class=\"font-semibold\" style=\"color: var(--primary-dark);\">Saima Rahman<\/h4><p class=\"text-gray-500 text-sm\">Parent - Canada<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24\" style=\"background: linear-gradient(160deg, #052e1e 0%, #0a5c3e 50%, #0e7a52 100%);\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n <h2 class=\"text-4xl sm:text-5xl font-bold text-white mb-8\">Ready to Begin Your Journey?<\/h2>\r\n <p class=\"text-xl text-white\/80 mb-10\">Join thousands of students who transformed their lives through Quranic education.<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-5\">\r\n <a href=\"#\" class=\"btn-primary\">Start Free Trial<\/a>\r\n <a href=\"#\" class=\"btn-outline\">View Courses<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"py-16\" style=\"background: #052e1e;\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-lg flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--gold), var(--gold-light));\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0a5c3e\" stroke-width=\"2\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"text-white font-semibold\" style=\"font-family: 'Cormorant Garamond', serif;\">Online Hifz Madrasa<\/span>\r\n <\/div>\r\n <p class=\"text-white\/40 text-sm\">2024 Online Hifz Madrasa. All rights reserved.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <a href=\"https:\/\/wa.me\/1234567890\" target=\"_blank\" class=\"whatsapp-btn\">\r\n <svg viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" fill=\"white\">\r\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <script>\r\n \/\/ Mobile Menu Toggle\r\n const menuBtn = document.getElementById('menuBtn');\r\n const closeMenuBtn = document.getElementById('closeMenuBtn');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n\r\n menuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.add('open');\r\n });\r\n closeMenuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.remove('open');\r\n });\r\n\r\n \/\/ Navbar Background on Scroll\r\n const navbar = document.getElementById('navbar');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 50) {\r\n navbar.style.background = 'rgba(5, 46, 30, 0.95)';\r\n navbar.style.backdropFilter = 'blur(10px)';\r\n } else {\r\n navbar.style.background = 'transparent';\r\n navbar.style.backdropFilter = 'none';\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Why Choose Us – Online Hifz Madrasa Online Hifz Madrasa Home Why Us Courses About Pricing Contact Enroll Now Home Why Us Courses About Contact 2,500+ Students Trust Us Why ChooseOnline Hifz Madrasa Discover what makes us different. From certified teachers to personalized learning paths, we’re committed to your Quranic journey. Explore Features Contact Us […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":12,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Why Choose Us - Online Hifz Madrasa<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #0a5c3e;\r\n --primary-dark: #064029;\r\n --primary-light: #0e7a52;\r\n --gold: #d4a937;\r\n --gold-light: #e6c458;\r\n --cream: #faf8f3;\r\n --cream-dark: #f0ece0;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: smooth; }\r\n body { font-family: 'Inter', sans-serif; background: var(--cream); color: #1a2e1f; }\r\n h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; }\r\n \r\n .pattern-bg {\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40L40 0zm0 15L15 40l25 25 25-25L40 15z' fill='%230a5c3e' fill-opacity='0.03'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n .page-hero {\r\n min-height: 70vh;\r\n background: linear-gradient(160deg, #052e1e 0%, #0a5c3e 50%, #0e7a52 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(212, 169, 55, 0.25) 0%, transparent 70%);\r\n animation: float 12s ease-in-out infinite;\r\n }\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0) scale(1); }\r\n 50% { transform: translateY(-30px) scale(1.05); }\r\n }\r\n\r\n .nav-link {\r\n color: rgba(255, 255, 255, 0.85);\r\n font-weight: 500;\r\n transition: color 0.3s ease;\r\n position: relative;\r\n }\r\n .nav-link:hover, .nav-link.active { color: var(--gold); }\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--gold);\r\n transition: width 0.3s ease;\r\n }\r\n .nav-link:hover::after { width: 100%; }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\r\n color: var(--primary-dark);\r\n font-weight: 600;\r\n padding: 16px 36px;\r\n border-radius: 12px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 20px rgba(212, 169, 55, 0.3);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 30px rgba(212, 169, 55, 0.5);\r\n }\r\n\r\n .btn-outline {\r\n border: 2px solid rgba(255,255,255,0.4);\r\n color: white;\r\n padding: 14px 32px;\r\n border-radius: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n .btn-outline:hover {\r\n background: rgba(255,255,255,0.1);\r\n border-color: var(--gold);\r\n color: var(--gold);\r\n }\r\n\r\n .feature-card {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 36px;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(10, 92, 62, 0.08);\r\n }\r\n .feature-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px rgba(10, 92, 62, 0.12);\r\n }\r\n .feature-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .feature-card:hover .feature-icon {\r\n transform: scale(1.1) rotate(-5deg);\r\n }\r\n\r\n .teacher-card {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(10, 92, 62, 0.08);\r\n }\r\n .teacher-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px rgba(10, 92, 62, 0.12);\r\n }\r\n .teacher-avatar {\r\n height: 220px;\r\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .teacher-initials {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 60px;\r\n font-weight: 700;\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n .method-step {\r\n position: relative;\r\n padding-left: 90px;\r\n margin-bottom: 40px;\r\n }\r\n .method-step::before {\r\n content: '';\r\n position: absolute;\r\n left: 32px;\r\n top: 70px;\r\n bottom: -30px;\r\n width: 2px;\r\n background: linear-gradient(180deg, var(--gold), rgba(212, 169, 55, 0.2));\r\n }\r\n .method-step:last-child::before { display: none; }\r\n .step-number {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 66px;\r\n height: 66px;\r\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: var(--primary-dark);\r\n box-shadow: 0 8px 24px rgba(212, 169, 55, 0.3);\r\n }\r\n\r\n .comparison-table {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 40px rgba(10, 92, 62, 0.08);\r\n }\r\n .table-row {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr;\r\n padding: 18px 24px;\r\n border-bottom: 1px solid rgba(10, 92, 62, 0.08);\r\n align-items: center;\r\n }\r\n .table-row:last-child { border-bottom: none; }\r\n .table-header {\r\n background: var(--primary);\r\n color: white;\r\n font-weight: 600;\r\n }\r\n\r\n .story-card {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 32px;\r\n box-shadow: 0 10px 40px rgba(10, 92, 62, 0.08);\r\n position: relative;\r\n }\r\n .story-card::before {\r\n content: '\"';\r\n position: absolute;\r\n top: 16px;\r\n left: 24px;\r\n font-size: 80px;\r\n font-family: 'Cormorant Garamond', serif;\r\n color: var(--gold);\r\n opacity: 0.2;\r\n line-height: 1;\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 56px;\r\n font-weight: 700;\r\n background: linear-gradient(135deg, var(--gold), var(--gold-light));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .whatsapp-btn {\r\n position: fixed;\r\n bottom: 24px;\r\n right: 24px;\r\n width: 60px;\r\n height: 60px;\r\n background: #25D366;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);\r\n z-index: 1000;\r\n transition: transform 0.3s ease;\r\n }\r\n .whatsapp-btn:hover { transform: scale(1.1); }\r\n\r\n .mobile-menu {\r\n position: fixed;\r\n inset: 0;\r\n background: var(--primary-dark);\r\n z-index: 999;\r\n padding: 100px 32px;\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n .mobile-menu.open { transform: translateX(0); }\r\n\r\n @media (max-width: 768px) {\r\n .table-row { grid-template-columns: 1fr; text-align: center; gap: 8px; }\r\n .method-step { padding-left: 70px; }\r\n .step-number { width: 50px; height: 50px; font-size: 22px; }\r\n .method-step::before { left: 24px; top: 55px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <nav class=\"fixed top-0 left-0 right-0 z-50\" id=\"navbar\" style=\"background: transparent; transition: all 0.3s ease;\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n <a href=\"#\" class=\"flex items-center gap-3\">\r\n <div class=\"w-12 h-12 rounded-xl flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--gold), var(--gold-light));\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0a5c3e\" stroke-width=\"2\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"text-white font-semibold text-lg hidden sm:block\" style=\"font-family: 'Cormorant Garamond', serif;\">Online Hifz Madrasa<\/span>\r\n <\/a>\r\n <div class=\"hidden lg:flex items-center gap-10\">\r\n <a href=\"#\" class=\"nav-link\">Home<\/a>\r\n <a href=\"#\" class=\"nav-link active\">Why Us<\/a>\r\n <a href=\"#\" class=\"nav-link\">Courses<\/a>\r\n <a href=\"#\" class=\"nav-link\">About<\/a>\r\n <a href=\"#\" class=\"nav-link\">Pricing<\/a>\r\n <a href=\"#\" class=\"nav-link\">Contact<\/a>\r\n <a href=\"#\" class=\"btn-primary\">Enroll Now<\/a>\r\n <\/div>\r\n <button class=\"lg:hidden text-white p-2\" id=\"menuBtn\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <button class=\"absolute top-6 right-6 text-white\" id=\"closeMenuBtn\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>\r\n <\/svg>\r\n <\/button>\r\n <div class=\"flex flex-col gap-6\">\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">Home<\/a>\r\n <a href=\"#\" class=\"text-2xl\" style=\"font-family: 'Cormorant Garamond', serif; color: var(--gold);\">Why Us<\/a>\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">Courses<\/a>\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">About<\/a>\r\n <a href=\"#\" class=\"text-white text-2xl\" style=\"font-family: 'Cormorant Garamond', serif;\">Contact<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"page-hero flex items-center\">\r\n <div class=\"orb\" style=\"width: 400px; height: 400px; top: -10%; left: -5%;\"><\/div>\r\n <div class=\"orb\" style=\"width: 300px; height: 300px; bottom: 5%; right: -3%; animation-delay: 4s;\"><\/div>\r\n \r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 relative z-10\">\r\n <div class=\"max-w-3xl\">\r\n <div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm px-5 py-2.5 rounded-full mb-8\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse\"><\/span>\r\n <span class=\"text-white\/90 text-sm font-medium\">2,500+ Students Trust Us<\/span>\r\n <\/div>\r\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-8\" style=\"font-family: 'Cormorant Garamond', serif;\">\r\n Why Choose<br><span style=\"color: var(--gold);\">Online Hifz Madrasa<\/span>\r\n <\/h1>\r\n <p class=\"text-xl text-white\/80 mb-10\">Discover what makes us different. From certified teachers to personalized learning paths, we're committed to your Quranic journey.<\/p>\r\n <div class=\"flex flex-wrap gap-5\">\r\n <a href=\"#features\" class=\"btn-primary\">Explore Features<\/a>\r\n <a href=\"#\" class=\"btn-outline\">Contact Us<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16\" style=\"background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-8 text-center\">\r\n <div>\r\n <div class=\"stat-number\" data-target=\"15\">15+<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Years Experience<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-number\" data-target=\"2500\">2,500+<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Students Enrolled<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-number\" data-target=\"50\">50+<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Expert Teachers<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-number\" data-target=\"98\">98%<\/div>\r\n <div class=\"text-gray-600 font-medium mt-2\">Success Rate<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"features\" class=\"py-24 pattern-bg\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Our Advantages<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">What Sets Us Apart<\/h2>\r\n <div class=\"w-24 h-1 mx-auto rounded\" style=\"background: linear-gradient(90deg, var(--gold), var(--primary));\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Certified Teachers<\/h3>\r\n <p class=\"text-gray-600\">All teachers hold Ijazah certifications with rigorous training. Qualified educators, not just reciters.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Flexible Scheduling<\/h3>\r\n <p class=\"text-gray-600\">Learn at your pace, anytime. Available across all time zones, 7 days a week.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">One-on-One Sessions<\/h3>\r\n <p class=\"text-gray-600\">Personalized attention for faster progress. Dedicated time with your teacher.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Structured Curriculum<\/h3>\r\n <p class=\"text-gray-600\">Proven methodology with clear milestones. Regular assessments keep you on track.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Modern Technology<\/h3>\r\n <p class=\"text-gray-600\">Interactive whiteboards, screen sharing, and recording capabilities.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #b8942f, var(--gold));\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold mb-3\" style=\"color: var(--primary-dark);\">Safe Environment<\/h3>\r\n <p class=\"text-gray-600\">Separate sections for sisters with female teachers. Your privacy is our priority.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24\" style=\"background: var(--cream-dark);\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Our Team<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">Expert Teachers<\/h2>\r\n <div class=\"w-24 h-1 mx-auto rounded\" style=\"background: linear-gradient(90deg, var(--gold), var(--primary));\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\"><span class=\"teacher-initials\">QMA<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Qari Muhammad Amin<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Lead Hifz Instructor<\/p>\r\n <p class=\"text-gray-500 text-sm\">Ijazah in Hafs. 15+ years experience.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\"><span class=\"teacher-initials\">SFA<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Sheikh Fahad Ahmed<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Tajweed Specialist<\/p>\r\n <p class=\"text-gray-500 text-sm\">Expert in Makharij & Tajweed rules.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\" style=\"background: linear-gradient(135deg, #b8942f, var(--gold));\"><span class=\"teacher-initials\">UF<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Ustadha Fatima<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Female Section Head<\/p>\r\n <p class=\"text-gray-500 text-sm\">Hafiza with 10+ years teaching sisters.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"teacher-card\">\r\n <div class=\"teacher-avatar\"><span class=\"teacher-initials\">ARK<\/span><\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"text-xl font-semibold\" style=\"color: var(--primary-dark);\">Abdur Rahman Khan<\/h3>\r\n <p class=\"text-sm mb-2\" style=\"color: var(--gold);\">Kids Quran Teacher<\/p>\r\n <p class=\"text-gray-500 text-sm\">Specialized in engaging kids' methods.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24 pattern-bg\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\r\n <div>\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Our Approach<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-8\" style=\"color: var(--primary-dark);\">Proven Teaching Methodology<\/h2>\r\n <div class=\"w-24 h-1 mb-10 rounded\" style=\"background: linear-gradient(90deg, var(--gold), var(--primary));\"><\/div>\r\n\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">1<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Assessment<\/h3>\r\n <p class=\"text-gray-600\">Comprehensive evaluation of your current level, goals, and learning style.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">2<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Personalized Plan<\/h3>\r\n <p class=\"text-gray-600\">Structured learning path with clear milestones designed just for you.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">3<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Interactive Sessions<\/h3>\r\n <p class=\"text-gray-600\">Live one-on-one sessions with adaptive teaching methods.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">4<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Regular Revision<\/h3>\r\n <p class=\"text-gray-600\">Unique revision system ensures strong retention of memorization.<\/p>\r\n <\/div>\r\n <div class=\"method-step\">\r\n <div class=\"step-number\">5<\/div>\r\n <h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--primary-dark);\">Progress Tracking<\/h3>\r\n <p class=\"text-gray-600\">Detailed reports and regular parent updates on advancement.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-3xl p-10 shadow-xl\">\r\n <div class=\"text-center mb-8\">\r\n <div class=\"w-20 h-20 mx-auto mb-4 rounded-2xl flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--primary), var(--primary-light));\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"text-2xl font-semibold\" style=\"color: var(--primary-dark);\">Your Learning Journey<\/h3>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl\" style=\"background: rgba(10, 92, 62, 0.05);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center\" style=\"background: var(--primary);\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold\" style=\"color: var(--primary-dark);\">Assessment Complete<\/div><div class=\"text-sm text-gray-500\">Plan created<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl\" style=\"background: rgba(10, 92, 62, 0.05);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center\" style=\"background: var(--primary);\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold\" style=\"color: var(--primary-dark);\">Classes Scheduled<\/div><div class=\"text-sm text-gray-500\">Flexible timing<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl\" style=\"background: rgba(212, 169, 55, 0.1);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center\" style=\"background: var(--gold);\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold\" style=\"color: var(--primary-dark);\">In Progress<\/div><div class=\"text-sm text-gray-500\">Juz 3 - 65% complete<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-4 rounded-xl border-2 border-dashed\" style=\"border-color: rgba(10, 92, 62, 0.2);\">\r\n <div class=\"w-12 h-12 rounded-full flex items-center justify-center bg-gray-100\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#9ca3af\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n <\/div>\r\n <div><div class=\"font-semibold text-gray-400\">Complete Hifz<\/div><div class=\"text-sm text-gray-400\">Your goal awaits<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24\" style=\"background: var(--cream-dark);\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Comparison<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">Why We're Different<\/h2>\r\n <\/div>\r\n\r\n <div class=\"comparison-table\">\r\n <div class=\"table-row table-header\">\r\n <div>Features<\/div>\r\n <div class=\"text-center\">Online Hifz Madrasa<\/div>\r\n <div class=\"text-center\">Others<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Certified Ijazah Teachers<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Limited<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>One-on-One Sessions<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Group only<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Flexible Scheduling<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Fixed times<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Female Teachers for Sisters<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Not always<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Progress Reports<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Rarely<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Free Trial Class<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-gray-400\">Sometimes<\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div>Money-Back Guarantee<\/div>\r\n <div class=\"text-center\" style=\"color: var(--primary);\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"text-center text-red-400\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24 pattern-bg\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-sm font-semibold tracking-wider uppercase\" style=\"color: var(--gold);\">Testimonials<\/span>\r\n <h2 class=\"text-4xl sm:text-5xl font-bold mt-4 mb-4\" style=\"color: var(--primary-dark);\">Success Stories<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-8\">\r\n <div class=\"story-card\">\r\n <p class=\"text-gray-600 mb-6 pt-8 relative z-10\">\"I started Hifz at 35, thinking it was too late. Alhamdulillah, with Online Hifz Madrasa, I completed memorization in 4 years. The flexible timing allowed me to balance work and study.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-14 h-14 rounded-full flex items-center justify-center text-white text-lg font-bold\" style=\"background: var(--primary);\">AH<\/div>\r\n <div><h4 class=\"font-semibold\" style=\"color: var(--primary-dark);\">Ahmed Hassan<\/h4><p class=\"text-gray-500 text-sm\">Completed Hifz at 39 - UK<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"story-card\">\r\n <p class=\"text-gray-600 mb-6 pt-8 relative z-10\">\"My daughter was struggling with Quran reading. Within 6 months, she improved her recitation and memorized 5 Juz. The female teachers made her so comfortable.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-14 h-14 rounded-full flex items-center justify-center text-white text-lg font-bold\" style=\"background: var(--gold);\">SR<\/div>\r\n <div><h4 class=\"font-semibold\" style=\"color: var(--primary-dark);\">Saima Rahman<\/h4><p class=\"text-gray-500 text-sm\">Parent - Canada<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-24\" style=\"background: linear-gradient(160deg, #052e1e 0%, #0a5c3e 50%, #0e7a52 100%);\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n <h2 class=\"text-4xl sm:text-5xl font-bold text-white mb-8\">Ready to Begin Your Journey?<\/h2>\r\n <p class=\"text-xl text-white\/80 mb-10\">Join thousands of students who transformed their lives through Quranic education.<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-5\">\r\n <a href=\"#\" class=\"btn-primary\">Start Free Trial<\/a>\r\n <a href=\"#\" class=\"btn-outline\">View Courses<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"py-16\" style=\"background: #052e1e;\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-lg flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--gold), var(--gold-light));\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0a5c3e\" stroke-width=\"2\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"text-white font-semibold\" style=\"font-family: 'Cormorant Garamond', serif;\">Online Hifz Madrasa<\/span>\r\n <\/div>\r\n <p class=\"text-white\/40 text-sm\">2024 Online Hifz Madrasa. All rights reserved.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <a href=\"https:\/\/wa.me\/1234567890\" target=\"_blank\" class=\"whatsapp-btn\">\r\n <svg viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" fill=\"white\">\r\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <script>\r\n \/\/ Mobile Menu Toggle\r\n const menuBtn = document.getElementById('menuBtn');\r\n const closeMenuBtn = document.getElementById('closeMenuBtn');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n\r\n menuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.add('open');\r\n });\r\n closeMenuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.remove('open');\r\n });\r\n\r\n \/\/ Navbar Background on Scroll\r\n const navbar = document.getElementById('navbar');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 50) {\r\n navbar.style.background = 'rgba(5, 46, 30, 0.95)';\r\n navbar.style.backdropFilter = 'blur(10px)';\r\n } else {\r\n navbar.style.background = 'transparent';\r\n navbar.style.backdropFilter = 'none';\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Why Choose Us – Online Hifz Madrasa Online Hifz Madrasa Home Why Us Courses About Pricing Contact Enroll Now Home Why Us Courses About Contact 2,500+ Students Trust Us Why ChooseOnline Hifz Madrasa Discover what makes us different. From certified teachers to personalized learning paths, we’re committed to your Quranic journey. Explore Features Contact Us […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":12,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}