{"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-03-17T01:44:52","modified_gmt":"2026-03-16T22:44:52","slug":"home-page-01","status":"publish","type":"page","link":"https:\/\/roayae.org\/en\/","title":{"rendered":"Home"},"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 High-End Medical Slider - Compact<\/title>\r\n \r\n <!-- 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@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- Alpine.js -->\r\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\"><\/script>\r\n\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\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: '#008CA1', \r\n secondary: '#003B5C', \r\n accent: '#FFB300', \r\n },\r\n animation: {\r\n 'zoom-slow': 'zoomSlow 20s linear infinite alternate',\r\n 'fade-in-down': 'fadeInDown 0.8s ease-out forwards',\r\n },\r\n keyframes: {\r\n zoomSlow: {\r\n '0%': { transform: 'scale(1)' },\r\n '100%': { transform: 'scale(1.1)' },\r\n },\r\n fadeInDown: {\r\n '0%': { opacity: '0', transform: 'translateY(-20px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50\">\r\n\r\n <!-- Main Slider Section -->\r\n <section class=\"relative w-full h-[450px] md:h-[650px] overflow-hidden rounded-b-[2rem] shadow-2xl group\"\r\n x-data=\"sliderComponent()\"\r\n x-init=\"initSlider()\"\r\n @mouseenter=\"stopAutoSlide()\"\r\n @mouseleave=\"startAutoSlide()\"\r\n :dir=\"currentDir\">\r\n\r\n <!-- Slides Loop -->\r\n <template x-for=\"(slide, index) in slides\" :key=\"index\">\r\n <div class=\"absolute inset-0 w-full h-full\"\r\n x-show=\"activeSlide === index\"\r\n x-transition:enter=\"transition opacity duration-1000 ease-out\"\r\n x-transition:enter-start=\"opacity-0\"\r\n x-transition:enter-end=\"opacity-100\"\r\n x-transition:leave=\"transition opacity duration-1000 ease-in\"\r\n x-transition:leave-start=\"opacity-100\"\r\n x-transition:leave-end=\"opacity-0\">\r\n\r\n <!-- Image Layer -->\r\n <div class=\"absolute inset-0 overflow-hidden\">\r\n <img :src=\"slide.img\"\r\n class=\"w-full h-full object-cover animate-zoom-slow\"\r\n :alt=\"getText(slide.title)\">\r\n \r\n <!-- Gradient: Darker at top corners for text readability -->\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-black\/40 via-transparent to-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <!-- Content Layer: Positioned Top-Start (Right in AR, Left in EN) -->\r\n <!-- 'start-0' automatically handles RTL\/LTR switching -->\r\n <div class=\"absolute top-0 start-0 w-full p-6 md:p-12 z-20 pointer-events-none\">\r\n \r\n <!-- Compact Card -->\r\n <div class=\"pointer-events-auto relative bg-white\/95 backdrop-blur-md p-5 md:p-6 rounded-2xl shadow-xl border-s-4 border-primary max-w-[240px] md:max-w-sm transform transition-all duration-700\"\r\n x-show=\"activeSlide === index\"\r\n x-transition:enter=\"opacity-0 -translate-y-4\"\r\n x-transition:enter-end=\"opacity-100 translate-y-0\"\r\n x-transition:leave=\"opacity-100 translate-y-0\"\r\n x-transition:leave-end=\"opacity-0 -translate-y-4\">\r\n\r\n <h2 class=\"text-base md:text-2xl font-bold text-secondary mb-1.5 leading-tight\"\r\n x-text=\"getText(slide.title)\"><\/h2>\r\n\r\n <p class=\"text-xs md:text-sm text-gray-600 font-medium leading-relaxed\"\r\n x-text=\"getText(slide.subtitle)\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/template>\r\n\r\n <!-- Navigation Arrows (Desktop) -->\r\n <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\">\r\n <!-- Next\/Prev logic swaps based on direction automatically via Alpine logic below or manual check -->\r\n <button @click=\"dir === 'rtl' ? next() : prev()\"\r\n 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 duration-300 shadow-lg hover:scale-110\">\r\n <i class=\"fa-solid fa-chevron-right text-sm\"><\/i>\r\n <\/button>\r\n\r\n <button @click=\"dir === 'rtl' ? prev() : next()\"\r\n 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 duration-300 shadow-lg hover:scale-110\">\r\n <i class=\"fa-solid fa-chevron-left text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Pagination Dots (Bottom Center) -->\r\n <div class=\"absolute bottom-6 left-1\/2 transform -translate-x-1\/2 flex items-center gap-2 z-30\">\r\n <template x-for=\"(slide, index) in slides\" :key=\"index\">\r\n <button @click=\"activeSlide = index; stopAutoSlide(); startAutoSlide()\"\r\n class=\"h-1.5 rounded-full transition-all duration-500 ease-out shadow-sm backdrop-blur-sm\"\r\n :class=\"activeSlide === index ? 'w-6 bg-accent' : 'w-2 bg-white\/50 hover:bg-white hover:w-3'\">\r\n <\/button>\r\n <\/template>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <script>\r\n function sliderComponent() {\r\n return {\r\n activeSlide: 0,\r\n timer: null,\r\n currentLang: 'ar',\r\n currentDir: 'rtl',\r\n slides: [\r\n {\r\n img: 'https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/4r-1.jpg',\r\n 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' },\r\n 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.', en: 'Vision correction with safety.' }\r\n },\r\n {\r\n img: 'https:\/\/roayae.org\/wp-content\/uploads\/2026\/02\/%D9%83%D8%B4%D9%81-1024x680.jpg',\r\n 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' },\r\n subtitle: { ar: '\u062a\u0634\u062e\u064a\u0635 \u0648\u0639\u0644\u0627\u062c \u0645\u062a\u0637\u0648\u0631.', en: 'Advanced diagnosis & treatment.' }\r\n },\r\n {\r\n img: 'https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/aden-1.jpg1_-1-1024x680.jpg',\r\n title: { ar: '\u0623\u062d\u062f\u062b \u063a\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a', en: 'Modern Operating Rooms' },\r\n subtitle: { ar: '\u062a\u062c\u0647\u064a\u0632\u0627\u062a \u0637\u0628\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629.', en: 'Integrated medical equipment.' }\r\n },\r\n {\r\n img: 'https:\/\/roayae.org\/wp-content\/uploads\/2019\/08\/46A2205-scaled.jpg',\r\n title: { ar: '\u0642\u0648\u0627\u0641\u0644 \u0637\u0628\u064a\u0629 \u0648\u0645\u062c\u062a\u0645\u0639\u064a\u0629', en: 'Medical Convoys' },\r\n subtitle: { ar: '\u0645\u0628\u0627\u062f\u0631\u0627\u062a \u0644\u0644\u0643\u0634\u0641 \u0627\u0644\u0645\u0628\u0643\u0631.', en: 'Early detection initiatives.' }\r\n }\r\n ],\r\n initSlider() {\r\n \/\/ Detect Language from HTML tag\r\n const htmlLang = document.documentElement.lang;\r\n this.currentLang = htmlLang.startsWith('en') ? 'en' : 'ar';\r\n this.currentDir = this.currentLang === 'ar' ? 'rtl' : 'ltr';\r\n this.startAutoSlide();\r\n },\r\n getText(obj) {\r\n return obj[this.currentLang] || obj['ar'];\r\n },\r\n startAutoSlide() {\r\n if(this.timer) clearInterval(this.timer);\r\n this.timer = setInterval(() => { this.next(); }, 4000);\r\n },\r\n stopAutoSlide() {\r\n clearInterval(this.timer);\r\n },\r\n next() {\r\n this.activeSlide = (this.activeSlide + 1) % this.slides.length;\r\n },\r\n prev() {\r\n this.activeSlide = this.activeSlide === 0 ? this.slides.length - 1 : this.activeSlide - 1;\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-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=\"#booking\" class=\"elementskit-btn services_cta_btn whitespace--normal\" id=\"\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"><\/path><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"><\/path><\/svg>\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<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 426.667 426.667\" style=\"enable-background:new 0 0 426.667 426.667;\" xml:space=\"preserve\"><g>\t<g>\t\t<g>\t\t\t<path d=\"M405.333,85.333h-64V64c0-36.267-27.733-64-64-64h-128c-36.267,0-64,27.733-64,64v21.333h-64 C8.533,85.333,0,93.867,0,106.667v298.667c0,12.8,8.533,21.333,21.333,21.333h384c12.8,0,21.333-8.533,21.333-21.333V106.667 C426.667,93.867,418.133,85.333,405.333,85.333z M128,64c0-12.8,8.533-21.333,21.333-21.333h128 c12.8,0,21.333,8.533,21.333,21.333v21.333H128V64z M213.333,384c-70.4,0-128-57.6-128-128c0-70.4,57.6-128,128-128 s128,57.6,128,128C341.333,326.4,283.733,384,213.333,384z\"><\/path>\t\t\t<polygon points=\"234.667,170.667 192,170.667 192,234.667 128,234.667 128,277.333 192,277.333 192,341.333 234.667,341.333 234.667,277.333 298.667,277.333 298.667,234.667 234.667,234.667 \"><\/polygon>\t\t<\/g>\t<\/g><\/g><\/svg>\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-0f1460d elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0f1460d\" 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-60eb6c6\" data-id=\"60eb6c6\" 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-1eeef98 elementor-widget elementor-widget-html\" data-id=\"1eeef98\" 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-d6037d8 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"d6037d8\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\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-100 elementor-top-column elementor-element elementor-element-b1c3a1f\" data-id=\"b1c3a1f\" 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-9680ec2 elementor-widget elementor-widget-html\" data-id=\"9680ec2\" 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 \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',\r\n 100: '#e0f2fe',\r\n 200: '#bae6fd',\r\n 300: '#7dd3fc',\r\n 400: '#38bdf8',\r\n 500: '#0ea5e9',\r\n 600: '#0284c7',\r\n 700: '#0369a1',\r\n 800: '#075985',\r\n 900: '#0c4a6e',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* SCOPED STYLES *\/\r\n #mv-component-wrapper {\r\n font-family: 'Tajawal', sans-serif;\r\n overflow: hidden;\r\n }\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\r\n \/* Image Transition Effects *\/\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 \r\n #mv-component-wrapper .content-fade {\r\n animation: mvFadeInUp 0.6s ease forwards;\r\n }\r\n\r\n @keyframes mvFadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* List Item Active State Animation *\/\r\n #mv-component-wrapper .list-item-active {\r\n background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%);\r\n color: white;\r\n transform: translateX(-10px);\r\n box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);\r\n border-right: 4px solid #bae6fd;\r\n }\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\r\n #mv-component-wrapper .list-item-inactive:hover {\r\n background-color: #f0f9ff;\r\n transform: translateX(-5px);\r\n }\r\n\r\n \/* Progress Bar for Auto-play *\/\r\n #mv-component-wrapper .progress-bar {\r\n transition: width 0.1s linear;\r\n }\r\n \r\n \/* Custom Scrollbar *\/\r\n .custom-scroll::-webkit-scrollbar {\r\n width: 4px;\r\n }\r\n .custom-scroll::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n }\r\n .custom-scroll::-webkit-scrollbar-thumb {\r\n background: #cbd5e1;\r\n border-radius: 4px;\r\n }\r\n .custom-scroll::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8;\r\n }\r\n \r\n \/* Clean Image - No Top Shadow *\/\r\n .image-clean-display {\r\n mask-image: linear-gradient(to bottom, black 70%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);\r\n }\r\n \r\n \/* Button Pulse *\/\r\n @keyframes softPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }\r\n 70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }\r\n }\r\n .btn-pulse {\r\n animation: softPulse 2s infinite;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50\">\r\n\r\n <!-- ISOLATED COMPONENT START -->\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 \r\n <!-- Decorative Background Elements -->\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 <div class=\"absolute top-10 right-20 w-60 h-60 bg-blue-100 rounded-full mix-blend-multiply filter blur-[60px] opacity-40 -z-10\"><\/div>\r\n\r\n <div class=\"container mx-auto px-4 lg:px-8 max-w-7xl\">\r\n \r\n <!-- Header -->\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 \u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a <span class=\"text-med-600 relative inline-block\">\r\n \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629\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 class=\"text-slate-500 max-w-2xl mx-auto text-lg font-medium\">\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<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid lg:grid-cols-12 gap-6 lg:gap-8 h-auto lg:h-[550px]\">\r\n\r\n <!-- LEFT COLUMN: Interactive List & CTA -->\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 \u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629\r\n <\/h3>\r\n \r\n <!-- Dynamic List Container -->\r\n <div class=\"space-y-3 flex-1 overflow-y-auto custom-scroll pl-2\" id=\"mv-list-container\">\r\n <!-- List items will be injected by JS -->\r\n <\/div>\r\n\r\n <!-- NEW: Book Now Button -->\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 hover:shadow-med-500\/40 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>\u0627\u062d\u062c\u0632 \u0645\u0648\u0639\u062f\u0643 \u0627\u0644\u0622\u0646<\/span>\r\n <svg class=\"w-5 h-5 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 <!-- Shine Effect -->\r\n <div class=\"absolute top-0 -inset-full h-full w-1\/2 z-5 block transform -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-20 group-hover:animate-shine\" \/>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Auto-play Indicator -->\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 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\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\" 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\" 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\r\n <!-- RIGHT COLUMN: Dynamic Display & Slide Info -->\r\n <div class=\"lg:col-span-8 relative group h-full\">\r\n <div class=\"relative w-full h-full rounded-3xl overflow-hidden shadow-2xl bg-white border border-slate-100\">\r\n \r\n <!-- Image Layer: Clean, No Top Shadow -->\r\n <div class=\"absolute inset-0 bg-slate-100\">\r\n <img decoding=\"async\" id=\"mv-main-image\" src=\"\" alt=\"Medical Vision\" class=\"w-full h-full object-cover slide-image\">\r\n \r\n <!-- Gradient Overlay: STRICTLY BOTTOM ONLY for text readability -->\r\n <div class=\"absolute inset-x-0 bottom-0 h-1\/2 bg-gradient-to-t from-slate-900\/90 via-slate-900\/60 to-transparent pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n <!-- Content Layer -->\r\n <div class=\"absolute bottom-0 right-0 w-full p-8 md:p-10 text-right z-10\">\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 backdrop-blur-md\">\r\n \u0646\u0638\u0631\u0629 \u0639\u0627\u0645\u0629\r\n <\/span>\r\n <\/div>\r\n \r\n <h2 id=\"mv-slide-title\" class=\"text-2xl md:text-4xl font-bold text-white mb-3 leading-tight drop-shadow-lg\">\r\n <!-- Title Injected Here -->\r\n <\/h2>\r\n <p id=\"mv-slide-desc\" class=\"text-slate-100 text-base md:text-lg leading-relaxed max-w-2xl drop-shadow-md opacity-95 font-light\">\r\n <!-- Description Injected Here -->\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Progress Bar (Visual Timer) -->\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 <!-- ISOLATED COMPONENT END -->\r\n\r\n <script>\r\n (function() {\r\n \/\/ Data Configuration\r\n const slidesData = [\r\n {\r\n id: 0,\r\n title: \"\u0631\u0639\u0627\u064a\u0629 \u0635\u062d\u064a\u0629 \u0634\u0627\u0645\u0644\u0629 \u0648\u0645\u0633\u062a\u062f\u0627\u0645\u0629\",\r\n 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\u060c \u0645\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u0627\u0633\u062a\u062f\u0627\u0645\u0629 \u0648\u0627\u0644\u062c\u0648\u062f\u0629 \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0623\u0645\u062f.\",\r\n image: \"https:\/\/roayae.org\/wp-content\/uploads\/2023\/09\/d4-1.bmp\",\r\n icon: `<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 },\r\n {\r\n id: 1,\r\n title: \"\u0627\u0644\u062a\u0632\u0627\u0645 \u0635\u0627\u0631\u0645 \u0628\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0633\u0644\u0627\u0645\u0629\",\r\n 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 \u0644\u0644\u0645\u0631\u0636\u0649 \u0648\u0627\u0644\u0632\u0648\u0627\u0631 \u0648\u0627\u0644\u0643\u0648\u0627\u062f\u0631 \u0627\u0644\u0637\u0628\u064a\u0629.\",\r\n image: \"https:\/\/roayae.org\/wp-content\/uploads\/2025\/10\/31.jpeg\",\r\n icon: `<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 },\r\n {\r\n id: 2,\r\n title: \"\u062a\u0637\u0648\u064a\u0631 \u0645\u0633\u062a\u0645\u0631 \u0644\u0644\u0643\u0648\u0627\u062f\u0631 \u0627\u0644\u0637\u0628\u064a\u0629\",\r\n 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 \u0648\u062f\u0648\u0631\u0627\u062a \u062a\u062e\u0635\u0635\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0645\u0648\u0627\u0643\u0628\u0629 \u0623\u0637\u0628\u0627\u0626\u0646\u0627 \u0644\u0623\u062d\u062f\u062b \u0627\u0644\u0639\u0644\u0648\u0645 \u0627\u0644\u0637\u0628\u064a\u0629.\",\r\n image: \"https:\/\/roayae.org\/wp-content\/uploads\/2026\/02\/%D8%A7%D8%AC%D9%87%D8%B2%D8%A9.jpg\",\r\n icon: `<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 },\r\n {\r\n id: 3,\r\n title: \"\u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u062a\u0634\u062e\u064a\u0635\u064a\u0629\",\r\n desc: \"\u0646\u0645\u062a\u0644\u0643 \u0628\u0646\u064a\u0629 \u062a\u062d\u062a\u064a\u0629 \u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0629 \u0645\u062a\u0637\u0648\u0631\u0629 \u0648\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.\",\r\n image: \"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ju-1024x662.jpg\",\r\n icon: `<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 ];\r\n\r\n \/\/ State\r\n let currentIndex = 0;\r\n let intervalId = null;\r\n let progressBarInterval = null;\r\n const duration = 5000; \/\/ 5 seconds per slide\r\n\r\n \/\/ DOM Elements\r\n const listContainer = document.getElementById('mv-list-container');\r\n const mainImage = document.getElementById('mv-main-image');\r\n const slideTitle = document.getElementById('mv-slide-title');\r\n const slideDesc = document.getElementById('mv-slide-desc');\r\n const slideContent = document.getElementById('mv-slide-content');\r\n const progressBar = document.getElementById('mv-progress');\r\n const statusText = document.getElementById('mv-autoplay-status');\r\n\r\n \/\/ Initialization\r\n function init() {\r\n renderList();\r\n updateSlide(0);\r\n startAutoPlay();\r\n }\r\n\r\n \/\/ Render Side List\r\n function renderList() {\r\n listContainer.innerHTML = '';\r\n slidesData.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 list-item-inactive group`;\r\n btn.id = `mv-item-${index}`;\r\n btn.innerHTML = `\r\n <div class=\"w-10 h-10 rounded-full flex items-center justify-center bg-med-50 text-med-600 transition-colors shadow-sm icon-wrapper group-hover:bg-white\">\r\n ${slide.icon}\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"font-bold text-sm md:text-base\">${slide.title}<\/span>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Interactions\r\n btn.addEventListener('mouseenter', () => {\r\n stopAutoPlay();\r\n updateSlide(index);\r\n statusText.innerHTML = `<span class=\"w-2 h-2 rounded-full bg-amber-400\"><\/span> \u0625\u064a\u0642\u0627\u0641 \u0645\u0624\u0642\u062a`;\r\n });\r\n\r\n btn.addEventListener('mouseleave', () => {\r\n startAutoPlay();\r\n statusText.innerHTML = `<span class=\"w-2 h-2 rounded-full bg-green-500 animate-pulse\"><\/span> \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a`;\r\n });\r\n\r\n listContainer.appendChild(btn);\r\n });\r\n }\r\n\r\n \/\/ Update UI Function\r\n window.updateSlide = function(index) {\r\n currentIndex = index;\r\n\r\n \/\/ 1. Update List Styles\r\n slidesData.forEach((_, i) => {\r\n const item = document.getElementById(`mv-item-${i}`);\r\n const iconWrapper = item.querySelector('.icon-wrapper');\r\n \r\n if (i === index) {\r\n item.classList.remove('list-item-inactive', 'bg-transparent', 'text-slate-600');\r\n item.classList.add('list-item-active');\r\n \/\/ Icon styles are handled by CSS selector .list-item-active .icon-wrapper\r\n } else {\r\n item.classList.add('list-item-inactive', 'bg-transparent', 'text-slate-600');\r\n item.classList.remove('list-item-active');\r\n }\r\n });\r\n\r\n \/\/ 2. Update Image\r\n mainImage.style.opacity = '0.8';\r\n setTimeout(() => {\r\n mainImage.src = slidesData[index].image;\r\n mainImage.style.opacity = '1';\r\n }, 200);\r\n\r\n \/\/ 3. Update Text with Animation Reset\r\n slideContent.classList.remove('content-fade');\r\n void slideContent.offsetWidth; \/\/ Trigger reflow\r\n slideContent.classList.add('content-fade');\r\n \r\n slideTitle.textContent = slidesData[index].title;\r\n slideDesc.textContent = slidesData[index].desc;\r\n\r\n \/\/ 4. Reset Progress Bar if autoplaying\r\n if(intervalId) resetProgressBar();\r\n }\r\n\r\n \/\/ Auto Play Logic\r\n window.nextSlide = function() {\r\n let next = currentIndex + 1;\r\n if (next >= slidesData.length) next = 0;\r\n updateSlide(next);\r\n }\r\n\r\n window.prevSlide = function() {\r\n let prev = currentIndex - 1;\r\n if (prev < 0) prev = slidesData.length - 1;\r\n updateSlide(prev);\r\n }\r\n\r\n function startAutoPlay() {\r\n if (intervalId) return;\r\n intervalId = setInterval(nextSlide, duration);\r\n resetProgressBar();\r\n }\r\n\r\n function stopAutoPlay() {\r\n clearInterval(intervalId);\r\n clearInterval(progressBarInterval);\r\n intervalId = null;\r\n progressBar.style.width = '0%';\r\n }\r\n\r\n function resetProgressBar() {\r\n clearInterval(progressBarInterval);\r\n progressBar.style.width = '0%';\r\n let width = 0;\r\n const step = 100 \/ (duration \/ 50); \/\/ smoother update\r\n \r\n progressBarInterval = setInterval(() => {\r\n width += step;\r\n if (width >= 100) width = 100;\r\n progressBar.style.width = width + '%';\r\n }, 50);\r\n }\r\n\r\n \/\/ Run\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-340191f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"340191f\" 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-65e8804\" data-id=\"65e8804\" 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-dea332c elementor-invisible elementor-widget elementor-widget-elementskit-heading\" data-id=\"dea332c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":0}\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_center ekit_heading_tablet- ekit_heading_mobile-\">\t\t\t\t<div class='ekit-heading__description'>\n\t\t\t\t\t<p class=\"text-gray-600 mb-6 text-lg leading-relaxed\">\u0625\u064a\u0645\u0627\u0646\u0627\u064b \u0645\u0646\u0627 \u0628\u0645\u0633\u0624\u0648\u0644\u064a\u062a\u0646\u0627 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u064a\u0629\u060c \u064a\u0642\u064a\u0645 \u0645\u0631\u0643\u0632 \"\u0631\u0624\u064a\u0629 \u0644\u0637\u0628 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629\" \u0645\u062e\u064a\u0645\u0627\u062a \u062f\u0648\u0631\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0646\u0627\u0626\u064a\u0629 \u0644\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0641\u062d\u0635 \u0648\u0627\u0644\u0639\u0644\u0627\u062c \u0627\u0644\u0645\u062c\u0627\u0646\u064a \u0648\u0625\u062c\u0631\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0644\u0644\u0641\u0626\u0627\u062a \u0627\u0644\u0623\u0634\u062f \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u064b.<\/p>\n<ul class=\"space-y-3 mb-8\">\n<li class=\"flex items-center gap-3 text-gray-700\"><i class=\"fa-solid fa-check-circle text-brand\"><\/i>\u0641\u062d\u0648\u0635\u0627\u062a \u0645\u062c\u0627\u0646\u064a\u0629 \u0634\u0627\u0645\u0644\u0629.<\/li>\n<li class=\"flex items-center gap-3 text-gray-700\"><i class=\"fa-solid fa-check-circle text-brand\"><\/i>\u062a\u0648\u0632\u064a\u0639 \u0623\u062f\u0648\u064a\u0629 \u0648\u0646\u0638\u0627\u0631\u0627\u062a.<\/li>\n<li class=\"flex items-center gap-3 text-gray-700\"><i class=\"fa-solid fa-check-circle text-brand\"><\/i>\u0625\u062c\u0631\u0627\u0621 \u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0628\u064a\u0636\u0627\u0621.<\/li>\n<\/ul>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcd859a elementor-widget elementor-widget-button\" data-id=\"fcd859a\" 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=\"fas fa-hand-holding-medical\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u062a\u0627\u0628\u0639 \u0627\u062e\u0628\u0627\u0631 \u0627\u0644\u0645\u062e\u064a\u0645\u0627\u062a<\/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<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-66840af\" data-id=\"66840af\" 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-dc7b34e elementor-widget elementor-widget-image\" data-id=\"dc7b34e\" 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\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"533\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ft.jpg\" class=\"attachment-large size-large wp-image-5967\" alt=\"\" srcset=\"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ft.jpg 960w, https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ft-300x200.jpg 300w, https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ft-768x512.jpg 768w, https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ft-600x400.jpg 600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1dae603 elementor-absolute elementor-widget elementor-widget-html\" data-id=\"1dae603\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_position":"absolute"}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0632\u0631 \u062a\u0634\u063a\u064a\u0644 \u0641\u064a\u062f\u064a\u0648 \u0627\u062d\u062a\u0631\u0627\u0641\u064a + \u0645\u0648\u062f\u0627\u0644 \u0639\u0631\u0636 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 -->\r\n<style>\r\n \/* \u0623\u0644\u0648\u0627\u0646 \u0637\u0628\u064a\u0629 \u0632\u0631\u0642\u0627\u0621 \u0645\u062a\u0646\u0627\u0633\u0642\u0629 *\/\r\n :root{\r\n --brand-blue:#0b6fb8;\r\n --brand-blue-dark:#095a95;\r\n --overlay: rgba(0,0,0,0.65);\r\n --radius: 12px;\r\n }\r\n\r\n .video-btn {\r\n display:inline-flex;\r\n align-items:center;\r\n gap:12px;\r\n background: linear-gradient(180deg,var(--brand-blue),var(--brand-blue-dark));\r\n color:#fff;\r\n padding:14px 18px;\r\n border-radius:12px;\r\n border:0;\r\n cursor:pointer;\r\n font-size:16px;\r\n font-weight:600;\r\n box-shadow: 0 6px 18px rgba(11,111,184,0.25);\r\n transition: transform .12s ease, box-shadow .12s ease, opacity .12s;\r\n text-decoration:none;\r\n }\r\n .video-btn:active{ transform: translateY(1px) scale(.997); }\r\n .video-btn:focus{ outline:3px solid rgba(11,111,184,0.18); outline-offset:2px; }\r\n\r\n .video-btn svg{ width:20px; height:20px; flex: 0 0 20px; }\r\n\r\n \/* Modal *\/\r\n .video-modal {\r\n position:fixed;\r\n inset:0;\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:9999;\r\n }\r\n .video-modal.active{ display:flex; }\r\n\r\n .video-modal__backdrop{\r\n position:absolute;\r\n inset:0;\r\n background:var(--overlay);\r\n backdrop-filter: blur(2px);\r\n }\r\n\r\n .video-modal__content{\r\n position:relative;\r\n width:min(1100px, 95%);\r\n max-width:1100px;\r\n aspect-ratio:16\/9;\r\n background:#000;\r\n border-radius:var(--radius);\r\n overflow:hidden;\r\n box-shadow: 0 18px 50px rgba(0,0,0,0.6);\r\n transform: translateY(8px);\r\n animation: pop .12s ease;\r\n }\r\n\r\n @keyframes pop { from{ transform: translateY(18px) scale(.995); opacity:0 } to{ transform: translateY(8px) scale(1); opacity:1 } }\r\n\r\n .video-modal__close{\r\n position:absolute;\r\n top:10px;\r\n right:10px;\r\n z-index:5;\r\n background: rgba(255,255,255,0.12);\r\n border:0;\r\n color:#fff;\r\n padding:8px;\r\n border-radius:8px;\r\n cursor:pointer;\r\n backdrop-filter: blur(4px);\r\n }\r\n .video-modal__close:focus{ outline:3px solid rgba(255,255,255,0.12); }\r\n\r\n \/* Responsive for small screens: make content taller or full-screen *\/\r\n @media (max-width:640px){\r\n .video-modal__content{\r\n width:94%;\r\n height:auto;\r\n aspect-ratio: unset;\r\n max-height:85vh;\r\n }\r\n .video-modal__content iframe{\r\n width:100%;\r\n height:100%;\r\n min-height:56vw;\r\n }\r\n }\r\n<\/style>\r\n\r\n<!-- \u0627\u0644\u0632\u0631 -->\r\n<button class=\"video-btn\" id=\"open-video\" aria-haspopup=\"dialog\" aria-controls=\"video-modal\" aria-label=\"\u062a\u0634\u063a\u064a\u0644 \u0641\u064a\u062f\u064a\u0648 \u062a\u0639\u0631\u064a\u0641 \u0628\u0627\u0644\u0645\u0631\u0643\u0632\">\r\n <!-- \u0623\u064a\u0642\u0648\u0646\u0629 \u062a\u0634\u063a\u064a\u0644 -->\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M5 3.87v16.26c0 .98 1.06 1.6 1.94 1.07l12.12-8.13c.82-.55.82-1.75 0-2.3L6.94 2.8C6.06 2.27 5 2.89 5 3.87z\" fill=\"currentColor\"\/>\r\n <\/svg>\r\n \u0645\u0634\u0627\u0647\u062f\u0629 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\r\n<\/button>\r\n\r\n<!-- \u0645\u0648\u062f\u0627\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 -->\r\n<div class=\"video-modal\" id=\"video-modal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\r\n <div class=\"video-modal__backdrop\" id=\"video-backdrop\"><\/div>\r\n\r\n <div class=\"video-modal__content\" role=\"document\" aria-labelledby=\"video-title\">\r\n <button class=\"video-modal__close\" id=\"video-close\" aria-label=\"\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\">\r\n \u2715\r\n <\/button>\r\n\r\n <!-- \u0647\u0646\u0627 \u0633\u064a\u064f\u062f\u0631\u062c iframe \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637\u0629 (lazy load) -->\r\n <div id=\"video-holder\" style=\"width:100%;height:100%;\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n (function(){\r\n const openBtn = document.getElementById('open-video');\r\n const modal = document.getElementById('video-modal');\r\n const backdrop = document.getElementById('video-backdrop');\r\n const closeBtn = document.getElementById('video-close');\r\n const holder = document.getElementById('video-holder');\r\n\r\n \/\/ \u0645\u0639\u0631\u0641 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0648\u0627\u0644\u0645\u0639\u0627\u0645\u0644\u0627\u062a (\u062a\u0645\u062a \u0625\u0632\u0627\u0644\u0629 start\/end \u0627\u0644\u0641\u0627\u0631\u063a\u064a\u0646)\r\n const videoId = 'tv8bI8zk0ek';\r\n const params = 'playlist=' + videoId + '&mute=1&autoplay=1&loop=1&controls=0&rel=0&modestbranding=1';\r\n const src = 'https:\/\/www.youtube.com\/embed\/' + videoId + '?' + params;\r\n\r\n function openModal(){\r\n \/\/ \u0623\u0646\u0634\u0626 iframe \u0639\u0646\u062f \u0623\u0648\u0644 \u0636\u063a\u0637 \u0644\u062a\u062c\u0646\u0651\u0628 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0628\u0643\u0631\r\n if (!holder.querySelector('iframe')){\r\n const iframe = document.createElement('iframe');\r\n iframe.setAttribute('src', src);\r\n iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');\r\n iframe.setAttribute('allowfullscreen', '');\r\n iframe.setAttribute('title', '\u0641\u064a\u062f\u064a\u0648 \u062a\u0639\u0631\u064a\u0641 \u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629 - \u0639\u062f\u0646');\r\n iframe.style.width = '100%';\r\n iframe.style.height = '100%';\r\n iframe.style.border = '0';\r\n holder.appendChild(iframe);\r\n }\r\n modal.classList.add('active');\r\n modal.setAttribute('aria-hidden','false');\r\n \/\/ \u062d\u062c\u0632 \u0627\u0644\u0641\u0648\u0643\u0633 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u062f\u0627\u0644 \u0644\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0648\u0635\u0648\u0644\u064a\u0629\r\n closeBtn.focus();\r\n \/\/ \u0645\u0646\u0639 \u062a\u0645\u0631\u064a\u0631 \u0627\u0644\u062e\u0644\u0641\u064a\u0629\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeModal(){\r\n modal.classList.remove('active');\r\n modal.setAttribute('aria-hidden','true');\r\n \/\/ \u0627\u062d\u0630\u0641 iframe \u0644\u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0648\u062e\u0644\u0627\u0641\u0647\r\n holder.innerHTML = '';\r\n document.body.style.overflow = '';\r\n openBtn.focus();\r\n }\r\n\r\n openBtn.addEventListener('click', openModal);\r\n closeBtn.addEventListener('click', closeModal);\r\n backdrop.addEventListener('click', closeModal);\r\n\r\n \/\/ \u0625\u063a\u0644\u0627\u0642 \u0628\u0627\u0644\u0645\u0641\u062a\u0627\u062d Escape\r\n document.addEventListener('keydown', function(e){\r\n if (e.key === 'Escape' && modal.classList.contains('active')) closeModal();\r\n });\r\n\r\n \/\/ \u0645\u0646\u0639 \u062a\u0643\u0631\u0627\u0631 \u0627\u0644\u0641\u062a\u062d \u0625\u0630\u0627 \u0636\u063a\u0637 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0628\u0633\u0631\u0639\u0629\r\n openBtn.addEventListener('keydown', function(e){\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n openModal();\r\n }\r\n });\r\n })();\r\n<\/script>\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-4ea299b elementor-widget elementor-widget-html\" data-id=\"4ea299b\" 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<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\t\t\t<img decoding=\"async\" src=\"https:\/\/royaeyeclinic.com\/ar\/wp-content\/uploads\/sites\/2\/2025\/04\/ekjfnv-copy-877x1024.webp\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\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>High-End Medical Slider – Compact \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":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":674,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":8801,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages\/2\/revisions\/8801"}],"wp:attachment":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}