{"id":17282,"date":"2021-10-12T15:51:09","date_gmt":"2021-10-12T15:51:09","guid":{"rendered":"https:\/\/eracare-eg.com\/about-us\/"},"modified":"2025-09-17T19:12:53","modified_gmt":"2025-09-17T19:12:53","slug":"%d9%85%d9%86-%d9%86%d8%ad%d9%86","status":"publish","type":"page","link":"https:\/\/eracare-eg.com\/ar\/%d9%85%d9%86-%d9%86%d8%ad%d9%86\/","title":{"rendered":"\u0645\u0646 \u0646\u062d\u0646"},"content":{"rendered":"\t\t
\n\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 \u0625\u064a\u0631\u0627 \u0643\u064a\u0631 - \u062d\u064a\u062b \u062a\u0644\u062a\u0642\u064a \u0627\u0644\u0623\u0646\u0627\u0642\u0629 \u0628\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .era-care-branding {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n background: linear-gradient(135deg, \r\n #faf7f4 0%, \r\n #f5ede6 25%, \r\n #f0e6dd 50%, \r\n #ecddd1 75%, \r\n #e8d4c5 100%);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n \/* Floating particles background *\/\r\n .floating-particles {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n width: 4px;\r\n height: 4px;\r\n background: radial-gradient(circle, #d4af94, transparent);\r\n border-radius: 50%;\r\n animation: float 12s infinite ease-in-out;\r\n opacity: 0;\r\n }\r\n\r\n .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 15s; }\r\n .particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 18s; }\r\n .particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 12s; }\r\n .particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 20s; }\r\n .particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 16s; }\r\n .particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 14s; }\r\n .particle:nth-child(7) { left: 70%; animation-delay: 2.5s; animation-duration: 17s; }\r\n .particle:nth-child(8) { left: 80%; animation-delay: 4.5s; animation-duration: 13s; }\r\n .particle:nth-child(9) { left: 90%; animation-delay: 1.5s; animation-duration: 19s; }\r\n\r\n @keyframes float {\r\n 0%, 100% { \r\n transform: translateY(100vh) scale(0); \r\n opacity: 0; \r\n }\r\n 10% { \r\n opacity: 1; \r\n transform: translateY(90vh) scale(1); \r\n }\r\n 90% { \r\n opacity: 1; \r\n transform: translateY(-10vh) scale(1); \r\n }\r\n 100% { \r\n transform: translateY(-20vh) scale(0); \r\n opacity: 0; \r\n }\r\n }\r\n\r\n \/* Abstract decorative shapes *\/\r\n .abstract-shape {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n .shape-1 {\r\n top: 15%;\r\n right: 10%;\r\n width: 200px;\r\n height: 200px;\r\n background: linear-gradient(45deg, rgba(212, 175, 148, 0.1), rgba(236, 221, 209, 0.2));\r\n border-radius: 50% 30% 70% 40%;\r\n animation: morphShape 20s infinite ease-in-out;\r\n filter: blur(1px);\r\n }\r\n\r\n .shape-2 {\r\n bottom: 20%;\r\n left: 5%;\r\n width: 150px;\r\n height: 300px;\r\n background: linear-gradient(135deg, rgba(240, 230, 221, 0.3), rgba(212, 175, 148, 0.1));\r\n border-radius: 30% 70% 60% 40%;\r\n animation: morphShape 25s infinite ease-in-out reverse;\r\n filter: blur(0.5px);\r\n }\r\n\r\n @keyframes morphShape {\r\n 0%, 100% { transform: rotate(0deg) scale(1); }\r\n 25% { transform: rotate(5deg) scale(1.1); }\r\n 50% { transform: rotate(-3deg) scale(0.9); }\r\n 75% { transform: rotate(2deg) scale(1.05); }\r\n }\r\n\r\n \/* Main content container *\/\r\n .brand-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n max-width: 1200px;\r\n padding: 0 2rem;\r\n animation: slideUp 2s ease-out;\r\n }\r\n\r\n @keyframes slideUp {\r\n 0% { opacity: 0; transform: translateY(60px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* Background text effect *\/\r\n .bg-text {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-family: 'Cairo', serif;\r\n font-size: clamp(8rem, 15vw, 20rem);\r\n font-weight: 300;\r\n color: rgba(212, 175, 148, 0.06);\r\n z-index: 3;\r\n white-space: nowrap;\r\n animation: shimmer 8s infinite linear;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { background-position: -200% center; }\r\n 100% { background-position: 200% center; }\r\n }\r\n\r\n \/* Main heading *\/\r\n .main-heading {\r\n font-family: 'Cairo', serif;\r\n font-size: clamp(3rem, 6vw, 5rem);\r\n font-weight: 300;\r\n color: #8b6f47;\r\n margin-bottom: 1.5rem;\r\n position: relative;\r\n text-shadow: 0 4px 20px rgba(139, 111, 71, 0.1);\r\n animation: glow 4s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes glow {\r\n 0% { text-shadow: 0 4px 20px rgba(139, 111, 71, 0.1); }\r\n 100% { text-shadow: 0 8px 30px rgba(139, 111, 71, 0.2), 0 0 40px rgba(212, 175, 148, 0.1); }\r\n }\r\n\r\n .main-heading::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 100px;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, #d4af94, transparent);\r\n animation: expandLine 2s ease-out 0.5s both;\r\n }\r\n\r\n @keyframes expandLine {\r\n 0% { width: 0; opacity: 0; }\r\n 100% { width: 100px; opacity: 1; }\r\n }\r\n\r\n \/* Subtitle *\/\r\n .subtitle {\r\n font-size: clamp(1.1rem, 2.5vw, 1.5rem);\r\n color: #a68b5b;\r\n margin-bottom: 4rem;\r\n font-weight: 300;\r\n letter-spacing: 0.5px;\r\n opacity: 0;\r\n animation: fadeInUp 1.5s ease-out 1s both;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n 0% { opacity: 0; transform: translateY(30px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* Brand timeline *\/\r\n .brand-timeline {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 3rem;\r\n margin: 4rem 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .timeline-item {\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n animation: timelineReveal 1s ease-out both;\r\n }\r\n\r\n .timeline-item:nth-child(1) { animation-delay: 1.5s; }\r\n .timeline-item:nth-child(2) { animation-delay: 2s; }\r\n .timeline-item:nth-child(3) { animation-delay: 2.5s; }\r\n\r\n @keyframes timelineReveal {\r\n 0% { opacity: 0; transform: translateY(40px) scale(0.8); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n .timeline-step {\r\n background: linear-gradient(135deg, \r\n rgba(255, 255, 255, 0.9), \r\n rgba(244, 237, 230, 0.8));\r\n padding: 2rem 2.5rem;\r\n border-radius: 20px;\r\n box-shadow: \r\n 0 10px 40px rgba(139, 111, 71, 0.1),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(212, 175, 148, 0.2);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n cursor: pointer;\r\n position: relative;\r\n min-width: 250px;\r\n }\r\n\r\n .timeline-step::before {\r\n content: '';\r\n position: absolute;\r\n top: -2px;\r\n left: -2px;\r\n right: -2px;\r\n bottom: -2px;\r\n background: linear-gradient(135deg, #d4af94, #f0e6dd, #d4af94);\r\n border-radius: 22px;\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n }\r\n\r\n .timeline-step:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: \r\n 0 20px 60px rgba(139, 111, 71, 0.15),\r\n inset 0 1px 0 rgba(255, 255, 255, 1);\r\n }\r\n\r\n .timeline-step:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .step-title {\r\n font-family: 'Cairo', serif;\r\n font-size: 1.3rem;\r\n font-weight: 500;\r\n color: #8b6f47;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .step-desc {\r\n font-size: 0.95rem;\r\n color: #a68b5b;\r\n line-height: 1.4;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Connect lines between timeline items *\/\r\n .timeline-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: -1.5rem;\r\n width: 3rem;\r\n height: 1px;\r\n background: linear-gradient(90deg, #d4af94, transparent);\r\n transform: translateY(-50%);\r\n opacity: 0;\r\n animation: drawLine 0.8s ease-out 3s both;\r\n }\r\n\r\n @keyframes drawLine {\r\n 0% { width: 0; opacity: 0; }\r\n 100% { width: 3rem; opacity: 0.6; }\r\n }\r\n\r\n \/* Floating elements *\/\r\n .floating-element {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 4;\r\n }\r\n\r\n .float-1 {\r\n top: 25%;\r\n left: 15%;\r\n width: 60px;\r\n height: 60px;\r\n background: radial-gradient(circle, rgba(212, 175, 148, 0.4), transparent 70%);\r\n border-radius: 50%;\r\n animation: floatSlow 15s infinite ease-in-out;\r\n }\r\n\r\n .float-2 {\r\n bottom: 30%;\r\n right: 20%;\r\n width: 40px;\r\n height: 40px;\r\n background: radial-gradient(circle, rgba(240, 230, 221, 0.6), transparent 70%);\r\n border-radius: 50%;\r\n animation: floatSlow 12s infinite ease-in-out reverse;\r\n }\r\n\r\n @keyframes floatSlow {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(180deg); }\r\n }\r\n\r\n \/* Responsive design *\/\r\n @media (max-width: 768px) {\r\n .brand-timeline {\r\n flex-direction: column;\r\n gap: 2rem;\r\n }\r\n \r\n .timeline-item:not(:last-child)::after {\r\n display: none;\r\n }\r\n \r\n .timeline-step {\r\n min-width: auto;\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n \r\n .bg-text {\r\n font-size: clamp(4rem, 12vw, 8rem);\r\n }\r\n \r\n .shape-1, .shape-2 {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .brand-content {\r\n padding: 0 1rem;\r\n }\r\n \r\n .timeline-step {\r\n padding: 1.5rem 2rem;\r\n }\r\n }\r\n\r\n \/* Additional luxury touches *\/\r\n .luxury-accent {\r\n position: absolute;\r\n top: 10%;\r\n right: 15%;\r\n width: 100px;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, #d4af94, transparent);\r\n transform: rotate(45deg);\r\n animation: luxuryShine 6s infinite ease-in-out;\r\n }\r\n\r\n @keyframes luxuryShine {\r\n 0%, 100% { opacity: 0.3; transform: rotate(45deg) scale(1); }\r\n 50% { opacity: 0.8; transform: rotate(45deg) scale(1.2); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"era-care-branding\">\r\n <!-- Floating particles -->\r\n <div class=\"floating-particles\">\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <\/div>\r\n\r\n <!-- Abstract shapes -->\r\n <div class=\"abstract-shape shape-1\"><\/div>\r\n <div class=\"abstract-shape shape-2\"><\/div>\r\n\r\n <!-- Floating elements -->\r\n <div class=\"floating-element float-1\"><\/div>\r\n <div class=\"floating-element float-2\"><\/div>\r\n\r\n <!-- Luxury accent -->\r\n <div class=\"luxury-accent\"><\/div>\r\n\r\n <!-- Background text -->\r\n <div class=\"bg-text\">ERA CARE<\/div>\r\n\r\n <!-- Main content -->\r\n <div class=\"brand-content\">\r\n <h1 class=\"main-heading\">\u0625\u064a\u0631\u0627 \u0643\u064a\u0631<\/h1>\r\n <p class=\"subtitle\">\u062d\u064a\u062b \u064a\u0644\u062a\u0642\u064a \u0627\u0644\u062c\u0645\u0627\u0644 \u0627\u0644\u062e\u0627\u0644\u062f \u0628\u0627\u0644\u0639\u0644\u0645 \u0627\u0644\u062d\u062f\u064a\u062b<\/p>\r\n\r\n <!-- Brand timeline -->\r\n <div class=\"brand-timeline\">\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-step\">\r\n <h3 class=\"step-title\">\u0645\u0633\u062a\u0648\u062d\u0649 \u0645\u0646 \u0627\u0644\u0637\u0628\u064a\u0639\u0629<\/h3>\r\n <p class=\"step-desc\">\u0645\u0635\u062f\u0631\u0647\u0627 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u0646\u0628\u0627\u062a\u064a\u0629 \u0627\u0644\u0623\u0646\u0642\u0649 \u0645\u0646 \u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0627\u0644\u0639\u0627\u0644\u0645<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-step\">\r\n <h3 class=\"step-title\">\u0645\u062b\u0627\u0644\u064a \u0628\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/h3>\r\n <p class=\"step-desc\">\u062a\u0642\u0646\u064a\u0627\u062a \u0645\u062e\u062a\u0628\u0631\u064a\u0629 \u0645\u062a\u0642\u062f\u0645\u0629 \u062a\u0644\u062a\u0642\u064a \u0628\u0627\u0644\u062d\u0643\u0645\u0629 \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-step\">\r\n <h3 class=\"step-title\">\u0645\u062d\u0628\u0648\u0628 \u0645\u0646 \u0627\u0644\u0628\u0634\u0631\u0629<\/h3>\r\n <p class=\"step-desc\">\u0646\u062a\u0627\u0626\u062c \u062a\u062d\u0648\u064a\u0644\u064a\u0629 \u062a\u0643\u0634\u0641 \u0639\u0646 \u0625\u0634\u0631\u0627\u0642\u062a\u0643 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-b5856b8 e-flex e-con-boxed e-con e-parent\" data-id=\"b5856b8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-543ce81 e-con-full e-flex e-con e-child\" data-id=\"543ce81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b37c8c elementor-widget elementor-widget-heading\" data-id=\"3b37c8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Era Care<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c187122 text-right color-scheme-inherit elementor-widget elementor-widget-text-editor\" data-id=\"c187122\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"40\" data-end=\"345\">\u0641\u064a Era Care\u060c \u0646\u0624\u0645\u0646 \u0623\u0646 \u0627\u0644\u062c\u0645\u0627\u0644 \u064a\u0628\u062f\u0623 \u0628\u0627\u0644\u0639\u0646\u0627\u064a\u0629. \u0628\u0627\u0639\u062a\u0628\u0627\u0631\u0646\u0627 \u0634\u0631\u0643\u0629 \u0631\u0627\u0626\u062f\u0629 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0645\u0633\u062a\u062d\u0636\u0631\u0627\u062a \u0627\u0644\u062a\u062c\u0645\u064a\u0644\u060c \u0646\u062d\u0646 \u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u0627\u0628\u062a\u0643\u0627\u0631 \u0645\u0646\u062a\u062c\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629 \u0648\u0644\u0637\u064a\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u0628\u0634\u0631\u0629\u060c \u0645\u0635\u0645\u0645\u0629 \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062c\u0645\u0627\u0644 \u0627\u0644\u0637\u0628\u064a\u0639\u064a \u0648\u062f\u0639\u0645 \u0635\u062d\u0629 \u0627\u0644\u0628\u0634\u0631\u0629. \u0628\u0634\u063a\u0641 \u0646\u062d\u0648 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0648\u0627\u0644\u062a\u0632\u0627\u0645 \u0628\u0627\u0644\u062a\u0645\u064a\u0632\u060c \u0646\u0637\u0648\u0651\u0631 \u062d\u0644\u0648\u0644\u064b\u0627 \u0641\u0639\u0651\u0627\u0644\u0629 \u0648\u0622\u0645\u0646\u0629 \u062a\u0644\u0628\u064a \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0628\u0634\u0631\u0629 \u0627\u0644\u0645\u062a\u0646\u0648\u0639\u0629.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01a6331 e-con-full e-flex e-con e-child\" data-id=\"01a6331\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19e6055 elementor-widget__width-initial elementor-widget elementor-widget-video\" data-id=\"19e6055\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"youtube_url":"https:\\\/\\\/www.youtube.com\\\/watch?v=4aRZpw8blYo&t=546s&pp=ygUN2K8g2KfYsdin2K_Zhw%3D%3D","video_type":"youtube","controls":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5a122e elementor-widget__width-initial elementor-widget elementor-widget-video\" data-id=\"e5a122e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"youtube_url":"https:\\\/\\\/www.youtube.com\\\/watch?v=YITtThUSQjI","video_type":"youtube","controls":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4585175 e-con-full wd-section-stretch e-flex e-con e-parent\" data-id=\"4585175\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78719d9 elementor-widget elementor-widget-html\" data-id=\"78719d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\">\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>\u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u0631\u062d\u0644\u0629 \u0625\u064a\u0631\u0627 \u0643\u064a\u0631<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n<section class=\"era-care-timeline\" role=\"region\" aria-label=\"\u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u0631\u062d\u0644\u0629 \u0625\u064a\u0631\u0627 \u0643\u064a\u0631\">\r\n <style>\r\n .era-care-timeline * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .era-care-timeline {\r\n background: #ff908d;\r\n padding: 80px 0;\r\n font-family: 'Cairo', sans-serif;\r\n overflow: hidden;\r\n position: relative;\r\n min-height: 100vh;\r\n }\r\n\r\n .era-care-timeline::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 1000\"><defs><radialGradient id=\"a\"><stop offset=\"0\" stop-color=\"%23ffffff\" stop-opacity=\"0.1\"\/><stop offset=\"1\" stop-color=\"%23ffffff\" stop-opacity=\"0\"\/><\/radialGradient><\/defs><circle cx=\"200\" cy=\"200\" r=\"100\" fill=\"url(%23a)\"\/><circle cx=\"800\" cy=\"300\" r=\"150\" fill=\"url(%23a)\"\/><circle cx=\"400\" cy=\"600\" r=\"120\" fill=\"url(%23a)\"\/><\/svg>');\r\n opacity: 0.3;\r\n animation: era-float 20s ease-in-out infinite;\r\n }\r\n\r\n @keyframes era-float {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(180deg); }\r\n }\r\n\r\n .era-care-timeline .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .era-care-timeline .section-title {\r\n text-align: center;\r\n margin-bottom: 70px;\r\n color: white;\r\n }\r\n\r\n .era-care-timeline .section-title h2 {\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n background: linear-gradient(45deg, #fff, #f0f8ff);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n animation: era-titleGlow 3s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes era-titleGlow {\r\n from { text-shadow: 0 4px 15px rgba(255,255,255,0.3); }\r\n to { text-shadow: 0 4px 25px rgba(255,255,255,0.6); }\r\n }\r\n\r\n .era-care-timeline .section-title p {\r\n font-size: 1.2rem;\r\n font-weight: 400;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n line-height: 1.6;\r\n }\r\n\r\n .era-care-timeline .timeline {\r\n position: relative;\r\n }\r\n\r\n .era-care-timeline .timeline::before {\r\n content: '';\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n bottom: 0;\r\n width: 4px;\r\n background: linear-gradient(to bottom, #fff, #f0f8ff, #fff);\r\n transform: translateX(-50%);\r\n box-shadow: 0 0 20px rgba(255,255,255,0.5);\r\n animation: era-pulse 2s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes era-pulse {\r\n from { box-shadow: 0 0 20px rgba(255,255,255,0.3); }\r\n to { box-shadow: 0 0 30px rgba(255,255,255,0.8); }\r\n }\r\n\r\n .era-care-timeline .timeline-item {\r\n position: relative;\r\n margin-bottom: 80px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n animation: era-slideUp 0.8s ease-out forwards;\r\n }\r\n\r\n .era-care-timeline .timeline-item:nth-child(1) { animation-delay: 0.2s; }\r\n .era-care-timeline .timeline-item:nth-child(2) { animation-delay: 0.4s; }\r\n .era-care-timeline .timeline-item:nth-child(3) { animation-delay: 0.6s; }\r\n .era-care-timeline .timeline-item:nth-child(4) { animation-delay: 0.8s; }\r\n .era-care-timeline .timeline-item:nth-child(5) { animation-delay: 1s; }\r\n .era-care-timeline .timeline-item:nth-child(6) { animation-delay: 1.2s; }\r\n\r\n @keyframes era-slideUp {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .era-care-timeline .timeline-item.left .timeline-content {\r\n margin-right: 60%;\r\n text-align: right;\r\n }\r\n\r\n .era-care-timeline .timeline-item.right .timeline-content {\r\n margin-left: 60%;\r\n text-align: left;\r\n }\r\n\r\n .era-care-timeline .timeline-icon {\r\n position: absolute;\r\n left: 50%;\r\n top: 20px;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: #ff908d;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 28px;\r\n color: white;\r\n box-shadow: 0 10px 30px rgba(255,144,141,0.4);\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n z-index: 2;\r\n }\r\n\r\n .era-care-timeline .timeline-icon:hover {\r\n transform: translateX(-50%) scale(1.2) rotate(360deg);\r\n background: #ff908d;\r\n box-shadow: 0 15px 40px rgba(255,144,141,0.6);\r\n }\r\n\r\n .era-care-timeline .timeline-content {\r\n background: rgba(255,255,255,0.95);\r\n padding: 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 15px 40px rgba(0,0,0,0.2);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.3);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .era-care-timeline .timeline-content::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transition: left 0.8s ease;\r\n }\r\n\r\n .era-care-timeline .timeline-item:hover .timeline-content::before {\r\n left: 100%;\r\n }\r\n\r\n .era-care-timeline .timeline-content:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 25px 60px rgba(0,0,0,0.3);\r\n }\r\n\r\n .era-care-timeline .timeline-content h3 {\r\n color: #333;\r\n font-size: 1.8rem;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n background: linear-gradient(45deg, #ff908d, #ff6b6b);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .era-care-timeline .timeline-content p {\r\n color: #555;\r\n line-height: 1.7;\r\n font-size: 1.1rem;\r\n font-weight: 400;\r\n }\r\n\r\n .era-care-timeline .year-badge {\r\n display: inline-block;\r\n background: #ff908d;\r\n color: white;\r\n padding: 8px 20px;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n margin-bottom: 15px;\r\n box-shadow: 0 5px 15px rgba(255,144,141,0.4);\r\n animation: era-bounce 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes era-bounce {\r\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-10px); }\r\n 60% { transform: translateY(-5px); }\r\n }\r\n\r\n .era-care-timeline .zoom-modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: rgba(0,0,0,0.9);\r\n z-index: 99999;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .era-care-timeline .zoom-modal.active {\r\n display: flex !important;\r\n animation: era-modalFadeIn 0.4s ease-out;\r\n }\r\n\r\n @keyframes era-modalFadeIn {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .era-care-timeline .zoom-content {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 40px;\r\n max-width: 80vw;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n transform: scale(0.8);\r\n animation: era-zoomIn 0.4s ease-out forwards;\r\n position: relative;\r\n }\r\n\r\n @keyframes era-zoomIn {\r\n to {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .era-care-timeline .close-zoom {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n background: #ff908d;\r\n color: white;\r\n border: none;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 100001;\r\n }\r\n\r\n .era-care-timeline .close-zoom:hover {\r\n background: #ff908d;\r\n transform: scale(1.1);\r\n }\r\n\r\n .era-care-timeline .detailed-content {\r\n margin-top: 20px;\r\n padding-top: 20px;\r\n border-top: 2px solid #ff908d;\r\n }\r\n\r\n .era-care-timeline .detailed-content h4 {\r\n color: #ff908d;\r\n margin-bottom: 15px;\r\n font-size: 1.3rem;\r\n }\r\n\r\n .era-care-timeline .detailed-content ul {\r\n list-style-type: none;\r\n padding-left: 0;\r\n }\r\n\r\n .era-care-timeline .detailed-content li {\r\n margin-bottom: 8px;\r\n padding-left: 25px;\r\n position: relative;\r\n }\r\n\r\n .era-care-timeline .detailed-content li::before {\r\n content: '\u2713';\r\n position: absolute;\r\n left: 0;\r\n color: #ff908d;\r\n font-weight: bold;\r\n }\r\n\r\n .era-care-timeline .timeline-item.zoom-ready {\r\n cursor: zoom-in;\r\n }\r\n\r\n .era-care-timeline .timeline-item.zoom-ready:hover .timeline-content::after {\r\n content: '\ud83d\udd0d';\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n font-size: 20px;\r\n opacity: 0.7;\r\n }\r\n\r\n .era-care-timeline .sparkle {\r\n position: absolute;\r\n width: 4px;\r\n height: 4px;\r\n background: white;\r\n border-radius: 50%;\r\n animation: era-sparkle 3s ease-in-out infinite;\r\n }\r\n\r\n .era-care-timeline .sparkle:nth-child(1) {\r\n top: 20%;\r\n left: 10%;\r\n animation-delay: 0s;\r\n }\r\n\r\n .era-care-timeline .sparkle:nth-child(2) {\r\n top: 60%;\r\n right: 15%;\r\n animation-delay: 1s;\r\n }\r\n\r\n .era-care-timeline .sparkle:nth-child(3) {\r\n bottom: 30%;\r\n left: 20%;\r\n animation-delay: 2s;\r\n }\r\n\r\n @keyframes era-sparkle {\r\n 0%, 100% {\r\n opacity: 0;\r\n transform: scale(0);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .era-care-timeline .timeline::before {\r\n left: 30px;\r\n }\r\n \r\n .era-care-timeline .timeline-item.left .timeline-content,\r\n .era-care-timeline .timeline-item.right .timeline-content {\r\n margin-left: 80px;\r\n margin-right: 20px;\r\n text-align: left;\r\n }\r\n \r\n .era-care-timeline .timeline-icon {\r\n left: 30px;\r\n transform: translateX(-50%);\r\n }\r\n \r\n .era-care-timeline .section-title h2 {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .era-care-timeline .timeline-content {\r\n padding: 20px;\r\n }\r\n\r\n .era-care-timeline .zoom-content {\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n padding: 20px;\r\n }\r\n }\r\n <\/style>\r\n\r\n <div class=\"sparkle\"><\/div>\r\n <div class=\"sparkle\"><\/div>\r\n <div class=\"sparkle\"><\/div>\r\n \r\n <div class=\"container\">\r\n <div class=\"section-title\">\r\n <h2>\u0631\u062d\u0644\u062a\u0646\u0627<\/h2>\r\n <p>\u0645\u0646 \u062d\u0644\u0645 \u0641\u064a \u0627\u0644\u0645\u0637\u0628\u062e \u0625\u0644\u0649 \u0634\u0631\u0643\u0629 \u0631\u0627\u0626\u062f\u0629 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0645\u0633\u062a\u062d\u0636\u0631\u0627\u062a \u0627\u0644\u062a\u062c\u0645\u064a\u0644 - \u0627\u0643\u062a\u0634\u0641 \u0627\u0644\u0645\u062d\u0637\u0627\u062a \u0627\u0644\u062a\u064a \u0634\u0643\u0644\u062a \u0625\u064a\u0631\u0627 \u0643\u064a\u0631<\/p>\r\n <\/div>\r\n\r\n <div class=\"timeline\" role=\"list\">\r\n <div class=\"timeline-item left zoom-ready\" role=\"listitem\" aria-label=\"2019: \u0627\u0644\u0628\u062f\u0627\u064a\u0629\" data-step=\"0\">\r\n <div class=\"timeline-icon\" aria-hidden=\"true\">\r\n \ud83c\udf31\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <span class=\"year-badge\">2019<\/span>\r\n <h3>\u0627\u0644\u0628\u062f\u0627\u064a\u0629<\/h3>\r\n <p>\u0623\u0648\u0644 \u062e\u0637\u0648\u0629 \u0641\u064a \u062d\u0644\u0645... 250 \u063a\u0631\u0627\u0645 \u0632\u0628\u062f\u0629 \u0634\u064a\u0627 + 250 \u063a\u0631\u0627\u0645 \u0634\u0645\u0639 \u0639\u0633\u0644 + 186 \u062c\u0646\u064a\u0647. \u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0623\u0648\u0644 \u062a\u0631\u0643\u064a\u0628\u0629 \u0641\u064a \u0627\u0644\u0645\u0637\u0628\u062e\u060c \u0648\u0628\u064a\u0639 \u0623\u0648\u0644 \u0645\u0646\u062a\u062c \u0644\u062c\u0627\u0631\u0629 \u0642\u0631\u064a\u0628\u0629. \u0643\u0644 \u0631\u062d\u0644\u0629 \u0639\u0638\u064a\u0645\u0629 \u062a\u0628\u062f\u0623 \u0628\u062e\u0637\u0648\u0629 \u0648\u0627\u062d\u062f\u0629.<\/p>\r\n <div class=\"detailed-content\" style=\"display:none;\">\r\n <h4>\u0627\u0644\u0642\u0635\u0629 \u0627\u0644\u062a\u0641\u0635\u064a\u0644\u064a\u0629:<\/h4>\r\n <p>\u0628\u062f\u0623 \u0643\u0644 \u0634\u064a\u0621 \u0628\u0634\u063a\u0641 \u0628\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0628\u0634\u0631\u0629 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0643\u0648\u0646\u0627\u062a \u0628\u0633\u064a\u0637\u0629 \u0648\u062d\u0644\u0645\u060c \u0623\u0646\u0634\u0623\u0646\u0627 \u0623\u0648\u0644 \u0645\u0646\u062a\u062c \u0641\u064a \u0645\u0637\u0628\u062e \u0635\u063a\u064a\u0631. \u0625\u062b\u0627\u0631\u0629 \u0627\u0644\u0628\u064a\u0639 \u0627\u0644\u0623\u0648\u0644 \u0644\u062c\u0627\u0631\u062a\u0646\u0627 \u0645\u0646\u062d\u062a\u0646\u0627 \u0627\u0644\u062b\u0642\u0629 \u0628\u0623\u0646\u0646\u0627 \u0639\u0644\u0649 \u0648\u0634\u0643 \u062a\u062d\u0642\u064a\u0642 \u0634\u064a\u0621 \u0645\u0645\u064a\u0632.<\/p>\r\n <ul>\r\n <li>\u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631: 186 \u062c\u0646\u064a\u0647<\/li>\r\n <li>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a: \u0632\u0628\u062f\u0629 \u0634\u064a\u0627\u060c \u0634\u0645\u0639 \u0639\u0633\u0644<\/li>\r\n <li>\u0627\u0644\u0645\u0648\u0642\u0639: \u0645\u0637\u0628\u062e \u0627\u0644\u0645\u0646\u0632\u0644<\/li>\r\n <li>\u0623\u0648\u0644 \u0639\u0645\u064a\u0644: \u062c\u0627\u0631\u0629<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item right zoom-ready\" role=\"listitem\" aria-label=\"2020: \u0623\u0648\u0644 100 \u0639\u0645\u064a\u0644\" data-step=\"1\">\r\n <div class=\"timeline-icon\" aria-hidden=\"true\">\r\n \ud83d\udc65\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <span class=\"year-badge\">2020<\/span>\r\n <h3>\u0623\u0648\u0644 100 \u0639\u0645\u064a\u0644<\/h3>\r\n <p>\u0627\u0646\u062a\u0634\u0631\u062a \u0627\u0644\u0643\u0644\u0645\u0629 \u0628\u064a\u0646 \u0627\u0644\u0623\u0635\u062f\u0642\u0627\u0621 \u0648\u0627\u0644\u0639\u0627\u0626\u0644\u0629. \u0645\u0646\u062a\u062c\u0627\u062a \u0637\u0628\u064a\u0639\u064a\u0629 \u0645\u0639\u0645\u0648\u0644\u0629 \u0628\u062d\u0628\u060c \u062a\u0628\u0646\u064a \u0627\u0644\u062b\u0642\u0629 \u064a\u0648\u0645\u064b\u0627 \u0628\u0639\u062f \u064a\u0648\u0645. \u0628\u062f\u0623 \u0645\u062c\u062a\u0645\u0639\u0646\u0627 \u064a\u0646\u0645\u0648 \u0645\u0639 \u0627\u0643\u062a\u0634\u0627\u0641 \u0627\u0644\u0646\u0627\u0633 \u0644\u0644\u062c\u0648\u062f\u0629 \u0648\u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0641\u064a \u0643\u0644 \u0645\u0646\u062a\u062c \u0645\u0646 \u0625\u064a\u0631\u0627 \u0643\u064a\u0631.<\/p>\r\n <div class=\"detailed-content\" style=\"display:none;\">\r\n <h4>\u0646\u0645\u0648 \u0627\u0644\u0645\u062c\u062a\u0645\u0639:<\/h4>\r\n <p>\u0647\u0630\u0627 \u0627\u0644\u0639\u0627\u0645 \u0634\u0647\u062f \u062a\u0623\u0633\u064a\u0633 \u0642\u0627\u0639\u062f\u0629 \u0639\u0645\u0644\u0627\u0626\u0646\u0627. \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0643\u0644\u0627\u0645 \u0627\u0644\u0634\u0641\u0647\u064a \u0648\u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629 \u0628\u0643\u0644 \u0645\u0646\u062a\u062c\u060c \u0628\u0646\u064a\u0646\u0627 \u0639\u0644\u0627\u0642\u0627\u062a \u062f\u0627\u0626\u0645\u0629 \u0645\u0639 \u0623\u0648\u0644 100 \u0639\u0645\u064a\u0644.<\/p>\r\n <ul>\r\n <li>\u0627\u0644\u0639\u0645\u0644\u0627\u0621: \u0623\u0643\u062b\u0631 \u0645\u0646 100<\/li>\r\n <li>\u0627\u0644\u062a\u0648\u0632\u064a\u0639: \u0634\u0628\u0643\u0629 \u0627\u0644\u0623\u0635\u062f\u0642\u0627\u0621 \u0648\u0627\u0644\u0639\u0627\u0626\u0644\u0629<\/li>\r\n <li>\u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u062c\u0648\u062f\u0629: \u0645\u0643\u0648\u0646\u0627\u062a \u0637\u0628\u064a\u0639\u064a\u0629<\/li>\r\n <li>\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0646\u0645\u0648: \u0627\u0644\u0643\u0644\u0627\u0645 \u0627\u0644\u0634\u0641\u0647\u064a<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item left zoom-ready\" role=\"listitem\" aria-label=\"2021: \u0627\u0644\u062d\u0644\u0645 \u064a\u0643\u0628\u0631\" data-step=\"2\">\r\n <div class=\"timeline-icon\" aria-hidden=\"true\">\r\n \ud83d\udcc8\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <span class=\"year-badge\">2021<\/span>\r\n <h3>\u0627\u0644\u062d\u0644\u0645 \u064a\u0643\u0628\u0631<\/h3>\r\n <p>\u062a\u0645 \u0628\u064a\u0639 \u062d\u0648\u0627\u0644\u064a 11,000 \u0642\u0637\u0639\u0629 \u0628\u0625\u064a\u0631\u0627\u062f\u0627\u062a 560,000 \u062c\u0646\u064a\u0647. \u0628\u062f\u0623\u0646\u0627 \u0627\u0644\u062a\u0641\u0643\u064a\u0631 \u0641\u064a \u0627\u0644\u062a\u0648\u0633\u0639 \u0648\u062c\u0647\u0632\u0646\u0627 \u062e\u0637 \u0625\u0646\u062a\u0627\u062c \u0635\u063a\u064a\u0631. \u062a\u0645 \u0648\u0636\u0639 \u0627\u0644\u0623\u0633\u0627\u0633 \u0644\u0644\u0646\u0645\u0648.<\/p>\r\n <div class=\"detailed-content\" style=\"display:none;\">\r\n <h4>\u062a\u062e\u0637\u064a\u0637 \u0627\u0644\u062a\u0648\u0633\u0639:<\/h4>\r\n <p>\u0645\u0639 \u0646\u0645\u0648 \u0643\u0628\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a\u060c \u0628\u062f\u0623\u0646\u0627 \u0627\u0644\u062a\u062e\u0637\u064a\u0637 \u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0623\u0643\u0628\u0631. \u0643\u0627\u0646 \u0647\u0630\u0627 \u0627\u0644\u0639\u0627\u0645 \u0639\u0646 \u0648\u0636\u0639 \u0627\u0644\u0623\u0633\u0627\u0633 \u0644\u0644\u062a\u0648\u0633\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a.<\/p>\r\n <ul>\r\n <li>\u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0645\u0628\u0627\u0639\u0629: 11,000 \u0642\u0637\u0639\u0629<\/li>\r\n <li>\u0627\u0644\u0625\u064a\u0631\u0627\u062f\u0627\u062a: 560,000 \u062c\u0646\u064a\u0647<\/li>\r\n <li>\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629: \u0625\u0639\u062f\u0627\u062f \u062e\u0637 \u0625\u0646\u062a\u0627\u062c<\/li>\r\n <li>\u0627\u0644\u062a\u0631\u0643\u064a\u0632: \u062a\u0648\u0633\u064a\u0639 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item right zoom-ready\" role=\"listitem\" aria-label=\"2022: \u0645\u0635\u0646\u0639\u0646\u0627 \u0627\u0644\u0623\u0648\u0644\" data-step=\"3\">\r\n <div class=\"timeline-icon\" aria-hidden=\"true\">\r\n \ud83c\udfed\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <span class=\"year-badge\">2022<\/span>\r\n <h3>\u0645\u0635\u0646\u0639\u0646\u0627 \u0627\u0644\u0623\u0648\u0644<\/h3>\r\n <p>\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0645\u0635\u0646\u0639 \u0635\u063a\u064a\u0631 \u0641\u064a \u0633\u0648\u0647\u0627\u062c \u0644\u0644\u062a\u0635\u0646\u064a\u0639 \u0648\u0627\u0644\u062a\u0639\u0628\u0626\u0629. \u0648\u0635\u0644\u062a \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0625\u0644\u0649 1.6 \u0645\u0644\u064a\u0648\u0646 \u062c\u0646\u064a\u0647 \u0645\u0639 \u0628\u064a\u0639 \u0623\u0643\u062b\u0631 \u0645\u0646 47,000 \u0642\u0637\u0639\u0629. \u0628\u062f\u0623 \u0627\u0644\u062a\u0632\u0627\u0645\u0646\u0627 \u0628\u0627\u0644\u062a\u0635\u0646\u064a\u0639 \u0639\u0627\u0644\u064a \u0627\u0644\u062c\u0648\u062f\u0629 \u0647\u0646\u0627.<\/p>\r\n <div class=\"detailed-content\" style=\"display:none;\">\r\n <h4>\u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u062a\u0635\u0646\u064a\u0639:<\/h4>\r\n <p>\u0627\u0641\u062a\u062a\u0627\u062d \u0645\u0635\u0646\u0639\u0646\u0627 \u0641\u064a \u0633\u0648\u0647\u0627\u062c \u0643\u0627\u0646 \u0646\u0642\u0637\u0629 \u062a\u062d\u0648\u0644. \u0623\u0635\u0628\u062d \u0628\u0625\u0645\u0643\u0627\u0646\u0646\u0627 \u0627\u0644\u0622\u0646 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u062c\u0648\u062f\u0629 \u0645\u0646 \u0627\u0644\u0625\u0646\u062a\u0627\u062c \u0625\u0644\u0649 \u0627\u0644\u062a\u0639\u0628\u0626\u0629 \u0645\u0639 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0625\u0646\u062a\u0627\u062c\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631.<\/p>\r\n <ul>\r\n <li>\u0645\u0648\u0642\u0639 \u0627\u0644\u0645\u0635\u0646\u0639: \u0633\u0648\u0647\u0627\u062c<\/li>\r\n <li>\u0627\u0644\u0625\u064a\u0631\u0627\u062f\u0627\u062a: 1.6 \u0645\u0644\u064a\u0648\u0646 \u062c\u0646\u064a\u0647<\/li>\r\n <li>\u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0645\u0628\u0627\u0639\u0629: \u0623\u0643\u062b\u0631 \u0645\u0646 47,000 \u0642\u0637\u0639\u0629<\/li>\r\n <li>\u0627\u0644\u0625\u0646\u062c\u0627\u0632: \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u062c\u0648\u062f\u0629<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item left zoom-ready\" role=\"listitem\" aria-label=\"2023: \u0627\u0644\u0646\u062c\u0627\u062d \u0627\u0644\u0648\u0637\u0646\u064a\" data-step=\"4\">\r\n <div class=\"timeline-icon\" aria-hidden=\"true\">\r\n \ud83c\udfc6\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <span class=\"year-badge\">2023<\/span>\r\n <h3>\u0627\u0644\u0646\u062c\u0627\u062d \u0627\u0644\u0648\u0637\u0646\u064a<\/h3>\r\n <p>\u0645\u0628\u064a\u0639\u0627\u062a \u0628\u0642\u064a\u0645\u0629 5.3 \u0645\u0644\u064a\u0648\u0646 \u062c\u0646\u064a\u0647 \u0648\u062d\u0648\u0627\u0644\u064a 120,000 \u0642\u0637\u0639\u0629. \u0627\u0641\u062a\u062a\u062d\u0646\u0627 3 \u0641\u0631\u0648\u0639 \u0645\u0639 \u0638\u0647\u0648\u0631 \u0642\u0648\u064a \u0641\u064a \u0628\u0631\u0646\u0627\u0645\u062c Shark Tank\u060c \u0648\u062d\u0635\u0644\u0646\u0627 \u0639\u0644\u0649 \u0639\u0631\u0636 \u0627\u0633\u062a\u062b\u0645\u0627\u0631\u064a \u0628\u0642\u064a\u0645\u0629 10 \u0645\u0644\u064a\u0648\u0646 \u062c\u0646\u064a\u0647. \u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0641 \u0639\u0644\u0649 \u0623\u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649.<\/p>\r\n <div class=\"detailed-content\" style=\"display:none;\">\r\n <h4>\u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0641 \u0627\u0644\u0648\u0637\u0646\u064a:<\/h4>\r\n <p>\u0638\u0647\u0648\u0631\u0646\u0627 \u0641\u064a Shark Tank \u062c\u0644\u0628 \u0627\u0646\u062a\u0628\u0627\u0647\u064b\u0627 \u0648\u0637\u0646\u064a\u064b\u0627. \u0645\u0639 \u0641\u0631\u0648\u0639 \u0645\u062a\u0639\u062f\u062f\u0629 \u0648\u0645\u0628\u064a\u0639\u0627\u062a \u0645\u0630\u0647\u0644\u0629\u060c \u0623\u0635\u0628\u062d\u062a \u0625\u064a\u0631\u0627 \u0643\u064a\u0631 \u0639\u0644\u0627\u0645\u0629 \u062a\u062c\u0627\u0631\u064a\u0629 \u0645\u0639\u0631\u0648\u0641\u0629 \u0641\u064a \u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0645\u0635\u0631.<\/p>\r\n <ul>\r\n <li>\u0627\u0644\u0625\u064a\u0631\u0627\u062f\u0627\u062a: 5.3 \u0645\u0644\u064a\u0648\u0646 \u062c\u0646\u064a\u0647<\/li>\r\n <li>\u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0645\u0628\u0627\u0639\u0629: 120,000 \u0642\u0637\u0639\u0629<\/li>\r\n <li>\u0627\u0644\u0641\u0631\u0648\u0639 \u0627\u0644\u0645\u0641\u062a\u062a\u062d\u0629: 3<\/li>\r\n <li>\u0639\u0631\u0636 Shark Tank: 10 \u0645\u0644\u064a\u0648\u0646 \u062c\u0646\u064a\u0647<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item right zoom-ready\" role=\"listitem\" aria-label=\"\u0627\u0644\u064a\u0648\u0645: \u0644\u0627 \u0646\u0632\u0627\u0644 \u0645\u0633\u062a\u0645\u0631\u064a\u0646\" data-step=\"5\">\r\n <div class=\"timeline-icon\" aria-hidden=\"true\">\r\n \ud83d\ude80\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <span class=\"year-badge\">\u0627\u0644\u064a\u0648\u0645<\/span>\r\n <h3>\u0644\u0627 \u0646\u0632\u0627\u0644 \u0645\u0633\u062a\u0645\u0631\u064a\u0646<\/h3>\r\n <p>\u0622\u0644\u0627\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062d\u0627\u0641\u0638\u0627\u062a\u060c \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\u060c \u062a\u0631\u0643\u064a\u0628\u0627\u062a \u0623\u0630\u0643\u0649\u060c \u0648\u062d\u0644\u0645\u0646\u0627 \u064a\u0633\u062a\u0645\u0631 \u0644\u064a\u0635\u0644 \u0625\u0644\u0649 \u0643\u0644 \u0628\u064a\u062a. \u0627\u0644\u0631\u062d\u0644\u0629 \u0645\u0633\u062a\u0645\u0631\u0629 \u0645\u0639 \u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a \u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629 \u0623\u0645\u0627\u0645\u0646\u0627.<\/p>\r\n <div class=\"detailed-content\" style=\"display:none;\">\r\n <h4>\u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062d\u0627\u0644\u064a:<\/h4>\r\n <p>\u0627\u0644\u064a\u0648\u0645\u060c \u062a\u062e\u062f\u0645 \u0625\u064a\u0631\u0627 \u0643\u064a\u0631 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0641\u064a \u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0627\u0644\u0628\u0644\u0627\u062f \u0645\u0639 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646\u062a\u062c\u0627\u062a \u0645\u062a\u0648\u0633\u0639\u0629 \u0648\u0627\u0628\u062a\u0643\u0627\u0631 \u0645\u0633\u062a\u0645\u0631 \u0641\u064a \u062d\u0644\u0648\u0644 \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0628\u0634\u0631\u0629 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629.<\/p>\r\n <ul>\r\n <li>\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631: \u062c\u0645\u064a\u0639 \u0645\u062d\u0627\u0641\u0638\u0627\u062a \u0645\u0635\u0631<\/li>\r\n <li>\u0627\u0644\u0639\u0645\u0644\u0627\u0621: \u0622\u0644\u0627\u0641<\/li>\r\n <li>\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a: \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062a\u0648\u0633\u0639\u0629<\/li>\r\n <li>\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644: \u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a \u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zoom-modal era-zoom-modal\" role=\"dialog\" aria-label=\"\u0646\u0627\u0641\u0630\u0629 \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0632\u0645\u0646\u064a\" aria-hidden=\"true\">\r\n <button class=\"close-zoom era-close-zoom\" aria-label=\"\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0646\u0627\u0641\u0630\u0629\">×<\/button>\r\n <div class=\"zoom-content era-zoom-content\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n 'use strict';\r\n \r\n const EraTimeline = {\r\n currentStep: 0,\r\n touchStartX: 0,\r\n touchEndX: 0,\r\n \r\n init: function() {\r\n this.timelineItems = document.querySelectorAll('.era-care-timeline .timeline-item');\r\n this.zoomModal = document.querySelector('.era-care-timeline .era-zoom-modal');\r\n this.zoomContent = document.querySelector('.era-care-timeline .era-zoom-content');\r\n this.closeZoomBtn = document.querySelector('.era-care-timeline .era-close-zoom');\r\n \r\n this.setupEventListeners();\r\n this.highlightTimelineItem(0, false);\r\n },\r\n \r\n setupEventListeners: function() {\r\n this.timelineItems.forEach((item, index) => {\r\n item.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.openZoom(item);\r\n });\r\n });\r\n\r\n if (this.closeZoomBtn) {\r\n this.closeZoomBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.closeZoom();\r\n });\r\n }\r\n\r\n if (this.zoomModal) {\r\n this.zoomModal.addEventListener('click', (e) => {\r\n if (e.target === this.zoomModal) {\r\n this.closeZoom();\r\n }\r\n });\r\n }\r\n\r\n document.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: true });\r\n document.addEventListener('touchend', (e) => this.handleTouchEnd(e), { passive: true });\r\n\r\n document.addEventListener('keydown', (e) => this.handleKeyPress(e));\r\n\r\n this.timelineItems.forEach(item => {\r\n const icon = item.querySelector('.timeline-icon');\r\n const content = item.querySelector('.timeline-content');\r\n \r\n item.addEventListener('mouseenter', () => {\r\n if (content) content.style.transform = 'translateY(-5px)';\r\n });\r\n \r\n item.addEventListener('mouseleave', () => {\r\n if (content) content.style.transform = '';\r\n });\r\n });\r\n },\r\n \r\n highlightTimelineItem: function(index, shouldScroll) {\r\n this.timelineItems.forEach(item => item.classList.remove('active'));\r\n \r\n if (this.timelineItems[index]) {\r\n this.timelineItems[index].classList.add('active');\r\n if (shouldScroll) {\r\n this.timelineItems[index].scrollIntoView({ \r\n behavior: 'smooth', \r\n block: 'center',\r\n inline: 'nearest'\r\n });\r\n }\r\n }\r\n },\r\n\r\n openZoom: function(item) {\r\n if (!item || !this.zoomModal || !this.zoomContent) return;\r\n \r\n const content = item.querySelector('.timeline-content');\r\n if (!content) return;\r\n\r\n const clonedContent = content.cloneNode(true);\r\n const detailedContent = clonedContent.querySelector('.detailed-content');\r\n if (detailedContent) {\r\n detailedContent.style.display = 'block';\r\n }\r\n\r\n this.zoomContent.innerHTML = '';\r\n this.zoomContent.appendChild(clonedContent);\r\n \r\n this.zoomModal.classList.add('active');\r\n this.zoomModal.setAttribute('aria-hidden', 'false');\r\n \r\n document.body.style.overflow = 'hidden';\r\n \r\n if (this.closeZoomBtn) {\r\n this.closeZoomBtn.focus();\r\n }\r\n },\r\n\r\n closeZoom: function() {\r\n if (!this.zoomModal) return;\r\n \r\n this.zoomModal.classList.remove('active');\r\n this.zoomModal.setAttribute('aria-hidden', 'true');\r\n document.body.style.overflow = '';\r\n \r\n if (this.zoomContent) {\r\n this.zoomContent.innerHTML = '';\r\n }\r\n },\r\n\r\n handleTouchStart: function(e) {\r\n if (!e.target.closest('.era-care-timeline')) return;\r\n this.touchStartX = e.touches[0].clientX;\r\n },\r\n\r\n handleTouchEnd: function(e) {\r\n if (!e.target.closest('.era-care-timeline')) return;\r\n this.touchEndX = e.changedTouches[0].clientX;\r\n this.handleSwipe();\r\n },\r\n\r\n handleSwipe: function() {\r\n const swipeThreshold = 50;\r\n const diff = this.touchStartX - this.touchEndX;\r\n \r\n if (Math.abs(diff) > swipeThreshold) {\r\n if (diff > 0) {\r\n this.currentStep = (this.currentStep + 1) % this.timelineItems.length;\r\n } else {\r\n this.currentStep = this.currentStep === 0 ? this.timelineItems.length - 1 : this.currentStep - 1;\r\n }\r\n this.highlightTimelineItem(this.currentStep, true);\r\n }\r\n },\r\n\r\n handleKeyPress: function(e) {\r\n if (!e.target.closest('.era-care-timeline') && !this.zoomModal.classList.contains('active')) return;\r\n \r\n switch(e.key) {\r\n case 'ArrowUp':\r\n case 'ArrowLeft':\r\n e.preventDefault();\r\n this.currentStep = this.currentStep === 0 ? this.timelineItems.length - 1 : this.currentStep - 1;\r\n this.highlightTimelineItem(this.currentStep, true);\r\n break;\r\n case 'ArrowDown':\r\n case 'ArrowRight':\r\n e.preventDefault();\r\n this.currentStep = (this.currentStep + 1) % this.timelineItems.length;\r\n this.highlightTimelineItem(this.currentStep, true);\r\n break;\r\n case 'Enter':\r\n if (!this.zoomModal.classList.contains('active')) {\r\n e.preventDefault();\r\n if (this.timelineItems[this.currentStep]) {\r\n this.openZoom(this.timelineItems[this.currentStep]);\r\n }\r\n }\r\n break;\r\n case 'Escape':\r\n if (this.zoomModal.classList.contains('active')) {\r\n e.preventDefault();\r\n this.closeZoom();\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', () => EraTimeline.init());\r\n } else {\r\n EraTimeline.init();\r\n }\r\n\r\n window.EraTimelineCleanup = function() {\r\n document.body.style.overflow = '';\r\n };\r\n\r\n if (typeof IntersectionObserver !== 'undefined') {\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.animationPlayState = 'running';\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n EraTimeline.timelineItems.forEach(item => {\r\n if (observer && item) observer.observe(item);\r\n });\r\n }\r\n })();\r\n <\/script>\r\n<\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-005d425 e-con-full wd-section-stretch e-flex e-con e-parent\" data-id=\"005d425\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffee23a elementor-widget elementor-widget-html\" data-id=\"ffee23a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\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>Era Care - \u0627\u0644\u0631\u0624\u064a\u0629 \u0648\u0627\u0644\u0645\u0647\u0645\u0629<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #FF908D;\r\n --secondary: #FF908D;\r\n --accent: #FF908D;\r\n --text: #404040;\r\n --light: #FFF9FB;\r\n }\r\n \r\n body {\r\n font-family: 'Cairo', sans-serif;\r\n color: var(--text);\r\n background-color: var(--light);\r\n overflow-x: hidden;\r\n }\r\n \r\n .title-font {\r\n font-family: 'Cairo', serif;\r\n }\r\n \r\n .vision-card, .mission-card {\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);\r\n }\r\n \r\n .vision-card.visible, .mission-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .floating {\r\n animation: floating 6s ease-in-out infinite;\r\n }\r\n \r\n @keyframes floating {\r\n 0% { transform: translateY(0px); }\r\n 50% { transform: translateY(-20px); }\r\n 100% { transform: translateY(0px); }\r\n }\r\n \r\n .pulse {\r\n animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n }\r\n \r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.8; }\r\n }\r\n \r\n .sparkle {\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.7);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n transform: scale(0);\r\n animation: sparkle 2s ease-out forwards;\r\n }\r\n \r\n .icon-container {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.4s ease;\r\n }\r\n \r\n .animated-icon {\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform-origin: center;\r\n position: relative;\r\n }\r\n \r\n .vision-icon {\r\n animation: \r\n iconFloat 4s ease-in-out infinite,\r\n iconPulse 3s ease-in-out infinite,\r\n iconRotate 8s linear infinite;\r\n }\r\n \r\n .mission-icon {\r\n animation: \r\n iconBounce 3s ease-in-out infinite,\r\n iconGlow 2s ease-in-out infinite alternate,\r\n iconScale 4s ease-in-out infinite;\r\n }\r\n \r\n @keyframes iconFloat {\r\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n 25% { transform: translateY(-8px) rotate(2deg); }\r\n 50% { transform: translateY(-12px) rotate(0deg); }\r\n 75% { transform: translateY(-6px) rotate(-2deg); }\r\n }\r\n \r\n @keyframes iconPulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n }\r\n \r\n @keyframes iconRotate {\r\n 0% { transform: rotate(0deg); }\r\n 25% { transform: rotate(5deg); }\r\n 50% { transform: rotate(0deg); }\r\n 75% { transform: rotate(-5deg); }\r\n 100% { transform: rotate(0deg); }\r\n }\r\n \r\n @keyframes iconBounce {\r\n 0%, 100% { transform: translateY(0px) scale(1); }\r\n 25% { transform: translateY(-10px) scale(1.05); }\r\n 50% { transform: translateY(-15px) scale(1.1); }\r\n 75% { transform: translateY(-8px) scale(1.02); }\r\n }\r\n \r\n @keyframes iconGlow {\r\n 0% { filter: drop-shadow(0 0 5px rgba(244, 63, 94, 0.3)); }\r\n 100% { filter: drop-shadow(0 0 20px rgba(244, 63, 94, 0.8)); }\r\n }\r\n \r\n @keyframes iconScale {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.15); }\r\n }\r\n \r\n .icon-container:hover .animated-icon {\r\n transform: scale(1.2) rotate(10deg);\r\n filter: drop-shadow(0 0 25px rgba(244, 63, 94, 0.6));\r\n }\r\n \r\n .icon-container:hover {\r\n background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(236, 72, 153, 0.1));\r\n transform: scale(1.1);\r\n }\r\n \r\n .vision-card:hover, .mission-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 25px 50px -12px rgba(244, 63, 94, 0.25);\r\n }\r\n \r\n .bg-animated {\r\n background: linear-gradient(-45deg, #FFF9FB, #FEF7F0, #FDF2F8, #FEFCE8);\r\n background-size: 400% 400%;\r\n animation: gradientShift 15s ease infinite;\r\n }\r\n \r\n @keyframes gradientShift {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n \r\n @keyframes sparkle {\r\n 0% { transform: scale(0); opacity: 1; }\r\n 100% { transform: scale(1.5); opacity: 0; }\r\n }\r\n \r\n .card-loading {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .card-loading::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n animation: shimmer 2s infinite;\r\n }\r\n \r\n @keyframes shimmer {\r\n 0% { left: -100%; }\r\n 100% { left: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-animated\">\r\n <div class=\"container mx-auto px-4 py-16 md:py-24 lg:py-32\">\r\n <!-- Hero Section -->\r\n <div class=\"flex flex-col items-center justify-center mb-16 text-center\">\r\n <div class=\"relative mb-6 floating pulse\">\r\n \r\n <\/div>\r\n <h1 class=\"title-font text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-[#FF908D] to-[#FF908D]\/80\">\r\n \u0631\u0624\u064a\u062a\u0646\u0627 \u0648\u0645\u0647\u0645\u062a\u0646\u0627\r\n <\/h1>\r\n <div class=\"relative h-1 w-32 bg-gradient-to-r from-pink-300 to-rose-300 rounded-full overflow-hidden my-6\">\r\n <div class=\"absolute inset-0 bg-gradient-to-r from-pink-500 to-rose-500 animate-[shimmer_2s_infinite]\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Content Section -->\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 xl:gap-24\">\r\n <!-- Vision Card -->\r\n <div class=\"vision-card card-loading relative bg-white rounded-2xl shadow-2xl p-8 md:p-10 transform transition-all duration-700\">\r\n <div class=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-[#FF908D] to-[#FF908D]\/80 rounded-t-2xl\"><\/div>\r\n <div class=\"text-center mb-8\">\r\n <div class=\"icon-container w-16 h-16 rounded-full bg-gradient-to-br from-pink-100 to-pink-200 mb-4 mx-auto\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"animated-icon vision-icon h-8 w-8 text-pink-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h2 class=\"title-font text-2xl md:text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-rose-500\">\r\n \u0631\u0624\u064a\u062a\u0646\u0627\r\n <\/h2>\r\n <\/div>\r\n <p class=\"text-lg md:text-xl leading-relaxed px-4\">\r\n \u0631\u0624\u064a\u062a\u0646\u0627 \u0647\u064a \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u0631\u064a\u0641 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062c\u0645\u0627\u0644 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0635\u0646\u0639 \u0645\u0633\u062a\u062d\u0636\u0631\u0627\u062a \u062a\u062c\u0645\u064a\u0644 \u062a\u0639\u0632\u0632 \u0627\u0644\u062b\u0642\u0629 \u0648\u062a\u062d\u062a\u0641\u0644 \u0628\u0627\u0644\u0641\u0631\u062f\u064a\u0629. \u0646\u0647\u062f\u0641 \u0625\u0644\u0649 \u0623\u0646 \u0646\u0635\u0628\u062d \u0627\u0633\u0645\u064b\u0627 \u0645\u0648\u062b\u0648\u0642\u064b\u0627 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u062c\u0645\u0627\u0644 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0642\u062f\u064a\u0645 \u0645\u0646\u062a\u062c\u0627\u062a \u0645\u0628\u062a\u0643\u0631\u0629 \u0648\u0641\u0639\u0651\u0627\u0644\u0629 \u0648\u0645\u0635\u0646\u0648\u0639\u0629 \u0628\u0623\u062e\u0644\u0627\u0642\u064a\u0627\u062a \u062a\u0636\u0639 \u0635\u062d\u0629 \u0627\u0644\u0628\u0634\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u0642\u0627\u0645 \u0627\u0644\u0623\u0648\u0644.\r\n <\/p>\r\n <\/div>\r\n \r\n <!-- Mission Card -->\r\n <div class=\"mission-card card-loading relative bg-white rounded-2xl shadow-2xl p-8 md:p-10 transform transition-all duration-700\">\r\n <div class=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-rose-400 to-purple-400 rounded-t-2xl\"><\/div>\r\n <div class=\"text-center mb-8\">\r\n <div class=\"icon-container w-16 h-16 rounded-full bg-gradient-to-br from-rose-100 to-purple-100 mb-4 mx-auto\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"animated-icon mission-icon h-8 w-8 text-rose-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <h2 class=\"title-font text-2xl md:text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-rose-500 to-purple-500\">\r\n \u0645\u0647\u0645\u062a\u0646\u0627\r\n <\/h2>\r\n <\/div>\r\n <p class=\"text-lg md:text-xl leading-relaxed px-4\">\r\n \u0645\u0647\u0645\u062a\u0646\u0627 \u0647\u064a \u062a\u0642\u062f\u064a\u0645 \u062d\u0644\u0648\u0644 \u062a\u062c\u0645\u064a\u0644 \u0622\u0645\u0646\u0629 \u0648\u0641\u0639\u0651\u0627\u0644\u0629 \u0648\u0645\u0628\u062a\u0643\u0631\u0629 \u062a\u0644\u0628\u064a \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629 \u0644\u0643\u0644 \u0646\u0648\u0639 \u0628\u0634\u0631\u0629. \u0646\u062d\u0646 \u0646\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0639\u0644\u0645 \u0627\u0644\u0645\u062a\u0637\u0648\u0631 \u0648\u062d\u0643\u0645\u0629 \u0627\u0644\u0637\u0628\u064a\u0639\u0629 \u0644\u0635\u0646\u0639 \u0645\u0646\u062a\u062c\u0627\u062a \u062a\u063a\u0630\u064a \u0648\u062a\u062d\u0645\u064a \u0648\u062a\u0639\u0632\u0632 \u0627\u0644\u062c\u0645\u0627\u0644 \u0627\u0644\u0637\u0628\u064a\u0639\u064a.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <script>\r\n \/\/ Animation trigger\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Create sparkle effect when clicking anywhere\r\n document.addEventListener('click', function(e) {\r\n const sparkle = document.createElement('div');\r\n sparkle.className = 'sparkle';\r\n sparkle.style.left = e.clientX + 'px';\r\n sparkle.style.top = e.clientY + 'px';\r\n sparkle.style.width = Math.random() * 10 + 5 + 'px';\r\n sparkle.style.height = sparkle.style.width;\r\n document.body.appendChild(sparkle);\r\n \r\n \/\/ Remove sparkle after animation completes\r\n setTimeout(() => {\r\n sparkle.remove();\r\n }, 2000);\r\n });\r\n \r\n \/\/ Enhanced scroll animation for vision and mission cards\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, index) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => {\r\n entry.target.classList.add('visible');\r\n }, index * 200); \/\/ Stagger animation\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n \r\n document.querySelectorAll('.vision-card, .mission-card').forEach(card => {\r\n observer.observe(card);\r\n });\r\n \r\n \/\/ Add random floating particles\r\n function createFloatingParticle() {\r\n const particle = document.createElement('div');\r\n particle.style.position = 'fixed';\r\n particle.style.width = Math.random() * 6 + 2 + 'px';\r\n particle.style.height = particle.style.width;\r\n particle.style.background = `rgba(255, 144, 141, ${Math.random() * 0.5 + 0.1})`;\r\n particle.style.borderRadius = '50%';\r\n particle.style.left = Math.random() * window.innerWidth + 'px';\r\n particle.style.top = window.innerHeight + 'px';\r\n particle.style.pointerEvents = 'none';\r\n particle.style.zIndex = '1';\r\n \r\n document.body.appendChild(particle);\r\n \r\n \/\/ Animate particle upward\r\n const animation = particle.animate([\r\n { transform: 'translateY(0px)', opacity: 1 },\r\n { transform: `translateY(-${window.innerHeight + 100}px)`, opacity: 0 }\r\n ], {\r\n duration: Math.random() * 8000 + 5000,\r\n easing: 'linear'\r\n });\r\n \r\n animation.onfinish = () => particle.remove();\r\n }\r\n \r\n \/\/ Create particles periodically\r\n setInterval(createFloatingParticle, 3000);\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<div class=\"wd-negative-gap elementor-element elementor-element-0aaf669 wd-section-stretch e-flex e-con-boxed e-con e-parent\" data-id=\"0aaf669\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-112f98a e-con-full e-flex e-con e-child\" data-id=\"112f98a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-48c7dd1 e-con-full e-flex e-con e-child\" data-id=\"48c7dd1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-54eb2d3 e-con-full e-flex e-con e-child\" data-id=\"54eb2d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-14ff076 elementor-widget elementor-widget-wd_counter\" data-id=\"14ff076\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"woodmart-counter counter-extra-large text-center color-scheme-custom\">\n\t\t\t<div class=\"counter-value\" data-state=\"new\" data-final=\"9\">\n\t\t\t\t0\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"counter-label\">\n\t\t\t\t\t\u0633\u0646\u0648\u0627\u062a \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ccf2880 e-con-full e-flex e-con e-child\" data-id=\"ccf2880\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7ef47e elementor-widget elementor-widget-wd_counter\" data-id=\"f7ef47e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"woodmart-counter counter-extra-large text-center color-scheme-custom\">\n\t\t\t<div class=\"counter-value\" data-state=\"new\" data-final=\"120\">\n\t\t\t\t0\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"counter-label\">\n\t\t\t\t\t\u0645\u0646\u062a\u062c \u0644\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0628\u0634\u0631\u0629\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29b41dc e-con-full e-flex e-con e-child\" data-id=\"29b41dc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-042c2cf elementor-widget elementor-widget-wd_counter\" data-id=\"042c2cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"woodmart-counter counter-extra-large text-center color-scheme-custom\">\n\t\t\t<div class=\"counter-value\" data-state=\"new\" data-final=\"28\">\n\t\t\t\t0\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"counter-label\">\n\t\t\t\t\t\u0641\u0631\u0648\u0639 \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062c\u0645\u0647\u0648\u0631\u064a\u0629\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-668ca24 e-con-full e-flex e-con e-child\" data-id=\"668ca24\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da35035 elementor-widget elementor-widget-wd_counter\" data-id=\"da35035\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"woodmart-counter counter-extra-large text-center color-scheme-custom\">\n\t\t\t<div class=\"counter-value\" data-state=\"new\" data-final=\"2000\">\n\t\t\t\t0\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"counter-label\">\n\t\t\t\t\t\u0639\u0645\u064a\u0644 \u0633\u0639\u064a\u062f\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-7d49b10 e-flex e-con-boxed e-con e-parent\" data-id=\"7d49b10\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3717daf elementor-widget elementor-widget-html\" data-id=\"3717daf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\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>\u0625\u064a\u0631\u0627 \u0643\u064a\u0631 - \u0644\u0645\u0627\u0630\u0627 \u062a\u0632\u0648\u0631 \u0645\u062a\u0627\u062c\u0631\u0646\u0627<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@latest\/dist\/lottie-player.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700&display=swap');\r\n \r\n .era-why-visit {\r\n font-family: 'Cairo', sans-serif;\r\n background: transparent !important; \/* \u062e\u0644\u0641\u064a\u0629 \u0634\u0641\u0627\u0641\u0629 *\/\r\n padding: 4rem 1.5rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .era-why-visit::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 200px;\r\n background: none; \/* \u0625\u0632\u0627\u0644\u0629 \u0623\u064a \u062e\u0644\u0641\u064a\u0629 *\/\r\n opacity: 0;\r\n }\r\n \r\n .era-why-visit-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .era-why-visit-header {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .era-why-visit-header h2 {\r\n font-size: 2.5rem;\r\n font-weight: 600;\r\n margin-bottom: 1rem;\r\n position: relative;\r\n display: inline-block;\r\n color: #3a2c2c;\r\n }\r\n \r\n .era-why-visit-header h2::after {\r\n content: \"\u2728\";\r\n position: absolute;\r\n right: -35px;\r\n top: -10px;\r\n font-size: 1.5rem;\r\n animation: sparkle 2s infinite;\r\n }\r\n \r\n .era-why-visit-header p {\r\n font-size: 1.1rem;\r\n color: #6b5a5a;\r\n line-height: 1.6;\r\n max-width: 600px;\r\n }\r\n \r\n .era-why-visit-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 2rem;\r\n }\r\n \r\n .era-why-visit-card {\r\n background: white; \/* \u0627\u0644\u0627\u062d\u062a\u0641\u0627\u0638 \u0628\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0628\u064a\u0636\u0627\u0621 \u0644\u0636\u0645\u0627\u0646 \u0648\u0636\u0648\u062d \u0627\u0644\u0646\u0635\u0648\u0635 *\/\r\n border-radius: 12px;\r\n padding: 2rem;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .era-why-visit-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 40px rgba(0,0,0,0.1);\r\n }\r\n \r\n .era-why-visit-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 0%;\r\n background: linear-gradient(to bottom, #d1a982, #b38b6b);\r\n transition: height 0.6s ease;\r\n }\r\n \r\n .era-why-visit-card:hover::before {\r\n height: 100%;\r\n }\r\n \r\n .era-why-visit-icon {\r\n width: 60px;\r\n height: 60px;\r\n margin-bottom: 1.5rem;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .era-why-visit-card:hover .era-why-visit-icon {\r\n transform: scale(1.1);\r\n }\r\n \r\n .era-why-visit-card h3 {\r\n font-size: 1.4rem;\r\n font-weight: 600;\r\n margin-bottom: 1rem;\r\n color: #3a2c2c;\r\n position: relative;\r\n }\r\n \r\n .era-why-visit-card p {\r\n font-size: 1rem;\r\n color: #6b5a5a;\r\n line-height: 1.6;\r\n }\r\n \r\n @keyframes sparkle {\r\n 0%, 100% { opacity: 0.8; transform: scale(1); }\r\n 50% { opacity: 1; transform: scale(1.2); }\r\n }\r\n \r\n \/* Responsive adjustments *\/\r\n @media (max-width: 768px) {\r\n .era-why-visit-header h2 {\r\n font-size: 2rem;\r\n }\r\n .era-why-visit-card {\r\n padding: 1.5rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"era-why-visit\" id=\"eraWhyVisit\">\r\n <div class=\"era-why-visit-container\">\r\n <div class=\"era-why-visit-header\">\r\n <h2>\u0644\u0645\u0627\u0630\u0627 \u062a\u0632\u0648\u0631 \u0645\u062a\u0627\u062c\u0631\u0646\u0627\u061f<\/h2>\r\n <p>\u0627\u0643\u062a\u0634\u0641 \u062a\u062c\u0631\u0628\u0629 era care \u0645\u0639 \u062e\u062f\u0645\u0629 \u0634\u062e\u0635\u064a\u0629 \u0648\u0645\u0632\u0627\u064a\u0627 \u062d\u0635\u0631\u064a\u0629<\/p>\r\n <\/div>\r\n \r\n <div class=\"era-why-visit-grid\">\r\n <div class=\"era-why-visit-card\">\r\n <div class=\"era-why-visit-icon\">\r\n <lottie-player\r\n src=\"https:\/\/assets4.lottiefiles.com\/packages\/lf20_3vbOcw.json\"\r\n background=\"transparent\"\r\n speed=\"1\"\r\n loop\r\n autoplay\r\n ><\/lottie-player>\r\n <\/div>\r\n <h3>\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u062e\u0628\u0631\u0627\u0621<\/h3>\r\n <p>\u062e\u0628\u0631\u0627\u0621 \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0628\u0634\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u062a\u062c\u0631 \u062c\u0627\u0647\u0632\u0648\u0646 \u0644\u0645\u0633\u0627\u0639\u062f\u062a\u0643 \u0628\u062a\u0648\u0635\u064a\u0627\u062a \u0648\u0646\u0635\u0627\u0626\u062d \u0645\u062e\u0635\u0635\u0629 \u0644\u0644\u0639\u0646\u0627\u064a\u0629.<\/p>\r\n <\/div>\r\n \r\n <div class=\"era-why-visit-card\">\r\n <div class=\"era-why-visit-icon\">\r\n <lottie-player\r\n src=\"https:\/\/assets3.lottiefiles.com\/private_files\/lf30_obidsi0t.json\"\r\n background=\"transparent\"\r\n speed=\"0.9\"\r\n loop\r\n autoplay\r\n style=\"width: 100%; height: 100%\"\r\n ><\/lottie-player>\r\n <\/div>\r\n <h3>\u0645\u0639\u0627\u064a\u0646\u0627\u062a \u062d\u0635\u0631\u064a\u0629<\/h3>\r\n <p>\u0627\u0633\u062a\u0645\u062a\u0639 \u0628\u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0625\u0635\u062f\u0627\u0631 \u0627\u0644\u0645\u062d\u062f\u0648\u062f \u0648\u0627\u0644\u0639\u0631\u0648\u0636 \u0627\u0644\u062e\u0627\u0635\u0629 \u0642\u0628\u0644 \u062a\u0648\u0641\u0631\u0647\u0627 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a.<\/p>\r\n <\/div>\r\n \r\n <div class=\"era-why-visit-card\">\r\n <div class=\"era-why-visit-icon\">\r\n <lottie-player\r\n src=\"https:\/\/assets7.lottiefiles.com\/packages\/lf20_vybwn7df.json\"\r\n background=\"transparent\"\r\n speed=\"0.85\"\r\n loop\r\n autoplay\r\n style=\"width: 100%; height: 100%\"\r\n ><\/lottie-player>\r\n <\/div>\r\n <h3>\u062e\u062f\u0645\u0627\u062a \u0645\u062c\u0627\u0646\u064a\u0629<\/h3>\r\n <p>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0639\u064a\u0646\u0627\u062a \u0645\u0646\u062a\u062c\u0627\u062a \u0645\u062c\u0627\u0646\u064a\u0629 \u0648\u062a\u062d\u0644\u064a\u0644 \u0627\u062d\u062a\u0631\u0627\u0641\u064a \u0644\u0644\u0628\u0634\u0631\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0648\u0627\u062a \u062a\u0634\u062e\u064a\u0635 \u0645\u062a\u0642\u062f\u0645\u0629.<\/p>\r\n <\/div>\r\n \r\n <div class=\"era-why-visit-card\">\r\n <div class=\"era-why-visit-icon\">\r\n <lottie-player\r\n src=\"https:\/\/assets4.lottiefiles.com\/packages\/lf20_3vbOcw.json\"\r\n background=\"transparent\"\r\n speed=\"1\"\r\n loop\r\n autoplay\r\n ><\/lottie-player>\r\n <\/div>\r\n <h3>\u062a\u062c\u0631\u0628\u0629 \u0641\u0627\u062e\u0631\u0629<\/h3>\r\n <p>\u062a\u0648\u0641\u0631 \u0645\u062a\u0627\u062c\u0631\u0646\u0627 \u0627\u0644\u0645\u0635\u0645\u0645\u0629 \u0628\u0639\u0646\u0627\u064a\u0629 \u0628\u064a\u0626\u0629 \u062a\u0633\u0648\u0642 \u062f\u0627\u0641\u0626\u0629 \u0648\u0623\u0646\u064a\u0642\u0629 \u0644\u0644\u0627\u0633\u062a\u0631\u062e\u0627\u0621 \u0627\u0644\u062a\u0627\u0645.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const section = document.getElementById('eraWhyVisit');\r\n \r\n \/\/ Intersection Observer for scroll animations\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.opacity = '1';\r\n entry.target.style.transform = 'translateY(0)';\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n \r\n \/\/ Apply to all cards\r\n const cards = document.querySelectorAll('.era-why-visit-card');\r\n cards.forEach((card, index) => {\r\n card.style.opacity = '0';\r\n card.style.transform = 'translateY(20px)';\r\n card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\r\n card.style.transitionDelay = `${index * 0.1}s`;\r\n observer.observe(card);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0625\u064a\u0631\u0627 \u0643\u064a\u0631 – \u062d\u064a\u062b \u062a\u0644\u062a\u0642\u064a \u0627\u0644\u0623\u0646\u0627\u0642\u0629 \u0628\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 ERA CARE \u0625\u064a\u0631\u0627 \u0643\u064a\u0631 \u062d\u064a\u062b \u064a\u0644\u062a\u0642\u064a \u0627\u0644\u062c\u0645\u0627\u0644 \u0627\u0644\u062e\u0627\u0644\u062f \u0628\u0627\u0644\u0639\u0644\u0645 \u0627\u0644\u062d\u062f\u064a\u062b \u0645\u0633\u062a\u0648\u062d\u0649 \u0645\u0646 \u0627\u0644\u0637\u0628\u064a\u0639\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-17282","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/pages\/17282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/comments?post=17282"}],"version-history":[{"count":27,"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/pages\/17282\/revisions"}],"predecessor-version":[{"id":17423,"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/pages\/17282\/revisions\/17423"}],"wp:attachment":[{"href":"https:\/\/eracare-eg.com\/ar\/wp-json\/wp\/v2\/media?parent=17282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}