\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0631\u0624\u064a\u0629 - \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n<style>\r\n \/* --- Variables --- *\/\r\n :root {\r\n --roeya-blue: #232d50;\r\n --roeya-blue-dark: #153070;\r\n --roeya-gold: #c8ac82;\r\n --roeya-gold-light: #e6ceaa;\r\n --roeya-gold-dark: #b09670; \r\n --white: #ffffff;\r\n --light-gray: #f9fafb;\r\n --gray-text: #4b5563;\r\n --container-width: 1200px;\r\n --section-padding: 80px 0;\r\n --radius: 12px;\r\n --shadow: 0 10px 30px rgba(0,0,0,0.06);\r\n }\r\n\r\n \/* --- Base Layout --- *\/\r\n .roeya-widget-wrapper {\r\n font-family: 'Tajawal', sans-serif; \/* Arabic Font Priority *\/\r\n color: #1f2937;\r\n line-height: 1.6;\r\n width: 100%;\r\n overflow-x: hidden;\r\n background: #fff;\r\n direction: rtl; \/* Force RTL *\/\r\n text-align: right;\r\n }\r\n .roeya-widget-wrapper a { text-decoration: none; color: inherit; }\r\n .roeya-widget-wrapper ul { list-style: none; padding: 0; margin: 0; }\r\n .rw-container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }\r\n .rw-section { padding: var(--section-padding); position: relative; overflow: hidden; }\r\n .bg-light { background: var(--light-gray); }\r\n .bg-white { background: var(--white); }\r\n \r\n \/* --- Headers --- *\/\r\n .section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }\r\n .section-header h2 { font-size: 2rem; font-weight: 800; color: var(--roeya-blue); margin-bottom: 12px; line-height: 1.3; }\r\n .section-header h2 span { color: var(--roeya-gold); } \r\n .section-header p { color: var(--gray-text); font-size: 0.95rem; }\r\n\r\n \/* --- 1. HOVER EFFECTS (Global) --- *\/\r\n .roeya-widget-wrapper img { \r\n max-width: 100%; \r\n height: auto; \r\n display: block; \r\n transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); \r\n }\r\n .roeya-widget-wrapper img:hover { transform: scale(1.08); }\r\n\r\n .roeya-widget-wrapper i {\r\n transition: transform 0.6s ease, color 0.6s ease;\r\n display: inline-block;\r\n }\r\n .roeya-widget-wrapper i:hover {\r\n transform: scale(1.3);\r\n color: var(--roeya-gold);\r\n }\r\n\r\n \/* --- 2. SCROLL ANIMATIONS --- *\/\r\n .reveal-up {\r\n transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n opacity: 0;\r\n }\r\n .slide-from-left, .slide-from-right {\r\n transition: all 4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n opacity: 0;\r\n }\r\n \r\n .reveal-up { transform: translateY(40px); }\r\n .reveal-up.active { opacity: 1; transform: translateY(0); }\r\n \/* Swapped directions logically for RTL awareness *\/\r\n .slide-from-left { transform: translateX(100px); } \r\n .slide-from-left.active { opacity: 1; transform: translateX(0); }\r\n .slide-from-right { transform: translateX(-100px); }\r\n .slide-from-right.active { opacity: 1; transform: translateX(0); }\r\n\r\n .delay-100 { transition-delay: 0.2s; }\r\n .delay-200 { transition-delay: 0.4s; }\r\n .delay-300 { transition-delay: 0.6s; }\r\n\r\n \/* --- 3. HERO KEN BURNS LOOP --- *\/\r\n @keyframes kenBurnsLoopHome {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.15); } \r\n 100% { transform: scale(1); }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :root { --section-padding: 50px 0; }\r\n .section-header h2 { font-size: 1.5rem; }\r\n .section-header { margin-bottom: 40px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"roeya-widget-wrapper\" dir=\"rtl\">\r\n\r\n \r\n <style>\r\n .hero-section {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n min-height: 600px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: #fff;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: url('https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-12-at-12.11.01.jpeg');\r\n background-size: cover;\r\n background-position: center;\r\n z-index: -2;\r\n animation: kenBurnsLoopHome 40s infinite ease-in-out;\r\n }\r\n .hero-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(900px 420px at 50% 35%, rgba(200, 172, 130, .22), transparent 60%),\r\n linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));\r\n z-index: -1;\r\n }\r\n .hero-content { position: relative; z-index: 1; max-width: 850px; padding: 0 20px; }\r\n .hero-content h1 {\r\n font-family: 'Tajawal', sans-serif; font-size: 2.75rem; font-weight: 800;\r\n margin-bottom: 20px; line-height: 1.3; text-shadow: 0 10px 30px rgba(0,0,0,.35); color: #ffffff;\r\n }\r\n .hero-content p { font-size: 1rem; margin-bottom: 40px; color: #f1f1f1; }\r\n .hero-buttons { display: flex; justify-content: center; align-items: center; gap: 25px; }\r\n .btn-hero {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n padding: 16px 32px; border-radius: 8px; font-weight: 800; font-size: 0.9rem;\r\n transition: all 0.6s ease; text-decoration: none;\r\n }\r\n \r\n .btn-secondary {\r\n color: #fff; \r\n border: 1px solid rgba(255,255,255,.28);\r\n background: rgba(255,255,255,.06); \r\n backdrop-filter: blur(8px);\r\n padding: 10px 24px; \r\n border-radius: 50px; \r\n font-weight: 700; \r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .btn-secondary:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); color: #fff; }\r\n \r\n \/* --- PLACEMENT TEST BUTTON STYLE --- *\/\r\n .special-gold-btn {\r\n margin: 0; background: var(--roeya-blue); color: #ffffff !important; padding: 10px 24px; border-radius: 50px;\r\n font-weight: 700; transition: .6s; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; text-decoration: none;\r\n }\r\n .special-gold-btn:hover { color: #c9a87f !important; transform: translateY(-2px); }\r\n\r\n @media (max-width: 768px) {\r\n .hero-content h1 { font-size: 1.8rem; }\r\n .hero-content p { font-size: 0.9rem; }\r\n .hero-buttons { flex-direction: column; gap: 15px; width: 100%; }\r\n .btn-hero, .special-gold-btn { width: 100%; justify-content: center; }\r\n }\r\n <\/style>\r\n\r\n <section class=\"hero-section\">\r\n <div class=\"hero-bg\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1 class=\"reveal-up\">\u0627\u0643\u062a\u0634\u0641 \u0635\u0648\u062a \u0637\u0641\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u2026 \u0648\u0627\u062c\u0639\u0644\u0647 \u0645\u0644\u0643\u064b\u0627 \u0644\u0647 <\/h1>\r\n <p class=\"reveal-up delay-100\">\r\n\u062a\u0639\u0644\u0645\u2026 \u0645\u062a\u0639\u0629\u2026 \u0645\u0645\u0627\u0631\u0633\u0629\u2026 \u0643\u0644 \u062e\u0637\u0648\u0629 \u064a\u062e\u0637\u0648\u0647\u0627 \u0637\u0641\u0644\u0643 \u062a\u064f\u062a\u0627\u0628\u0639\u060c \u062a\u064f\u0642\u064a\u064e\u0651\u0645\u060c \u0648\u062a\u064f\u0633\u062c\u064e\u0651\u0644\u060c \u0644\u062a\u0639\u0631\u0641 \u062f\u0627\u0626\u0645\u064b\u0627 \u0645\u062f\u0649 \u062a\u0642\u062f\u0645\u0647. \u0641\u064a \u0631\u0624\u064a\u0629 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u060c \u0644\u0627 \u0646\u0642\u062f\u0645 \u0645\u062c\u0631\u062f \u0643\u0648\u0631\u0633 \u0644\u063a\u0629 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0623\u0648\u0646\u0644\u0627\u064a\u0646\u060c \u0628\u0644 \u062a\u062c\u0631\u0628\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0637\u0641\u0644\u0643.\r\n <\/p>\r\n <div class=\"hero-buttons reveal-up delay-200\">\r\n <a href=\"https:\/\/roeyalearning.com\/marketingForms\/xbplqjikoxil\" class=\"special-gold-btn\" target=\"_blank\" rel=\"noopener\">\u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649<\/a>\r\n <a href=\"https:\/\/roeyaacademy.com\/ar\/courses\/\" class=\"btn-hero btn-secondary\">\u062a\u0635\u0641\u062d \u0627\u0644\u062f\u0648\u0631\u0627\u062a<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .features-grid {\r\n display: grid; \r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 30px; margin-top: -60px; position: relative; z-index: 10;\r\n }\r\n .feat-card {\r\n background: var(--white); padding: 40px 30px; border-radius: var(--radius);\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.08); text-align: center; border-bottom: 4px solid transparent;\r\n transition: transform 0.6s ease, border-color 0.6s ease;\r\n }\r\n .feat-card:hover { transform: translateY(-10px); border-bottom-color: var(--roeya-gold); }\r\n .feat-icon {\r\n width: 70px; height: 70px; background: rgba(35, 45, 80, 0.1); color: var(--roeya-blue);\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n font-size: 28px; margin: 0 auto 20px;\r\n }\r\n .feat-card:hover .feat-icon { background: var(--roeya-blue); color: #fff; }\r\n .feat-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--roeya-blue-dark); font-weight: 700; }\r\n .feat-card p { color: var(--gray-text); font-size: 0.9rem; }\r\n \r\n @media (max-width: 768px) {\r\n .features-grid { margin-top: 0; gap: 20px; }\r\n .feat-card { padding: 30px 20px; }\r\n }\r\n <\/style>\r\n\r\n <div class=\"rw-container\">\r\n <div class=\"features-grid\">\r\n <div class=\"feat-card reveal-up delay-100\">\r\n <div class=\"feat-icon\"><i class=\"fas fa-chalkboard-teacher\"><\/i><\/div>\r\n <h3>\u0645\u062d\u0627\u0636\u0631\u0648\u0646 \u0645\u0624\u0647\u0644\u0648\u0646 <\/h3>\r\n <p> \u0645\u062f\u0631\u0633\u0648\u0646 \u0645\u0639\u062a\u0645\u062f\u0648\u0646 \u0648\u0645\u062d\u062a\u0631\u0641\u0648\u0646. \u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629\u2026 \u0646\u062a\u0627\u0626\u062c \u0645\u0644\u0645\u0648\u0633\u0629.<\/p>\r\n <\/div>\r\n <div class=\"feat-card reveal-up delay-200\">\r\n <div class=\"feat-icon\"><i class=\"fas fa-laptop-code\"><\/i><\/div>\r\n <h3> \u062d\u0635\u0635 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0645\u0645\u062a\u0639\u0629 <\/h3>\r\n <p>\u062c\u0644\u0633\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629\u060c \u062a\u0642\u064a\u064a\u0645 \u0641\u0648\u0631\u064a\u060c \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u2014 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u064a\u0635\u0628\u062d \u0645\u062a\u0639\u0629! <\/p>\r\n <\/div>\r\n <div class=\"feat-card reveal-up delay-300\">\r\n <div class=\"feat-icon\"><i class=\"fas fa-certificate\"><\/i><\/div>\r\n <h3>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 <\/h3>\r\n <p> \u0637\u0648\u0631 \u0644\u063a\u062a\u0643 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0645\u0639\u0646\u0627 \u0648\u0627\u062c\u062a\u0627\u0632 \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0643\u0627\u0645\u0628\u0631\u064a\u062f\u062c \u0628\u062b\u0642\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <style>\r\n .about-wrap {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 60px;\r\n }\r\n .about-img {\r\n flex: 1;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 20px;\r\n }\r\n .about-img img {\r\n border-radius: 20px;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.12);\r\n width: 100%;\r\n aspect-ratio: 4\/3;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .about-img:hover img { transform: scale(1.05); }\r\n .about-text {\r\n flex: 1;\r\n }\r\n .about-text .about-heading {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--roeya-blue);\r\n margin-bottom: 16px;\r\n line-height: 1.3;\r\n }\r\n .about-text .about-heading span { color: var(--roeya-gold); }\r\n .about-text .about-intro {\r\n color: var(--gray-text);\r\n font-size: 0.95rem;\r\n margin-bottom: 10px;\r\n line-height: 1.8;\r\n }\r\n .check-list {\r\n margin: 20px 0;\r\n }\r\n .check-list li {\r\n margin-bottom: 14px;\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-start;\r\n font-weight: 500;\r\n color: var(--roeya-blue-dark);\r\n font-size: 0.95rem;\r\n line-height: 1.5;\r\n }\r\n .check-list li i {\r\n flex-shrink: 0;\r\n color: var(--white);\r\n background: var(--roeya-gold);\r\n width: 22px;\r\n height: 22px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n font-size: 11px;\r\n margin-top: 2px;\r\n }\r\n .about-tagline {\r\n margin-top: 24px;\r\n padding: 14px 18px;\r\n background: var(--light-gray);\r\n border-right: 4px solid var(--roeya-gold);\r\n border-radius: 6px;\r\n color: var(--roeya-blue-dark);\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n @media (max-width: 991px) {\r\n .about-wrap { flex-direction: column-reverse; gap: 40px; }\r\n .about-text .about-heading { font-size: 1.6rem; }\r\n }\r\n @media (max-width: 768px) {\r\n .about-text .about-heading { font-size: 1.4rem; }\r\n }\r\n <\/style>\r\n\r\n <section class=\"rw-section bg-white\">\r\n <div class=\"rw-container\">\r\n <div class=\"about-wrap\">\r\n <div class=\"about-text slide-from-left\">\r\n <h2 class=\"about-heading\">\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0644\u0641 <span>\u0631\u0624\u064a\u0629 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u061f<\/span><\/h2>\r\n <p class=\"about-intro\">\u0627\u0644\u0643\u062b\u064a\u0631 \u0645\u0646 \u0643\u0648\u0631\u0633\u0627\u062a \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u062a\u064f\u0642\u062f\u0651\u0645 \u0627\u0644\u062f\u0631\u0648\u0633 \u0641\u0642\u0637 \u2026 \u0646\u062d\u0646 \u0646\u0642\u062f\u0645 \u062a\u0642\u062f\u0645\u064b\u0627 \u0645\u064f\u0642\u0627\u0633\u064b\u0627 \u0648\u0645\u0631\u0635\u0648\u062f\u064b\u0627.<\/p>\r\n <p class=\"about-intro\">\u062f\u0631\u0648\u0633 \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0639\u0645\u0627\u0631 \u0645\u0646 5 \u0625\u0644\u0649 16 \u0633\u0646\u0629\u060c \u0628\u0637\u0631\u064a\u0642\u0629 \u0645\u0645\u062a\u0639\u0629 \u0648\u0641\u0639\u0651\u0627\u0644\u0629 \u2014 \u0625\u0644\u064a\u0643 \u0643\u064a\u0641 \u0646\u062a\u0645\u064a\u0632:<\/p>\r\n <ul class=\"check-list\">\r\n <li><i class=\"fas fa-check\"><\/i> \u0645\u0646\u0647\u062c \u0642\u0627\u0626\u0645 \u0639\u0644\u0649 \u0645\u0639\u0627\u064a\u064a\u0631 \u0643\u0627\u0645\u0628\u0631\u064a\u062f\u062c \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0648\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0645\u0639 \u0645\u0624\u0634\u0631\u0627\u062a \u062a\u0642\u062f\u0645 \u062d\u0642\u064a\u0642\u064a\u0629.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u062a\u0642\u0627\u0631\u064a\u0631 \u0645\u062e\u0635\u0635\u0629 \u062a\u064f\u0631\u0633\u0644 \u0644\u0648\u0644\u064a \u0627\u0644\u0623\u0645\u0631 \u0628\u0627\u0646\u062a\u0638\u0627\u0645.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u0642\u0631\u0627\u0621\u0629\u060c \u0627\u0644\u062a\u062d\u062f\u062b\u060c \u0648\u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0644\u063a\u0648\u064a\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u0644\u0627 \u0645\u062c\u0627\u0644 \u0644\u0644\u062a\u062e\u0645\u064a\u0646 - \u0627\u0644\u062a\u0642\u062f\u0645 \u0648\u0627\u0636\u062d \u0648\u0645\u064f\u0642\u0627\u0633.<\/li>\r\n <\/ul>\r\n <div class=\"about-tagline\">\u0644\u064a\u0633\u062a \u0645\u062c\u0631\u062f \u062f\u0631\u0648\u0633 \u0639\u0634\u0648\u0627\u0626\u064a\u0629 \u2026 \u0628\u0644 \u0646\u062c\u0627\u062d \u0645\u0646\u0638\u0645 \u0648\u0645\u062f\u0631\u0648\u0633.<\/div>\r\n <\/div>\r\n <div class=\"about-img slide-from-right\">\r\n <img decoding=\"async\" src=\"https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-12-at-6.30.00-PM.jpeg\" alt=\"Students Learning\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .steps-container { display: flex; justify-content: center; gap: 30px; }\r\n .step-box {\r\n background: var(--white); padding: 50px 30px; border-radius: 20px;\r\n flex: 1; text-align: center; position: relative; overflow: hidden;\r\n border: 1px solid #eee; transition: 0.6s; max-width: 450px;\r\n }\r\n .step-box:hover { border-color: var(--roeya-gold); box-shadow: var(--shadow); transform: translateY(-5px); }\r\n .step-num {\r\n position: absolute; top: 10px; right: 20px; left: auto; font-size: 80px; font-weight: 900;\r\n color: rgba(0,0,0,0.03); line-height: 1;\r\n }\r\n .step-icon { font-size: 40px; color: var(--roeya-gold); margin-bottom: 20px; } \r\n .step-arrow { display: flex; align-items: center; font-size: 24px; color: var(--roeya-blue); opacity: 0.3; }\r\n .btn-step-outline {\r\n display: inline-block; width: 80%; padding: 12px 0; margin-top: 20px;\r\n border-radius: 6px; font-weight: 600; \r\n transition: 0.6s;\r\n background: transparent; color: var(--roeya-blue); border: 2px solid var(--roeya-blue);\r\n }\r\n .btn-step-outline:hover { background: var(--roeya-blue); color: #fff; }\r\n .special-gold-btn.step-variant { margin-top: 20px; width: 80%; }\r\n \r\n @media (max-width: 991px) {\r\n .steps-container { flex-direction: column; align-items: center; }\r\n .step-arrow { transform: rotate(90deg); margin: 10px 0; }\r\n .step-box { max-width: 100%; width: 100%; }\r\n }\r\n <\/style>\r\n\r\n <section class=\"rw-section bg-light\">\r\n <div class=\"rw-container\">\r\n <div class=\"section-header reveal-up\">\r\n <h2>\u062e\u0637\u0648\u062a\u0627\u0646 <span>\u0646\u062d\u0648 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0628\u062b\u0642\u0629 <\/span><\/h2>\r\n <p>\u0627\u0644\u0628\u062f\u0621 \u0645\u0639 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0631\u0624\u064a\u0629 \u0628\u0633\u064a\u0637 \u0648\u0633\u0631\u064a\u0639 \u0648\u0645\u0635\u0645\u0645 \u0644\u0631\u0627\u062d\u062a\u0643.<\/p>\r\n <\/div>\r\n\r\n <div class=\"steps-container\">\r\n <div class=\"step-box reveal-up delay-100\">\r\n <div class=\"step-num\">01<\/div>\r\n <div class=\"step-icon\"><i class=\"far fa-clipboard\"><\/i><\/div>\r\n <h3>\u0627\u0644\u062e\u0637\u0648\u0629 1: \u0627\u0643\u062a\u0634\u0641 \u0645\u0633\u062a\u0648\u0649 \u0637\u0641\u0644\u0643<\/h3>\r\n <p>\u0627\u062e\u062a\u0628\u0627\u0631 \u0642\u0635\u064a\u0631 \u2192 \u0645\u0642\u0627\u0628\u0644\u0629 \u062a\u062d\u062f\u064a\u062f \u0645\u0633\u062a\u0648\u0649 \u2192 \u0631\u0624\u064a\u0629 \u0648\u0627\u0636\u062d\u0629 \u2192 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629..<\/p>\r\n <a href=\"https:\/\/roeyalearning.com\/marketingForms\/xbplqjikoxil\" class=\"special-gold-btn step-variant\" target=\"_blank\" rel=\"noopener\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/a>\r\n <\/div>\r\n\r\n <div class=\"step-arrow reveal-up delay-200\"><i class=\"fas fa-arrow-left\"><\/i><\/div>\r\n\r\n <div class=\"step-box reveal-up delay-300\">\r\n <div class=\"step-num\">02<\/div>\r\n <div class=\"step-icon\"><i class=\"fas fa-graduation-cap\"><\/i><\/div>\r\n <h3>\u0633\u062c\u0644 \u0627\u0644\u062e\u0637\u0648\u0629 2: \u0627\u0646\u0637\u0644\u0642 \u0648\u062a\u0639\u0644\u0645<\/h3>\r\n <p>\u0633\u062c\u0651\u0644 \u0637\u0641\u0644\u0643 \u0641\u064a \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0648\u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u0629 \u0627\u0644\u0646\u062c\u0627\u062d \u0628\u062b\u0642\u0629.<\/p>\r\n <a href=\"https:\/\/roeyaacademy.com\/ar\/courses\/\" class=\"btn-step-outline\">\u0639\u0631\u0636 \u0627\u0644\u062f\u0648\u0631\u0627\u062a<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .roeyaWrap7 { max-width: 1200px; margin: 0 auto; }\r\n .roeyaGrid7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }\r\n .roeyaCard7 {\r\n background: #ffffff; border: 1px solid #f1f2f3; border-radius: 12px;\r\n overflow: hidden; display: flex; flex-direction: column; transition: all 0.6s ease;\r\n }\r\n .roeyaCard7:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: transparent; }\r\n .roeyaImg7 { height: 220px; overflow: hidden; position: relative; background-color: #eee; }\r\n .roeyaImg7 img { width: 100%; height: 100%; object-fit: cover; } \r\n .roeyaBody7 { padding: 24px 24px 10px 24px; display: flex; flex-direction: column; flex: 1; }\r\n .roeyaCat7 { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #c8ac82; text-transform: uppercase; margin-bottom: 8px; }\r\n .roeyaTitle7 { font-size: 1.2rem; font-weight: 700; color: #232d50; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\r\n .roeyaDesc7 { font-size: 0.9rem; line-height: 1.6; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 15px; }\r\n .roeyaDivider7 { height: 1px; background: #f1f2f3; margin: 10px 0 0; width: 100%; }\r\n .roeyaBottom7 { padding: 16px 24px 24px 24px; display: flex; align-items: center; justify-content: space-between; }\r\n \r\n .roeyaPrice7 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.2; }\r\n \r\n \/* --- UPDATED: FLIPPED DIAGONAL RED STRIKE ON NUMBER ONLY --- *\/\r\n .roeyaOld7 { \r\n font-size: 1.2rem; \r\n font-weight: 700; \r\n color: #232d50; \r\n display: inline-flex; \r\n align-items: center; \r\n gap: 5px; \r\n text-decoration: none; \r\n }\r\n\r\n .roeyaOldVal {\r\n position: relative;\r\n display: inline-block;\r\n z-index: 1;\r\n }\r\n\r\n .roeyaOldVal::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: -5%; \/* Adjusted for RTL *\/\r\n width: 110%; \r\n height: 3px; \r\n background-color: #ef4444; \r\n transform: translateY(-50%) rotate(20deg); \/* Flipped rotation for RTL visual *\/\r\n opacity: 0.9;\r\n pointer-events: none;\r\n }\r\n \r\n .roeyaNew7 { font-size: 1.2rem; font-weight: 800; color: #232d50; display: inline-flex; align-items: center; }\r\n .roeyaCurr7 { font-size: 0.75rem; font-weight: 700; margin-right: 4px; color: #232d50; }\r\n\r\n \/* --- BUTTON STYLE --- *\/\r\n .roeyaBtn7 {\r\n background: var(--roeya-blue) !important;\r\n color: #ffffff !important; \r\n border: none; \r\n padding: 10px 24px; \r\n border-radius: 50px; \r\n font-size: 0.85rem; font-weight: 700; \r\n cursor: pointer; \r\n transition: all 0.4s ease; \r\n white-space: nowrap;\r\n }\r\n .roeyaBtn7:hover { \r\n background: var(--roeya-blue) !important;\r\n color: #c9a87f !important;\r\n transform: translateY(-2px); \r\n }\r\n \r\n .roeyaLink7 { text-decoration: none; color: inherit; }\r\n .roeyaSkel7 {\r\n height: 400px; border-radius: 12px;\r\n background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);\r\n background-size: 200% 100%; animation: roeyaSkelAnim7 2.4s infinite linear;\r\n }\r\n @keyframes roeyaSkelAnim7 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\r\n \r\n @media (max-width: 991px) { .roeyaGrid7 { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 650px) { .roeyaGrid7 { grid-template-columns: 1fr; } }\r\n <\/style>\r\n\r\n <section class=\"rw-section bg-white\">\r\n <div class=\"rw-container\">\r\n <div class=\"section-header reveal-up\">\r\n <h2>\u062f\u0648\u0631\u0627\u062a\u0646\u0627 <span>\u0627\u0644\u0623\u0643\u062b\u0631 \u0637\u0644\u0628\u0627\u064b<\/span><\/h2>\r\n <p> \u062a\u0639\u0644\u0645 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0623\u0635\u0628\u062d \u0645\u0631\u062d \u0648\u0645\u0645\u062a\u0639\u2026 \u0627\u0643\u062a\u0634\u0641 \u0637\u0631\u064a\u0642 \u0637\u0641\u0644\u0643 \u0646\u062d\u0648 \u0627\u0644\u0646\u062c\u0627\u062d!<\/p>\r\n <\/div>\r\n <div class=\"roeyaWrap7\">\r\n <div class=\"roeyaGrid7\" id=\"roeyaGrid7\">\r\n <div class=\"roeyaSkel7\"><\/div>\r\n <div class=\"roeyaSkel7\"><\/div>\r\n <div class=\"roeyaSkel7\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .new-cta-wrapper { padding: 60px 0 100px; background: var(--white); }\r\n .new-cta-card {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n padding: 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 30px;\r\n background: linear-gradient(135deg,\r\n #c8972e 0%,\r\n #deb253 18%,\r\n #f2cc76 38%,\r\n #faeaa8 55%,\r\n #f5d780 72%,\r\n #deb253 88%,\r\n #c9962d 100%\r\n );\r\n box-shadow: 0 25px 60px -10px rgba(180, 140, 60, 0.35);\r\n }\r\n .new-cta-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -35%;\r\n right: -6%;\r\n width: 420px;\r\n height: 420px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);\r\n filter: blur(20px);\r\n pointer-events: none;\r\n }\r\n .new-cta-card::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 5%;\r\n right: 18%;\r\n width: 160px;\r\n height: 160px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n filter: blur(6px);\r\n pointer-events: none;\r\n }\r\n .new-cta-card.is-animated {\r\n background-size: 300% 300%;\r\n animation: ctaGradient 10s ease-in-out infinite;\r\n }\r\n .new-cta-content { position: relative; z-index: 2; flex: 1; }\r\n .new-cta-content h2 {\r\n font-size: 2rem; font-weight: 700; color: var(--roeya-blue);\r\n margin-bottom: 12px; line-height: 1.2;\r\n }\r\n .new-cta-content p { font-size: 1rem; color: var(--roeya-blue-dark); opacity: 0.85; max-width: 500px; }\r\n .new-cta-action { position: relative; z-index: 2; flex-shrink: 0; }\r\n .btn-cta-primary {\r\n display: inline-flex; align-items: center; gap: 10px; background: var(--roeya-blue);\r\n color: #ffffff !important; padding: 18px 45px; border-radius: 50px; font-weight: 700; font-size: 0.95rem;\r\n transition: all 0.6s ease; box-shadow: 0 10px 20px rgba(35, 45, 80, 0.2); text-decoration: none;\r\n box-sizing: border-box;\r\n }\r\n .btn-cta-primary:hover {\r\n background: var(--roeya-blue-dark); \r\n color: #c9a87f !important;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(35, 45, 80, 0.3);\r\n }\r\n .btn-cta-primary i { transition: transform 0.6s ease; }\r\n .btn-cta-primary:hover i { transform: translateX(-5px); color: #c9a87f; }\r\n\r\n @keyframes ctaGradient {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n \r\n @media (max-width: 991px) {\r\n .new-cta-card { flex-direction: column; text-align: center; padding: 60px 30px; }\r\n .new-cta-content p { margin: 0 auto 30px; }\r\n .new-cta-content h2 { font-size: 1.7rem; }\r\n .new-cta-action { width: 100%; }\r\n .btn-cta-primary { width: 100%; justify-content: center; }\r\n }\r\n @media (max-width: 768px) {\r\n .new-cta-wrapper { padding: 40px 0 80px; }\r\n .new-cta-content h2 { font-size: 1.5rem; }\r\n .new-cta-card::before {\r\n width: 240px;\r\n height: 240px;\r\n top: -45%;\r\n right: -18%;\r\n }\r\n .new-cta-card::after {\r\n width: 120px;\r\n height: 120px;\r\n right: 10%;\r\n }\r\n }\r\n <\/style>\r\n\r\n <section class=\"rw-section new-cta-wrapper\">\r\n <div class=\"rw-container\">\r\n <div class=\"new-cta-card reveal-up is-animated\">\r\n <div class=\"new-cta-content\">\r\n <h2>\u0639\u0631\u0636 \u0627\u0644\u0627\u0641\u062a\u062a\u0627\u062d \u0627\u0644\u0643\u0628\u064a\u0631!<\/h2>\r\n \r\n <ul class=\"check-list\">\r\n <li><i class=\"fas fa-check\"><\/i>\u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0645\u062c\u0627\u0646\u064b\u0627<\/li>\r\n <li><i class=\"fas fa-check\"><\/i>\u0645\u0648\u0627\u062f \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/li>\r\n <li><i class=\"fas fa-check\"><\/i>\u062d\u0635\u0629 \u062a\u062c\u0631\u064a\u0628\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/li>\r\n \r\n\u0627\u0644\u0623\u0645\u0627\u0643\u0646 \u0645\u062d\u062f\u0648\u062f\u0629 \u2014 \u0627\u062d\u062c\u0632 \u0645\u0642\u0639\u062f \u0637\u0641\u0644\u0643 \u0627\u0644\u064a\u0648\u0645 \u0642\u0628\u0644 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u0641\u0631\u0635!\r\n\r\n <\/div>\r\n <div class=\"new-cta-action\">\r\n <a href=\"https:\/\/roeyaacademy.com\/ar\/courses\/\" class=\"btn-cta-primary\">\r\n \u0633\u062c\u0644 \u0627\u0644\u0622\u0646 <i class=\"fas fa-arrow-left\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n<\/div>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \r\n const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n observer.unobserve(entry.target); \r\n }\r\n });\r\n }, observerOptions);\r\n\r\n const els = document.querySelectorAll('.reveal-up, .slide-from-left, .slide-from-right');\r\n els.forEach(el => observer.observe(el));\r\n\r\n (function(){\r\n const gridEl7 = document.getElementById(\"roeyaGrid7\");\r\n if(!gridEl7) return;\r\n\r\n const apiUrl7 = \"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/our-courses?per_page=3&_embed=1\";\r\n const regularKeys7 = [\"regular_price\",\"regularPrice\",\"price_regular\",\"course_regular_price\"];\r\n const discountKeys7 = [\"discount_price\",\"discountPrice\",\"price_discount\",\"course_discount_price\"];\r\n const currencyText7 = '<img decoding=\"async\" src=\"https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/01\/Saudi_Riyal_Symbol.svg.png\" style=\"height:20px;vertical-align:middle;display:inline;width:auto;\" alt=\"\u0631\u064a\u0627\u0644\">';\r\n const esc7 = (s)=> String(s ?? \"\").replaceAll(\"&\",\"&\").replaceAll(\"<\",\"<\").replaceAll(\">\",\">\").replaceAll('\"',\""\").replaceAll(\"'\",\"'\");\r\n const stripHtml7 = (html)=> String(html ?? \"\").replace(\/<[^>]*>\/g,\"\").replace(\/\\s+\/g,\" \").trim();\r\n const pickFeaturedImage7 = (item)=>{ try{ const m7 = item?._embedded?.[\"wp:featuredmedia\"]?.[0]; return m7?.source_url || m7?.media_details?.sizes?.medium_large?.source_url || \"\"; }catch(e){ return \"\"; } };\r\n const pickFirstTermName7 = (item)=>{ try{ const termGroups7 = item?._embedded?.[\"wp:term\"] || []; for(const group7 of termGroups7){ if(Array.isArray(group7) && group7.length){ const t7 = group7[0]; if(t7?.name) return String(t7.name).toUpperCase(); } } }catch(e){} return \"\u062f\u0648\u0631\u0629\"; };\r\n const pickMetaNumber7 = (meta7, keys7)=>{ for(const k7 of keys7){ const v7 = meta7?.[k7]; if(v7 !== undefined && v7 !== null && String(v7).trim() !== \"\"){ const n7 = Number(String(v7).replace(\/[^\\d.]\/g,\"\")); if(!Number.isNaN(n7)) return n7; } } return null; };\r\n const formatPrice7 = (n7)=>{ const v7 = Math.round(Number(n7)); return Number.isFinite(v7) ? String(v7) : \"\"; };\r\n\r\n const renderCard7 = (item7)=>{\r\n const title7 = esc7(item7?.title?.rendered || \"\");\r\n const link7 = esc7(item7?.link || \"#\");\r\n const img7 = pickFeaturedImage7(item7);\r\n const cat7 = esc7(pickFirstTermName7(item7));\r\n const desc7 = esc7(stripHtml7(item7?.excerpt?.rendered || \"\"));\r\n const meta7 = item7?.meta || {};\r\n const regular7 = pickMetaNumber7(meta7, regularKeys7);\r\n const discount7 = pickMetaNumber7(meta7, discountKeys7);\r\n const hasBoth7 = (regular7 !== null && discount7 !== null && discount7 > 0);\r\n const newVal7 = hasBoth7 ? discount7 : (regular7 ?? discount7);\r\n const oldVal7 = hasBoth7 ? regular7 : null;\r\n \r\n \/\/ --- UPDATED JS: Wrap number in roeyaOldVal to isolate strike-through ---\r\n const priceHtml7 = (newVal7 === null) ? \r\n `<div class=\"roeyaPrice7\"><div class=\"roeyaNew7\">\u2014<\/div><\/div>` : \r\n `<div class=\"roeyaPrice7\">\r\n ${oldVal7 !== null ? `<div class=\"roeyaOld7\"><span class=\"roeyaOldVal\">${formatPrice7(oldVal7)}<\/span>${currencyText7}<\/div>` : ``}\r\n <div class=\"roeyaNew7\">${formatPrice7(newVal7)}<span class=\"roeyaCurr7\">${currencyText7}<\/span><\/div>\r\n <\/div>`;\r\n \r\n const imgHtml7 = img7 ? `<img decoding=\"async\" src=\"${esc7(img7)}\" alt=\"${title7}\" loading=\"lazy\">` : `<div style=\"width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:900;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0635\u0648\u0631\u0629<\/div>`;\r\n\r\n return `\r\n <article class=\"roeyaCard7 reveal-up\">\r\n <div class=\"roeyaImg7\"><a class=\"roeyaLink7\" href=\"${link7}\" aria-label=\"${title7}\">${imgHtml7}<\/a><\/div>\r\n <div class=\"roeyaBody7\">\r\n <div class=\"roeyaCat7\">${cat7}<\/div>\r\n <h3 class=\"roeyaTitle7\"><a class=\"roeyaLink7\" href=\"${link7}\">${title7}<\/a><\/h3>\r\n <p class=\"roeyaDesc7\">${desc7 || \" \"}<\/p>\r\n <div class=\"roeyaDivider7\"><\/div>\r\n <\/div>\r\n <div class=\"roeyaBottom7\">\r\n ${priceHtml7}\r\n <a class=\"roeyaLink7\" href=\"${link7}\"><button class=\"roeyaBtn7\" type=\"button\">\u0639\u0631\u0636 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644<\/button><\/a>\r\n <\/div>\r\n <\/article>`;\r\n };\r\n\r\n fetch(apiUrl7).then(res7 => { if(!res7.ok) throw new Error(\"HTTP \" + res7.status); return res7.json(); }).then(list7 => {\r\n if(!Array.isArray(list7) || !list7.length){ gridEl7.innerHTML = \"\"; return; }\r\n gridEl7.innerHTML = list7.map(renderCard7).join(\"\");\r\n document.querySelectorAll('.roeyaCard7').forEach(el => observer.observe(el));\r\n }).catch(err7 => { console.log(\"RoeyaCoursesAPIError7:\", err7); gridEl7.innerHTML = \"\"; });\r\n })();\r\n });\r\n<\/script>\r\n\r\n\r\n<style>\r\n.testimonial-section { background-color: #f9f9f9; padding: 60px 20px; }\r\n.testi-container { max-width: 1200px; margin: 0 auto; }\r\n.testi-header { text-align: center; margin-bottom: 40px; }\r\n.testi-header h2 { color: #333; font-size: 2rem; margin-bottom: 10px; font-weight: 800; }\r\n.testi-header p { color: #666; }\r\n.testi-wrapper { position: relative; display: flex; align-items: center; justify-content: center; }\r\n.testi-btn {\r\n background: #fff; border: 1px solid #ddd; color: #333; width: 45px; height: 45px; border-radius: 50%;\r\n cursor: pointer; font-size: 1.2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.6s ease; z-index: 10; position: absolute;\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.testi-btn:hover { background: #333; color: #fff; }\r\n\/* Swapped buttons for RTL - User requested swap locations *\/\r\n.prev-btn { left: -20px; right: auto; } \r\n.next-btn { right: -20px; left: auto; }\r\n.testi-track-container { overflow: hidden; width: 100%; padding: 10px 0; }\r\n.testi-track { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 0.6s ease-in-out; will-change: transform; }\r\n.testi-card { flex: 0 0 33.333%; padding: 0 15px; box-sizing: border-box; }\r\n\r\n.card-content {\r\n background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n height: 100%; display: flex; flex-direction: column; justify-content: space-between;\r\n transition: transform 0.6s ease, box-shadow 0.6s ease; \r\n text-align: right;\r\n}\r\n\r\n.testi-card:hover .card-content {\r\n transform: scale(1.05);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1); \r\n}\r\n\r\n.quote { font-style: italic; color: #555; line-height: 1.6; margin-bottom: 20px; font-size: 0.9rem; }\r\n .user-info { display: flex; align-items: center; gap: 15px; border-top: 1px solid #eee; padding-top: 20px; padding-bottom: 20px; }\r\n.user-info img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }\r\n.user-info h4 { margin: 0; color: #333; font-size: 0.9rem; }\r\n.user-info span { font-size: 0.75rem; color: #888; }\r\n\r\n\/* New: ensure arrows point correctly for left\/right buttons (swap flip) *\/\r\n.testi-btn .arrow { display: inline-block; font-size: 1.2rem; line-height: 1; }\r\n\/* Prev is positioned on the right in RTL layout \u2014 points Right (default) *\/\r\n.prev-btn .arrow { transform: none; }\r\n\/* Next is positioned on the left in RTL layout \u2014 points Left (flipped) *\/\r\n.next-btn .arrow { transform: scaleX(-1); }\r\n\r\n@media (max-width: 992px) { .testi-card { flex: 0 0 50%; } }\r\n\r\n@media (max-width: 768px) { \r\n .testi-card { flex: 0 0 100%; } \r\n .testi-wrapper { padding-bottom: 60px; }\r\n .testi-btn { top: auto; bottom: 0; transform: none; }\r\n .prev-btn { left: calc(50% - 60px); right: auto; }\r\n .next-btn { right: calc(50% - 60px); left: auto; }\r\n .testi-header h2 { font-size: 1.6rem; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"testimonial-section\">\r\n <div class=\"testi-container\">\r\n <div class=\"testi-header\">\r\n <h2>\u0622\u0631\u0627\u0621 \u0623\u0648\u0644\u064a\u0627\u0621 \u0627\u0644\u0623\u0645\u0648\u0631 \u0648\u0637\u0644\u0627\u0628\u0646\u0627<\/h2>\r\n <p> \u0642\u0635\u0635 \u062d\u0642\u064a\u0642\u064a\u0629\u2026 \u062a\u0642\u062f\u0645 \u0645\u0644\u0645\u0648\u0633\u2026 \u0648\u062b\u0642\u0629 \u062a\u0646\u0645\u0648 \u0645\u0639 \u0643\u0644 \u062e\u0637\u0648\u0629!<\/p>\r\n <\/div>\r\n <div class=\"testi-wrapper\">\r\n <button class=\"testi-btn prev-btn\" aria-label=\"\u0627\u0644\u0633\u0627\u0628\u0642\"><span class=\"arrow\">❯<\/span><\/button>\r\n <button class=\"testi-btn next-btn\" aria-label=\"\u0627\u0644\u062a\u0627\u0644\u064a\"><span class=\"arrow\">❯<\/span><\/button>\r\n <div class=\"testi-track-container\">\r\n <ul class=\"testi-track\">\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u0648\u0644 \u0627\u0644\u0644\u064a \u0633\u0648\u0648\u0647 \u0623\u0639\u0637\u0627\u0646\u0627 \u0641\u0643\u0631\u0629 \u0648\u0627\u0636\u062d\u0629 \u0639\u0646 \u0645\u0633\u062a\u0648\u0627\u0647\u0627. \u0627\u0644\u0645\u062f\u0631\u0633\u064a\u0646 \u0647\u0646\u0627 \u0645\u062d\u062a\u0631\u0641\u064a\u0646 \u0648\u0643\u0644 \u062e\u0637\u0648\u0629 \u0645\u062a\u0627\u0628\u0639\u0629 \u062f\u0642\u064a\u0642\u0629.\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u0641\u0627\u0637\u0645\u0629 <\/h4><span> \u0623\u0645 \u0644\u064a\u0644\u0649\u060c 7 \u0633\u0646\u0648\u0627\u062a<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u064a\u0639\u0646\u064a \u0628\u0635\u0631\u0627\u062d\u0629\u060c \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0645\u0646\u0638\u0645\u0629 \u0648\u0634\u0641\u0627\u0641\u0629\u060c \u0643\u0644 \u0623\u0633\u0628\u0648\u0639 \u0646\u0634\u0648\u0641 \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a\u060c \u0648\u0627\u0644\u0623\u0645\u0648\u0631\u0647 \u0648\u0627\u0636\u062d\u0629 \u0628\u062f\u0648\u0646 \u0623\u064a \u0644\u062e\u0628\u0637\u0629.\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u0647\u0646\u062f <\/h4><span>\u0623\u0645 \u0633\u0627\u0631\u0629\u060c 8 \u0633\u0646\u0648\u0627\u062a <\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u0627\u0644\u062d\u0635\u0635 \u0645\u0645\u062a\u0639\u0629 \u0648\u062a\u0641\u0627\u0639\u0644\u064a\u0629\u060c \u0645\u0648 \u0628\u0633 \u062f\u0631\u0633 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u060c \u0627\u0644\u0637\u0641\u0644 \u0635\u0627\u0631 \u064a\u062a\u0643\u0644\u0645 \u0648\u064a\u0637\u0628\u0642 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a \u0641\u064a \u0627\u0644\u0628\u064a\u062a!\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u0645\u062d\u0645\u062f<\/h4><span>\u0623\u0628 \u0644\u0623\u062d\u0645\u062f\u060c 11 \u0633\u0646\u0629 <\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u0643\u0627\u0646\u062a \u062a\u062c\u0631\u0628\u0629 \u0631\u0627\u0626\u0639\u0629\u060c \u0627\u0628\u0646\u0646\u0627 \u0635\u0627\u0631 \u0639\u0646\u062f\u0647 \u062b\u0642\u0629 \u0643\u0628\u064a\u0631\u0629\u060c \u0648\u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0633\u0647\u0644 \u0639\u0644\u064a\u0647 \u0627\u0644\u0641\u0647\u0645\u060c \u0648\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0644\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0643\u0627\u0645\u0628\u0631\u064a\u062f\u062c \u0643\u0627\u0646 \u0633\u0644\u0633.\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u064a\u0648\u0633\u0641<\/h4><span>\u0623\u0628 \u0644\u0631\u064a\u0645\u060c 10 \u0633\u0646\u0648\u0627\u062a<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const track = document.querySelector('.testi-track');\r\n if (!track) return;\r\n const wrapper = document.querySelector('.testi-wrapper');\r\n const nextBtn = document.querySelector('.next-btn');\r\n const prevBtn = document.querySelector('.prev-btn');\r\n\r\n \/\/ keep a copy of the original slides (used to rebuild on resize)\r\n const originalSlides = Array.from(track.children).map(n => n.cloneNode(true));\r\n let itemsPerSlide = getItemsPerSlide();\r\n let currentIndex = 0;\r\n let autoPlayTimer = null;\r\n\r\n function getItemsPerSlide() {\r\n if (window.innerWidth <= 768) return 1;\r\n if (window.innerWidth <= 992) return 2;\r\n return 3;\r\n }\r\n\r\n function setupCarousel() {\r\n itemsPerSlide = getItemsPerSlide();\r\n track.innerHTML = '';\r\n\r\n const slides = originalSlides.map(n => n.cloneNode(true));\r\n const prependClones = slides.slice(-itemsPerSlide).map(n => { const c = n.cloneNode(true); c.classList.add('clone'); return c; });\r\n const appendClones = slides.slice(0, itemsPerSlide).map(n => { const c = n.cloneNode(true); c.classList.add('clone'); return c; });\r\n\r\n prependClones.forEach(n => track.appendChild(n));\r\n slides.forEach(n => track.appendChild(n));\r\n appendClones.forEach(n => track.appendChild(n));\r\n\r\n \/\/ start at first real slide (accounting for prepended clones)\r\n currentIndex = itemsPerSlide;\r\n updateCarousel(false);\r\n\r\n \/\/ re-enable transitions after immediate positioning\r\n requestAnimationFrame(() => { track.style.transition = ''; });\r\n }\r\n\r\n function updateCarousel(animate = true) {\r\n const firstCard = track.querySelector('.testi-card');\r\n const itemWidth = firstCard ? firstCard.getBoundingClientRect().width : 0;\r\n if (!animate) track.style.transition = 'none';\r\n \/\/ RTL Adjustment: Use positive translateX to move leftwards content into view\r\n track.style.transform = `translateX(${ currentIndex * itemWidth }px)`;\r\n if (!animate) requestAnimationFrame(() => { track.style.transition = ''; });\r\n }\r\n\r\n function slideNext() { currentIndex++; updateCarousel(); }\r\n function slidePrev() { currentIndex--; updateCarousel(); }\r\n\r\n \/\/ when we hit cloned slides, jump instantly to the corresponding real slide (no gap)\r\n track.addEventListener('transitionend', () => {\r\n const originalsCount = originalSlides.length;\r\n const total = track.children.length; \/\/ originals + 2 * clones\r\n\r\n if (currentIndex >= originalsCount + itemsPerSlide) {\r\n \/\/ moved into appended clones -> reset to first original\r\n track.style.transition = 'none';\r\n currentIndex = itemsPerSlide;\r\n updateCarousel(false);\r\n } else if (currentIndex < itemsPerSlide) {\r\n \/\/ moved into prepended clones -> reset to last original\r\n track.style.transition = 'none';\r\n currentIndex = originalsCount + itemsPerSlide - 1;\r\n updateCarousel(false);\r\n }\r\n });\r\n\r\n function startAutoPlay() { stopAutoPlay(); autoPlayTimer = setInterval(() => slideNext(), 3500); }\r\n function stopAutoPlay() { if (autoPlayTimer) { clearInterval(autoPlayTimer); autoPlayTimer = null; } }\r\n function resetTimer() { stopAutoPlay(); startAutoPlay(); }\r\n\r\n nextBtn.addEventListener('click', () => { slideNext(); resetTimer(); });\r\n prevBtn.addEventListener('click', () => { slidePrev(); resetTimer(); });\r\n\r\n wrapper.addEventListener('mouseenter', stopAutoPlay);\r\n wrapper.addEventListener('mouseleave', startAutoPlay);\r\n\r\n window.addEventListener('resize', debounce(() => {\r\n const newItems = getItemsPerSlide();\r\n if (newItems !== itemsPerSlide) setupCarousel(); else updateCarousel(false);\r\n }, 200));\r\n\r\n setupCarousel();\r\n startAutoPlay();\r\n\r\n function debounce(fn, wait) { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), wait); }; }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n<style>\r\n .rb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; }\r\n .rb-card {\r\n background: #ffffff; border: 1px solid #f1f2f3; border-radius: 12px; overflow: hidden;\r\n display: flex; flex-direction: column; transition: all 0.6s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.03);\r\n }\r\n .rb-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-bottom: 3px solid var(--roeya-gold); }\r\n .rb-media { height: 220px; overflow: hidden; position: relative; background-color: #eee; }\r\n .rb-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\r\n .rb-card:hover .rb-media img { transform: scale(1.08); }\r\n .rb-tag {\r\n position: absolute; top: 15px; right: 15px; left: auto; background: rgba(255, 255, 255, 0.95);\r\n color: var(--roeya-blue); padding: 5px 10px; font-size: 9px; font-weight: 700;\r\n border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 2;\r\n }\r\n .rb-body { padding: 24px 24px 20px 24px; display: flex; flex-direction: column; flex: 1; text-align: right; }\r\n .rb-meta {\r\n display: flex; align-items: center; gap: 10px; font-size: 10px; color: #94a3b8;\r\n font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;\r\n }\r\n .rb-meta i { color: var(--roeya-gold); }\r\n .rb-title {\r\n font-size: 1.2rem; font-weight: 700; color: var(--roeya-blue);\r\n line-height: 1.4; margin: 0 0 12px 0; display: -webkit-box; -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical; overflow: hidden;\r\n }\r\n .rb-title a { color: var(--roeya-blue); text-decoration: none; transition: 0.6s; }\r\n .rb-title a:hover { color: var(--roeya-gold); }\r\n .rb-excerpt {\r\n font-size: 0.9rem; line-height: 1.6; color: #6b7280; display: -webkit-box;\r\n -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px;\r\n }\r\n .rb-footer { margin-top: auto; border-top: 1px solid #f1f2f3; padding: 15px 24px; display: flex; justify-content: flex-end; }\r\n .rb-read-more {\r\n font-size: 12px; font-weight: 700; color: var(--roeya-gold); text-decoration: none;\r\n display: inline-flex; align-items: center; gap: 6px; transition: 0.6s;\r\n }\r\n .rb-read-more:hover { color: var(--roeya-blue); transform: translateX(-5px); }\r\n .rb-note { text-align: center; width: 100%; color: #6b7280; padding: 20px; }\r\n .rb-skel {\r\n height: 400px; border-radius: 12px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);\r\n background-size: 200% 100%; animation: roeyaSkelAnim7 2.4s infinite linear;\r\n }\r\n @media (max-width: 991px) { .rb-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 600px) { .rb-grid { grid-template-columns: 1fr; } }\r\n<\/style>\r\n\r\n<section class=\"rw-section bg-light\">\r\n <div class=\"rw-container\">\r\n <div class=\"section-header reveal-up\">\r\n <h2>\u0646\u0635\u0627\u0626\u062d \u0648\u0623\u062e\u0628\u0627\u0631 <span>\u0644\u0623\u0648\u0644\u064a\u0627\u0621 \u0627\u0644\u0623\u0645\u0648\u0631 <\/span><\/h2>\r\n <p> \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u0641\u064a\u062f\u0629 \u0648\u0645\u0645\u062a\u0639\u0629 \u062a\u0642\u062f\u0651\u0645 \u0644\u0643 \u0623\u0641\u0636\u0644 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0637\u0641\u0644\u0643 \u0641\u064a \u0627\u0644\u062a\u0639\u0644\u0645 \u0648\u0627\u0644\u062d\u064a\u0627\u0629.<\/p>\r\n <\/div>\r\n <div id=\"rbGrid\" class=\"rb-grid\">\r\n <div class=\"rb-skel\"><\/div><div class=\"rb-skel\"><\/div><div class=\"rb-skel\"><\/div>\r\n <\/div>\r\n <div id=\"rbNote\" class=\"rb-note\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n const origin = \"https:\/\/roeyaacademy.com\/ar\"; \r\n const grid = document.getElementById(\"rbGrid\");\r\n const note = document.getElementById(\"rbNote\");\r\n const clean = (html) => (html || \"\").toString().replace(\/<[^>]*>\/g,\" \").replace(\/\\s+\/g,\" \").trim();\r\n const fmtDate = (iso) => { try{ return new Date(iso).toLocaleDateString('ar-EG',{year:\"numeric\",month:\"short\",day:\"numeric\"}); }catch(e){ return \"\"; } };\r\n const perPage = 3; \r\n\r\n function makeCard(post){\r\n const title = clean(post?.title?.rendered) || \"\u0628\u0644\u0627 \u0639\u0646\u0648\u0627\u0646\";\r\n const ex = clean(post?.excerpt?.rendered) || \"\";\r\n const href = post?.link || \"#\";\r\n const img = post?._embedded?.[\"wp:featuredmedia\"]?.[0]?.source_url || \"\";\r\n const cat = (post?._embedded?.[\"wp:term\"]||[]).flat().find(t=>t.taxonomy===\"category\");\r\n const date = fmtDate(post?.date);\r\n\r\n const card = document.createElement(\"article\");\r\n card.className = \"rb-card reveal-up\";\r\n \r\n card.innerHTML = `\r\n <div class=\"rb-media\">\r\n ${cat ? `<div class=\"rb-tag\">${cat.name}<\/div>` : \"\"}\r\n <a href=\"${href}\">\r\n ${img ? `<img decoding=\"async\" src=\"${img}\" alt=\"${title}\" loading=\"lazy\">` : `<div style=\"width:100%;height:100%;background:#eee;display:flex;align-items:center;justify-content:center;color:#ccc;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0635\u0648\u0631\u0629<\/div>`}\r\n <\/a>\r\n <\/div>\r\n <div class=\"rb-body\">\r\n <div class=\"rb-meta\"><i class=\"far fa-calendar-alt\"><\/i> ${date}<\/div>\r\n <h3 class=\"rb-title\"><a href=\"${href}\">${title}<\/a><\/h3>\r\n <p class=\"rb-excerpt\">${ex}<\/p>\r\n <\/div>\r\n <div class=\"rb-footer\">\r\n <a class=\"rb-read-more\" href=\"${href}\">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f <i class=\"fas fa-arrow-left\"><\/i><\/a>\r\n <\/div>\r\n `;\r\n return card;\r\n }\r\n\r\n async function fetchPosts(){\r\n const url = `${origin}\/wp-json\/wp\/v2\/posts?_embed=1&page=1&per_page=${perPage}`;\r\n try{\r\n const res = await fetch(url);\r\n if(!res.ok){ grid.innerHTML = \"\"; note.textContent = \"\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0642\u0627\u0644\u0627\u062a.\"; return; }\r\n const posts = await res.json();\r\n grid.innerHTML = \"\";\r\n posts.forEach(p => {\r\n const card = makeCard(p);\r\n grid.appendChild(card);\r\n if(window.IntersectionObserver){\r\n const observer = new IntersectionObserver((entries)=>{\r\n entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('active'); }); \r\n }, {threshold:0.1});\r\n observer.observe(card);\r\n } else { card.classList.add('active'); }\r\n });\r\n }catch(e){ grid.innerHTML = \"\"; note.textContent=\"\u0641\u0634\u0644 \u0641\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a.\"; }\r\n }\r\n fetchPosts();\r\n})();\r\n<\/script>\r\n\r\n\r\n\r\n<style>\r\n .back-to-top {\r\n position: fixed; bottom: 30px; right: 30px; left: auto; width: 40px; height: 40px; border: 2px solid #c8ac82;\r\n border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none;\r\n z-index: 999; background: transparent; opacity: 0; visibility: hidden; transform: translateY(20px);\r\n transition: all 0.6s ease; pointer-events: none;\r\n }\r\n .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }\r\n .back-to-top svg {\r\n width: 20px; height: 20px; stroke: #c8ac82; stroke-width: 2.5; fill: none; stroke-linecap: round;\r\n stroke-linejoin: round; transition: stroke 0.6s ease;\r\n }\r\n .back-to-top:hover { background-color: #c8ac82; }\r\n .back-to-top:hover svg { stroke: #ffffff; }\r\n<\/style>\r\n\r\n<a href=\"#\" class=\"back-to-top\" aria-label=\"\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"><\/line>\r\n <polyline points=\"5 12 12 5 19 12\"><\/polyline>\r\n <\/svg>\r\n<\/a>\r\n\r\n<script>\r\n const backToTopButton = document.querySelector('.back-to-top');\r\n window.addEventListener('scroll', () => {\r\n const scrollTop = window.scrollY;\r\n const docHeight = document.documentElement.scrollHeight;\r\n const winHeight = window.innerHeight;\r\n const scrollPercent = (scrollTop \/ (docHeight - winHeight)) * 100;\r\n if (scrollPercent >= 50) { \r\n backToTopButton.classList.add('show'); \r\n } else { \r\n backToTopButton.classList.remove('show'); \r\n }\r\n });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0631\u0624\u064a\u0629 – \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0643\u062a\u0634\u0641 \u0635\u0648\u062a \u0637\u0641\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u2026 \u0648\u0627\u062c\u0639\u0644\u0647 \u0645\u0644\u0643\u064b\u0627 \u0644\u0647 \u062a\u0639\u0644\u0645\u2026 \u0645\u062a\u0639\u0629\u2026 \u0645\u0645\u0627\u0631\u0633\u0629\u2026 \u0643\u0644 \u062e\u0637\u0648\u0629 \u064a\u062e\u0637\u0648\u0647\u0627 \u0637\u0641\u0644\u0643 \u062a\u064f\u062a\u0627\u0628\u0639\u060c \u062a\u064f\u0642\u064a\u064e\u0651\u0645\u060c \u0648\u062a\u064f\u0633\u062c\u064e\u0651\u0644\u060c \u0644\u062a\u0639\u0631\u0641 \u062f\u0627\u0626\u0645\u064b\u0627 \u0645\u062f\u0649 \u062a\u0642\u062f\u0645\u0647. \u0641\u064a \u0631\u0624\u064a\u0629 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u060c \u0644\u0627 \u0646\u0642\u062f\u0645 \u0645\u062c\u0631\u062f \u0643\u0648\u0631\u0633 \u0644\u063a\u0629 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0623\u0648\u0646\u0644\u0627\u064a\u0646\u060c \u0628\u0644 \u062a\u062c\u0631\u0628\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0637\u0641\u0644\u0643. \u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u062a\u0635\u0641\u062d \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0645\u062d\u0627\u0636\u0631\u0648\u0646 \u0645\u0624\u0647\u0644\u0648\u0646 \u0645\u062f\u0631\u0633\u0648\u0646 \u0645\u0639\u062a\u0645\u062f\u0648\u0646 \u0648\u0645\u062d\u062a\u0631\u0641\u0648\u0646. \u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629\u2026 \u0646\u062a\u0627\u0626\u062c \u0645\u0644\u0645\u0648\u0633\u0629. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":669,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":3304,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/12\/revisions\/3304"}],"wp:attachment":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/media?parent=12"}],"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 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0631\u0624\u064a\u0629 - \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n<style>\r\n \/* --- Variables --- *\/\r\n :root {\r\n --roeya-blue: #232d50;\r\n --roeya-blue-dark: #153070;\r\n --roeya-gold: #c8ac82;\r\n --roeya-gold-light: #e6ceaa;\r\n --roeya-gold-dark: #b09670; \r\n --white: #ffffff;\r\n --light-gray: #f9fafb;\r\n --gray-text: #4b5563;\r\n --container-width: 1200px;\r\n --section-padding: 80px 0;\r\n --radius: 12px;\r\n --shadow: 0 10px 30px rgba(0,0,0,0.06);\r\n }\r\n\r\n \/* --- Base Layout --- *\/\r\n .roeya-widget-wrapper {\r\n font-family: 'Tajawal', sans-serif; \/* Arabic Font Priority *\/\r\n color: #1f2937;\r\n line-height: 1.6;\r\n width: 100%;\r\n overflow-x: hidden;\r\n background: #fff;\r\n direction: rtl; \/* Force RTL *\/\r\n text-align: right;\r\n }\r\n .roeya-widget-wrapper a { text-decoration: none; color: inherit; }\r\n .roeya-widget-wrapper ul { list-style: none; padding: 0; margin: 0; }\r\n .rw-container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }\r\n .rw-section { padding: var(--section-padding); position: relative; overflow: hidden; }\r\n .bg-light { background: var(--light-gray); }\r\n .bg-white { background: var(--white); }\r\n \r\n \/* --- Headers --- *\/\r\n .section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }\r\n .section-header h2 { font-size: 2rem; font-weight: 800; color: var(--roeya-blue); margin-bottom: 12px; line-height: 1.3; }\r\n .section-header h2 span { color: var(--roeya-gold); } \r\n .section-header p { color: var(--gray-text); font-size: 0.95rem; }\r\n\r\n \/* --- 1. HOVER EFFECTS (Global) --- *\/\r\n .roeya-widget-wrapper img { \r\n max-width: 100%; \r\n height: auto; \r\n display: block; \r\n transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); \r\n }\r\n .roeya-widget-wrapper img:hover { transform: scale(1.08); }\r\n\r\n .roeya-widget-wrapper i {\r\n transition: transform 0.6s ease, color 0.6s ease;\r\n display: inline-block;\r\n }\r\n .roeya-widget-wrapper i:hover {\r\n transform: scale(1.3);\r\n color: var(--roeya-gold);\r\n }\r\n\r\n \/* --- 2. SCROLL ANIMATIONS --- *\/\r\n .reveal-up {\r\n transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n opacity: 0;\r\n }\r\n .slide-from-left, .slide-from-right {\r\n transition: all 4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n opacity: 0;\r\n }\r\n \r\n .reveal-up { transform: translateY(40px); }\r\n .reveal-up.active { opacity: 1; transform: translateY(0); }\r\n \/* Swapped directions logically for RTL awareness *\/\r\n .slide-from-left { transform: translateX(100px); } \r\n .slide-from-left.active { opacity: 1; transform: translateX(0); }\r\n .slide-from-right { transform: translateX(-100px); }\r\n .slide-from-right.active { opacity: 1; transform: translateX(0); }\r\n\r\n .delay-100 { transition-delay: 0.2s; }\r\n .delay-200 { transition-delay: 0.4s; }\r\n .delay-300 { transition-delay: 0.6s; }\r\n\r\n \/* --- 3. HERO KEN BURNS LOOP --- *\/\r\n @keyframes kenBurnsLoopHome {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.15); } \r\n 100% { transform: scale(1); }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :root { --section-padding: 50px 0; }\r\n .section-header h2 { font-size: 1.5rem; }\r\n .section-header { margin-bottom: 40px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"roeya-widget-wrapper\" dir=\"rtl\">\r\n\r\n \r\n <style>\r\n .hero-section {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n min-height: 600px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: #fff;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: url('https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-12-at-12.11.01.jpeg');\r\n background-size: cover;\r\n background-position: center;\r\n z-index: -2;\r\n animation: kenBurnsLoopHome 40s infinite ease-in-out;\r\n }\r\n .hero-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(900px 420px at 50% 35%, rgba(200, 172, 130, .22), transparent 60%),\r\n linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));\r\n z-index: -1;\r\n }\r\n .hero-content { position: relative; z-index: 1; max-width: 850px; padding: 0 20px; }\r\n .hero-content h1 {\r\n font-family: 'Tajawal', sans-serif; font-size: 2.75rem; font-weight: 800;\r\n margin-bottom: 20px; line-height: 1.3; text-shadow: 0 10px 30px rgba(0,0,0,.35); color: #ffffff;\r\n }\r\n .hero-content p { font-size: 1rem; margin-bottom: 40px; color: #f1f1f1; }\r\n .hero-buttons { display: flex; justify-content: center; align-items: center; gap: 25px; }\r\n .btn-hero {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n padding: 16px 32px; border-radius: 8px; font-weight: 800; font-size: 0.9rem;\r\n transition: all 0.6s ease; text-decoration: none;\r\n }\r\n \r\n .btn-secondary {\r\n color: #fff; \r\n border: 1px solid rgba(255,255,255,.28);\r\n background: rgba(255,255,255,.06); \r\n backdrop-filter: blur(8px);\r\n padding: 10px 24px; \r\n border-radius: 50px; \r\n font-weight: 700; \r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .btn-secondary:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); color: #fff; }\r\n \r\n \/* --- PLACEMENT TEST BUTTON STYLE --- *\/\r\n .special-gold-btn {\r\n margin: 0; background: var(--roeya-blue); color: #ffffff !important; padding: 10px 24px; border-radius: 50px;\r\n font-weight: 700; transition: .6s; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; text-decoration: none;\r\n }\r\n .special-gold-btn:hover { color: #c9a87f !important; transform: translateY(-2px); }\r\n\r\n @media (max-width: 768px) {\r\n .hero-content h1 { font-size: 1.8rem; }\r\n .hero-content p { font-size: 0.9rem; }\r\n .hero-buttons { flex-direction: column; gap: 15px; width: 100%; }\r\n .btn-hero, .special-gold-btn { width: 100%; justify-content: center; }\r\n }\r\n <\/style>\r\n\r\n <section class=\"hero-section\">\r\n <div class=\"hero-bg\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1 class=\"reveal-up\">\u0627\u0643\u062a\u0634\u0641 \u0635\u0648\u062a \u0637\u0641\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u2026 \u0648\u0627\u062c\u0639\u0644\u0647 \u0645\u0644\u0643\u064b\u0627 \u0644\u0647 <\/h1>\r\n <p class=\"reveal-up delay-100\">\r\n\u062a\u0639\u0644\u0645\u2026 \u0645\u062a\u0639\u0629\u2026 \u0645\u0645\u0627\u0631\u0633\u0629\u2026 \u0643\u0644 \u062e\u0637\u0648\u0629 \u064a\u062e\u0637\u0648\u0647\u0627 \u0637\u0641\u0644\u0643 \u062a\u064f\u062a\u0627\u0628\u0639\u060c \u062a\u064f\u0642\u064a\u064e\u0651\u0645\u060c \u0648\u062a\u064f\u0633\u062c\u064e\u0651\u0644\u060c \u0644\u062a\u0639\u0631\u0641 \u062f\u0627\u0626\u0645\u064b\u0627 \u0645\u062f\u0649 \u062a\u0642\u062f\u0645\u0647. \u0641\u064a \u0631\u0624\u064a\u0629 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u060c \u0644\u0627 \u0646\u0642\u062f\u0645 \u0645\u062c\u0631\u062f \u0643\u0648\u0631\u0633 \u0644\u063a\u0629 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0623\u0648\u0646\u0644\u0627\u064a\u0646\u060c \u0628\u0644 \u062a\u062c\u0631\u0628\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0637\u0641\u0644\u0643.\r\n <\/p>\r\n <div class=\"hero-buttons reveal-up delay-200\">\r\n <a href=\"https:\/\/roeyalearning.com\/marketingForms\/xbplqjikoxil\" class=\"special-gold-btn\" target=\"_blank\" rel=\"noopener\">\u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649<\/a>\r\n <a href=\"https:\/\/roeyaacademy.com\/ar\/courses\/\" class=\"btn-hero btn-secondary\">\u062a\u0635\u0641\u062d \u0627\u0644\u062f\u0648\u0631\u0627\u062a<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .features-grid {\r\n display: grid; \r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 30px; margin-top: -60px; position: relative; z-index: 10;\r\n }\r\n .feat-card {\r\n background: var(--white); padding: 40px 30px; border-radius: var(--radius);\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.08); text-align: center; border-bottom: 4px solid transparent;\r\n transition: transform 0.6s ease, border-color 0.6s ease;\r\n }\r\n .feat-card:hover { transform: translateY(-10px); border-bottom-color: var(--roeya-gold); }\r\n .feat-icon {\r\n width: 70px; height: 70px; background: rgba(35, 45, 80, 0.1); color: var(--roeya-blue);\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n font-size: 28px; margin: 0 auto 20px;\r\n }\r\n .feat-card:hover .feat-icon { background: var(--roeya-blue); color: #fff; }\r\n .feat-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--roeya-blue-dark); font-weight: 700; }\r\n .feat-card p { color: var(--gray-text); font-size: 0.9rem; }\r\n \r\n @media (max-width: 768px) {\r\n .features-grid { margin-top: 0; gap: 20px; }\r\n .feat-card { padding: 30px 20px; }\r\n }\r\n <\/style>\r\n\r\n <div class=\"rw-container\">\r\n <div class=\"features-grid\">\r\n <div class=\"feat-card reveal-up delay-100\">\r\n <div class=\"feat-icon\"><i class=\"fas fa-chalkboard-teacher\"><\/i><\/div>\r\n <h3>\u0645\u062d\u0627\u0636\u0631\u0648\u0646 \u0645\u0624\u0647\u0644\u0648\u0646 <\/h3>\r\n <p> \u0645\u062f\u0631\u0633\u0648\u0646 \u0645\u0639\u062a\u0645\u062f\u0648\u0646 \u0648\u0645\u062d\u062a\u0631\u0641\u0648\u0646. \u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629\u2026 \u0646\u062a\u0627\u0626\u062c \u0645\u0644\u0645\u0648\u0633\u0629.<\/p>\r\n <\/div>\r\n <div class=\"feat-card reveal-up delay-200\">\r\n <div class=\"feat-icon\"><i class=\"fas fa-laptop-code\"><\/i><\/div>\r\n <h3> \u062d\u0635\u0635 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0645\u0645\u062a\u0639\u0629 <\/h3>\r\n <p>\u062c\u0644\u0633\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629\u060c \u062a\u0642\u064a\u064a\u0645 \u0641\u0648\u0631\u064a\u060c \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u2014 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u064a\u0635\u0628\u062d \u0645\u062a\u0639\u0629! <\/p>\r\n <\/div>\r\n <div class=\"feat-card reveal-up delay-300\">\r\n <div class=\"feat-icon\"><i class=\"fas fa-certificate\"><\/i><\/div>\r\n <h3>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 <\/h3>\r\n <p> \u0637\u0648\u0631 \u0644\u063a\u062a\u0643 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0645\u0639\u0646\u0627 \u0648\u0627\u062c\u062a\u0627\u0632 \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0643\u0627\u0645\u0628\u0631\u064a\u062f\u062c \u0628\u062b\u0642\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <style>\r\n .about-wrap {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 60px;\r\n }\r\n .about-img {\r\n flex: 1;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 20px;\r\n }\r\n .about-img img {\r\n border-radius: 20px;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.12);\r\n width: 100%;\r\n aspect-ratio: 4\/3;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .about-img:hover img { transform: scale(1.05); }\r\n .about-text {\r\n flex: 1;\r\n }\r\n .about-text .about-heading {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--roeya-blue);\r\n margin-bottom: 16px;\r\n line-height: 1.3;\r\n }\r\n .about-text .about-heading span { color: var(--roeya-gold); }\r\n .about-text .about-intro {\r\n color: var(--gray-text);\r\n font-size: 0.95rem;\r\n margin-bottom: 10px;\r\n line-height: 1.8;\r\n }\r\n .check-list {\r\n margin: 20px 0;\r\n }\r\n .check-list li {\r\n margin-bottom: 14px;\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-start;\r\n font-weight: 500;\r\n color: var(--roeya-blue-dark);\r\n font-size: 0.95rem;\r\n line-height: 1.5;\r\n }\r\n .check-list li i {\r\n flex-shrink: 0;\r\n color: var(--white);\r\n background: var(--roeya-gold);\r\n width: 22px;\r\n height: 22px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n font-size: 11px;\r\n margin-top: 2px;\r\n }\r\n .about-tagline {\r\n margin-top: 24px;\r\n padding: 14px 18px;\r\n background: var(--light-gray);\r\n border-right: 4px solid var(--roeya-gold);\r\n border-radius: 6px;\r\n color: var(--roeya-blue-dark);\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n @media (max-width: 991px) {\r\n .about-wrap { flex-direction: column-reverse; gap: 40px; }\r\n .about-text .about-heading { font-size: 1.6rem; }\r\n }\r\n @media (max-width: 768px) {\r\n .about-text .about-heading { font-size: 1.4rem; }\r\n }\r\n <\/style>\r\n\r\n <section class=\"rw-section bg-white\">\r\n <div class=\"rw-container\">\r\n <div class=\"about-wrap\">\r\n <div class=\"about-text slide-from-left\">\r\n <h2 class=\"about-heading\">\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0644\u0641 <span>\u0631\u0624\u064a\u0629 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u061f<\/span><\/h2>\r\n <p class=\"about-intro\">\u0627\u0644\u0643\u062b\u064a\u0631 \u0645\u0646 \u0643\u0648\u0631\u0633\u0627\u062a \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u062a\u064f\u0642\u062f\u0651\u0645 \u0627\u0644\u062f\u0631\u0648\u0633 \u0641\u0642\u0637 \u2026 \u0646\u062d\u0646 \u0646\u0642\u062f\u0645 \u062a\u0642\u062f\u0645\u064b\u0627 \u0645\u064f\u0642\u0627\u0633\u064b\u0627 \u0648\u0645\u0631\u0635\u0648\u062f\u064b\u0627.<\/p>\r\n <p class=\"about-intro\">\u062f\u0631\u0648\u0633 \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0639\u0645\u0627\u0631 \u0645\u0646 5 \u0625\u0644\u0649 16 \u0633\u0646\u0629\u060c \u0628\u0637\u0631\u064a\u0642\u0629 \u0645\u0645\u062a\u0639\u0629 \u0648\u0641\u0639\u0651\u0627\u0644\u0629 \u2014 \u0625\u0644\u064a\u0643 \u0643\u064a\u0641 \u0646\u062a\u0645\u064a\u0632:<\/p>\r\n <ul class=\"check-list\">\r\n <li><i class=\"fas fa-check\"><\/i> \u0645\u0646\u0647\u062c \u0642\u0627\u0626\u0645 \u0639\u0644\u0649 \u0645\u0639\u0627\u064a\u064a\u0631 \u0643\u0627\u0645\u0628\u0631\u064a\u062f\u062c \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0648\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0645\u0639 \u0645\u0624\u0634\u0631\u0627\u062a \u062a\u0642\u062f\u0645 \u062d\u0642\u064a\u0642\u064a\u0629.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u062a\u0642\u0627\u0631\u064a\u0631 \u0645\u062e\u0635\u0635\u0629 \u062a\u064f\u0631\u0633\u0644 \u0644\u0648\u0644\u064a \u0627\u0644\u0623\u0645\u0631 \u0628\u0627\u0646\u062a\u0638\u0627\u0645.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u0642\u0631\u0627\u0621\u0629\u060c \u0627\u0644\u062a\u062d\u062f\u062b\u060c \u0648\u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0644\u063a\u0648\u064a\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629.<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> \u0644\u0627 \u0645\u062c\u0627\u0644 \u0644\u0644\u062a\u062e\u0645\u064a\u0646 - \u0627\u0644\u062a\u0642\u062f\u0645 \u0648\u0627\u0636\u062d \u0648\u0645\u064f\u0642\u0627\u0633.<\/li>\r\n <\/ul>\r\n <div class=\"about-tagline\">\u0644\u064a\u0633\u062a \u0645\u062c\u0631\u062f \u062f\u0631\u0648\u0633 \u0639\u0634\u0648\u0627\u0626\u064a\u0629 \u2026 \u0628\u0644 \u0646\u062c\u0627\u062d \u0645\u0646\u0638\u0645 \u0648\u0645\u062f\u0631\u0648\u0633.<\/div>\r\n <\/div>\r\n <div class=\"about-img slide-from-right\">\r\n <img decoding=\"async\" src=\"https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-12-at-6.30.00-PM.jpeg\" alt=\"Students Learning\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .steps-container { display: flex; justify-content: center; gap: 30px; }\r\n .step-box {\r\n background: var(--white); padding: 50px 30px; border-radius: 20px;\r\n flex: 1; text-align: center; position: relative; overflow: hidden;\r\n border: 1px solid #eee; transition: 0.6s; max-width: 450px;\r\n }\r\n .step-box:hover { border-color: var(--roeya-gold); box-shadow: var(--shadow); transform: translateY(-5px); }\r\n .step-num {\r\n position: absolute; top: 10px; right: 20px; left: auto; font-size: 80px; font-weight: 900;\r\n color: rgba(0,0,0,0.03); line-height: 1;\r\n }\r\n .step-icon { font-size: 40px; color: var(--roeya-gold); margin-bottom: 20px; } \r\n .step-arrow { display: flex; align-items: center; font-size: 24px; color: var(--roeya-blue); opacity: 0.3; }\r\n .btn-step-outline {\r\n display: inline-block; width: 80%; padding: 12px 0; margin-top: 20px;\r\n border-radius: 6px; font-weight: 600; \r\n transition: 0.6s;\r\n background: transparent; color: var(--roeya-blue); border: 2px solid var(--roeya-blue);\r\n }\r\n .btn-step-outline:hover { background: var(--roeya-blue); color: #fff; }\r\n .special-gold-btn.step-variant { margin-top: 20px; width: 80%; }\r\n \r\n @media (max-width: 991px) {\r\n .steps-container { flex-direction: column; align-items: center; }\r\n .step-arrow { transform: rotate(90deg); margin: 10px 0; }\r\n .step-box { max-width: 100%; width: 100%; }\r\n }\r\n <\/style>\r\n\r\n <section class=\"rw-section bg-light\">\r\n <div class=\"rw-container\">\r\n <div class=\"section-header reveal-up\">\r\n <h2>\u062e\u0637\u0648\u062a\u0627\u0646 <span>\u0646\u062d\u0648 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0628\u062b\u0642\u0629 <\/span><\/h2>\r\n <p>\u0627\u0644\u0628\u062f\u0621 \u0645\u0639 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0631\u0624\u064a\u0629 \u0628\u0633\u064a\u0637 \u0648\u0633\u0631\u064a\u0639 \u0648\u0645\u0635\u0645\u0645 \u0644\u0631\u0627\u062d\u062a\u0643.<\/p>\r\n <\/div>\r\n\r\n <div class=\"steps-container\">\r\n <div class=\"step-box reveal-up delay-100\">\r\n <div class=\"step-num\">01<\/div>\r\n <div class=\"step-icon\"><i class=\"far fa-clipboard\"><\/i><\/div>\r\n <h3>\u0627\u0644\u062e\u0637\u0648\u0629 1: \u0627\u0643\u062a\u0634\u0641 \u0645\u0633\u062a\u0648\u0649 \u0637\u0641\u0644\u0643<\/h3>\r\n <p>\u0627\u062e\u062a\u0628\u0627\u0631 \u0642\u0635\u064a\u0631 \u2192 \u0645\u0642\u0627\u0628\u0644\u0629 \u062a\u062d\u062f\u064a\u062f \u0645\u0633\u062a\u0648\u0649 \u2192 \u0631\u0624\u064a\u0629 \u0648\u0627\u0636\u062d\u0629 \u2192 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629..<\/p>\r\n <a href=\"https:\/\/roeyalearning.com\/marketingForms\/xbplqjikoxil\" class=\"special-gold-btn step-variant\" target=\"_blank\" rel=\"noopener\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/a>\r\n <\/div>\r\n\r\n <div class=\"step-arrow reveal-up delay-200\"><i class=\"fas fa-arrow-left\"><\/i><\/div>\r\n\r\n <div class=\"step-box reveal-up delay-300\">\r\n <div class=\"step-num\">02<\/div>\r\n <div class=\"step-icon\"><i class=\"fas fa-graduation-cap\"><\/i><\/div>\r\n <h3>\u0633\u062c\u0644 \u0627\u0644\u062e\u0637\u0648\u0629 2: \u0627\u0646\u0637\u0644\u0642 \u0648\u062a\u0639\u0644\u0645<\/h3>\r\n <p>\u0633\u062c\u0651\u0644 \u0637\u0641\u0644\u0643 \u0641\u064a \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0648\u0627\u0628\u062f\u0623 \u0631\u062d\u0644\u0629 \u0627\u0644\u0646\u062c\u0627\u062d \u0628\u062b\u0642\u0629.<\/p>\r\n <a href=\"https:\/\/roeyaacademy.com\/ar\/courses\/\" class=\"btn-step-outline\">\u0639\u0631\u0636 \u0627\u0644\u062f\u0648\u0631\u0627\u062a<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .roeyaWrap7 { max-width: 1200px; margin: 0 auto; }\r\n .roeyaGrid7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }\r\n .roeyaCard7 {\r\n background: #ffffff; border: 1px solid #f1f2f3; border-radius: 12px;\r\n overflow: hidden; display: flex; flex-direction: column; transition: all 0.6s ease;\r\n }\r\n .roeyaCard7:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: transparent; }\r\n .roeyaImg7 { height: 220px; overflow: hidden; position: relative; background-color: #eee; }\r\n .roeyaImg7 img { width: 100%; height: 100%; object-fit: cover; } \r\n .roeyaBody7 { padding: 24px 24px 10px 24px; display: flex; flex-direction: column; flex: 1; }\r\n .roeyaCat7 { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #c8ac82; text-transform: uppercase; margin-bottom: 8px; }\r\n .roeyaTitle7 { font-size: 1.2rem; font-weight: 700; color: #232d50; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\r\n .roeyaDesc7 { font-size: 0.9rem; line-height: 1.6; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 15px; }\r\n .roeyaDivider7 { height: 1px; background: #f1f2f3; margin: 10px 0 0; width: 100%; }\r\n .roeyaBottom7 { padding: 16px 24px 24px 24px; display: flex; align-items: center; justify-content: space-between; }\r\n \r\n .roeyaPrice7 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.2; }\r\n \r\n \/* --- UPDATED: FLIPPED DIAGONAL RED STRIKE ON NUMBER ONLY --- *\/\r\n .roeyaOld7 { \r\n font-size: 1.2rem; \r\n font-weight: 700; \r\n color: #232d50; \r\n display: inline-flex; \r\n align-items: center; \r\n gap: 5px; \r\n text-decoration: none; \r\n }\r\n\r\n .roeyaOldVal {\r\n position: relative;\r\n display: inline-block;\r\n z-index: 1;\r\n }\r\n\r\n .roeyaOldVal::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: -5%; \/* Adjusted for RTL *\/\r\n width: 110%; \r\n height: 3px; \r\n background-color: #ef4444; \r\n transform: translateY(-50%) rotate(20deg); \/* Flipped rotation for RTL visual *\/\r\n opacity: 0.9;\r\n pointer-events: none;\r\n }\r\n \r\n .roeyaNew7 { font-size: 1.2rem; font-weight: 800; color: #232d50; display: inline-flex; align-items: center; }\r\n .roeyaCurr7 { font-size: 0.75rem; font-weight: 700; margin-right: 4px; color: #232d50; }\r\n\r\n \/* --- BUTTON STYLE --- *\/\r\n .roeyaBtn7 {\r\n background: var(--roeya-blue) !important;\r\n color: #ffffff !important; \r\n border: none; \r\n padding: 10px 24px; \r\n border-radius: 50px; \r\n font-size: 0.85rem; font-weight: 700; \r\n cursor: pointer; \r\n transition: all 0.4s ease; \r\n white-space: nowrap;\r\n }\r\n .roeyaBtn7:hover { \r\n background: var(--roeya-blue) !important;\r\n color: #c9a87f !important;\r\n transform: translateY(-2px); \r\n }\r\n \r\n .roeyaLink7 { text-decoration: none; color: inherit; }\r\n .roeyaSkel7 {\r\n height: 400px; border-radius: 12px;\r\n background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);\r\n background-size: 200% 100%; animation: roeyaSkelAnim7 2.4s infinite linear;\r\n }\r\n @keyframes roeyaSkelAnim7 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\r\n \r\n @media (max-width: 991px) { .roeyaGrid7 { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 650px) { .roeyaGrid7 { grid-template-columns: 1fr; } }\r\n <\/style>\r\n\r\n <section class=\"rw-section bg-white\">\r\n <div class=\"rw-container\">\r\n <div class=\"section-header reveal-up\">\r\n <h2>\u062f\u0648\u0631\u0627\u062a\u0646\u0627 <span>\u0627\u0644\u0623\u0643\u062b\u0631 \u0637\u0644\u0628\u0627\u064b<\/span><\/h2>\r\n <p> \u062a\u0639\u0644\u0645 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0623\u0635\u0628\u062d \u0645\u0631\u062d \u0648\u0645\u0645\u062a\u0639\u2026 \u0627\u0643\u062a\u0634\u0641 \u0637\u0631\u064a\u0642 \u0637\u0641\u0644\u0643 \u0646\u062d\u0648 \u0627\u0644\u0646\u062c\u0627\u062d!<\/p>\r\n <\/div>\r\n <div class=\"roeyaWrap7\">\r\n <div class=\"roeyaGrid7\" id=\"roeyaGrid7\">\r\n <div class=\"roeyaSkel7\"><\/div>\r\n <div class=\"roeyaSkel7\"><\/div>\r\n <div class=\"roeyaSkel7\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <style>\r\n .new-cta-wrapper { padding: 60px 0 100px; background: var(--white); }\r\n .new-cta-card {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n padding: 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 30px;\r\n background: linear-gradient(135deg,\r\n #c8972e 0%,\r\n #deb253 18%,\r\n #f2cc76 38%,\r\n #faeaa8 55%,\r\n #f5d780 72%,\r\n #deb253 88%,\r\n #c9962d 100%\r\n );\r\n box-shadow: 0 25px 60px -10px rgba(180, 140, 60, 0.35);\r\n }\r\n .new-cta-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -35%;\r\n right: -6%;\r\n width: 420px;\r\n height: 420px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);\r\n filter: blur(20px);\r\n pointer-events: none;\r\n }\r\n .new-cta-card::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 5%;\r\n right: 18%;\r\n width: 160px;\r\n height: 160px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n filter: blur(6px);\r\n pointer-events: none;\r\n }\r\n .new-cta-card.is-animated {\r\n background-size: 300% 300%;\r\n animation: ctaGradient 10s ease-in-out infinite;\r\n }\r\n .new-cta-content { position: relative; z-index: 2; flex: 1; }\r\n .new-cta-content h2 {\r\n font-size: 2rem; font-weight: 700; color: var(--roeya-blue);\r\n margin-bottom: 12px; line-height: 1.2;\r\n }\r\n .new-cta-content p { font-size: 1rem; color: var(--roeya-blue-dark); opacity: 0.85; max-width: 500px; }\r\n .new-cta-action { position: relative; z-index: 2; flex-shrink: 0; }\r\n .btn-cta-primary {\r\n display: inline-flex; align-items: center; gap: 10px; background: var(--roeya-blue);\r\n color: #ffffff !important; padding: 18px 45px; border-radius: 50px; font-weight: 700; font-size: 0.95rem;\r\n transition: all 0.6s ease; box-shadow: 0 10px 20px rgba(35, 45, 80, 0.2); text-decoration: none;\r\n box-sizing: border-box;\r\n }\r\n .btn-cta-primary:hover {\r\n background: var(--roeya-blue-dark); \r\n color: #c9a87f !important;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(35, 45, 80, 0.3);\r\n }\r\n .btn-cta-primary i { transition: transform 0.6s ease; }\r\n .btn-cta-primary:hover i { transform: translateX(-5px); color: #c9a87f; }\r\n\r\n @keyframes ctaGradient {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n \r\n @media (max-width: 991px) {\r\n .new-cta-card { flex-direction: column; text-align: center; padding: 60px 30px; }\r\n .new-cta-content p { margin: 0 auto 30px; }\r\n .new-cta-content h2 { font-size: 1.7rem; }\r\n .new-cta-action { width: 100%; }\r\n .btn-cta-primary { width: 100%; justify-content: center; }\r\n }\r\n @media (max-width: 768px) {\r\n .new-cta-wrapper { padding: 40px 0 80px; }\r\n .new-cta-content h2 { font-size: 1.5rem; }\r\n .new-cta-card::before {\r\n width: 240px;\r\n height: 240px;\r\n top: -45%;\r\n right: -18%;\r\n }\r\n .new-cta-card::after {\r\n width: 120px;\r\n height: 120px;\r\n right: 10%;\r\n }\r\n }\r\n <\/style>\r\n\r\n <section class=\"rw-section new-cta-wrapper\">\r\n <div class=\"rw-container\">\r\n <div class=\"new-cta-card reveal-up is-animated\">\r\n <div class=\"new-cta-content\">\r\n <h2>\u0639\u0631\u0636 \u0627\u0644\u0627\u0641\u062a\u062a\u0627\u062d \u0627\u0644\u0643\u0628\u064a\u0631!<\/h2>\r\n \r\n <ul class=\"check-list\">\r\n <li><i class=\"fas fa-check\"><\/i>\u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0645\u062c\u0627\u0646\u064b\u0627<\/li>\r\n <li><i class=\"fas fa-check\"><\/i>\u0645\u0648\u0627\u062f \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/li>\r\n <li><i class=\"fas fa-check\"><\/i>\u062d\u0635\u0629 \u062a\u062c\u0631\u064a\u0628\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/li>\r\n \r\n\u0627\u0644\u0623\u0645\u0627\u0643\u0646 \u0645\u062d\u062f\u0648\u062f\u0629 \u2014 \u0627\u062d\u062c\u0632 \u0645\u0642\u0639\u062f \u0637\u0641\u0644\u0643 \u0627\u0644\u064a\u0648\u0645 \u0642\u0628\u0644 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u0641\u0631\u0635!\r\n\r\n <\/div>\r\n <div class=\"new-cta-action\">\r\n <a href=\"https:\/\/roeyaacademy.com\/ar\/courses\/\" class=\"btn-cta-primary\">\r\n \u0633\u062c\u0644 \u0627\u0644\u0622\u0646 <i class=\"fas fa-arrow-left\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n<\/div>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \r\n const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n observer.unobserve(entry.target); \r\n }\r\n });\r\n }, observerOptions);\r\n\r\n const els = document.querySelectorAll('.reveal-up, .slide-from-left, .slide-from-right');\r\n els.forEach(el => observer.observe(el));\r\n\r\n (function(){\r\n const gridEl7 = document.getElementById(\"roeyaGrid7\");\r\n if(!gridEl7) return;\r\n\r\n const apiUrl7 = \"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/our-courses?per_page=3&_embed=1\";\r\n const regularKeys7 = [\"regular_price\",\"regularPrice\",\"price_regular\",\"course_regular_price\"];\r\n const discountKeys7 = [\"discount_price\",\"discountPrice\",\"price_discount\",\"course_discount_price\"];\r\n const currencyText7 = '<img decoding=\"async\" src=\"https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/01\/Saudi_Riyal_Symbol.svg.png\" style=\"height:20px;vertical-align:middle;display:inline;width:auto;\" alt=\"\u0631\u064a\u0627\u0644\">';\r\n const esc7 = (s)=> String(s ?? \"\").replaceAll(\"&\",\"&\").replaceAll(\"<\",\"<\").replaceAll(\">\",\">\").replaceAll('\"',\""\").replaceAll(\"'\",\"'\");\r\n const stripHtml7 = (html)=> String(html ?? \"\").replace(\/<[^>]*>\/g,\"\").replace(\/\\s+\/g,\" \").trim();\r\n const pickFeaturedImage7 = (item)=>{ try{ const m7 = item?._embedded?.[\"wp:featuredmedia\"]?.[0]; return m7?.source_url || m7?.media_details?.sizes?.medium_large?.source_url || \"\"; }catch(e){ return \"\"; } };\r\n const pickFirstTermName7 = (item)=>{ try{ const termGroups7 = item?._embedded?.[\"wp:term\"] || []; for(const group7 of termGroups7){ if(Array.isArray(group7) && group7.length){ const t7 = group7[0]; if(t7?.name) return String(t7.name).toUpperCase(); } } }catch(e){} return \"\u062f\u0648\u0631\u0629\"; };\r\n const pickMetaNumber7 = (meta7, keys7)=>{ for(const k7 of keys7){ const v7 = meta7?.[k7]; if(v7 !== undefined && v7 !== null && String(v7).trim() !== \"\"){ const n7 = Number(String(v7).replace(\/[^\\d.]\/g,\"\")); if(!Number.isNaN(n7)) return n7; } } return null; };\r\n const formatPrice7 = (n7)=>{ const v7 = Math.round(Number(n7)); return Number.isFinite(v7) ? String(v7) : \"\"; };\r\n\r\n const renderCard7 = (item7)=>{\r\n const title7 = esc7(item7?.title?.rendered || \"\");\r\n const link7 = esc7(item7?.link || \"#\");\r\n const img7 = pickFeaturedImage7(item7);\r\n const cat7 = esc7(pickFirstTermName7(item7));\r\n const desc7 = esc7(stripHtml7(item7?.excerpt?.rendered || \"\"));\r\n const meta7 = item7?.meta || {};\r\n const regular7 = pickMetaNumber7(meta7, regularKeys7);\r\n const discount7 = pickMetaNumber7(meta7, discountKeys7);\r\n const hasBoth7 = (regular7 !== null && discount7 !== null && discount7 > 0);\r\n const newVal7 = hasBoth7 ? discount7 : (regular7 ?? discount7);\r\n const oldVal7 = hasBoth7 ? regular7 : null;\r\n \r\n \/\/ --- UPDATED JS: Wrap number in roeyaOldVal to isolate strike-through ---\r\n const priceHtml7 = (newVal7 === null) ? \r\n `<div class=\"roeyaPrice7\"><div class=\"roeyaNew7\">\u2014<\/div><\/div>` : \r\n `<div class=\"roeyaPrice7\">\r\n ${oldVal7 !== null ? `<div class=\"roeyaOld7\"><span class=\"roeyaOldVal\">${formatPrice7(oldVal7)}<\/span>${currencyText7}<\/div>` : ``}\r\n <div class=\"roeyaNew7\">${formatPrice7(newVal7)}<span class=\"roeyaCurr7\">${currencyText7}<\/span><\/div>\r\n <\/div>`;\r\n \r\n const imgHtml7 = img7 ? `<img decoding=\"async\" src=\"${esc7(img7)}\" alt=\"${title7}\" loading=\"lazy\">` : `<div style=\"width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:900;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0635\u0648\u0631\u0629<\/div>`;\r\n\r\n return `\r\n <article class=\"roeyaCard7 reveal-up\">\r\n <div class=\"roeyaImg7\"><a class=\"roeyaLink7\" href=\"${link7}\" aria-label=\"${title7}\">${imgHtml7}<\/a><\/div>\r\n <div class=\"roeyaBody7\">\r\n <div class=\"roeyaCat7\">${cat7}<\/div>\r\n <h3 class=\"roeyaTitle7\"><a class=\"roeyaLink7\" href=\"${link7}\">${title7}<\/a><\/h3>\r\n <p class=\"roeyaDesc7\">${desc7 || \" \"}<\/p>\r\n <div class=\"roeyaDivider7\"><\/div>\r\n <\/div>\r\n <div class=\"roeyaBottom7\">\r\n ${priceHtml7}\r\n <a class=\"roeyaLink7\" href=\"${link7}\"><button class=\"roeyaBtn7\" type=\"button\">\u0639\u0631\u0636 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644<\/button><\/a>\r\n <\/div>\r\n <\/article>`;\r\n };\r\n\r\n fetch(apiUrl7).then(res7 => { if(!res7.ok) throw new Error(\"HTTP \" + res7.status); return res7.json(); }).then(list7 => {\r\n if(!Array.isArray(list7) || !list7.length){ gridEl7.innerHTML = \"\"; return; }\r\n gridEl7.innerHTML = list7.map(renderCard7).join(\"\");\r\n document.querySelectorAll('.roeyaCard7').forEach(el => observer.observe(el));\r\n }).catch(err7 => { console.log(\"RoeyaCoursesAPIError7:\", err7); gridEl7.innerHTML = \"\"; });\r\n })();\r\n });\r\n<\/script>\r\n\r\n\r\n<style>\r\n.testimonial-section { background-color: #f9f9f9; padding: 60px 20px; }\r\n.testi-container { max-width: 1200px; margin: 0 auto; }\r\n.testi-header { text-align: center; margin-bottom: 40px; }\r\n.testi-header h2 { color: #333; font-size: 2rem; margin-bottom: 10px; font-weight: 800; }\r\n.testi-header p { color: #666; }\r\n.testi-wrapper { position: relative; display: flex; align-items: center; justify-content: center; }\r\n.testi-btn {\r\n background: #fff; border: 1px solid #ddd; color: #333; width: 45px; height: 45px; border-radius: 50%;\r\n cursor: pointer; font-size: 1.2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.6s ease; z-index: 10; position: absolute;\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.testi-btn:hover { background: #333; color: #fff; }\r\n\/* Swapped buttons for RTL - User requested swap locations *\/\r\n.prev-btn { left: -20px; right: auto; } \r\n.next-btn { right: -20px; left: auto; }\r\n.testi-track-container { overflow: hidden; width: 100%; padding: 10px 0; }\r\n.testi-track { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 0.6s ease-in-out; will-change: transform; }\r\n.testi-card { flex: 0 0 33.333%; padding: 0 15px; box-sizing: border-box; }\r\n\r\n.card-content {\r\n background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n height: 100%; display: flex; flex-direction: column; justify-content: space-between;\r\n transition: transform 0.6s ease, box-shadow 0.6s ease; \r\n text-align: right;\r\n}\r\n\r\n.testi-card:hover .card-content {\r\n transform: scale(1.05);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1); \r\n}\r\n\r\n.quote { font-style: italic; color: #555; line-height: 1.6; margin-bottom: 20px; font-size: 0.9rem; }\r\n .user-info { display: flex; align-items: center; gap: 15px; border-top: 1px solid #eee; padding-top: 20px; padding-bottom: 20px; }\r\n.user-info img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }\r\n.user-info h4 { margin: 0; color: #333; font-size: 0.9rem; }\r\n.user-info span { font-size: 0.75rem; color: #888; }\r\n\r\n\/* New: ensure arrows point correctly for left\/right buttons (swap flip) *\/\r\n.testi-btn .arrow { display: inline-block; font-size: 1.2rem; line-height: 1; }\r\n\/* Prev is positioned on the right in RTL layout \u2014 points Right (default) *\/\r\n.prev-btn .arrow { transform: none; }\r\n\/* Next is positioned on the left in RTL layout \u2014 points Left (flipped) *\/\r\n.next-btn .arrow { transform: scaleX(-1); }\r\n\r\n@media (max-width: 992px) { .testi-card { flex: 0 0 50%; } }\r\n\r\n@media (max-width: 768px) { \r\n .testi-card { flex: 0 0 100%; } \r\n .testi-wrapper { padding-bottom: 60px; }\r\n .testi-btn { top: auto; bottom: 0; transform: none; }\r\n .prev-btn { left: calc(50% - 60px); right: auto; }\r\n .next-btn { right: calc(50% - 60px); left: auto; }\r\n .testi-header h2 { font-size: 1.6rem; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"testimonial-section\">\r\n <div class=\"testi-container\">\r\n <div class=\"testi-header\">\r\n <h2>\u0622\u0631\u0627\u0621 \u0623\u0648\u0644\u064a\u0627\u0621 \u0627\u0644\u0623\u0645\u0648\u0631 \u0648\u0637\u0644\u0627\u0628\u0646\u0627<\/h2>\r\n <p> \u0642\u0635\u0635 \u062d\u0642\u064a\u0642\u064a\u0629\u2026 \u062a\u0642\u062f\u0645 \u0645\u0644\u0645\u0648\u0633\u2026 \u0648\u062b\u0642\u0629 \u062a\u0646\u0645\u0648 \u0645\u0639 \u0643\u0644 \u062e\u0637\u0648\u0629!<\/p>\r\n <\/div>\r\n <div class=\"testi-wrapper\">\r\n <button class=\"testi-btn prev-btn\" aria-label=\"\u0627\u0644\u0633\u0627\u0628\u0642\"><span class=\"arrow\">❯<\/span><\/button>\r\n <button class=\"testi-btn next-btn\" aria-label=\"\u0627\u0644\u062a\u0627\u0644\u064a\"><span class=\"arrow\">❯<\/span><\/button>\r\n <div class=\"testi-track-container\">\r\n <ul class=\"testi-track\">\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u0648\u0644 \u0627\u0644\u0644\u064a \u0633\u0648\u0648\u0647 \u0623\u0639\u0637\u0627\u0646\u0627 \u0641\u0643\u0631\u0629 \u0648\u0627\u0636\u062d\u0629 \u0639\u0646 \u0645\u0633\u062a\u0648\u0627\u0647\u0627. \u0627\u0644\u0645\u062f\u0631\u0633\u064a\u0646 \u0647\u0646\u0627 \u0645\u062d\u062a\u0631\u0641\u064a\u0646 \u0648\u0643\u0644 \u062e\u0637\u0648\u0629 \u0645\u062a\u0627\u0628\u0639\u0629 \u062f\u0642\u064a\u0642\u0629.\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u0641\u0627\u0637\u0645\u0629 <\/h4><span> \u0623\u0645 \u0644\u064a\u0644\u0649\u060c 7 \u0633\u0646\u0648\u0627\u062a<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u064a\u0639\u0646\u064a \u0628\u0635\u0631\u0627\u062d\u0629\u060c \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0645\u0646\u0638\u0645\u0629 \u0648\u0634\u0641\u0627\u0641\u0629\u060c \u0643\u0644 \u0623\u0633\u0628\u0648\u0639 \u0646\u0634\u0648\u0641 \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a\u060c \u0648\u0627\u0644\u0623\u0645\u0648\u0631\u0647 \u0648\u0627\u0636\u062d\u0629 \u0628\u062f\u0648\u0646 \u0623\u064a \u0644\u062e\u0628\u0637\u0629.\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u0647\u0646\u062f <\/h4><span>\u0623\u0645 \u0633\u0627\u0631\u0629\u060c 8 \u0633\u0646\u0648\u0627\u062a <\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u0627\u0644\u062d\u0635\u0635 \u0645\u0645\u062a\u0639\u0629 \u0648\u062a\u0641\u0627\u0639\u0644\u064a\u0629\u060c \u0645\u0648 \u0628\u0633 \u062f\u0631\u0633 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u060c \u0627\u0644\u0637\u0641\u0644 \u0635\u0627\u0631 \u064a\u062a\u0643\u0644\u0645 \u0648\u064a\u0637\u0628\u0642 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a \u0641\u064a \u0627\u0644\u0628\u064a\u062a!\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u0645\u062d\u0645\u062f<\/h4><span>\u0623\u0628 \u0644\u0623\u062d\u0645\u062f\u060c 11 \u0633\u0646\u0629 <\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"testi-card\">\r\n <div class=\"card-content\">\r\n <p class=\"quote\">\"\u0643\u0627\u0646\u062a \u062a\u062c\u0631\u0628\u0629 \u0631\u0627\u0626\u0639\u0629\u060c \u0627\u0628\u0646\u0646\u0627 \u0635\u0627\u0631 \u0639\u0646\u062f\u0647 \u062b\u0642\u0629 \u0643\u0628\u064a\u0631\u0629\u060c \u0648\u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0633\u0647\u0644 \u0639\u0644\u064a\u0647 \u0627\u0644\u0641\u0647\u0645\u060c \u0648\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0644\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0643\u0627\u0645\u0628\u0631\u064a\u062f\u062c \u0643\u0627\u0646 \u0633\u0644\u0633.\"<\/p>\r\n <div class=\"user-info\">\r\n <div><h4>\u064a\u0648\u0633\u0641<\/h4><span>\u0623\u0628 \u0644\u0631\u064a\u0645\u060c 10 \u0633\u0646\u0648\u0627\u062a<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const track = document.querySelector('.testi-track');\r\n if (!track) return;\r\n const wrapper = document.querySelector('.testi-wrapper');\r\n const nextBtn = document.querySelector('.next-btn');\r\n const prevBtn = document.querySelector('.prev-btn');\r\n\r\n \/\/ keep a copy of the original slides (used to rebuild on resize)\r\n const originalSlides = Array.from(track.children).map(n => n.cloneNode(true));\r\n let itemsPerSlide = getItemsPerSlide();\r\n let currentIndex = 0;\r\n let autoPlayTimer = null;\r\n\r\n function getItemsPerSlide() {\r\n if (window.innerWidth <= 768) return 1;\r\n if (window.innerWidth <= 992) return 2;\r\n return 3;\r\n }\r\n\r\n function setupCarousel() {\r\n itemsPerSlide = getItemsPerSlide();\r\n track.innerHTML = '';\r\n\r\n const slides = originalSlides.map(n => n.cloneNode(true));\r\n const prependClones = slides.slice(-itemsPerSlide).map(n => { const c = n.cloneNode(true); c.classList.add('clone'); return c; });\r\n const appendClones = slides.slice(0, itemsPerSlide).map(n => { const c = n.cloneNode(true); c.classList.add('clone'); return c; });\r\n\r\n prependClones.forEach(n => track.appendChild(n));\r\n slides.forEach(n => track.appendChild(n));\r\n appendClones.forEach(n => track.appendChild(n));\r\n\r\n \/\/ start at first real slide (accounting for prepended clones)\r\n currentIndex = itemsPerSlide;\r\n updateCarousel(false);\r\n\r\n \/\/ re-enable transitions after immediate positioning\r\n requestAnimationFrame(() => { track.style.transition = ''; });\r\n }\r\n\r\n function updateCarousel(animate = true) {\r\n const firstCard = track.querySelector('.testi-card');\r\n const itemWidth = firstCard ? firstCard.getBoundingClientRect().width : 0;\r\n if (!animate) track.style.transition = 'none';\r\n \/\/ RTL Adjustment: Use positive translateX to move leftwards content into view\r\n track.style.transform = `translateX(${ currentIndex * itemWidth }px)`;\r\n if (!animate) requestAnimationFrame(() => { track.style.transition = ''; });\r\n }\r\n\r\n function slideNext() { currentIndex++; updateCarousel(); }\r\n function slidePrev() { currentIndex--; updateCarousel(); }\r\n\r\n \/\/ when we hit cloned slides, jump instantly to the corresponding real slide (no gap)\r\n track.addEventListener('transitionend', () => {\r\n const originalsCount = originalSlides.length;\r\n const total = track.children.length; \/\/ originals + 2 * clones\r\n\r\n if (currentIndex >= originalsCount + itemsPerSlide) {\r\n \/\/ moved into appended clones -> reset to first original\r\n track.style.transition = 'none';\r\n currentIndex = itemsPerSlide;\r\n updateCarousel(false);\r\n } else if (currentIndex < itemsPerSlide) {\r\n \/\/ moved into prepended clones -> reset to last original\r\n track.style.transition = 'none';\r\n currentIndex = originalsCount + itemsPerSlide - 1;\r\n updateCarousel(false);\r\n }\r\n });\r\n\r\n function startAutoPlay() { stopAutoPlay(); autoPlayTimer = setInterval(() => slideNext(), 3500); }\r\n function stopAutoPlay() { if (autoPlayTimer) { clearInterval(autoPlayTimer); autoPlayTimer = null; } }\r\n function resetTimer() { stopAutoPlay(); startAutoPlay(); }\r\n\r\n nextBtn.addEventListener('click', () => { slideNext(); resetTimer(); });\r\n prevBtn.addEventListener('click', () => { slidePrev(); resetTimer(); });\r\n\r\n wrapper.addEventListener('mouseenter', stopAutoPlay);\r\n wrapper.addEventListener('mouseleave', startAutoPlay);\r\n\r\n window.addEventListener('resize', debounce(() => {\r\n const newItems = getItemsPerSlide();\r\n if (newItems !== itemsPerSlide) setupCarousel(); else updateCarousel(false);\r\n }, 200));\r\n\r\n setupCarousel();\r\n startAutoPlay();\r\n\r\n function debounce(fn, wait) { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), wait); }; }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n<style>\r\n .rb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; }\r\n .rb-card {\r\n background: #ffffff; border: 1px solid #f1f2f3; border-radius: 12px; overflow: hidden;\r\n display: flex; flex-direction: column; transition: all 0.6s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.03);\r\n }\r\n .rb-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-bottom: 3px solid var(--roeya-gold); }\r\n .rb-media { height: 220px; overflow: hidden; position: relative; background-color: #eee; }\r\n .rb-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\r\n .rb-card:hover .rb-media img { transform: scale(1.08); }\r\n .rb-tag {\r\n position: absolute; top: 15px; right: 15px; left: auto; background: rgba(255, 255, 255, 0.95);\r\n color: var(--roeya-blue); padding: 5px 10px; font-size: 9px; font-weight: 700;\r\n border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 2;\r\n }\r\n .rb-body { padding: 24px 24px 20px 24px; display: flex; flex-direction: column; flex: 1; text-align: right; }\r\n .rb-meta {\r\n display: flex; align-items: center; gap: 10px; font-size: 10px; color: #94a3b8;\r\n font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;\r\n }\r\n .rb-meta i { color: var(--roeya-gold); }\r\n .rb-title {\r\n font-size: 1.2rem; font-weight: 700; color: var(--roeya-blue);\r\n line-height: 1.4; margin: 0 0 12px 0; display: -webkit-box; -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical; overflow: hidden;\r\n }\r\n .rb-title a { color: var(--roeya-blue); text-decoration: none; transition: 0.6s; }\r\n .rb-title a:hover { color: var(--roeya-gold); }\r\n .rb-excerpt {\r\n font-size: 0.9rem; line-height: 1.6; color: #6b7280; display: -webkit-box;\r\n -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px;\r\n }\r\n .rb-footer { margin-top: auto; border-top: 1px solid #f1f2f3; padding: 15px 24px; display: flex; justify-content: flex-end; }\r\n .rb-read-more {\r\n font-size: 12px; font-weight: 700; color: var(--roeya-gold); text-decoration: none;\r\n display: inline-flex; align-items: center; gap: 6px; transition: 0.6s;\r\n }\r\n .rb-read-more:hover { color: var(--roeya-blue); transform: translateX(-5px); }\r\n .rb-note { text-align: center; width: 100%; color: #6b7280; padding: 20px; }\r\n .rb-skel {\r\n height: 400px; border-radius: 12px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);\r\n background-size: 200% 100%; animation: roeyaSkelAnim7 2.4s infinite linear;\r\n }\r\n @media (max-width: 991px) { .rb-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 600px) { .rb-grid { grid-template-columns: 1fr; } }\r\n<\/style>\r\n\r\n<section class=\"rw-section bg-light\">\r\n <div class=\"rw-container\">\r\n <div class=\"section-header reveal-up\">\r\n <h2>\u0646\u0635\u0627\u0626\u062d \u0648\u0623\u062e\u0628\u0627\u0631 <span>\u0644\u0623\u0648\u0644\u064a\u0627\u0621 \u0627\u0644\u0623\u0645\u0648\u0631 <\/span><\/h2>\r\n <p> \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u0641\u064a\u062f\u0629 \u0648\u0645\u0645\u062a\u0639\u0629 \u062a\u0642\u062f\u0651\u0645 \u0644\u0643 \u0623\u0641\u0636\u0644 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0637\u0641\u0644\u0643 \u0641\u064a \u0627\u0644\u062a\u0639\u0644\u0645 \u0648\u0627\u0644\u062d\u064a\u0627\u0629.<\/p>\r\n <\/div>\r\n <div id=\"rbGrid\" class=\"rb-grid\">\r\n <div class=\"rb-skel\"><\/div><div class=\"rb-skel\"><\/div><div class=\"rb-skel\"><\/div>\r\n <\/div>\r\n <div id=\"rbNote\" class=\"rb-note\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n const origin = \"https:\/\/roeyaacademy.com\/ar\"; \r\n const grid = document.getElementById(\"rbGrid\");\r\n const note = document.getElementById(\"rbNote\");\r\n const clean = (html) => (html || \"\").toString().replace(\/<[^>]*>\/g,\" \").replace(\/\\s+\/g,\" \").trim();\r\n const fmtDate = (iso) => { try{ return new Date(iso).toLocaleDateString('ar-EG',{year:\"numeric\",month:\"short\",day:\"numeric\"}); }catch(e){ return \"\"; } };\r\n const perPage = 3; \r\n\r\n function makeCard(post){\r\n const title = clean(post?.title?.rendered) || \"\u0628\u0644\u0627 \u0639\u0646\u0648\u0627\u0646\";\r\n const ex = clean(post?.excerpt?.rendered) || \"\";\r\n const href = post?.link || \"#\";\r\n const img = post?._embedded?.[\"wp:featuredmedia\"]?.[0]?.source_url || \"\";\r\n const cat = (post?._embedded?.[\"wp:term\"]||[]).flat().find(t=>t.taxonomy===\"category\");\r\n const date = fmtDate(post?.date);\r\n\r\n const card = document.createElement(\"article\");\r\n card.className = \"rb-card reveal-up\";\r\n \r\n card.innerHTML = `\r\n <div class=\"rb-media\">\r\n ${cat ? `<div class=\"rb-tag\">${cat.name}<\/div>` : \"\"}\r\n <a href=\"${href}\">\r\n ${img ? `<img decoding=\"async\" src=\"${img}\" alt=\"${title}\" loading=\"lazy\">` : `<div style=\"width:100%;height:100%;background:#eee;display:flex;align-items:center;justify-content:center;color:#ccc;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0635\u0648\u0631\u0629<\/div>`}\r\n <\/a>\r\n <\/div>\r\n <div class=\"rb-body\">\r\n <div class=\"rb-meta\"><i class=\"far fa-calendar-alt\"><\/i> ${date}<\/div>\r\n <h3 class=\"rb-title\"><a href=\"${href}\">${title}<\/a><\/h3>\r\n <p class=\"rb-excerpt\">${ex}<\/p>\r\n <\/div>\r\n <div class=\"rb-footer\">\r\n <a class=\"rb-read-more\" href=\"${href}\">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f <i class=\"fas fa-arrow-left\"><\/i><\/a>\r\n <\/div>\r\n `;\r\n return card;\r\n }\r\n\r\n async function fetchPosts(){\r\n const url = `${origin}\/wp-json\/wp\/v2\/posts?_embed=1&page=1&per_page=${perPage}`;\r\n try{\r\n const res = await fetch(url);\r\n if(!res.ok){ grid.innerHTML = \"\"; note.textContent = \"\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0642\u0627\u0644\u0627\u062a.\"; return; }\r\n const posts = await res.json();\r\n grid.innerHTML = \"\";\r\n posts.forEach(p => {\r\n const card = makeCard(p);\r\n grid.appendChild(card);\r\n if(window.IntersectionObserver){\r\n const observer = new IntersectionObserver((entries)=>{\r\n entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('active'); }); \r\n }, {threshold:0.1});\r\n observer.observe(card);\r\n } else { card.classList.add('active'); }\r\n });\r\n }catch(e){ grid.innerHTML = \"\"; note.textContent=\"\u0641\u0634\u0644 \u0641\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a.\"; }\r\n }\r\n fetchPosts();\r\n})();\r\n<\/script>\r\n\r\n\r\n\r\n<style>\r\n .back-to-top {\r\n position: fixed; bottom: 30px; right: 30px; left: auto; width: 40px; height: 40px; border: 2px solid #c8ac82;\r\n border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none;\r\n z-index: 999; background: transparent; opacity: 0; visibility: hidden; transform: translateY(20px);\r\n transition: all 0.6s ease; pointer-events: none;\r\n }\r\n .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }\r\n .back-to-top svg {\r\n width: 20px; height: 20px; stroke: #c8ac82; stroke-width: 2.5; fill: none; stroke-linecap: round;\r\n stroke-linejoin: round; transition: stroke 0.6s ease;\r\n }\r\n .back-to-top:hover { background-color: #c8ac82; }\r\n .back-to-top:hover svg { stroke: #ffffff; }\r\n<\/style>\r\n\r\n<a href=\"#\" class=\"back-to-top\" aria-label=\"\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"><\/line>\r\n <polyline points=\"5 12 12 5 19 12\"><\/polyline>\r\n <\/svg>\r\n<\/a>\r\n\r\n<script>\r\n const backToTopButton = document.querySelector('.back-to-top');\r\n window.addEventListener('scroll', () => {\r\n const scrollTop = window.scrollY;\r\n const docHeight = document.documentElement.scrollHeight;\r\n const winHeight = window.innerHeight;\r\n const scrollPercent = (scrollTop \/ (docHeight - winHeight)) * 100;\r\n if (scrollPercent >= 50) { \r\n backToTopButton.classList.add('show'); \r\n } else { \r\n backToTopButton.classList.remove('show'); \r\n }\r\n });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0631\u0624\u064a\u0629 – \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0643\u062a\u0634\u0641 \u0635\u0648\u062a \u0637\u0641\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u2026 \u0648\u0627\u062c\u0639\u0644\u0647 \u0645\u0644\u0643\u064b\u0627 \u0644\u0647 \u062a\u0639\u0644\u0645\u2026 \u0645\u062a\u0639\u0629\u2026 \u0645\u0645\u0627\u0631\u0633\u0629\u2026 \u0643\u0644 \u062e\u0637\u0648\u0629 \u064a\u062e\u0637\u0648\u0647\u0627 \u0637\u0641\u0644\u0643 \u062a\u064f\u062a\u0627\u0628\u0639\u060c \u062a\u064f\u0642\u064a\u064e\u0651\u0645\u060c \u0648\u062a\u064f\u0633\u062c\u064e\u0651\u0644\u060c \u0644\u062a\u0639\u0631\u0641 \u062f\u0627\u0626\u0645\u064b\u0627 \u0645\u062f\u0649 \u062a\u0642\u062f\u0645\u0647. \u0641\u064a \u0631\u0624\u064a\u0629 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u060c \u0644\u0627 \u0646\u0642\u062f\u0645 \u0645\u062c\u0631\u062f \u0643\u0648\u0631\u0633 \u0644\u063a\u0629 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0623\u0648\u0646\u0644\u0627\u064a\u0646\u060c \u0628\u0644 \u062a\u062c\u0631\u0628\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0637\u0641\u0644\u0643. \u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u062a\u0635\u0641\u062d \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0645\u062d\u0627\u0636\u0631\u0648\u0646 \u0645\u0624\u0647\u0644\u0648\u0646 \u0645\u062f\u0631\u0633\u0648\u0646 \u0645\u0639\u062a\u0645\u062f\u0648\u0646 \u0648\u0645\u062d\u062a\u0631\u0641\u0648\u0646. \u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629\u2026 \u0646\u062a\u0627\u0626\u062c \u0645\u0644\u0645\u0648\u0633\u0629. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":669,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":3304,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/12\/revisions\/3304"}],"wp:attachment":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}