{"id":2263,"date":"2025-10-13T14:34:34","date_gmt":"2025-10-13T14:34:34","guid":{"rendered":"https:\/\/hadarat-hail.org.sa\/?page_id=2263"},"modified":"2025-11-05T16:04:56","modified_gmt":"2025-11-05T16:04:56","slug":"%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a7%d9%84%d8%ac%d9%85%d8%b9%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/hadarat-hail.org.sa\/?page_id=2263","title":{"rendered":"\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062c\u0645\u0639\u064a\u0629"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\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 \u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #8B4513;\r\n --primary-light: #A0522D;\r\n --primary-dark: #654321;\r\n --accent: #fb8519;\r\n --accent-light: #ffb366;\r\n --light: #fefaf6;\r\n --dark: #2F2F2F;\r\n --text: #333333;\r\n --light-gray: #f5f5f5;\r\n --border-radius: 12px;\r\n --box-shadow: 0 8px 25px rgba(139, 69, 19, 0.12);\r\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n background: white;\r\n color: var(--text);\r\n line-height: 1.6;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n\r\n \/* \u0627\u0644\u062a\u0646\u0642\u0644 \u0627\u0644\u0639\u0644\u0648\u064a *\/\r\n .top-nav {\r\n background: white;\r\n padding: 15px 0;\r\n border-bottom: 1px solid rgba(139, 69, 19, 0.1);\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n z-index: 1000;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .top-nav.hidden {\r\n transform: translateY(-100%);\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n justify-content: center;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .nav-link {\r\n color: var(--primary);\r\n text-decoration: none;\r\n font-weight: 600;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n transition: var(--transition);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .nav-link:hover {\r\n background: var(--primary);\r\n color: white;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .nav-link.active {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n\r\n \/* \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629 *\/\r\n .side-nav {\r\n position: fixed;\r\n right: 30px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 999;\r\n background: white;\r\n border-radius: 25px;\r\n padding: 15px 10px;\r\n box-shadow: var(--box-shadow);\r\n display: none;\r\n flex-direction: column;\r\n gap: 12px;\r\n transition: var(--transition);\r\n }\r\n\r\n .side-nav.active {\r\n display: flex;\r\n animation: slideInRight 0.4s ease;\r\n }\r\n\r\n .nav-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--light-gray);\r\n cursor: pointer;\r\n transition: var(--transition);\r\n position: relative;\r\n }\r\n\r\n .nav-dot:hover {\r\n transform: scale(1.4);\r\n background: var(--accent);\r\n }\r\n\r\n .nav-dot.active {\r\n background: var(--primary);\r\n transform: scale(1.4);\r\n }\r\n\r\n .nav-dot::after {\r\n content: attr(data-title);\r\n position: absolute;\r\n left: 25px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: var(--primary);\r\n color: white;\r\n padding: 5px 10px;\r\n border-radius: 12px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n opacity: 0;\r\n transition: var(--transition);\r\n pointer-events: none;\r\n }\r\n\r\n .nav-dot:hover::after {\r\n opacity: 1;\r\n left: 20px;\r\n }\r\n\r\n \/* \u0627\u0644\u0647\u064a\u062f\u0631 *\/\r\n .hero-section {\r\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n color: white;\r\n padding: 120px 0 80px;\r\n text-align: center;\r\n position: relative;\r\n margin-top: 60px;\r\n }\r\n\r\n .hero-content {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n line-height: 1.3;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 *\/\r\n .section {\r\n padding: 60px 0;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .section-title {\r\n color: var(--primary);\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .section-subtitle {\r\n color: var(--text);\r\n font-size: 1rem;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0642\u062f\u0645\u0629 *\/\r\n .intro-content {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .intro-text {\r\n font-size: 1rem;\r\n margin-bottom: 20px;\r\n text-align: justify;\r\n }\r\n\r\n .highlight-box {\r\n background: var(--light);\r\n border-right: 3px solid var(--accent);\r\n padding: 20px;\r\n border-radius: var(--border-radius);\r\n margin: 20px 0;\r\n }\r\n\r\n .quote {\r\n font-style: italic;\r\n color: var(--primary);\r\n font-weight: 500;\r\n margin: 15px 0;\r\n padding-right: 15px;\r\n border-right: 2px solid var(--accent);\r\n }\r\n\r\n \/* \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 *\/\r\n .projects-grid {\r\n display: grid;\r\n gap: 25px;\r\n margin-top: 30px;\r\n }\r\n\r\n .project-card {\r\n background: white;\r\n border-radius: var(--border-radius);\r\n padding: 25px;\r\n box-shadow: var(--box-shadow);\r\n transition: var(--transition);\r\n border-top: 3px solid var(--accent);\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .project-card.current {\r\n border-top-color: var(--primary);\r\n }\r\n\r\n .project-card.future {\r\n border-top-color: var(--primary-light);\r\n }\r\n\r\n .project-badge {\r\n display: inline-block;\r\n background: var(--accent);\r\n color: white;\r\n padding: 5px 12px;\r\n border-radius: 15px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .project-badge.current {\r\n background: var(--primary);\r\n }\r\n\r\n .project-badge.future {\r\n background: var(--primary-light);\r\n }\r\n\r\n .project-title {\r\n color: var(--primary);\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .project-period {\r\n color: var(--accent);\r\n font-weight: 600;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n margin-bottom: 15px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .project-details {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .project-detail {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n margin-bottom: 10px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .project-detail i {\r\n color: var(--accent);\r\n margin-top: 3px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .project-stats {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n gap: 15px;\r\n margin: 20px 0;\r\n padding: 15px;\r\n background: var(--light);\r\n border-radius: var(--border-radius);\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n }\r\n\r\n .stat-value {\r\n color: var(--primary);\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n display: block;\r\n }\r\n\r\n .stat-label {\r\n color: var(--text);\r\n font-size: 0.8rem;\r\n opacity: 0.8;\r\n }\r\n\r\n .project-quote {\r\n background: var(--light);\r\n padding: 15px;\r\n border-radius: var(--border-radius);\r\n border-right: 2px solid var(--accent);\r\n margin: 15px 0;\r\n font-style: italic;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* \u0627\u0644\u062e\u0627\u062a\u0645\u0629 *\/\r\n .conclusion-section {\r\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n color: white;\r\n text-align: center;\r\n padding: 60px 0;\r\n }\r\n\r\n .conclusion-content {\r\n max-width: 700px;\r\n margin: 0 auto;\r\n }\r\n\r\n .conclusion-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n }\r\n\r\n .conclusion-text {\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n opacity: 0.9;\r\n }\r\n\r\n \/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062d\u0631\u0643\u0629 *\/\r\n @keyframes slideInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(30px) translateY(-50%);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0) translateY(-50%);\r\n }\r\n }\r\n\r\n \/* \u0627\u0644\u062a\u0643\u064a\u0641 \u0645\u0639 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 0 15px;\r\n }\r\n\r\n .top-nav {\r\n padding: 10px 0;\r\n }\r\n\r\n .nav-links {\r\n gap: 8px;\r\n }\r\n\r\n .nav-link {\r\n padding: 6px 12px;\r\n font-size: 0.8rem;\r\n }\r\n\r\n .hero-section {\r\n padding: 100px 0 60px;\r\n margin-top: 50px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1rem;\r\n }\r\n\r\n .section {\r\n padding: 40px 0;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .side-nav {\r\n right: 15px;\r\n padding: 12px 8px;\r\n gap: 10px;\r\n }\r\n\r\n .nav-dot {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n\r\n .project-card {\r\n padding: 20px;\r\n }\r\n\r\n .project-stats {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n padding: 12px;\r\n }\r\n\r\n .stat-value {\r\n font-size: 1.3rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .nav-links {\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n\r\n .nav-link {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n .project-stats {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .side-nav {\r\n display: none !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- \u0627\u0644\u062a\u0646\u0642\u0644 \u0627\u0644\u0639\u0644\u0648\u064a -->\r\n <nav class=\"top-nav\">\r\n <div class=\"container\">\r\n <div class=\"nav-links\">\r\n <a href=\"#introduction\" class=\"nav-link\">\r\n <i class=\"fas fa-info-circle\"><\/i>\r\n <span>\u0627\u0644\u0645\u0642\u062f\u0645\u0629<\/span>\r\n <\/a>\r\n <a href=\"#current-projects\" class=\"nav-link\">\r\n <i class=\"fas fa-tasks\"><\/i>\r\n <span>\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/span>\r\n <\/a>\r\n <a href=\"#future-projects\" class=\"nav-link\">\r\n <i class=\"fas fa-rocket\"><\/i>\r\n <span>\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629<\/span>\r\n <\/a>\r\n <a href=\"#conclusion\" class=\"nav-link\">\r\n <i class=\"fas fa-flag\"><\/i>\r\n <span>\u0627\u0644\u062e\u0627\u062a\u0645\u0629<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629 -->\r\n <nav class=\"side-nav\">\r\n <div class=\"nav-dot active\" data-title=\"\u0627\u0644\u0645\u0642\u062f\u0645\u0629\" data-section=\"introduction\"><\/div>\r\n <div class=\"nav-dot\" data-title=\"\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\" data-section=\"current-projects\"><\/div>\r\n <div class=\"nav-dot\" data-title=\"\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629\" data-section=\"future-projects\"><\/div>\r\n <div class=\"nav-dot\" data-title=\"\u0627\u0644\u062e\u0627\u062a\u0645\u0629\" data-section=\"conclusion\"><\/div>\r\n <\/nav>\r\n\r\n <!-- \u0627\u0644\u0647\u064a\u062f\u0631 -->\r\n <section class=\"hero-section\">\r\n <div class=\"container\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title\">\u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644<\/h1>\r\n <p class=\"hero-subtitle\">\u0627\u0644\u062c\u0647\u0648\u062f \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u0643\u0631\u0643\u0627\u0626\u0632 \u0644\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0642\u0633\u0645 \u0627\u0644\u0645\u0642\u062f\u0645\u0629 -->\r\n <section id=\"introduction\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629<\/h2>\r\n <p class=\"section-subtitle\">\u0646\u0638\u0631\u0629 \u0639\u0627\u0645\u0629 \u0639\u0644\u0649 \u062f\u0648\u0631 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0641\u064a \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062a\u0631\u0627\u062b \u0648\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629<\/p>\r\n <\/div>\r\n <div class=\"intro-content\">\r\n <p class=\"intro-text\">\r\n \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644 \u062a\u064f\u0639\u062f\u0651 \u0646\u0645\u0648\u0630\u062c\u064b\u0627 \u0645\u062a\u0645\u064a\u0632\u064b\u0627 \u0644\u0644\u0643\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0639\u0627\u0648\u0646\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u062d\u064a\u062b \u062a\u064f\u0634\u0643\u0644 \u0631\u0643\u064a\u0632\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0625\u0631\u062b \u0627\u0644\u062b\u0642\u0627\u0641\u064a \u0648\u0627\u0644\u062d\u0636\u0627\u0631\u064a\u060c \u0648\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0648\u0639\u064a \u0628\u0647 \u0643\u0639\u0646\u0635\u0631 \u062d\u064a\u0648\u064a \u0644\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629.\r\n <\/p>\r\n \r\n <div class=\"highlight-box\">\r\n <p class=\"intro-text\">\r\n \u0641\u064a \u0639\u0635\u0631 \u064a\u0634\u0647\u062f \u062a\u062d\u062f\u064a\u0627\u062a \u0633\u0631\u064a\u0639\u0629 \u0645\u062b\u0644 \u0627\u0644\u0639\u0648\u0644\u0645\u0629 \u0648\u0627\u0644\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0629\u060c \u062a\u0628\u0631\u0632 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0643\u062d\u0627\u0631\u0633 \u0623\u0645\u064a\u0646 \u0644\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0629\u060c \u0645\u0633\u062a\u0644\u0647\u0645\u0629 \u0645\u0646 \u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 2030 \u0627\u0644\u062a\u064a \u062a\u0624\u0643\u062f \u0639\u0644\u0649 \u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u062a\u0631\u0627\u062b \u0643\u0642\u064a\u0645\u0629 \u0627\u0633\u062a\u062b\u0645\u0627\u0631\u064a\u0629 \u0648\u062a\u0646\u0645\u0648\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n \r\n <p class=\"intro-text\">\r\n \u062a\u0623\u0633\u0633\u062a \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0644\u062a\u0643\u0648\u0646 \u062c\u0633\u0631\u0627\u064b \u0628\u064a\u0646 \u0627\u0644\u0645\u0627\u0636\u064a \u0627\u0644\u0639\u0631\u064a\u0642 \u0648\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0645\u0632\u062f\u0647\u0631\u060c \u062e\u0627\u0635\u0629 \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u062d\u0627\u0626\u0644 \u0627\u0644\u062a\u064a \u062a\u064f\u0639\u062f \u0645\u0647\u062f\u0627\u064b \u0644\u062d\u0636\u0627\u0631\u0627\u062a \u0645\u0648\u063a\u0644\u0629 \u0641\u064a \u0627\u0644\u0642\u062f\u0645.\r\n <\/p>\r\n \r\n <blockquote class=\"quote\">\r\n \"\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0623\u0631\u0636 \u0627\u0644\u0643\u0646\u0648\u0632 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629 \u0648\u0627\u0644\u062a\u0631\u0627\u062b\u064a\u0629\u060c \u0627\u0644\u062a\u064a \u0627\u062d\u062a\u0636\u0646\u062a \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u062d\u0636\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u0629\u060c \u063a\u0646\u064a\u0629 \u0628\u0625\u0646\u0633\u0627\u0646\u0647\u0627 \u0648\u062a\u0627\u0631\u064a\u062e\u0647\u0627\u060c \u0648\u0633\u0646\u0639\u0645\u0644 \u0639\u0644\u0649 \u062e\u062f\u0645\u0629 \u0627\u0644\u062a\u0631\u0627\u062b \u0627\u0644\u0648\u0637\u0646\u064a\"\r\n <br>\r\n <strong>- \u0648\u0632\u064a\u0631 \u0627\u0644\u062b\u0642\u0627\u0641\u0629 \u0627\u0644\u0623\u0645\u064a\u0631 \u0628\u062f\u0631 \u0628\u0646 \u0639\u0628\u062f\u0627\u0644\u0644\u0647 \u0628\u0646 \u0641\u0631\u062d\u0627\u0646 \u0622\u0644 \u0633\u0639\u0648\u062f <\/strong>\r\n <\/blockquote>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0627\u0644\u064a\u0629 -->\r\n <section id=\"current-projects\" class=\"section\" style=\"background: var(--light);\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/h2>\r\n <p class=\"section-subtitle\">\u062e\u0637\u0648\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0646\u062d\u0648 \u0627\u0644\u0627\u0633\u062a\u062f\u0627\u0645\u0629 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629 (\u0627\u0644\u062c\u0627\u0631\u064a \u062a\u0646\u0641\u064a\u0630\u0647\u0627 \u0641\u064a 2025)<\/p>\r\n <\/div>\r\n \r\n <div class=\"projects-grid\">\r\n <!-- \u0645\u0634\u0631\u0648\u0639 1 -->\r\n <div class=\"project-card current\">\r\n <div class=\"project-badge current\">\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/div>\r\n <div class=\"project-header\">\r\n <h3 class=\"project-title\">\u0645\u0634\u0631\u0648\u0639 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0648\u0631\u0648\u062b \u0627\u0644\u0641\u0646\u064a \u0648\u0627\u0644\u0634\u0639\u0628\u064a \u0641\u064a \u062d\u0627\u0626\u0644<\/h3>\r\n <div class=\"project-period\">\r\n <i class=\"far fa-calendar-alt\"><\/i>\r\n <span>\u064a\u0648\u0646\u064a\u0648 - \u0623\u0643\u062a\u0648\u0628\u0631 2025<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-details\">\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-bullseye\"><\/i>\r\n <span>\u064a\u0631\u0643\u0632 \u0639\u0644\u0649 \u062a\u0633\u062c\u064a\u0644 \u0648\u0623\u0631\u0634\u0641\u0629 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629 \u0627\u0644\u0634\u0639\u0628\u064a\u0629<\/span>\r\n <\/div>\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <span>\u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0645\u0646\u0647\u062c\u064a\u0627\u062a \u0628\u062d\u062b\u064a\u0629 \u0645\u062a\u0642\u062f\u0645\u0629<\/span>\r\n <\/div>\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <span>\u064a\u0634\u0631\u0641 \u0639\u0644\u064a\u0647 \u0627\u0644\u062f\u0643\u062a\u0648\u0631 \u062e\u0644\u064a\u0641 \u0628\u0646 \u0635\u063a\u064a\u0631 \u0627\u0644\u0634\u0645\u0631\u064a<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">15<\/span>\r\n <div class=\"stat-label\">\u062d\u0645\u0644\u0629 \u0645\u064a\u062f\u0627\u0646\u064a\u0629<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">150<\/span>\r\n <div class=\"stat-label\">\u0639\u0646\u0635\u0631 \u062b\u0642\u0627\u0641\u064a<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">500<\/span>\r\n <div class=\"stat-label\">\u0633\u062c\u0644 \u0635\u0648\u062a\u064a<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0645\u0634\u0631\u0648\u0639 2 -->\r\n <div class=\"project-card current\">\r\n <div class=\"project-badge current\">\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/div>\r\n <div class=\"project-header\">\r\n <h3 class=\"project-title\">\u0628\u0631\u0646\u0627\u0645\u062c \u062a\u062f\u0631\u064a\u0628 \u0648\u062a\u0623\u0647\u064a\u0644 \u0627\u0644\u062d\u0631\u0641\u064a\u064a\u0646<\/h3>\r\n <div class=\"project-period\">\r\n <i class=\"far fa-calendar-alt\"><\/i>\r\n<span>\u0645\u0646 2 \u062d\u062a\u0649 6 \u0646\u0648\u0641\u0645\u0628\u0631 2025<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-details\">\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-bullseye\"><\/i>\r\n <span>\u064a\u0647\u062f\u0641 \u0625\u0644\u0649 \u0646\u0634\u0631 \u0648\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062d\u0631\u0641 \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u0629<\/span>\r\n <\/div>\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <span>\u064a\u0631\u0643\u0632 \u0639\u0644\u0649 \u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u062d\u0631\u0641 \u0627\u0644\u064a\u062f\u0648\u064a\u0629<\/span>\r\n <\/div>\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <span>\u064a\u0634\u0631\u0641 \u0639\u0644\u064a\u0647 \u0627\u0644\u0623\u0633\u062a\u0627\u0630 \u0627\u0644\u062f\u0643\u062a\u0648\u0631 \u0623\u062d\u0645\u062f \u0645\u0647\u062c\u0639 \u0627\u0644\u0634\u0645\u0631\u064a<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">8<\/span>\r\n <div class=\"stat-label\">\u062f\u0648\u0631\u0627\u062a \u062a\u062f\u0631\u064a\u0628\u064a\u0629<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">120<\/span>\r\n <div class=\"stat-label\">\u062d\u0631\u0641\u064a \u0645\u062a\u062f\u0631\u0628<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">300<\/span>\r\n <div class=\"stat-label\">\u0642\u0637\u0639\u0629 \u062d\u0631\u0641\u064a\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 -->\r\n <section id=\"future-projects\" class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629<\/h2>\r\n <p class=\"section-subtitle\">\u0631\u0624\u064a\u0629 \u0637\u0645\u0648\u062d\u0629 \u0644\u0644\u0627\u0633\u062a\u062f\u0627\u0645\u0629 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 (\u0645\u062e\u0637\u0637\u0629 \u0644\u06402026-2030)<\/p>\r\n <\/div>\r\n \r\n <div class=\"projects-grid\">\r\n <div class=\"project-card future\">\r\n <div class=\"project-badge future\">\u0645\u0633\u062a\u0642\u0628\u0644\u064a<\/div>\r\n <div class=\"project-header\">\r\n <h3 class=\"project-title\">\u0628\u0646\u0627\u0621 \u0642\u0648\u0627\u0639\u062f \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0631\u0627\u062b \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h3>\r\n <div class=\"project-period\">\r\n <i class=\"far fa-calendar-alt\"><\/i>\r\n <span>2026 - 2028<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-details\">\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-bullseye\"><\/i>\r\n <span>\u0625\u0646\u0634\u0627\u0621 \u0642\u0648\u0627\u0639\u062f \u0628\u064a\u0627\u0646\u0627\u062a \u0634\u0627\u0645\u0644\u0629 \u0644\u0644\u062a\u0631\u0627\u062b<\/span>\r\n <\/div>\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <span>\u062a\u0637\u0648\u064a\u0631 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0644\u062c\u0648\u0644\u0627\u062a<\/span>\r\n <\/div>\r\n <div class=\"project-detail\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <span>\u062c\u0632\u0621 \u0645\u0646 \u0645\u062d\u0648\u0631 \u0627\u0644\u0631\u064a\u0627\u062f\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">2,000<\/span>\r\n <div class=\"stat-label\">\u0639\u0646\u0635\u0631 \u062b\u0642\u0627\u0641\u064a<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">500<\/span>\r\n <div class=\"stat-label\">\u0634\u0627\u0628 \u0645\u062a\u062f\u0631\u0628<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u062e\u0627\u062a\u0645\u0629 -->\r\n <section id=\"conclusion\" class=\"conclusion-section\">\r\n <div class=\"container\">\r\n <div class=\"conclusion-content\">\r\n <h2 class=\"conclusion-title\">\u0627\u0644\u062e\u0627\u062a\u0645\u0629<\/h2>\r\n <p class=\"conclusion-text\">\r\n \u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644\u060c \u0633\u0648\u0627\u0621 \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0623\u0648 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629\u060c \u062a\u064f\u062b\u0628\u062a \u0623\u0646\u0647\u0627 \u0643\u064a\u0627\u0646\u064b\u0627 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u064b\u0627 \u064a\u062d\u0648\u0644 \u0627\u0644\u062a\u0631\u0627\u062b \u0625\u0644\u0649 \u0642\u064a\u0645\u0629 \u062a\u0646\u0645\u0648\u064a\u0629\u060c \u0645\u0639 \u0627\u0644\u0627\u0644\u062a\u0632\u0627\u0645 \u0628\u0631\u0624\u064a\u0629 2030.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 \u0648\u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629\r\n const topNav = document.querySelector('.top-nav');\r\n const sideNav = document.querySelector('.side-nav');\r\n const navLinks = document.querySelectorAll('.nav-link');\r\n const navDots = document.querySelectorAll('.nav-dot');\r\n const sections = document.querySelectorAll('.section, .hero-section');\r\n\r\n let lastScrollY = window.scrollY;\r\n\r\n \/\/ \u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629\r\n function handleTopNav() {\r\n if (window.scrollY > lastScrollY && window.scrollY > 100) {\r\n topNav.classList.add('hidden');\r\n } else {\r\n topNav.classList.remove('hidden');\r\n }\r\n lastScrollY = window.scrollY;\r\n }\r\n\r\n \/\/ \u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629\r\n function handleSideNav() {\r\n if (window.scrollY > 300) {\r\n sideNav.classList.add('active');\r\n } else {\r\n sideNav.classList.remove('active');\r\n }\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u0646\u0634\u0637\u0629\r\n function updateActiveNav() {\r\n let currentSection = '';\r\n \r\n sections.forEach(section => {\r\n const sectionTop = section.offsetTop;\r\n const sectionHeight = section.clientHeight;\r\n \r\n if (window.scrollY >= sectionTop - 100) {\r\n currentSection = section.id;\r\n }\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629\r\n navLinks.forEach(link => {\r\n link.classList.remove('active');\r\n if (link.getAttribute('href') === `#${currentSection}`) {\r\n link.classList.add('active');\r\n }\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629\r\n navDots.forEach(dot => {\r\n dot.classList.remove('active');\r\n if (dot.dataset.section === currentSection) {\r\n dot.classList.add('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0627\u0644\u062a\u0646\u0642\u0644 \u0628\u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0627\u0644\u0646\u0642\u0627\u0637\r\n navDots.forEach(dot => {\r\n dot.addEventListener('click', function() {\r\n const targetSection = document.getElementById(this.dataset.section);\r\n targetSection.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n });\r\n });\r\n\r\n \/\/ \u062a\u0623\u062b\u064a\u0631\u0627\u062a Hover \u0644\u0644\u0628\u0637\u0627\u0642\u0627\u062a\r\n document.querySelectorAll('.project-card').forEach(card => {\r\n card.addEventListener('mouseenter', function() {\r\n this.style.transform = 'translateY(-5px)';\r\n });\r\n \r\n card.addEventListener('mouseleave', function() {\r\n this.style.transform = 'translateY(0)';\r\n });\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\r\n window.addEventListener('scroll', () => {\r\n handleTopNav();\r\n handleSideNav();\r\n updateActiveNav();\r\n });\r\n\r\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0623\u0648\u0644\u064a\u0629\r\n handleTopNav();\r\n handleSideNav();\r\n updateActiveNav();\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>\u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644 \u0627\u0644\u0645\u0642\u062f\u0645\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u0627\u0644\u062e\u0627\u062a\u0645\u0629 \u0645\u0634\u0627\u0631\u064a\u0639 \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644 \u0627\u0644\u062c\u0647\u0648\u062f \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629 \u0643\u0631\u0643\u0627\u0626\u0632 \u0644\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629 \u0627\u0644\u0645\u0642\u062f\u0645\u0629 \u0646\u0638\u0631\u0629 \u0639\u0627\u0645\u0629 \u0639\u0644\u0649 \u062f\u0648\u0631 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0641\u064a \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062a\u0631\u0627\u062b \u0648\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u062b\u0642\u0627\u0641\u064a\u0629 \u062c\u0645\u0639\u064a\u0629 \u062d\u0636\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0631\u0627\u062b \u0628\u062d\u0627\u0626\u0644 \u062a\u064f\u0639\u062f\u0651 \u0646\u0645\u0648\u0630\u062c\u064b\u0627 \u0645\u062a\u0645\u064a\u0632\u064b\u0627 \u0644\u0644\u0643\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0639\u0627\u0648\u0646\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u062d\u064a\u062b \u062a\u064f\u0634\u0643\u0644 \u0631\u0643\u064a\u0632\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u062d\u0641\u0627\u0638 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2263","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/2263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2263"}],"version-history":[{"count":16,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/2263\/revisions"}],"predecessor-version":[{"id":2814,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/2263\/revisions\/2814"}],"wp:attachment":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}