{"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-06-08T12:09:26","modified_gmt":"2026-06-08T09:09:26","slug":"home-page-01","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 High-End Medical Slider - Optimized<\/title> <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\"> <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script> <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\"><\/script> <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Tajawal', 'sans-serif'], }, colors: { primary: '#008CA1', secondary: '#003B5C', accent: '#FFB300', }, animation: { 'zoom-slow': 'zoomSlow 20s linear infinite alternate', }, keyframes: { zoomSlow: { '0%': { transform: 'scale(1)' }, '100%': { transform: 'scale(1.1)' }, } } } } } <\/script> <style> body { margin: 0; padding: 0; background-color: #f9fafb; } .slider-container { height: 400px; } @media (min-width: 768px) { .slider-container { height: 600px; } } <\/style><\/head><body> <section class=\"relative w-full slider-container overflow-hidden rounded-b-[1.5rem] md:rounded-b-[3rem] shadow-xl bg-white\" x-data=\"sliderComponent()\" x-init=\"initSlider()\" @mouseenter=\"stopAutoSlide()\" @mouseleave=\"startAutoSlide()\" :dir=\"currentDir\"> <template x-for=\"(slide, index) in slides\" :key=\"index\"> <div class=\"absolute inset-0 w-full h-full\" x-show=\"activeSlide === index\" x-transition:enter=\"transition opacity duration-1000\" x-transition:enter-start=\"opacity-0\" x-transition:enter-end=\"opacity-100\" x-transition:leave=\"transition opacity duration-1000\" x-transition:leave-start=\"opacity-100\" x-transition:leave-end=\"opacity-0\"> <div class=\"absolute inset-0 overflow-hidden\"> <img :src=\"slide.img\" class=\"w-full h-full object-cover animate-zoom-slow\" :alt=\"getText(slide.title)\"> <div class=\"absolute inset-0 bg-gradient-to-t from-black\/40 via-transparent to-black\/20 md:bg-gradient-to-b md:from-black\/40 md:via-transparent md:to-black\/40\"><\/div> <\/div> <div class=\"absolute top-6 md:top-12 start-6 md:start-12 z-20 pointer-events-none max-w-[70%] md:max-w-sm\"> <div class=\"pointer-events-auto bg-white\/95 backdrop-blur-md p-4 md:p-6 rounded-xl md:rounded-2xl shadow-xl border-s-4 border-primary transform transition-all duration-700\" x-show=\"activeSlide === index\" x-transition:enter=\"opacity-0 -translate-y-4\" x-transition:enter-end=\"opacity-100 translate-y-0\"> <h2 class=\"text-sm md:text-2xl font-bold text-secondary mb-1 md:mb-2\" x-text=\"getText(slide.title)\"><\/h2> <p class=\"text-[10px] md:text-sm text-gray-600 font-medium leading-relaxed\" x-text=\"getText(slide.subtitle)\"><\/p> <\/div> <\/div> <\/div> <\/template> <div class=\"hidden md:flex absolute inset-x-0 top-1\/2 -translate-y-1\/2 justify-between items-center px-6 z-30 pointer-events-none\"> <button @click=\"next()\" class=\"pointer-events-auto w-10 h-10 rounded-full bg-white\/20 hover:bg-white backdrop-blur border border-white\/30 text-white hover:text-secondary flex items-center justify-center transition-all shadow-lg\"> <i class=\"fa-solid fa-chevron-right\"><\/i> <\/button> <button @click=\"prev()\" class=\"pointer-events-auto w-10 h-10 rounded-full bg-white\/20 hover:bg-white backdrop-blur border border-white\/30 text-white hover:text-secondary flex items-center justify-center transition-all shadow-lg\"> <i class=\"fa-solid fa-chevron-left\"><\/i> <\/button> <\/div> <div class=\"absolute bottom-4 md:bottom-8 left-1\/2 transform -translate-x-1\/2 flex items-center gap-2 z-30\"> <template x-for=\"(slide, index) in slides\" :key=\"index\"> <button @click=\"activeSlide = index; stopAutoSlide(); startAutoSlide()\" class=\"h-1.5 rounded-full transition-all duration-500\" :class=\"activeSlide === index ? 'w-6 bg-accent' : 'w-2 bg-white\/50 hover:bg-white'\"> <\/button> <\/template> <\/div> <\/section> <script> function sliderComponent() { return { activeSlide: 0, timer: null, currentLang: 'ar', currentDir: 'rtl', slides: [ { img: 'https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/4r-1.jpg', title: { ar: '\u0631\u0624\u064a\u0629 \u062b\u0627\u0642\u0628\u0629.. \u0648\u0645\u0633\u062a\u0642\u0628\u0644 \u0645\u0634\u0631\u0642', en: 'Sharp Vision.. Bright Future' }, subtitle: { ar: '\u062a\u0642\u0646\u064a\u0627\u062a \u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0625\u0628\u0635\u0627\u0631 \u0628\u0623\u0645\u0627\u0646 \u0648\u0641\u0642 \u0623\u0639\u0644\u0649 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631.', en: 'Vision correction with safety.' } }, { img: 'https:\/\/roayae.org\/wp-content\/uploads\/2026\/02\/%D9%83%D8%B4%D9%81-1024x680.jpg', title: { ar: '\u0646\u062e\u0628\u0629 \u0627\u0633\u062a\u0634\u0627\u0631\u064a\u064a \u0627\u0644\u0634\u0628\u0643\u064a\u0629', en: 'Elite Retina Consultants' }, subtitle: { ar: '\u062a\u0634\u062e\u064a\u0635 \u0648\u0639\u0644\u0627\u062c \u0645\u062a\u0637\u0648\u0631 \u0644\u0623\u0645\u0631\u0627\u0636 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0634\u0628\u0643\u064a\u0629.', en: 'Advanced diagnosis & treatment.' } }, { img: 'https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/aden-1.jpg1_-1-1024x680.jpg', title: { ar: '\u0623\u062d\u062f\u062b \u063a\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a', en: 'Modern Operating Rooms' }, subtitle: { ar: '\u062a\u062c\u0647\u064a\u0632\u0627\u062a \u0637\u0628\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0636\u0645\u0627\u0646 \u0623\u0641\u0636\u0644 \u0627\u0644\u0646\u062a\u0627\u0626\u062c.', en: 'Integrated medical equipment.' } }, { img: 'https:\/\/roayae.org\/wp-content\/uploads\/2019\/08\/46A2205-scaled.jpg', title: { ar: '\u0642\u0648\u0627\u0641\u0644 \u0637\u0628\u064a\u0629 \u0648\u0645\u062c\u062a\u0645\u0639\u064a\u0629', en: 'Medical Convoys' }, subtitle: { ar: '\u0645\u0628\u0627\u062f\u0631\u0627\u062a \u0645\u0633\u062a\u0645\u0631\u0629 \u0644\u0644\u0643\u0634\u0641 \u0627\u0644\u0645\u0628\u0643\u0631 \u0639\u0646 \u0623\u0645\u0631\u0627\u0636 \u0627\u0644\u0639\u064a\u0648\u0646.', en: 'Early detection initiatives.' } } ], initSlider() { const htmlLang = document.documentElement.lang; this.currentLang = htmlLang.startsWith('en') ? 'en' : 'ar'; this.currentDir = this.currentLang === 'ar' ? 'rtl' : 'ltr'; this.startAutoSlide(); }, getText(obj) { return obj[this.currentLang] || obj['ar']; }, startAutoSlide() { if(this.timer) clearInterval(this.timer); this.timer = setInterval(() => { this.next(); }, 5000); }, stopAutoSlide() { clearInterval(this.timer); }, next() { this.activeSlide = (this.activeSlide + 1) % this.slides.length; }, prev() { this.activeSlide = this.activeSlide === 0 ? this.slides.length - 1 : this.activeSlide - 1; } } } <\/script><\/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\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7120b40 elementor-section-content-middle services_cta elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7120b40\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-9cfe35c\" data-id=\"9cfe35c\" 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-ab0bbc8 elementor-align-center elementor-widget elementor-widget-elementskit-button\" data-id=\"ab0bbc8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t<div class=\"ekit-btn-wraper\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/roayae.org\/ar\/branches\/\" class=\"elementskit-btn services_cta_btn whitespace--normal\" id=\"\">\n\t\t\t\t\t<i class=\"fas fa-medkit\"><\/i>\u0623\u062e\u062a\u0627\u0631 \u0627\u0644\u0641\u0631\u0639\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\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<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-70193c8\" data-id=\"70193c8\" 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-f6838a5 elementor-align-center elementor-widget elementor-widget-elementskit-button\" data-id=\"f6838a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t<div class=\"ekit-btn-wraper\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/roayae.org\/doctors\/\" class=\"elementskit-btn services_cta_btn whitespace--normal\" id=\"\">\n\t\t\t\t\t<i class=\"fas fa-eye\"><\/i>\u0642\u0627\u0628\u0644 \u0627\u0644\u0637\u0628\u064a\u0628\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\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<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-9dba643\" data-id=\"9dba643\" 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-301ed4b services_cta_action ekit-equal-height-disable elementor-widget elementor-widget-elementskit-icon-box\" data-id=\"301ed4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" > <!-- link opening -->\n <a href=\"tel:+967774441177\" target=\"_blank\" rel=\"nofollow\" class=\"ekit_global_links\">\n <!-- end link opening -->\n\n <div class=\"elementskit-infobox text- text-left icon-lef-right-aligin elementor-animation- media \">\n <div class=\"elementskit-box-header elementor-animation-\">\n <div class=\"elementskit-info-box-icon text-center\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"><\/path><path d=\"M23.71 16.67C20.66 13.78 16.54 12 12 12 7.46 12 3.34 13.78.29 16.67c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l2.48 2.48c.18.18.43.29.71.29.27 0 .52-.11.7-.28.79-.74 1.69-1.36 2.66-1.85.33-.16.56-.5.56-.9v-3.1c1.45-.48 3-.73 4.6-.73s3.15.25 4.6.72v3.1c0 .39.23.74.56.9.98.49 1.87 1.12 2.66 1.85.18.18.43.28.7.28.28 0 .53-.11.71-.29l2.48-2.48c.18-.18.29-.43.29-.71 0-.27-.11-.52-.29-.7zM21.16 6.26l-1.41-1.41-3.56 3.55 1.41 1.41s3.45-3.52 3.56-3.55zM13 2h-2v5h2V2zM6.4 9.81L7.81 8.4 4.26 4.84 2.84 6.26c.11.03 3.56 3.55 3.56 3.55z\"><\/path><\/svg>\n <\/div>\n <\/div>\n <div class=\"box-body\">\n <span class=\"elementskit-info-box-title\">\n 774441177 <\/span>\n \t\t \t<p>\u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0637\u0648\u0627\u0631\u0649\u0621<\/p>\n <\/div>\n \n \n <\/div>\n <\/a>\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-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 Values - 3D Professional<\/title>\r\n \r\n <!-- Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n <!-- Icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\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 body {\r\n font-family: 'Tajawal', sans-serif;\r\n background-color: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* 3D Card Effect *\/\r\n .card-3d-wrapper {\r\n perspective: 1000px;\r\n height: 100%;\r\n }\r\n\r\n .card-3d {\r\n background: linear-gradient(145deg, #ffffff, #f1f5f9);\r\n border-radius: 20px;\r\n \/* Neumorphism \/ 3D Bevel Effect *\/\r\n box-shadow: \r\n 8px 8px 16px #d1d5db,\r\n -8px -8px 16px #ffffff,\r\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n z-index: 1;\r\n border: 1px solid rgba(255,255,255,0.6);\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .card-3d::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n padding: 2px;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0));\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n pointer-events: none;\r\n }\r\n\r\n .card-3d:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n box-shadow: \r\n 15px 15px 30px #cbd5e1,\r\n -15px -15px 30px #ffffff;\r\n }\r\n\r\n \/* 3D Icon Container *\/\r\n .icon-3d-container {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n margin-bottom: 1.5rem;\r\n position: relative;\r\n transition: all 0.5s ease;\r\n \/* Deep 3D Shadow for Floating Sphere look *\/\r\n box-shadow: \r\n 0 10px 15px -3px rgba(0, 0, 0, 0.1), \r\n 0 4px 6px -2px rgba(0, 0, 0, 0.05),\r\n inset 0 -5px 10px rgba(0,0,0,0.1),\r\n inset 0 5px 10px rgba(255,255,255,0.5);\r\n }\r\n \r\n .card-3d:hover .icon-3d-container {\r\n transform: rotateY(180deg);\r\n }\r\n \r\n .card-3d:hover .icon-3d-container i {\r\n transform: rotateY(-180deg);\r\n transition: transform 0.5s;\r\n }\r\n\r\n \/* Specific Gradients *\/\r\n .vision-gradient { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); color: #2563eb; }\r\n .mission-gradient { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); color: #9333ea; }\r\n .values-gradient { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); color: #0d9488; }\r\n\r\n \/* Bottom 3D Bar *\/\r\n .bar-3d {\r\n width: 60%;\r\n height: 6px;\r\n border-radius: 10px;\r\n margin-top: auto;\r\n box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Pagination *\/\r\n .swiper-pagination-bullet {\r\n width: 10px;\r\n height: 10px;\r\n background: #cbd5e1;\r\n opacity: 1;\r\n box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);\r\n }\r\n .swiper-pagination-bullet-active {\r\n background: #2563eb;\r\n width: 30px;\r\n border-radius: 5px;\r\n box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);\r\n }\r\n \r\n .swiper-wrapper {\r\n padding-bottom: 20px;\r\n }\r\n \r\n .swiper-slide {\r\n height: auto !important;\r\n padding: 15px;\r\n }\r\n\r\n \/* Background Animation *\/\r\n .blob {\r\n position: absolute;\r\n filter: blur(50px);\r\n opacity: 0.6;\r\n animation: float 10s infinite ease-in-out;\r\n z-index: 0;\r\n }\r\n @keyframes float {\r\n 0% { transform: translate(0, 0) rotate(0deg); }\r\n 50% { transform: translate(20px, 30px) rotate(10deg); }\r\n 100% { transform: translate(0, 0) rotate(0deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-slate-50\">\r\n\r\n <section class=\"py-12 lg:py-16 relative overflow-hidden\">\r\n <!-- Dynamic Background -->\r\n <div class=\"blob w-96 h-96 bg-blue-200 rounded-full -top-20 -right-20\"><\/div>\r\n <div class=\"blob w-80 h-80 bg-purple-200 rounded-full top-40 -left-20 animation-delay-2000\"><\/div>\r\n <div class=\"blob w-64 h-64 bg-teal-100 rounded-full bottom-0 right-1\/4 animation-delay-4000\"><\/div>\r\n\r\n <div class=\"container mx-auto px-4 relative z-10\">\r\n <!-- Header -->\r\n <div class=\"text-center mb-12\" data-aos=\"fade-down\">\r\n <h2 class=\"text-3xl lg:text-4xl font-extrabold text-slate-800 mb-3 drop-shadow-sm\">\r\n <span class=\"bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600\">\r\n \u0645\u0646 \u0646\u062d\u0646\r\n <\/span>\r\n <\/h2>\r\n <div class=\"w-24 h-1.5 mx-auto rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-teal-500 shadow-md\"><\/div>\r\n <\/div>\r\n\r\n <!-- Swiper -->\r\n <div class=\"swiper vmvSwiper pb-12\">\r\n <div class=\"swiper-wrapper\">\r\n \r\n <!-- Vision Card -->\r\n <div class=\"swiper-slide\">\r\n <div class=\"card-3d-wrapper\">\r\n <div class=\"card-3d p-8\">\r\n <div class=\"icon-3d-container vision-gradient ring-4 ring-blue-50\">\r\n <i class=\"fas fa-eye drop-shadow-md\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-slate-800\">\u0631\u0624\u064a\u062a\u0646\u0627<\/h3>\r\n <p class=\"text-slate-600 text-center leading-relaxed text-sm mb-6\">\r\n \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 <\/p>\r\n <div class=\"bar-3d bg-gradient-to-r from-blue-400 to-blue-600\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Mission Card -->\r\n <div class=\"swiper-slide\">\r\n <div class=\"card-3d-wrapper\">\r\n <div class=\"card-3d p-8\">\r\n <div class=\"icon-3d-container mission-gradient ring-4 ring-purple-50\">\r\n <i class=\"fas fa-bullseye drop-shadow-md\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-slate-800\">\u0631\u0633\u0627\u0644\u062a\u0646\u0627<\/h3>\r\n <p class=\"text-slate-600 text-center leading-relaxed text-sm mb-6\">\r\n \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 <\/p>\r\n <div class=\"bar-3d bg-gradient-to-r from-purple-400 to-purple-600\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Values Card -->\r\n <div class=\"swiper-slide\">\r\n <div class=\"card-3d-wrapper\">\r\n <div class=\"card-3d p-8\">\r\n <div class=\"icon-3d-container values-gradient ring-4 ring-teal-50\">\r\n <i class=\"fas fa-gem drop-shadow-md\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-slate-800\">\u0642\u064a\u0645\u0646\u0627<\/h3>\r\n <p class=\"text-slate-600 text-center leading-relaxed text-sm mb-6\">\r\n \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 <\/p>\r\n <div class=\"bar-3d bg-gradient-to-r from-teal-400 to-teal-600\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <!-- Pagination -->\r\n <div class=\"swiper-pagination\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Scripts -->\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 <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n AOS.init({\r\n duration: 800,\r\n once: true,\r\n offset: 50,\r\n easing: 'ease-out-cubic'\r\n });\r\n\r\n new Swiper(\".vmvSwiper\", {\r\n slidesPerView: 1,\r\n spaceBetween: 30,\r\n rtl: true,\r\n loop: true,\r\n speed: 800,\r\n autoplay: {\r\n delay: 5000,\r\n disableOnInteraction: false,\r\n pauseOnMouseEnter: true\r\n },\r\n pagination: {\r\n el: \".swiper-pagination\",\r\n clickable: true,\r\n },\r\n breakpoints: {\r\n 640: {\r\n slidesPerView: 1,\r\n spaceBetween: 20,\r\n },\r\n 768: {\r\n slidesPerView: 2,\r\n spaceBetween: 30,\r\n },\r\n 1024: {\r\n slidesPerView: 3,\r\n spaceBetween: 40,\r\n },\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-5f6cbe8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5f6cbe8\" 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-154f640\" data-id=\"154f640\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\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-a6a7edf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a6a7edf\" 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-b51e250\" data-id=\"b51e250\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\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>\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>\u0631\u0624\u064a\u0629 - \u0641\u062d\u0635 \u0627\u0644\u0646\u0638\u0631 (\u0646\u0633\u062e\u0629 \u0645\u0639\u0632\u0648\u0644\u0629 \u062b\u0646\u0627\u0626\u064a\u0629 \u0627\u0644\u0644\u063a\u0629)<\/title>\r\n \r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n corePlugins: {\r\n preflight: false,\r\n }\r\n }\r\n <\/script>\r\n\r\n <!-- \u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a -->\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\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n #roya-ai-vision-widget {\r\n font-family: 'Tajawal', sans-serif;\r\n background-color: #0f172a;\r\n background-image: radial-gradient(circle at top right, #1e293b, #0f172a);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem 1rem;\r\n border-radius: 1.5rem;\r\n margin: 2rem auto;\r\n max-width: 500px;\r\n direction: rtl; \/* \u0633\u064a\u062a\u0645 \u062a\u063a\u064a\u064a\u0631\u0647 \u0628\u0631\u0645\u062c\u064a\u0627\u064b \u062d\u0633\u0628 \u0644\u063a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629 *\/\r\n box-sizing: border-box;\r\n transition: direction 0.3s ease;\r\n }\r\n\r\n #roya-ai-vision-widget * {\r\n box-sizing: inherit;\r\n }\r\n\r\n #roya-ai-vision-widget .glass-card {\r\n background: rgba(255, 255, 255, 0.03);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n @keyframes roya-widget-glow {\r\n 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) }\r\n 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) }\r\n 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) }\r\n }\r\n\r\n #roya-ai-vision-widget .glowing-btn {\r\n animation: roya-widget-glow 2s infinite ease-in-out;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n #roya-ai-vision-widget .glowing-btn:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n animation: roya-widget-glow 1s infinite ease-in-out;\r\n }\r\n\r\n #roya-ai-vision-widget .eye-scan-line {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background: #06b6d4;\r\n box-shadow: 0 0 10px #06b6d4, 0 0 20px #06b6d4;\r\n animation: roya-widget-scan 2s infinite linear;\r\n opacity: 0.7;\r\n }\r\n\r\n @keyframes roya-widget-scan {\r\n 0% { top: 10%; opacity: 0 }\r\n 10% { opacity: 1 }\r\n 90% { opacity: 1 }\r\n 100% { top: 90%; opacity: 0 }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"background-color: #f8fafc; padding: 20px; margin: 0; font-family: sans-serif;\">\r\n\r\n \r\n <!-- ==========================================================================\r\n \u0628\u062f\u0627\u064a\u0629 \u0643\u0648\u062f \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0645\u0639\u0632\u0648\u0644 \r\n ========================================================================== -->\r\n <div id=\"roya-ai-vision-widget\" class=\"text-white antialiased\">\r\n <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\">\r\n \r\n <!-- \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 -->\r\n <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>\r\n <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>\r\n \r\n <!-- \u0627\u0644\u0634\u0639\u0627\u0631 \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 -->\r\n <div class=\"mb-6 z-10\">\r\n <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\">\r\n <i class=\"fa-solid fa-eye text-3xl text-cyan-400\"><\/i>\r\n <div class=\"eye-scan-line\"><\/div>\r\n <\/div>\r\n <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>\r\n <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>\r\n <\/div>\r\n \r\n <!-- \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629 -->\r\n <div class=\"z-10 mb-8\">\r\n <h3 class=\"text-lg font-semibold text-white mb-2 leading-relaxed mt-0\">\r\n <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> \r\n <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>\r\n <\/h3>\r\n <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>\r\n <\/div>\r\n \r\n <!-- \u0632\u0631 \u0627\u0644\u0641\u062d\u0635 -->\r\n <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 focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-slate-900\">\r\n <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\">\r\n <i class=\"fa-solid fa-robot text-xl text-white\"><\/i>\r\n <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>\r\n <i id=\"roya-btn-arrow\" class=\"fa-solid fa-arrow-left text-sm text-white\/80 group-hover:-translate-x-1 transition-transform\"><\/i>\r\n <\/div>\r\n <\/a>\r\n \r\n <!-- \u0627\u0644\u062a\u0630\u064a\u064a\u0644 -->\r\n <div class=\"mt-4 z-10 flex items-center justify-center gap-2 text-xs text-slate-500\">\r\n <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n <span data-i18n=\"safe_text\">\u0622\u0645\u0646 \u0648\u0645\u0648\u062b\u0648\u0642 100%<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- \u0633\u0643\u0631\u0628\u062a \u0627\u0644\u062a\u0631\u062c\u0645\u0629 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\u0629 \u0627\u0644\u0645\u0639\u0632\u0648\u0644 -->\r\n <script>\r\n (function() {\r\n const translations = {\r\n ar: {\r\n center_name: \"\u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629\",\r\n 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\",\r\n discover_text: \"\u0627\u0643\u062a\u0634\u0641 \u0635\u062d\u0629 \u0639\u064a\u0646\u064a\u0643 \u0628\u062a\u0642\u0646\u064a\u0629\",\r\n ai_text: \"\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\",\r\n 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.\",\r\n 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\",\r\n safe_text: \"\u0622\u0645\u0646 \u0648\u0645\u0648\u062b\u0648\u0642 100%\"\r\n },\r\n en: {\r\n center_name: \"Roya Center\",\r\n center_desc: \"For Eye & Retina Surgery\",\r\n discover_text: \"Discover your eye health with\",\r\n ai_text: \"AI Technology\",\r\n description: \"A quick and accurate initial assessment of your vision using the latest AI technologies, easily and for free.\",\r\n btn_text: \"Free AI Vision Test Now\",\r\n safe_text: \"100% Safe & Reliable\"\r\n }\r\n };\r\n\r\n function applyLanguage() {\r\n \/\/ \u0642\u0631\u0627\u0621\u0629 \u0644\u063a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629 \u0645\u0646 \u0648\u0633\u0645 html\r\n const htmlLang = document.documentElement.lang.toLowerCase();\r\n const lang = htmlLang.startsWith('en') ? 'en' : 'ar';\r\n \r\n const widget = document.getElementById('roya-ai-vision-widget');\r\n if(!widget) return;\r\n\r\n \/\/ \u062a\u063a\u064a\u064a\u0631 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0648\u064a\u062f\u062c\u062a\r\n widget.style.direction = lang === 'en' ? 'ltr' : 'rtl';\r\n \r\n \/\/ \u062a\u0639\u062f\u064a\u0644 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0633\u0647\u0645 \u0641\u064a \u0627\u0644\u0632\u0631\r\n const arrow = document.getElementById('roya-btn-arrow');\r\n if(arrow) {\r\n if(lang === 'en') {\r\n arrow.classList.remove('fa-arrow-left', 'group-hover:-translate-x-1');\r\n arrow.classList.add('fa-arrow-right', 'group-hover:translate-x-1');\r\n } else {\r\n arrow.classList.remove('fa-arrow-right', 'group-hover:translate-x-1');\r\n arrow.classList.add('fa-arrow-left', 'group-hover:-translate-x-1');\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0631\u062c\u0645\u0629 \u0627\u0644\u0646\u0635\u0648\u0635 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 data-i18n\r\n const elements = widget.querySelectorAll('[data-i18n]');\r\n elements.forEach(el => {\r\n const key = el.getAttribute('data-i18n');\r\n if(translations[lang][key]) {\r\n el.textContent = translations[lang][key];\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062f\u0627\u0644\u0629 \u0641\u0648\u0631\u0627\u064b\r\n applyLanguage();\r\n\r\n \/\/ \u0645\u0631\u0627\u0642\u0628\u0629 \u0623\u064a \u062a\u063a\u064a\u064a\u0631 \u0642\u062f \u064a\u062d\u062f\u062b \u0644\u0644\u063a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629 \u0645\u0633\u062a\u0642\u0628\u0644\u0627\u064b (\u0645\u0641\u064a\u062f \u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u0627\u062d\u062f\u0629 SPA)\r\n const observer = new MutationObserver(function(mutations) {\r\n mutations.forEach(function(mutation) {\r\n if (mutation.attributeName === \"lang\") {\r\n applyLanguage();\r\n }\r\n });\r\n });\r\n observer.observe(document.documentElement, { attributes: true });\r\n })();\r\n <\/script>\r\n <\/div>\r\n <!-- ==========================================================================-->\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<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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f3dbb30 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f3dbb30\" 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-4cbc954\" data-id=\"4cbc954\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\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>High-End Medical Slider – Optimized \u0623\u062e\u062a\u0627\u0631 \u0627\u0644\u0641\u0631\u0639 \u0642\u0627\u0628\u0644 \u0627\u0644\u0637\u0628\u064a\u0628 774441177 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0637\u0648\u0627\u0631\u0649\u0621 Vision Mission Values – 3D Professional \u0645\u0646 \u0646\u062d\u0646 \u0631\u0624\u064a\u062a\u0646\u0627 \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. \u0631\u0633\u0627\u0644\u062a\u0646\u0627 \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. \u0642\u064a\u0645\u0646\u0627 \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 […]<\/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":746,"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":9107,"href":"https:\/\/roayae.org\/ar\/wp-json\/wp\/v2\/pages\/2\/revisions\/9107"}],"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}]}}