{"id":2,"date":"2019-08-20T08:31:33","date_gmt":"2019-08-20T05:31:33","guid":{"rendered":"https:\/\/roayae.org\/?page_id=2"},"modified":"2026-07-27T17:19:54","modified_gmt":"2026-07-27T14:19:54","slug":"home-2","status":"publish","type":"page","link":"https:\/\/roayae.org\/ar\/","title":{"rendered":"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Roaya Hero Section<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\"\/>\r\n <style>\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .hero-section {\r\n position: relative;\r\n height: 100vh;\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .hero-image {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n z-index: -1;\r\n animation: slowZoom 20s infinite alternate;\r\n }\r\n @keyframes slowZoom {\r\n from { transform: scale(1); }\r\n to { transform: scale(1.1); }\r\n }\r\n \/* \u0646\u0635 \u0623\u0628\u064a\u0636 \u0648\u0627\u0636\u062d \u0645\u0639 \u0638\u0644 \u062e\u0641\u064a\u0641 \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u062f\u0648\u0646 \u062a\u063a\u0637\u064a\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 \u0628\u0641\u0644\u0627\u062a\u0631 *\/\r\n .text-glow {\r\n color: #ffffff !important;\r\n text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5), 0px 0px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n .btn-primary {\r\n background-color: #00a6b6;\r\n transition: all 0.3s ease;\r\n }\r\n .btn-primary:hover {\r\n background-color: #008c9a;\r\n transform: translateY(-2px);\r\n }\r\n .btn-secondary {\r\n background-color: rgba(255, 255, 255, 1);\r\n color: #00a6b6;\r\n transition: all 0.3s ease;\r\n }\r\n .btn-secondary:hover {\r\n background-color: #f8f9fa;\r\n transform: translateY(-2px);\r\n }\r\n [lang=\"en\"] {\r\n font-family: sans-serif;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero-section\">\r\n <!-- \u0635\u0648\u0631\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0634\u0641\u0627\u0641\u0629 \u0648\u0628\u062f\u0648\u0646 \u0623\u064a \u0641\u0644\u0627\u062a\u0631 \u063a\u0627\u0645\u0642\u0629 -->\r\n <img decoding=\"async\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/4r-1.jpg\" alt=\"Roaya\" class=\"hero-image\">\r\n\r\n <div class=\"container mx-auto px-6 text-center relative z-10\">\r\n <div class=\"flex flex-col items-center justify-center animate__animated animate__fadeInUp\">\r\n <!-- \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 -->\r\n <div class=\"mb-6\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-16 h-16 md:w-20 md:h-20 text-white drop-shadow-lg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 -->\r\n <h1 id=\"hero-title\" class=\"text-glow text-3xl md:text-6xl font-extrabold mb-4 leading-tight\"><\/h1>\r\n <p id=\"hero-subtitle\" class=\"text-glow text-lg md:text-2xl font-medium max-w-3xl mx-auto mb-10 leading-relaxed\"><\/p>\r\n\r\n <!-- \u0627\u0644\u0623\u0632\u0631\u0627\u0631 -->\r\n <div class=\"flex flex-wrap gap-4 justify-center\">\r\n <a id=\"btn-1\" href=\"#\" class=\"btn-primary text-white px-8 py-3 rounded-full font-bold text-lg shadow-xl\"><\/a>\r\n <a id=\"btn-2\" href=\"#\" class=\"btn-secondary px-8 py-3 rounded-full font-bold text-lg shadow-xl\"><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n function updateContent() {\r\n const isEn = document.documentElement.lang === 'en';\r\n const dir = isEn ? 'ltr' : 'rtl';\r\n document.documentElement.dir = dir;\r\n\r\n const content = {\r\n ar: {\r\n t: \"\u0631\u0624\u064a\u0629 \u062b\u0627\u0642\u0628\u0629.. \u0648\u0645\u0633\u062a\u0642\u0628\u0644 \u0645\u0634\u0631\u0642\",\r\n s: \"\u062a\u0642\u0646\u064a\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629 \u0641\u064a \u0637\u0628 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629 \u0628\u0623\u0639\u0644\u0649 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062c\u0648\u062f\u0629 \u0648\u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0637\u0628\u064a\u0629.\",\r\n b1: \"\u0627\u062d\u062c\u0632 \u0645\u0648\u0639\u062f\u064b\u0627\",\r\n b2: \"\u0627\u0644\u062e\u062f\u0645\u0627\u062a\",\r\n link1: \"\/ar\/contact-us\/\",\r\n link2: \"\/ar\/services\/\"\r\n },\r\n en: {\r\n t: \"Clear Vision.. Bright Future\",\r\n s: \"Advanced ophthalmology and retina care with the highest standards of quality and medical excellence.\",\r\n b1: \"Book Appointment\",\r\n b2: \"Our Services\",\r\n link1: \"\/en\/contact-us\/\",\r\n link2: \"\/en\/services\/\"\r\n }\r\n };\r\n\r\n const data = isEn ? content.en : content.ar;\r\n\r\n document.getElementById('hero-title').textContent = data.t;\r\n document.getElementById('hero-subtitle').textContent = data.s;\r\n document.getElementById('btn-1').textContent = data.b1;\r\n document.getElementById('btn-1').href = data.link1;\r\n document.getElementById('btn-2').textContent = data.b2;\r\n document.getElementById('btn-2').href = data.link2;\r\n }\r\n\r\n \/\/ \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0623\u0648\u0644\u064a\r\n updateContent();\r\n\r\n \/\/ \u0645\u0631\u0627\u0642\u0628\u0629 \u062a\u063a\u064a\u064a\u0631 \u0633\u0645\u0629 \u0627\u0644\u0644\u063a\u0629 (lang) \u0641\u064a \u062d\u0627\u0644 \u062a\u0645 \u062a\u063a\u064a\u064a\u0631\u0647\u0627 \u0645\u0646 \u0632\u0631 \u062e\u0627\u0631\u062c\u064a\r\n const observer = new MutationObserver((mutations) => {\r\n mutations.forEach((mutation) => {\r\n if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {\r\n updateContent();\r\n }\r\n });\r\n });\r\n\r\n observer.observe(document.documentElement, { attributes: true });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7959b97 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7959b97\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3ef75ec\" data-id=\"3ef75ec\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-023dd48 elementor-widget elementor-widget-html\" data-id=\"023dd48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Roayae Medical Bar<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n :root {\r\n --primary-dark: #1e3a8a;\r\n --accent-teal: #0d9488;\r\n }\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .medical-bar-container {\r\n background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);\r\n overflow: hidden;\r\n }\r\n .glass-effect {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n .phone-section {\r\n background: #ffffff;\r\n clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);\r\n transition: all 0.4s ease;\r\n }\r\n @media (max-width: 768px) {\r\n .phone-section {\r\n clip-path: none;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n }\r\n .material-icons {\r\n font-display: swap;\r\n vertical-align: middle;\r\n line-height: 1;\r\n }\r\n .btn-medical {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n font-size: 0.95rem;\r\n }\r\n .btn-medical:hover {\r\n transform: translateY(-2px);\r\n filter: brightness(1.1);\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n }\r\n \/* Fix icon jump *\/\r\n .icon-container {\r\n min-width: 24px;\r\n min-height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50\">\r\n\r\n <div class=\"medical-bar-container w-full shadow-2xl\">\r\n <div class=\"max-w-7xl mx-auto flex flex-col md:flex-row items-stretch\">\r\n \r\n <!-- Action Buttons Section -->\r\n <div class=\"flex-1 flex flex-wrap items-center justify-center md:justify-start gap-3 p-4 md:px-8\">\r\n \r\n <!-- Branch Button -->\r\n <a href=\"https:\/\/roayae.org\/ar\/branches\/\" class=\"btn-medical glass-effect text-white px-5 py-2.5 rounded-full flex items-center gap-3\">\r\n <div class=\"icon-container\">\r\n <span class=\"material-icons text-blue-200\">location_on<\/span>\r\n <\/div>\r\n <span class=\"font-bold\" data-ar=\"\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639\" data-en=\"Choose Branch\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639<\/span>\r\n <span class=\"material-icons text-sm opacity-50 rtl:rotate-0 ltr:rotate-180\">arrow_back_ios<\/span>\r\n <\/a>\r\n\r\n <!-- Appointment Button -->\r\n <button class=\"btn-medical bg-white text-blue-900 px-5 py-2.5 rounded-full flex items-center gap-3 shadow-lg\">\r\n <div class=\"icon-container\">\r\n <span class=\"material-icons text-blue-600\">medical_services<\/span>\r\n <\/div>\r\n <span class=\"font-bold\" data-ar=\"\u0642\u0627\u0628\u0644 \u0627\u0644\u0637\u0628\u064a\u0628\" data-en=\"See Doctor\">\u0642\u0627\u0628\u0644 \u0627\u0644\u0637\u0628\u064a\u0628<\/span>\r\n <span class=\"material-icons text-sm opacity-50 rtl:rotate-0 ltr:rotate-180\">arrow_back_ios<\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <!-- Phone \/ Emergency Section -->\r\n <div class=\"phone-section px-10 py-4 flex items-center justify-center md:min-w-[320px]\">\r\n <a href=\"tel:+967774441177\" class=\"flex items-center gap-4 group\">\r\n <div class=\"flex flex-col items-end\">\r\n <span class=\"text-xs text-gray-500 font-bold uppercase tracking-widest\" data-ar=\"\u0627\u0644\u0637\u0648\u0627\u0631\u0626 \u0648\u0627\u0644\u062d\u062c\u0632\" data-en=\"Emergency & Booking\">\u0627\u0644\u0637\u0648\u0627\u0631\u0626 \u0648\u0627\u0644\u062d\u062c\u0632<\/span>\r\n <span class=\"text-2xl md:text-3xl font-black text-blue-900 leading-none group-hover:text-blue-600 transition-colors tracking-tight\">\r\n 774441177\r\n <\/span>\r\n <\/div>\r\n <div class=\"w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white shadow-lg shadow-teal-200 group-hover:scale-110 transition-transform\">\r\n <span class=\"material-icons\">phone_in_talk<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function updateLanguageUI() {\r\n const lang = document.documentElement.lang || 'ar';\r\n const isEn = lang === 'en';\r\n \r\n \/\/ Set direction based on language\r\n document.documentElement.dir = isEn ? 'ltr' : 'rtl';\r\n\r\n const elements = document.querySelectorAll('[data-ar]');\r\n elements.forEach(el => {\r\n el.textContent = isEn ? el.getAttribute('data-en') : el.getAttribute('data-ar');\r\n });\r\n }\r\n\r\n \/\/ Initialize\r\n document.addEventListener('DOMContentLoaded', updateLanguageUI);\r\n\r\n \/\/ Observe for dynamic language changes by other scripts\r\n const observer = new MutationObserver((mutations) => {\r\n mutations.forEach((mutation) => {\r\n if (mutation.attributeName === 'lang') {\r\n updateLanguageUI();\r\n }\r\n });\r\n });\r\n \r\n observer.observe(document.documentElement, { attributes: true });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9ee19c5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9ee19c5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-789bb4b\" data-id=\"789bb4b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-31f0c44 elementor-widget elementor-widget-html\" data-id=\"31f0c44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Vision & Mission - 3D Corporate<\/title>\r\n \r\n <!-- Fonts: Tajawal for Arabic, Inter for English -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@700;800;900&family=Inter:wght@700;800&display=swap\" rel=\"stylesheet\">\r\n <!-- Google Material Icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,700,1,0\" \/>\r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- Swiper CSS -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.css\" \/>\r\n <!-- AOS CSS -->\r\n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --font-ar: 'Tajawal', sans-serif;\r\n --font-en: 'Inter', sans-serif;\r\n }\r\n html[lang=\"en\"] body { font-family: var(--font-en); }\r\n html[lang=\"ar\"] body { font-family: var(--font-ar); }\r\n\r\n body { background-color: #f8fafc; overflow-x: hidden; }\r\n\r\n .card-3d-wrapper { perspective: 1200px; height: 100%; }\r\n \r\n .card-3d {\r\n background: rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(10px);\r\n border-radius: 24px;\r\n box-shadow: \r\n 20px 20px 60px #d1d5db,\r\n -20px -20px 60px #ffffff;\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n border: 1px solid rgba(255,255,255,0.7);\r\n position: relative;\r\n }\r\n\r\n .card-3d:hover {\r\n transform: translateY(-15px) rotateX(5deg);\r\n box-shadow: 0 30px 50px rgba(0,0,0,0.12);\r\n }\r\n\r\n .icon-box {\r\n width: 90px; height: 90px;\r\n border-radius: 22px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 2rem;\r\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.05), inset 0 -4px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n .card-3d:hover .icon-box {\r\n transform: scale(1.1) rotate(10deg);\r\n }\r\n\r\n .material-symbols-rounded {\r\n font-size: 45px !important;\r\n transition: 0.3s;\r\n }\r\n\r\n .blob {\r\n position: absolute;\r\n filter: blur(60px);\r\n z-index: 0;\r\n animation: pulse 15s infinite ease-in-out;\r\n }\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); opacity: 0.5; }\r\n 50% { transform: scale(1.2); opacity: 0.8; }\r\n }\r\n\r\n .swiper-pagination-bullet-active {\r\n background: #2563eb !important;\r\n width: 35px !important;\r\n border-radius: 10px !important;\r\n }\r\n\r\n \/* Language specific classes *\/\r\n [data-lang-content] { transition: opacity 0.3s ease; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <section class=\"py-16 lg:py-24 relative overflow-hidden min-h-screen flex items-center\">\r\n <!-- Blobs -->\r\n <div class=\"blob w-[500px] h-[500px] bg-blue-100 rounded-full -top-40 -right-40\"><\/div>\r\n <div class=\"blob w-[400px] h-[400px] bg-purple-100 rounded-full top-1\/2 -left-20\"><\/div>\r\n\r\n <div class=\"container mx-auto px-6 relative z-10\">\r\n <!-- Header -->\r\n <div class=\"text-center mb-16\" data-aos=\"fade-up\">\r\n <h2 id=\"main-title\" class=\"text-4xl lg:text-6xl font-black text-slate-900 mb-6 tracking-tight\">\r\n <!-- Text handled by JS -->\r\n <\/h2>\r\n <div class=\"w-32 h-2 mx-auto rounded-full bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 shadow-lg\"><\/div>\r\n <\/div>\r\n\r\n <!-- Swiper -->\r\n <div class=\"swiper vmvSwiper\">\r\n <div class=\"swiper-wrapper\">\r\n \r\n <!-- Vision -->\r\n <div class=\"swiper-slide\">\r\n <div class=\"card-3d-wrapper\">\r\n <div class=\"card-3d p-10 flex flex-col items-center text-center\">\r\n <div class=\"icon-box bg-blue-600 text-white\">\r\n <span class=\"material-symbols-rounded\">visibility<\/span>\r\n <\/div>\r\n <h3 id=\"vision-title\" class=\"text-2xl font-extrabold text-slate-800 mb-4\"><\/h3>\r\n <p id=\"vision-desc\" class=\"text-slate-600 leading-relaxed font-medium text-lg mb-8\"><\/p>\r\n <div class=\"w-full h-1.5 bg-blue-100 rounded-full overflow-hidden mt-auto\">\r\n <div class=\"h-full bg-blue-600 w-1\/3\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Mission -->\r\n <div class=\"swiper-slide\">\r\n <div class=\"card-3d-wrapper\">\r\n <div class=\"card-3d p-10 flex flex-col items-center text-center\">\r\n <div class=\"icon-box bg-indigo-600 text-white\">\r\n <span class=\"material-symbols-rounded\">rocket_launch<\/span>\r\n <\/div>\r\n <h3 id=\"mission-title\" class=\"text-2xl font-extrabold text-slate-800 mb-4\"><\/h3>\r\n <p id=\"mission-desc\" class=\"text-slate-600 leading-relaxed font-medium text-lg mb-8\"><\/p>\r\n <div class=\"w-full h-1.5 bg-indigo-100 rounded-full overflow-hidden mt-auto\">\r\n <div class=\"h-full bg-indigo-600 w-1\/2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Values -->\r\n <div class=\"swiper-slide\">\r\n <div class=\"card-3d-wrapper\">\r\n <div class=\"card-3d p-10 flex flex-col items-center text-center\">\r\n <div class=\"icon-box bg-purple-600 text-white\">\r\n <span class=\"material-symbols-rounded\">diamond<\/span>\r\n <\/div>\r\n <h3 id=\"values-title\" class=\"text-2xl font-extrabold text-slate-800 mb-4\"><\/h3>\r\n <p id=\"values-desc\" class=\"text-slate-600 leading-relaxed font-medium text-lg mb-8\"><\/p>\r\n <div class=\"w-full h-1.5 bg-purple-100 rounded-full overflow-hidden mt-auto\">\r\n <div class=\"h-full bg-purple-600 w-full\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <div class=\"swiper-pagination !mt-10\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.js\"><\/script>\r\n \r\n <script>\r\n const translations = {\r\n ar: {\r\n mainTitle: \"\u0645\u0646 \u0646\u062d\u0646\",\r\n visionTitle: \"\u0631\u0624\u064a\u062a\u0646\u0627\",\r\n visionDesc: \"\u0623\u0646 \u0646\u0643\u0648\u0646 \u0627\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0623\u0648\u0644 \u0648\u0627\u0644\u0631\u0627\u0626\u062f \u0641\u064a \u0645\u062c\u0627\u0644 \u0637\u0628 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0639\u064a\u0648\u0646 \u0641\u064a \u0627\u0644\u064a\u0645\u0646\u060c \u0628\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0637\u0628\u064a\u0629 \u0645\u062a\u0645\u064a\u0632\u0629.\",\r\n missionTitle: \"\u0631\u0633\u0627\u0644\u062a\u0646\u0627\",\r\n missionDesc: \"\u062a\u0648\u0641\u064a\u0631 \u0631\u0639\u0627\u064a\u0629 \u0635\u062d\u064a\u0629 \u0644\u0644\u0639\u064a\u0648\u0646 \u0628\u062c\u0648\u062f\u0629 \u0639\u0627\u0644\u064a\u0629 \u0648\u062a\u0643\u0644\u0641\u0629 \u0645\u0646\u0627\u0633\u0628\u0629\u060c \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0623\u0641\u0636\u0644 \u0627\u0644\u0643\u0648\u0627\u062f\u0631.\",\r\n valuesTitle: \"\u0642\u064a\u0645\u0646\u0627\",\r\n valuesDesc: \"\u0627\u0644\u0631\u062d\u0645\u0629\u060c \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629\u060c \u0627\u0644\u0646\u0632\u0627\u0647\u0629\u060c \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0633\u062a\u0645\u0631\u060c \u0648\u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0645\u0631\u064a\u0636 \u0643\u0623\u0648\u0644\u0648\u064a\u0629 \u0642\u0635\u0648\u0649.\"\r\n },\r\n en: {\r\n mainTitle: \"About Us\",\r\n visionTitle: \"Our Vision\",\r\n visionDesc: \"To be the first and leading choice in ophthalmology in Yemen, providing exceptional medical services.\",\r\n missionTitle: \"Our Mission\",\r\n missionDesc: \"Providing high-quality eye care at an affordable cost, using the latest technologies and experts.\",\r\n valuesTitle: \"Our Values\",\r\n valuesDesc: \"Compassion, professionalism, integrity, continuous development, and patient-first priority.\"\r\n }\r\n };\r\n\r\n function updateContent() {\r\n const lang = document.documentElement.lang || 'ar';\r\n const content = translations[lang] || translations.ar;\r\n \r\n document.getElementById('main-title').innerText = content.mainTitle;\r\n document.getElementById('vision-title').innerText = content.visionTitle;\r\n document.getElementById('vision-desc').innerText = content.visionDesc;\r\n document.getElementById('mission-title').innerText = content.missionTitle;\r\n document.getElementById('mission-desc').innerText = content.missionDesc;\r\n document.getElementById('values-title').innerText = content.valuesTitle;\r\n document.getElementById('values-desc').innerText = content.valuesDesc;\r\n\r\n \/\/ Set Swiper direction\r\n return lang === 'ar';\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const isRTL = updateContent();\r\n\r\n AOS.init({ duration: 1000, once: true });\r\n\r\n new Swiper(\".vmvSwiper\", {\r\n slidesPerView: 1,\r\n spaceBetween: 30,\r\n rtl: isRTL,\r\n loop: true,\r\n autoplay: { delay: 4000 },\r\n pagination: { el: \".swiper-pagination\", clickable: true },\r\n breakpoints: {\r\n 768: { slidesPerView: 2 },\r\n 1024: { slidesPerView: 3, spaceBetween: 40 }\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34987fe elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"34987fe\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"stretch_section":"section-stretched"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-56463fb\" data-id=\"56463fb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b062cd2 elementor-widget elementor-widget-html\" data-id=\"b062cd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \r\n PROFESSIONAL MEDICAL BRANCHES COMPONENT \r\n Features: \r\n 1. Auto-Language Detection (URL based or HTML lang attribute)\r\n 2. High-End Mobile UI (Shadows, Transitions, Typography)\r\n 3. No Language Buttons (Automatic Switching)\r\n-->\r\n<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Medical Branches<\/title>\r\n \r\n <!-- Google Fonts: Tajawal -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Font Awesome -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Tajawal', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: {\r\n 50: '#eff6ff',\r\n 100: '#dbeafe',\r\n 200: '#bfdbfe',\r\n 300: '#93c5fd',\r\n 400: '#60a5fa',\r\n 500: '#3b82f6',\r\n 600: '#2563eb',\r\n 700: '#1d4ed8',\r\n 800: '#1e40af',\r\n 900: '#1e3a8a',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Smooth Scrolling & Scrollbar *\/\r\n html { scroll-behavior: smooth; }\r\n ::-webkit-scrollbar { width: 6px; }\r\n ::-webkit-scrollbar-track { background: #f1f5f9; }\r\n ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }\r\n \r\n \/* Card Hover Effects *\/\r\n .branch-card {\r\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27), box-shadow 0.4s ease;\r\n }\r\n .branch-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n \r\n \/* LTR Specific Adjustments handled via JS class toggling *\/\r\n body.ltr-mode { direction: ltr; }\r\n body.ltr-mode .fa-phone { transform: rotate(90deg); }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased selection:bg-primary-200 selection:text-primary-900\">\r\n\r\n <section id=\"branches\" class=\"py-20 bg-slate-50 relative overflow-hidden\">\r\n <!-- Background Decoration -->\r\n <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-30\">\r\n <div class=\"absolute -top-24 -right-24 w-96 h-96 bg-primary-100 rounded-full blur-3xl\"><\/div>\r\n <div class=\"absolute top-1\/2 -left-24 w-72 h-72 bg-blue-100 rounded-full blur-3xl\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"container mx-auto px-4 relative z-10\">\r\n <!-- Section Header -->\r\n <div class=\"text-center mb-16\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900 mb-4\">\r\n <span data-i18n=\"header_prefix\">\u0641\u0631\u0648\u0639\u0646\u0627 \u0641\u064a<\/span> \r\n <span class=\"text-primary-600 relative inline-block\">\r\n <span data-i18n=\"header_country\">\u0627\u0644\u064a\u0645\u0646<\/span>\r\n <svg class=\"absolute w-full h-3 -bottom-1 right-0 text-primary-200 -z-10\" viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\"><path d=\"M0 5 Q 50 10 100 5\" stroke=\"currentColor\" stroke-width=\"8\" fill=\"none\"\/><\/svg>\r\n <\/span>\r\n <\/h2>\r\n <p class=\"text-slate-500 max-w-xl mx-auto text-lg\" data-i18n=\"header_desc\">\u0634\u0628\u0643\u0629 \u0641\u0631\u0648\u0639 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u063a\u0637\u064a \u0623\u0647\u0645 \u0627\u0644\u0645\u062d\u0627\u0641\u0638\u0627\u062a \u0644\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0637\u0628\u064a\u0629 \u0627\u0644\u0623\u0642\u0631\u0628 \u0625\u0644\u064a\u0643\u0645.<\/p>\r\n <\/div>\r\n\r\n <!-- Branches Grid -->\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n \r\n <!-- Branch Card 1: Aden -->\r\n <div class=\"branch-card group bg-white rounded-3xl overflow-hidden shadow-lg border border-slate-100 flex flex-col\">\r\n <div class=\"relative h-52 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2025\/10\/24.jpeg\" class=\"w-full h-full object-cover group-hover:scale-110 transition duration-700\" alt=\"Aden Branch\">\r\n <div class=\"absolute top-4 right-4 ltr:right-auto ltr:left-4 bg-white\/95 backdrop-blur text-primary-700 text-xs font-bold px-3 py-1.5 rounded-full shadow-sm uppercase tracking-wide\" data-i18n=\"aden_tag\">\r\n \u0639\u062f\u0646\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <h3 class=\"text-xl font-bold text-slate-800 mb-2 group-hover:text-primary-600 transition\" data-i18n=\"aden_title\">\u0641\u0631\u0639 \u0639\u062f\u0646<\/h3>\r\n <p class=\"text-slate-500 text-sm mb-4 leading-relaxed line-clamp-3\" data-i18n=\"aden_desc\">\r\n \u064a\u0642\u0639 \u0641\u064a \u0642\u0644\u0628 \u0627\u0644\u0639\u0627\u0635\u0645\u0629 \u0627\u0644\u0645\u0624\u0642\u062a\u0629\u060c \u0645\u062c\u0647\u0632 \u0628\u0623\u062d\u062f\u062b \u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u0629 \u0648\u0627\u0644\u0637\u0648\u0627\u0631\u0626 \u0644\u062e\u062f\u0645\u062a\u0643\u0645 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629.\r\n <\/p>\r\n <div class=\"mt-auto space-y-3\">\r\n <div class=\"flex items-start gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-map-marker-alt text-primary-500 mt-1 w-4 text-center\"><\/i>\r\n <span data-i18n=\"aden_loc\">\u0627\u0644\u0645\u0646\u0635\u0648\u0631\u0629\u060c \u0634\u0627\u0631\u0639 \u0627\u0644\u062a\u0633\u0639\u064a\u0646<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-phone text-primary-500 w-4 text-center\"><\/i>\r\n <span dir=\"ltr\">02-345678<\/span>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/roayae.org\/ar\/aden\" data-link-ar=\"https:\/\/roayae.org\/ar\/aden\" data-link-en=\"https:\/\/roayae.org\/en\/aden\" class=\"branch-link mt-6 w-full block text-center py-3 rounded-xl bg-primary-50 text-primary-700 font-bold hover:bg-primary-600 hover:text-white transition duration-300 shadow-sm hover:shadow-md\" data-i18n=\"btn_location\">\r\n \u0645\u0648\u0642\u0639 \u0627\u0644\u0641\u0631\u0639\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Branch Card 2: Shahr -->\r\n <div class=\"branch-card group bg-white rounded-3xl overflow-hidden shadow-lg border border-slate-100 flex flex-col\">\r\n <div class=\"relative h-52 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2025\/10\/32.jpeg\" class=\"w-full h-full object-cover group-hover:scale-110 transition duration-700\" alt=\"Shahr Branch\">\r\n <div class=\"absolute top-4 right-4 ltr:right-auto ltr:left-4 bg-white\/95 backdrop-blur text-primary-700 text-xs font-bold px-3 py-1.5 rounded-full shadow-sm uppercase tracking-wide\" data-i18n=\"shahr_tag\">\r\n \u0633\u0627\u062d\u0644 \u062d\u0636\u0631\u0645\u0648\u062a\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <h3 class=\"text-xl font-bold text-slate-800 mb-2 group-hover:text-primary-600 transition\" data-i18n=\"shahr_title\">\u0641\u0631\u0639 \u0627\u0644\u0634\u062d\u0631<\/h3>\r\n <p class=\"text-slate-500 text-sm mb-4 leading-relaxed line-clamp-3\" data-i18n=\"shahr_desc\">\r\n \u062e\u062f\u0645\u0627\u062a \u0639\u0644\u0627\u062c\u064a\u0629 \u0645\u062a\u0645\u064a\u0632\u0629 \u0648\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0639\u0644\u0627\u062c\u0627\u062a \u0627\u0644\u0646\u0648\u0639\u064a\u0629 \u0628\u062f\u0644\u0627\u064b \u0639\u0646 \u0627\u0644\u0633\u0641\u0631\u060c \u0644\u062e\u062f\u0645\u0629 \u0623\u0647\u0627\u0644\u064a \u0633\u0627\u062d\u0644 \u062d\u0636\u0631\u0645\u0648\u062a.\r\n <\/p>\r\n <div class=\"mt-auto space-y-3\">\r\n <div class=\"flex items-start gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-map-marker-alt text-primary-500 mt-1 w-4 text-center\"><\/i>\r\n <span data-i18n=\"shahr_loc\">\u0627\u0644\u0634\u0627\u0631\u0639 \u0627\u0644\u0639\u0627\u0645<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-phone text-primary-500 w-4 text-center\"><\/i>\r\n <span dir=\"ltr\">05-321456<\/span>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/roayae.org\/en\/al-shehr\" data-link-ar=\"https:\/\/roayae.org\/ar\/al-shehr\" data-link-en=\"https:\/\/roayae.org\/en\/al-shehr\" class=\"branch-link mt-6 w-full block text-center py-3 rounded-xl bg-primary-50 text-primary-700 font-bold hover:bg-primary-600 hover:text-white transition duration-300 shadow-sm hover:shadow-md\" data-i18n=\"btn_location\">\r\n \u0645\u0648\u0642\u0639 \u0627\u0644\u0641\u0631\u0639\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Branch Card 3: Mukalla -->\r\n <div class=\"branch-card group bg-white rounded-3xl overflow-hidden shadow-lg border border-slate-100 flex flex-col\">\r\n <div class=\"relative h-52 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2024\/01\/IMG_2554-1024x683.jpg\" class=\"w-full h-full object-cover group-hover:scale-110 transition duration-700\" alt=\"Mukalla Branch\">\r\n <div class=\"absolute top-4 right-4 ltr:right-auto ltr:left-4 bg-white\/95 backdrop-blur text-primary-700 text-xs font-bold px-3 py-1.5 rounded-full shadow-sm uppercase tracking-wide\" data-i18n=\"mukalla_tag\">\r\n \u0625\u0637\u0644\u0627\u0644\u0629 \u0628\u062d\u0631\u064a\u0629\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <h3 class=\"text-xl font-bold text-slate-800 mb-2 group-hover:text-primary-600 transition\" data-i18n=\"mukalla_title\">\u0641\u0631\u0639 \u0627\u0644\u0645\u0643\u0644\u0627<\/h3>\r\n <p class=\"text-slate-500 text-sm mb-4 leading-relaxed line-clamp-3\" data-i18n=\"mukalla_desc\">\r\n \u064a\u062a\u0645\u064a\u0632 \u0628\u0625\u0637\u0644\u0627\u0644\u0629 \u0628\u062d\u0631\u064a\u0629 \u0648\u062e\u062f\u0645\u0627\u062a \u0627\u0633\u062a\u0634\u0641\u0627\u0626\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u062e\u062f\u0645\u0629 \u0645\u0631\u0636\u0649 \u0633\u0627\u062d\u0644 \u062d\u0636\u0631\u0645\u0648\u062a \u0648\u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u062c\u0627\u0648\u0631\u0629.\r\n <\/p>\r\n <div class=\"mt-auto space-y-3\">\r\n <div class=\"flex items-start gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-map-marker-alt text-primary-500 mt-1 w-4 text-center\"><\/i>\r\n <span data-i18n=\"mukalla_loc\">\u0627\u0644\u062f\u064a\u0633\u060c \u0627\u0644\u0634\u0627\u0631\u0639 \u0627\u0644\u0639\u0627\u0645<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-phone text-primary-500 w-4 text-center\"><\/i>\r\n <span dir=\"ltr\">05-321456<\/span>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/roayae.org\/ar\/mukalla-branch\" data-link-ar=\"https:\/\/roayae.org\/ar\/mukalla-branch\" data-link-en=\"https:\/\/roayae.org\/en\/mukalla-branch\" class=\"branch-link mt-6 w-full block text-center py-3 rounded-xl bg-primary-50 text-primary-700 font-bold hover:bg-primary-600 hover:text-white transition duration-300 shadow-sm hover:shadow-md\" data-i18n=\"btn_location\">\r\n \u0645\u0648\u0642\u0639 \u0627\u0644\u0641\u0631\u0639\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Branch Card 4: Seiyun -->\r\n <div class=\"branch-card group bg-white rounded-3xl overflow-hidden shadow-lg border border-slate-100 flex flex-col\">\r\n <div class=\"relative h-52 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/er-1024x659.jpg\" class=\"w-full h-full object-cover group-hover:scale-110 transition duration-700\" alt=\"Seiyun Branch\">\r\n <div class=\"absolute top-4 right-4 ltr:right-auto ltr:left-4 bg-white\/95 backdrop-blur text-primary-700 text-xs font-bold px-3 py-1.5 rounded-full shadow-sm uppercase tracking-wide\" data-i18n=\"seiyun_tag\">\r\n \u0648\u0627\u062f\u064a \u062d\u0636\u0631\u0645\u0648\u062a\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <h3 class=\"text-xl font-bold text-slate-800 mb-2 group-hover:text-primary-600 transition\" data-i18n=\"seiyun_title\">\u0641\u0631\u0639 \u0633\u064a\u0626\u0648\u0646<\/h3>\r\n <p class=\"text-slate-500 text-sm mb-4 leading-relaxed line-clamp-3\" data-i18n=\"seiyun_desc\">\r\n \u062e\u062f\u0645\u0627\u062a \u0637\u0628\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u062e\u062f\u0645\u0629 \u0623\u0647\u0627\u0644\u064a \u0645\u062f\u064a\u0646\u0629 \u0633\u064a\u0626\u0648\u0646 \u0648\u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u062d\u064a\u0637\u0629 \u0641\u064a \u0627\u0644\u0648\u0627\u062f\u064a.\r\n <\/p>\r\n <div class=\"mt-auto space-y-3\">\r\n <div class=\"flex items-start gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-map-marker-alt text-primary-500 mt-1 w-4 text-center\"><\/i>\r\n <span data-i18n=\"seiyun_loc\">\u0634\u0627\u0631\u0639 \u0627\u0644\u0645\u0637\u0627\u0631\u060c \u0628\u062c\u0648\u0627\u0631 \u0627\u0644\u0645\u062c\u0645\u0639<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3 text-sm text-slate-600\">\r\n <i class=\"fas fa-phone text-primary-500 w-4 text-center\"><\/i>\r\n <span dir=\"ltr\">05-456789<\/span>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/roayae.org\/ar\/branch-seiyun\" data-link-ar=\"https:\/\/roayae.org\/ar\/branch-seiyun\" data-link-en=\"https:\/\/roayae.org\/en\/branch-seiyun\" class=\"branch-link mt-6 w-full block text-center py-3 rounded-xl bg-primary-50 text-primary-700 font-bold hover:bg-primary-600 hover:text-white transition duration-300 shadow-sm hover:shadow-md\" data-i18n=\"btn_location\">\r\n \u0645\u0648\u0642\u0639 \u0627\u0644\u0641\u0631\u0639\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Auto Translation Logic -->\r\n <script>\r\n \/\/ Translation Dictionary\r\n const i18n = {\r\n ar: {\r\n header_prefix: \"\u0641\u0631\u0648\u0639\u0646\u0627 \u0641\u064a\",\r\n header_country: \"\u0627\u0644\u064a\u0645\u0646\",\r\n header_desc: \"\u0634\u0628\u0643\u0629 \u0641\u0631\u0648\u0639 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u063a\u0637\u064a \u0623\u0647\u0645 \u0627\u0644\u0645\u062d\u0627\u0641\u0638\u0627\u062a \u0644\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0637\u0628\u064a\u0629 \u0627\u0644\u0623\u0642\u0631\u0628 \u0625\u0644\u064a\u0643\u0645.\",\r\n \r\n aden_tag: \"\u0639\u062f\u0646\",\r\n aden_title: \"\u0641\u0631\u0639 \u0639\u062f\u0646\",\r\n aden_desc: \"\u064a\u0642\u0639 \u0641\u064a \u0642\u0644\u0628 \u0627\u0644\u0639\u0627\u0635\u0645\u0629 \u0627\u0644\u0645\u0624\u0642\u062a\u0629\u060c \u0645\u062c\u0647\u0632 \u0628\u0623\u062d\u062f\u062b \u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u0629 \u0648\u0627\u0644\u0637\u0648\u0627\u0631\u0626 \u0644\u062e\u062f\u0645\u062a\u0643\u0645 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629.\",\r\n aden_loc: \"\u0627\u0644\u0645\u0646\u0635\u0648\u0631\u0629\u060c \u0634\u0627\u0631\u0639 \u0627\u0644\u062a\u0633\u0639\u064a\u0646\",\r\n\r\n shahr_tag: \"\u0633\u0627\u062d\u0644 \u062d\u0636\u0631\u0645\u0648\u062a\",\r\n shahr_title: \"\u0641\u0631\u0639 \u0627\u0644\u0634\u062d\u0631\",\r\n shahr_desc: \"\u062e\u062f\u0645\u0627\u062a \u0639\u0644\u0627\u062c\u064a\u0629 \u0645\u062a\u0645\u064a\u0632\u0629 \u0648\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0639\u0644\u0627\u062c\u0627\u062a \u0627\u0644\u0646\u0648\u0639\u064a\u0629 \u0628\u062f\u0644\u0627\u064b \u0639\u0646 \u0627\u0644\u0633\u0641\u0631\u060c \u0644\u062e\u062f\u0645\u0629 \u0623\u0647\u0627\u0644\u064a \u0633\u0627\u062d\u0644 \u062d\u0636\u0631\u0645\u0648\u062a.\",\r\n shahr_loc: \"\u0627\u0644\u0634\u0627\u0631\u0639 \u0627\u0644\u0639\u0627\u0645\",\r\n\r\n mukalla_tag: \"\u0625\u0637\u0644\u0627\u0644\u0629 \u0628\u062d\u0631\u064a\u0629\",\r\n mukalla_title: \"\u0641\u0631\u0639 \u0627\u0644\u0645\u0643\u0644\u0627\",\r\n mukalla_desc: \"\u064a\u062a\u0645\u064a\u0632 \u0628\u0625\u0637\u0644\u0627\u0644\u0629 \u0628\u062d\u0631\u064a\u0629 \u0648\u062e\u062f\u0645\u0627\u062a \u0627\u0633\u062a\u0634\u0641\u0627\u0626\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u062e\u062f\u0645\u0629 \u0645\u0631\u0636\u0649 \u0633\u0627\u062d\u0644 \u062d\u0636\u0631\u0645\u0648\u062a \u0648\u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u062c\u0627\u0648\u0631\u0629.\",\r\n mukalla_loc: \"\u0627\u0644\u062f\u064a\u0633\u060c \u0627\u0644\u0634\u0627\u0631\u0639 \u0627\u0644\u0639\u0627\u0645\",\r\n\r\n seiyun_tag: \"\u0648\u0627\u062f\u064a \u062d\u0636\u0631\u0645\u0648\u062a\",\r\n seiyun_title: \"\u0641\u0631\u0639 \u0633\u064a\u0626\u0648\u0646\",\r\n seiyun_desc: \"\u062e\u062f\u0645\u0627\u062a \u0637\u0628\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u062e\u062f\u0645\u0629 \u0623\u0647\u0627\u0644\u064a \u0645\u062f\u064a\u0646\u0629 \u0633\u064a\u0626\u0648\u0646 \u0648\u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u062d\u064a\u0637\u0629 \u0641\u064a \u0627\u0644\u0648\u0627\u062f\u064a.\",\r\n seiyun_loc: \"\u0634\u0627\u0631\u0639 \u0627\u0644\u0645\u0637\u0627\u0631\u060c \u0628\u062c\u0648\u0627\u0631 \u0627\u0644\u0645\u062c\u0645\u0639\",\r\n\r\n btn_location: \"\u0645\u0648\u0642\u0639 \u0627\u0644\u0641\u0631\u0639\"\r\n },\r\n en: {\r\n header_prefix: \"Our Branches in\",\r\n header_country: \"Yemen\",\r\n header_desc: \"An integrated network of branches covering major governorates to provide the nearest medical care to you.\",\r\n \r\n aden_tag: \"Aden\",\r\n aden_title: \"Aden Branch\",\r\n aden_desc: \"Located in the heart of the interim capital, equipped with the latest ICU and emergency units to serve you 24\/7.\",\r\n aden_loc: \"Mansoura, 90th Street\",\r\n\r\n shahr_tag: \"Hadhramaut Coast\",\r\n shahr_title: \"Al-Shehr Branch\",\r\n shahr_desc: \"Distinguished therapeutic services providing quality treatments locally to save you travel time.\",\r\n shahr_loc: \"Main Street\",\r\n\r\n mukalla_tag: \"Sea View\",\r\n mukalla_title: \"Mukalla Branch\",\r\n mukalla_desc: \"Features a sea view and integrated hospital services to serve patients of Hadhramaut Coast and nearby areas.\",\r\n mukalla_loc: \"Al-Dis, Main Street\",\r\n\r\n seiyun_tag: \"Hadhramaut Valley\",\r\n seiyun_title: \"Seiyun Branch\",\r\n seiyun_desc: \"Integrated medical services serving the people of Seiyun city and surrounding areas in the valley.\",\r\n seiyun_loc: \"Airport Road, Next to Complex\",\r\n\r\n btn_location: \"Branch Location\"\r\n }\r\n };\r\n\r\n function detectAndApplyLanguage() {\r\n \/\/ 1. Check URL for \/en\/ or \/ar\/\r\n const path = window.location.pathname;\r\n const href = window.location.href;\r\n \r\n \/\/ 2. Check HTML lang attribute\r\n const htmlLang = document.documentElement.lang;\r\n\r\n \/\/ Logic: If URL contains \/en\/ OR html lang is 'en', switch to English\r\n \/\/ Default is Arabic\r\n let lang = 'ar';\r\n if (href.includes('\/en\/') || path.includes('\/en\/') || htmlLang === 'en') {\r\n lang = 'en';\r\n }\r\n\r\n applyLanguage(lang);\r\n }\r\n\r\n function applyLanguage(lang) {\r\n const data = i18n[lang];\r\n \r\n \/\/ Update Text Content\r\n document.querySelectorAll('[data-i18n]').forEach(el => {\r\n const key = el.getAttribute('data-i18n');\r\n if (data[key]) {\r\n el.innerText = data[key];\r\n }\r\n });\r\n\r\n \/\/ Update Links based on language\r\n document.querySelectorAll('.branch-link').forEach(link => {\r\n const targetLink = link.getAttribute(`data-link-${lang}`);\r\n if (targetLink) link.href = targetLink;\r\n });\r\n\r\n \/\/ Update Direction & Classes\r\n if (lang === 'en') {\r\n document.documentElement.dir = 'ltr';\r\n document.documentElement.lang = 'en';\r\n document.body.classList.add('ltr-mode');\r\n \r\n \/\/ Adjust absolute positioning for tags in LTR\r\n document.querySelectorAll('.absolute.right-4').forEach(el => {\r\n el.style.right = 'auto';\r\n el.style.left = '1rem';\r\n });\r\n } else {\r\n document.documentElement.dir = 'rtl';\r\n document.documentElement.lang = 'ar';\r\n document.body.classList.remove('ltr-mode');\r\n \r\n \/\/ Reset absolute positioning for tags in RTL\r\n document.querySelectorAll('.absolute.right-4').forEach(el => {\r\n el.style.right = '1rem';\r\n el.style.left = 'auto';\r\n });\r\n }\r\n }\r\n\r\n \/\/ Run on load\r\n document.addEventListener('DOMContentLoaded', detectAndApplyLanguage);\r\n \r\n \/\/ Optional: Listen for URL changes if it's a Single Page App (SPA)\r\n window.addEventListener('popstate', detectAndApplyLanguage);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ab4ca79 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ab4ca79\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2264d44\" data-id=\"2264d44\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b0ffbcf elementor-widget elementor-widget-html\" data-id=\"b0ffbcf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Integrated Medical Vision<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n tajawal: ['Tajawal', 'sans-serif'],\r\n },\r\n colors: {\r\n med: {\r\n 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n #mv-component-wrapper {\r\n font-family: 'Tajawal', sans-serif;\r\n overflow: hidden;\r\n }\r\n #mv-component-wrapper .glass-panel {\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.1);\r\n }\r\n #mv-component-wrapper .slide-image {\r\n transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;\r\n }\r\n #mv-component-wrapper .content-fade {\r\n animation: mvFadeInUp 0.6s ease forwards;\r\n }\r\n @keyframes mvFadeInUp {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n #mv-component-wrapper .list-item-active {\r\n background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%);\r\n color: white !important;\r\n transform: translateX(-10px);\r\n box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);\r\n }\r\n [dir=\"ltr\"] #mv-component-wrapper .list-item-active {\r\n transform: translateX(10px);\r\n }\r\n #mv-component-wrapper .list-item-active .icon-wrapper {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n }\r\n #mv-component-wrapper .progress-bar { transition: width 0.1s linear; }\r\n .custom-scroll::-webkit-scrollbar { width: 4px; }\r\n .custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }\r\n .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n @keyframes softPulse { 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } }\r\n .btn-pulse { animation: softPulse 2s infinite; }\r\n .text-area-bg {\r\n background: linear-gradient(to top, rgba(12, 74, 110, 0.95) 0%, rgba(12, 74, 110, 0.8) 100%);\r\n backdrop-filter: blur(8px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50\">\r\n <section id=\"mv-component-wrapper\" class=\"relative w-full py-12 lg:py-20 min-h-[750px] flex items-center justify-center\">\r\n <div class=\"absolute top-0 right-0 w-1\/2 h-full bg-gradient-to-l from-med-50\/80 to-transparent -z-10\"><\/div>\r\n <div class=\"absolute bottom-10 left-10 w-72 h-72 bg-med-200 rounded-full mix-blend-multiply filter blur-[80px] opacity-40 animate-pulse -z-10\"><\/div>\r\n \r\n <div class=\"container mx-auto px-4 lg:px-8 max-w-7xl\">\r\n <div class=\"text-center mb-10\">\r\n <h2 class=\"text-3xl md:text-5xl font-extrabold text-slate-800 mb-4\">\r\n <span id=\"ui-main-title\"><\/span> <span class=\"text-med-600 relative inline-block\">\r\n <span id=\"ui-main-title-highlight\"><\/span>\r\n <svg class=\"absolute w-full h-3 -bottom-1 right-0 text-med-200 -z-10 opacity-70\" viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\">\r\n <path d=\"M0 5 Q 50 10 100 5\" stroke=\"currentColor\" stroke-width=\"8\" fill=\"none\" \/>\r\n <\/svg>\r\n <\/span>\r\n <\/h2>\r\n <p id=\"ui-main-desc\" class=\"text-slate-500 max-w-2xl mx-auto text-lg font-medium\"><\/p>\r\n <\/div>\r\n\r\n <div class=\"grid lg:grid-cols-12 gap-6 lg:gap-8 h-auto lg:min-h-[550px]\">\r\n <div class=\"lg:col-span-4 flex flex-col h-full\">\r\n <div class=\"glass-panel rounded-3xl p-6 h-full flex flex-col shadow-xl\">\r\n <h3 class=\"text-xl font-bold text-slate-700 mb-6 flex items-center gap-3\">\r\n <span class=\"flex h-8 w-8 items-center justify-center rounded-lg bg-med-100 text-med-600\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h7\"><\/path><\/svg>\r\n <\/span>\r\n <span id=\"ui-services-title\"><\/span>\r\n <\/h3>\r\n <div class=\"space-y-3 flex-1 overflow-y-auto custom-scroll px-1\" id=\"mv-list-container\"><\/div>\r\n <div class=\"mt-6\">\r\n <button class=\"w-full group relative overflow-hidden bg-med-600 hover:bg-med-700 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition-all duration-300 transform hover:-translate-y-1 btn-pulse\">\r\n <div class=\"relative z-10 flex items-center justify-center gap-2\">\r\n <span id=\"ui-cta-text\"><\/span>\r\n <svg class=\"w-5 h-5 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path><\/svg>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-4 pt-3 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-medium\">\r\n <span id=\"mv-autoplay-status\" class=\"flex items-center gap-1\">\r\n <span class=\"w-2 h-2 rounded-full bg-green-500 animate-pulse\"><\/span>\r\n <span id=\"ui-autoplay-text\"><\/span>\r\n <\/span>\r\n <div class=\"flex gap-1 bg-slate-50 rounded-lg p-1\">\r\n <button onclick=\"prevSlide()\" class=\"p-1.5 hover:bg-white hover:text-med-600 rounded-md transition shadow-sm\">\r\n <svg class=\"w-4 h-4 rtl:rotate-0 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <button onclick=\"nextSlide()\" class=\"p-1.5 hover:bg-white hover:text-med-600 rounded-md transition shadow-sm\">\r\n <svg class=\"w-4 h-4 rtl:rotate-0 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-8 relative group h-full\">\r\n <div class=\"relative w-full h-full min-h-[400px] rounded-3xl overflow-hidden bg-white border border-slate-100\">\r\n <div class=\"absolute inset-0\">\r\n <img decoding=\"async\" id=\"mv-main-image\" src=\"\" alt=\"Medical\" class=\"w-full h-full object-cover slide-image opacity-100\">\r\n <\/div>\r\n <div class=\"absolute bottom-0 right-0 w-full p-6 md:p-8 z-10 text-area-bg rounded-t-3xl\">\r\n <div id=\"mv-slide-content\" class=\"content-fade\">\r\n <div class=\"flex items-center gap-3 mb-3\">\r\n <span class=\"inline-block py-1 px-3 rounded-lg bg-white\/20 text-white border border-white\/30 text-xs font-bold\" id=\"ui-overview-tag\"><\/span>\r\n <\/div>\r\n <h2 id=\"mv-slide-title\" class=\"text-xl md:text-3xl font-bold text-white mb-2 leading-tight\"><\/h2>\r\n <p id=\"mv-slide-desc\" class=\"text-blue-50 text-sm md:text-base leading-relaxed max-w-2xl opacity-90 font-light\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute bottom-0 left-0 h-1 bg-white\/10 w-full z-20\">\r\n <div id=\"mv-progress\" class=\"h-full bg-med-400 shadow-[0_0_15px_#38bdf8] w-0 progress-bar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <script>\r\n (function() {\r\n const lang = document.documentElement.lang || 'ar';\r\n const isAr = lang === 'ar';\r\n const translations = {\r\n ar: {\r\n mainTitle: \"\u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a\", highlight: \"\u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629\",\r\n mainDesc: \"\u0646\u0644\u062a\u0632\u0645 \u0628\u062a\u0642\u062f\u064a\u0645 \u0631\u0624\u064a\u0629 \u0637\u0628\u064a\u0629 \u0645\u062a\u0637\u0648\u0631\u0629 \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\",\r\n servicesTitle: \"\u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629\",\r\n cta: \"\u0627\u062d\u062c\u0632 \u0645\u0648\u0639\u062f\u0643 \u0627\u0644\u0622\u0646\",\r\n autoplay: \"\u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\",\r\n paused: \"\u0625\u064a\u0642\u0627\u0641 \u0645\u0624\u0642\u062a\",\r\n overview: \"\u0646\u0638\u0631\u0629 \u0639\u0627\u0645\u0629\",\r\n slides: [\r\n { title: \"\u0631\u0639\u0627\u064a\u0629 \u0635\u062d\u064a\u0629 \u0634\u0627\u0645\u0644\u0629\", desc: \"\u0646\u0642\u062f\u0645 \u0645\u0646\u0638\u0648\u0645\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0644\u0628\u064a \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0645\u062c\u062a\u0645\u0639 \u0628\u0627\u0644\u062c\u0648\u062f\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2023\/09\/d4-1.bmp\" },\r\n { title: \"\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0633\u0644\u0627\u0645\u0629\", desc: \"\u0646\u0637\u0628\u0642 \u0623\u0639\u0644\u0649 \u0628\u0631\u0648\u062a\u0648\u0643\u0648\u0644\u0627\u062a \u0627\u0644\u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0648\u0645\u0643\u0627\u0641\u062d\u0629 \u0627\u0644\u0639\u062f\u0648\u0649 \u0644\u0636\u0645\u0627\u0646 \u0628\u064a\u0626\u0629 \u0622\u0645\u0646\u0629 \u062a\u0645\u0627\u0645\u0627\u064b.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2025\/10\/31.jpeg\" },\r\n { title: \"\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0643\u0648\u0627\u062f\u0631\", desc: \"\u0646\u0633\u062a\u062b\u0645\u0631 \u0641\u064a \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0628\u0634\u0631\u064a \u0645\u0646 \u062e\u0644\u0627\u0644 \u0628\u0631\u0627\u0645\u062c \u062a\u062f\u0631\u064a\u0628\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0645\u0648\u0627\u0643\u0628\u0629 \u0623\u062d\u062f\u062b \u0627\u0644\u0639\u0644\u0648\u0645.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2026\/02\/%D8%A7%D8%AC%D9%87%D8%B2%D8%A9.jpg\" },\r\n { title: \"\u062a\u0642\u0646\u064a\u0627\u062a \u062a\u0634\u062e\u064a\u0635\u064a\u0629\", desc: \"\u0646\u0645\u062a\u0644\u0643 \u0623\u062c\u0647\u0632\u0629 \u062a\u0634\u062e\u064a\u0635 \u062f\u0642\u064a\u0642\u0629 \u062a\u0633\u0627\u0639\u062f \u0641\u064a \u0627\u0643\u062a\u0634\u0627\u0641 \u0627\u0644\u0623\u0645\u0631\u0627\u0636 \u0645\u0628\u0643\u0631\u0627\u064b \u0648\u0639\u0644\u0627\u062c\u0647\u0627 \u0628\u0641\u0639\u0627\u0644\u064a\u0629.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ju-1024x662.jpg\" }\r\n ]\r\n },\r\n en: {\r\n mainTitle: \"Excellence in\", highlight: \"Healthcare\",\r\n mainDesc: \"We are committed to providing an advanced medical vision combining expertise and technology.\",\r\n servicesTitle: \"Our Premium Services\",\r\n cta: \"Book Appointment Now\",\r\n autoplay: \"Autoplay Active\",\r\n paused: \"Paused\",\r\n overview: \"Overview\",\r\n slides: [\r\n { title: \"Comprehensive Care\", desc: \"Providing an integrated system of medical services meeting community needs with global quality.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2023\/09\/d4-1.bmp\" },\r\n { title: \"Safety Standards\", desc: \"Applying highest global safety and infection control protocols for a fully secure environment.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2025\/10\/31.jpeg\" },\r\n { title: \"Staff Development\", desc: \"Investing in human capital through specialized training programs to keep pace with medical science.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2026\/02\/%D8%A7%D8%AC%D9%87%D8%B2%D8%A9.jpg\" },\r\n { title: \"Diagnostic Tech\", desc: \"Equipped with precise diagnostic tools helping in early detection and effective treatment.\", image: \"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ju-1024x662.jpg\" }\r\n ]\r\n }\r\n };\r\n const t = translations[isAr ? 'ar' : 'en'];\r\n const icons = [\r\n `<svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" \/><\/svg>`,\r\n `<svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \/><\/svg>`,\r\n `<svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\" \/><\/svg>`,\r\n `<svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/><\/svg>`\r\n ];\r\n let currentIndex = 0, intervalId = null, progressBarInterval = null, duration = 5000;\r\n const listContainer = document.getElementById('mv-list-container'), mainImage = document.getElementById('mv-main-image'),\r\n slideTitle = document.getElementById('mv-slide-title'), slideDesc = document.getElementById('mv-slide-desc'),\r\n slideContent = document.getElementById('mv-slide-content'), progressBar = document.getElementById('mv-progress'),\r\n statusText = document.getElementById('mv-autoplay-status');\r\n function init() {\r\n document.getElementById('ui-main-title').textContent = t.mainTitle;\r\n document.getElementById('ui-main-title-highlight').textContent = t.highlight;\r\n document.getElementById('ui-main-desc').textContent = t.mainDesc;\r\n document.getElementById('ui-services-title').textContent = t.servicesTitle;\r\n document.getElementById('ui-cta-text').textContent = t.cta;\r\n document.getElementById('ui-overview-tag').textContent = t.overview;\r\n renderList(); updateSlide(0); startAutoPlay();\r\n }\r\n function renderList() {\r\n listContainer.innerHTML = '';\r\n t.slides.forEach((slide, index) => {\r\n const btn = document.createElement('div');\r\n btn.className = `p-4 rounded-xl cursor-pointer transition-all duration-300 flex items-center gap-4 mb-2 border border-transparent group hover:bg-med-50 text-slate-600`;\r\n btn.id = `mv-item-${index}`;\r\n btn.innerHTML = `<div class=\"w-10 h-10 rounded-full flex items-center justify-center bg-med-100\/50 text-med-600 transition-colors shadow-sm icon-wrapper\">${icons[index]}<\/div><div class=\"flex flex-col\"><span class=\"font-bold text-sm md:text-base\">${slide.title}<\/span><\/div>`;\r\n btn.addEventListener('mouseenter', () => { stopAutoPlay(); updateSlide(index); statusText.children[1].textContent = t.paused; });\r\n btn.addEventListener('mouseleave', () => { startAutoPlay(); statusText.children[1].textContent = t.autoplay; });\r\n listContainer.appendChild(btn);\r\n });\r\n }\r\n window.updateSlide = function(index) {\r\n currentIndex = index;\r\n t.slides.forEach((_, i) => {\r\n const item = document.getElementById(`mv-item-${i}`);\r\n if (i === index) item.classList.add('list-item-active'); else item.classList.remove('list-item-active');\r\n });\r\n mainImage.style.opacity = '0.4';\r\n setTimeout(() => { mainImage.src = t.slides[index].image; mainImage.style.opacity = '1'; }, 200);\r\n slideContent.classList.remove('content-fade'); void slideContent.offsetWidth;\r\n slideContent.classList.add('content-fade');\r\n slideTitle.textContent = t.slides[index].title; slideDesc.textContent = t.slides[index].desc;\r\n if(intervalId) resetProgressBar();\r\n }\r\n window.nextSlide = function() { let next = (currentIndex + 1) % t.slides.length; updateSlide(next); }\r\n window.prevSlide = function() { let prev = (currentIndex - 1 + t.slides.length) % t.slides.length; updateSlide(prev); }\r\n function startAutoPlay() { if (intervalId) return; intervalId = setInterval(nextSlide, duration); resetProgressBar(); }\r\n function stopAutoPlay() { clearInterval(intervalId); clearInterval(progressBarInterval); intervalId = null; progressBar.style.width = '0%'; }\r\n function resetProgressBar() {\r\n clearInterval(progressBarInterval); progressBar.style.width = '0%'; let width = 0; const step = 100 \/ (duration \/ 50);\r\n progressBarInterval = setInterval(() => { width += step; if (width >= 100) width = 100; progressBar.style.width = width + '%'; }, 50);\r\n }\r\n init();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-437f664 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"437f664\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bd7339b\" data-id=\"bd7339b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-da95f04 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"da95f04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-eye3\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0627\u0644\u0645\u062e\u064a\u0645\u0627\u062a \u0627\u0644\u0639\u0644\u0627\u062c\u064a\u0629 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u0629<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-60bf9c2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60bf9c2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cd07e87\" data-id=\"cd07e87\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2ea8f3d elementor-widget elementor-widget-html\" data-id=\"2ea8f3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"text-align: center; margin: 20px 0;\">\r\n <a href=\"https:\/\/roayae-ai.org\" target=\"_blank\" style=\"display: inline-flex; align-items: center; gap: 10px; background: #059669; color: white; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-family: sans-serif; font-weight: bold; box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.3);\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n \u0641\u062d\u0635 \u0627\u0644\u0646\u0638\u0631 \u0628\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a - \u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629\r\n <\/a>\r\n <p style=\"margin-top: 10px; font-size: 12px; color: #64748b; font-family: sans-serif;\">\r\n * \u0645\u062a\u0627\u062d \u0644\u0644\u062c\u0645\u064a\u0639 \u0645\u062c\u0627\u0646\u0627\u064b. \u0644\u0644\u062f\u0639\u0645: 774441177\r\n <\/p>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4c1660e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4c1660e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-ab44186\" data-id=\"ab44186\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a5f0ace elementor-widget elementor-widget-html\" data-id=\"a5f0ace\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html><html lang=\"ar\" dir=\"rtl\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>\u0631\u0624\u064a\u0629 - \u0641\u062d\u0635 \u0627\u0644\u0646\u0638\u0631<\/title> <!-- Tailwind CSS --> <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script> <script>tailwind.config = { corePlugins: { preflight: false, } }<\/script> <!-- \u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u062c\u0648\u062c\u0644 --> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\"> <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\" \/> <style> #roya-ai-vision-widget { font-family: 'Tajawal', sans-serif; background-color: #0f172a; background-image: radial-gradient(circle at top right, #1e293b, #0f172a); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; border-radius: 1.5rem; margin: 2rem auto; max-width: 500px; direction: rtl; box-sizing: border-box; transition: direction 0.3s ease; } #roya-ai-vision-widget * { box-sizing: inherit; } #roya-ai-vision-widget .glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } @keyframes roya-widget-glow { 0% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.2), 0 0 10px rgba(6, 182, 212, 0.2), 0 0 15px rgba(6, 182, 212, 0.2) } 50% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 0 20px rgba(6, 182, 212, 0.4), 0 0 30px rgba(6, 182, 212, 0.2) } 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.2), 0 0 10px rgba(6, 182, 212, 0.2), 0 0 15px rgba(6, 182, 212, 0.2) } } #roya-ai-vision-widget .glowing-btn { animation: roya-widget-glow 2s infinite ease-in-out; transition: all 0.3s ease; } #roya-ai-vision-widget .glowing-btn:hover { transform: translateY(-2px) scale(1.02); animation: roya-widget-glow 1s infinite ease-in-out; } #roya-ai-vision-widget .eye-scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #06b6d4; box-shadow: 0 0 10px #06b6d4, 0 0 20px #06b6d4; animation: roya-widget-scan 2s infinite linear; opacity: 0.7; } @keyframes roya-widget-scan { 0% { top: 10%; opacity: 0 } 10% { opacity: 1 } 90% { opacity: 1 } 100% { top: 90%; opacity: 0 } } <\/style><\/head><body style=\"background-color: #f8fafc; padding: 20px; margin: 0; font-family: sans-serif;\"> <div id=\"roya-ai-vision-widget\" class=\"text-white antialiased\"> <div class=\"glass-card w-full max-w-sm mx-auto rounded-3xl p-8 shadow-2xl relative overflow-hidden flex flex-col items-center text-center\"> <div class=\"absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20\"><\/div> <div class=\"absolute bottom-0 left-0 w-32 h-32 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20\"><\/div> <div class=\"mb-6 z-10\"> <div class=\"w-16 h-16 mx-auto bg-gradient-to-br from-blue-900 to-slate-800 rounded-2xl flex items-center justify-center mb-3 border border-blue-500\/30 shadow-lg relative overflow-hidden\"> <span class=\"material-symbols-outlined text-4xl text-cyan-400\">visibility<\/span> <div class=\"eye-scan-line\"><\/div> <\/div> <h2 class=\"text-xl font-bold text-slate-100 tracking-wide m-0\" data-i18n=\"center_name\">\u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629<\/h2> <p class=\"text-xs text-slate-400 mt-1 mb-0\" data-i18n=\"center_desc\">\u0644\u0637\u0628 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629<\/p> <\/div> <div class=\"z-10 mb-8\"> <h3 class=\"text-lg font-semibold text-white mb-2 leading-relaxed mt-0\"> <span data-i18n=\"discover_text\">\u0627\u0643\u062a\u0634\u0641 \u0635\u062d\u0629 \u0639\u064a\u0646\u064a\u0643 \u0628\u062a\u0642\u0646\u064a\u0629<\/span> <span class=\"text-cyan-400 font-bold\" data-i18n=\"ai_text\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a<\/span> <\/h3> <p class=\"text-sm text-slate-300 leading-relaxed m-0\" data-i18n=\"description\">\u062a\u0642\u064a\u064a\u0645 \u0645\u0628\u062f\u0626\u064a \u0633\u0631\u064a\u0639 \u0648\u062f\u0642\u064a\u0642 \u0644\u0633\u0644\u0627\u0645\u0629 \u0646\u0638\u0631\u0643 \u0639\u0628\u0631 \u0623\u062d\u062f\u062b \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u0645\u062c\u0627\u0646\u0627\u064b \u0648\u0628\u0643\u0644 \u0633\u0647\u0648\u0644\u0629.<\/p> <\/div> <a href=\"https:\/\/roayae-ai.org\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"glowing-btn relative w-full group overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-cyan-500 p-[1px] z-10 block text-decoration-none focus:outline-none\"> <div class=\"relative bg-slate-900\/40 backdrop-blur-sm rounded-xl px-4 py-4 flex items-center justify-center gap-3 transition-colors group-hover:bg-transparent\"> <span class=\"material-symbols-outlined text-2xl text-white\">smart_toy<\/span> <span class=\"font-bold text-white text-sm md:text-base\" data-i18n=\"btn_text\">\u0627\u0644\u0641\u062d\u0635 \u0644\u0644\u0646\u0638\u0631 \u0628\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0645\u062c\u0627\u0646\u0627 \u0627\u0644\u0627\u0646<\/span> <span id=\"roya-btn-arrow\" class=\"material-symbols-outlined text-lg text-white\/80 group-hover:-translate-x-1 transition-transform\">arrow_back<\/span> <\/div> <\/a> <div class=\"mt-4 z-10 flex items-center justify-center gap-2 text-xs text-slate-500\"> <span class=\"material-symbols-outlined text-sm\">verified_user<\/span> <span data-i18n=\"safe_text\">\u0622\u0645\u0646 \u0648\u0645\u0648\u062b\u0648\u0642 100%<\/span> <\/div> <\/div> <script> (function() { const translations = { ar: { center_name: \"\u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629\", center_desc: \"\u0644\u0637\u0628 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629\", discover_text: \"\u0627\u0643\u062a\u0634\u0641 \u0635\u062d\u0629 \u0639\u064a\u0646\u064a\u0643 \u0628\u062a\u0642\u0646\u064a\u0629\", ai_text: \"\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\", description: \"\u062a\u0642\u064a\u064a\u0645 \u0645\u0628\u062f\u0626\u064a \u0633\u0631\u064a\u0639 \u0648\u062f\u0642\u064a\u0642 \u0644\u0633\u0644\u0627\u0645\u0629 \u0646\u0638\u0631\u0643 \u0639\u0628\u0631 \u0623\u062d\u062f\u062b \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u0645\u062c\u0627\u0646\u0627\u064b \u0648\u0628\u0643\u0644 \u0633\u0647\u0648\u0644\u0629.\", btn_text: \"\u0627\u0644\u0641\u062d\u0635 \u0644\u0644\u0646\u0638\u0631 \u0628\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0645\u062c\u0627\u0646\u0627 \u0627\u0644\u0627\u0646\", safe_text: \"\u0622\u0645\u0646 \u0648\u0645\u0648\u062b\u0648\u0642 100%\", arrow: \"arrow_back\" }, en: { center_name: \"Roya Center\", center_desc: \"For Eye & Retina Surgery\", discover_text: \"Discover your eye health with\", ai_text: \"AI Technology\", description: \"A quick and accurate initial assessment of your vision using the latest AI technologies, easily and for free.\", btn_text: \"Free AI Vision Test Now\", safe_text: \"100% Safe & Reliable\", arrow: \"arrow_forward\" } }; function applyLanguage() { const htmlLang = document.documentElement.lang.toLowerCase(); const lang = htmlLang.startsWith('en') ? 'en' : 'ar'; const widget = document.getElementById('roya-ai-vision-widget'); if(!widget) return; widget.style.direction = lang === 'en' ? 'ltr' : 'rtl'; const arrow = document.getElementById('roya-btn-arrow'); if(arrow) { arrow.textContent = translations[lang].arrow; if(lang === 'en') { arrow.classList.remove('group-hover:-translate-x-1'); arrow.classList.add('group-hover:translate-x-1'); } else { arrow.classList.remove('group-hover:translate-x-1'); arrow.classList.add('group-hover:-translate-x-1'); } } const elements = widget.querySelectorAll('[data-i18n]'); elements.forEach(el => { const key = el.getAttribute('data-i18n'); if(translations[lang][key]) { el.textContent = translations[lang][key]; } }); } applyLanguage(); const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === \"lang\") { applyLanguage(); } }); }); observer.observe(document.documentElement, { attributes: true }); })(); <\/script> <\/div><\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-9dc74c0\" data-id=\"9dc74c0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-488ed40 elementor-widget elementor-widget-image\" data-id=\"488ed40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/roayae-ai.org\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"908\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2026\/05\/5-1-902x1024.png\" class=\"attachment-large size-large wp-image-8995\" alt=\"\" srcset=\"https:\/\/roayae.org\/wp-content\/uploads\/2026\/05\/5-1-902x1024.png 902w, https:\/\/roayae.org\/wp-content\/uploads\/2026\/05\/5-1-264x300.png 264w, https:\/\/roayae.org\/wp-content\/uploads\/2026\/05\/5-1-768x872.png 768w, https:\/\/roayae.org\/wp-content\/uploads\/2026\/05\/5-1-11x12.png 11w, https:\/\/roayae.org\/wp-content\/uploads\/2026\/05\/5-1.png 1177w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Roaya Hero Section Roayae Medical Bar location_on \u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 arrow_back_ios medical_services \u0642\u0627\u0628\u0644 \u0627\u0644\u0637\u0628\u064a\u0628 arrow_back_ios \u0627\u0644\u0637\u0648\u0627\u0631\u0626 \u0648\u0627\u0644\u062d\u062c\u0632 774441177 phone_in_talk Vision & Mission – 3D Corporate visibility rocket_launch diamond Medical Branches \u0641\u0631\u0648\u0639\u0646\u0627 \u0641\u064a \u0627\u0644\u064a\u0645\u0646 \u0634\u0628\u0643\u0629 \u0641\u0631\u0648\u0639 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u063a\u0637\u064a \u0623\u0647\u0645 \u0627\u0644\u0645\u062d\u0627\u0641\u0638\u0627\u062a \u0644\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0637\u0628\u064a\u0629 \u0627\u0644\u0623\u0642\u0631\u0628 \u0625\u0644\u064a\u0643\u0645. \u0639\u062f\u0646 \u0641\u0631\u0639 \u0639\u062f\u0646 \u064a\u0642\u0639 \u0641\u064a \u0642\u0644\u0628 \u0627\u0644\u0639\u0627\u0635\u0645\u0629 \u0627\u0644\u0645\u0624\u0642\u062a\u0629\u060c \u0645\u062c\u0647\u0632 \u0628\u0623\u062d\u062f\u062b \u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":815,"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":9437,"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/pages\/2\/revisions\/9437"}],"wp:attachment":[{"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}