{"id":50,"date":"2025-05-14T20:04:49","date_gmt":"2025-05-14T20:04:49","guid":{"rendered":"https:\/\/digitaltelawah.org.sa\/?page_id=50"},"modified":"2025-08-04T14:19:01","modified_gmt":"2025-08-04T14:19:01","slug":"%d8%a8%d8%b1%d8%a7%d9%85%d8%ac-%d9%88%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:\/\/digitaltelawah.org.sa\/?page_id=50","title":{"rendered":"\u0628\u0631\u0627\u0645\u062c \u0648\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
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0645\u0634\u0627\u0631\u064a\u0639 \u0648\u0628\u0631\u0627\u0645\u062c \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\" integrity=\"sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9\/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n \r\n <style>\r\n \/* \u062a\u0639\u0631\u064a\u0641 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0644\u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0648\u0627\u0644\u062a\u0646\u0627\u0633\u0642 *\/\r\n :root {\r\n --color-primary: #ABD58D; \/* \u0627\u0644\u0623\u062e\u0636\u0631 \u0627\u0644\u0632\u064a\u062a\u064a \/ \u0627\u0644\u062a\u0631\u0627\u0628\u064a *\/\r\n --color-dark: #111111; \/* \u0627\u0644\u0623\u0633\u0648\u062f \u0627\u0644\u062f\u0627\u0643\u0646 *\/\r\n --color-accent: #01474F; \/* \u0627\u0644\u0623\u0632\u0631\u0642 \u0627\u0644\u0628\u062d\u0631\u064a \/ \u0627\u0644\u0623\u062e\u0636\u0631 \u0627\u0644\u062f\u0627\u0643\u0646 *\/\r\n --color-background: #FAFAFA; \/* \u0627\u0644\u0623\u0628\u064a\u0636 \u0627\u0644\u0645\u0627\u0626\u0644 \u0644\u0644\u0631\u0645\u0627\u062f\u064a \u0627\u0644\u0641\u0627\u062a\u062d \u062c\u062f\u064b\u0627 *\/\r\n --color-text-light: #FAFAFA; \/* \u0646\u0635 \u0641\u0627\u062a\u062d \u0644\u0644\u062e\u0644\u0641\u064a\u0627\u062a \u0627\u0644\u062f\u0627\u0643\u0646\u0629 *\/\r\n }\r\n\r\n \/* \u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0639\u0627\u0645\u0629 \u0644\u0644\u062c\u0633\u0645 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n body {\r\n font-family: 'Cairo', sans-serif; \/* \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062e\u0637 \u0627\u0644\u0630\u064a \u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631\u0647 *\/\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n background-color: var(--color-background);\r\n color: var(--color-dark);\r\n direction: rtl; \/* \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0646\u0635 \u0645\u0646 \u0627\u0644\u064a\u0645\u064a\u0646 \u0644\u0644\u064a\u0633\u0627\u0631 *\/\r\n text-align: right; \/* \u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u0644\u0644\u064a\u0645\u064a\u0646 *\/\r\n }\r\n\r\n \/* \u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0639\u0627\u0645\u0629 *\/\r\n section {\r\n padding: 60px 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n h1, h2, h3 {\r\n color: var(--color-dark);\r\n }\r\n\r\n \/* 1. \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0644\u0648\u064a (Hero Section) *\/\r\n .hero-section {\r\n background-color: var(--color-primary); \/* #ABD58D *\/\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n text-align: center;\r\n padding: 100px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 400px; \/* \u0627\u0631\u062a\u0641\u0627\u0639 \u0623\u062f\u0646\u0649 *\/\r\n position: relative; \/* \u0644\u0644\u0633\u0645\u0627\u062d \u0628\u0648\u0636\u0639 \u0635\u0648\u0631\u0629 \u0623\u0648 \u0623\u064a\u0642\u0648\u0646\u0629 \u062e\u0644\u0641\u064a\u0629 *\/\r\n overflow: hidden; \/* \u0644\u0625\u062e\u0641\u0627\u0621 \u0623\u064a \u062c\u0632\u0621 \u0632\u0627\u0626\u062f \u0645\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n }\r\n\r\n .hero-section h1 {\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n font-size: 3em;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .hero-section p {\r\n font-size: 1.2em;\r\n max-width: 800px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .hero-section .cta-button {\r\n background-color: var(--color-accent); \/* #01474F *\/\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n padding: 15px 30px;\r\n text-decoration: none;\r\n border-radius: 5px;\r\n font-weight: bold;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .hero-section .cta-button:hover {\r\n background-color: #003a3d; \/* \u0644\u0648\u0646 \u062b\u0627\u0628\u062a \u0644\u062a\u0639\u062a\u064a\u0645 #01474F *\/\r\n }\r\n\r\n \/* 2. \u0642\u0633\u0645 \u0627\u0644\u0628\u0631\u0627\u0645\u062c (Projects Grid Layout) *\/\r\n .projects-section {\r\n background-color: var(--color-background); \/* #FAFAFA *\/\r\n }\r\n\r\n .projects-section h2 {\r\n text-align: center;\r\n font-size: 2.5em;\r\n margin-bottom: 50px;\r\n color: var(--color-dark); \/* #111111 *\/\r\n }\r\n\r\n .filters {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin-bottom: 40px;\r\n background-color: var(--color-accent); \/* #01474F *\/\r\n padding: 15px 0;\r\n border-radius: 8px;\r\n }\r\n\r\n .filters button {\r\n background: none;\r\n border: none;\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n font-size: 1.1em;\r\n border-radius: 5px;\r\n transition: background-color 0.3s ease;\r\n white-space: nowrap; \/* \u064a\u0645\u0646\u0639 \u0627\u0644\u062a\u0641\u0627\u0641 \u0627\u0644\u0646\u0635 \u062f\u0627\u062e\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 *\/\r\n }\r\n\r\n .filters button.active,\r\n .filters button:hover {\r\n background-color: var(--color-primary); \/* #ABD58D *\/\r\n color: var(--color-dark); \/* #111111 *\/\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .project-card {\r\n background-color: var(--color-background); \/* #FAFAFA *\/\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n transition: transform 0.3s ease;\r\n display: block; \/* \u0644\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u062a\u0638\u0647\u0631\/\u062a\u062e\u062a\u0641\u064a \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d \u0639\u0646\u062f \u0627\u0644\u0641\u0644\u062a\u0631\u0629 *\/\r\n }\r\n\r\n .project-card.hidden {\r\n display: none;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* \u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0627\u0644\u0635\u0648\u0631 *\/\r\n .project-card .icon-placeholder {\r\n width: 100%;\r\n height: 200px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #FFFFFF; \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0628\u064a\u0636\u0627\u0621 *\/\r\n font-size: 8em; \/* \u062d\u062c\u0645 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 *\/\r\n border-top-left-radius: 10px;\r\n border-top-right-radius: 10px;\r\n }\r\n \/* \u062a\u062d\u062f\u064a\u062f \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0641\u0626\u0629 *\/\r\n .project-card[data-category=\"\u0645\u0646\u0635\u0629\"] .icon-placeholder {\r\n color: var(--color-primary); \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0645\u0646\u0635\u0629 \u0628\u0644\u0648\u0646 Accent *\/\r\n }\r\n .project-card[data-category=\"\u062f\u0648\u0631\u0627\u062a\"] .icon-placeholder {\r\n color: var(--color-primary); \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0628\u0644\u0648\u0646 Primary *\/\r\n }\r\n .project-card[data-category=\"\u0627\u0644\u0645\u0633\u0627\u0628\u0642\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629\"] .icon-placeholder {\r\n color: var(--color-accent); \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0645\u062c\u0627\u0644\u0633 \u0628\u0644\u0648\u0646 Accent *\/\r\n }\r\n .project-card[data-category=\"\u0628\u0631\u0627\u0645\u062c\"] .icon-placeholder {\r\n color: var(--color-accent); \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0628\u0644\u0648\u0646 Primary *\/\r\n }\r\n\r\n\r\n .project-card-content {\r\n padding: 20px;\r\n }\r\n\r\n .project-card h3 {\r\n color: var(--color-dark); \/* #111111 *\/\r\n margin-top: 0;\r\n font-size: 1.5em;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .project-card p {\r\n color: var(--color-dark); \/* #111111 *\/\r\n font-size: 0.95em;\r\n line-height: 1.6;\r\n margin-bottom: 15px;\r\n }\r\n\r\n \/* \u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n .project-card .details-info {\r\n font-size: 0.9em;\r\n color: #555; \/* \u0644\u0648\u0646 \u0631\u0645\u0627\u062f\u064a \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u062a\u0641\u0627\u0635\u064a\u0644 *\/\r\n margin-bottom: 10px;\r\n border-top: 1px solid #eee; \/* \u0641\u0627\u0635\u0644 \u062e\u0641\u064a\u0641 *\/\r\n padding-top: 10px;\r\n margin-top: 15px;\r\n }\r\n .project-card .details-info strong {\r\n color: var(--color-dark);\r\n }\r\n .project-card .details-info span {\r\n display: block; \/* \u0644\u0639\u0631\u0636 \u0643\u0644 \u0645\u0639\u0644\u0648\u0645\u0629 \u0639\u0644\u0649 \u0633\u0637\u0631 \u062c\u062f\u064a\u062f *\/\r\n margin-bottom: 5px;\r\n }\r\n\r\n .project-card .status-indicator {\r\n font-size: 1em;\r\n font-weight: bold;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n display: inline-block;\r\n margin-top: 10px;\r\n }\r\n\r\n .status-indicator.active {\r\n background-color: #e0f2f1; \/* \u0644\u0648\u0646 \u0641\u0627\u062a\u062d \u0644\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n color: var(--color-accent); \/* \u0646\u0635 \u0628\u0644\u0648\u0646 \u0645\u0645\u064a\u0632 *\/\r\n }\r\n\r\n .status-indicator.completed {\r\n background-color: #dcedc8; \/* \u0644\u0648\u0646 \u0623\u062e\u0636\u0631 \u0641\u0627\u062a\u062d *\/\r\n color: #388e3c; \/* \u0644\u0648\u0646 \u0627\u0644\u0646\u0635 \u0627\u0644\u0623\u063a\u0645\u0642 \u0642\u0644\u064a\u0644\u0627\u064b *\/\r\n }\r\n\r\n .status-indicator.upcoming {\r\n background-color: #fffde7; \/* \u0644\u0648\u0646 \u0623\u0635\u0641\u0631 \u0641\u0627\u062a\u062d *\/\r\n color: orange; \/* \u0646\u0635 \u0628\u0644\u0648\u0646 \u0645\u0645\u064a\u0632 *\/\r\n }\r\n\r\n\r\n \/* 3. \u0642\u0633\u0645 \u0627\u0644\u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0648\u0627\u0644\u0623\u062b\u0631 (Impact & Statistics) *\/\r\n .impact-section {\r\n background-color: var(--color-accent); \/* #01474F *\/\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n text-align: center;\r\n }\r\n\r\n .impact-section h2 {\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n font-size: 2.5em;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .stats-grid {\r\n display: flex;\r\n justify-content: space-around;\r\n flex-wrap: wrap;\r\n gap: 30px;\r\n }\r\n\r\n .stat-item {\r\n flex-basis: 200px; \/* \u0639\u0631\u0636 \u062a\u0642\u0631\u064a\u0628\u064a \u0644\u0644\u0639\u0646\u0635\u0631 *\/\r\n text-align: center;\r\n }\r\n\r\n .stat-item .number {\r\n font-size: 3.5em;\r\n font-weight: bold;\r\n color: var(--color-primary); \/* #ABD58D *\/\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-item .description {\r\n font-size: 1.1em;\r\n }\r\n\r\n \/* 4. \u062f\u0639\u0648\u0629 \u0644\u0644\u0639\u0645\u0644 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 (Final Call to Action) *\/\r\n .final-cta-section {\r\n background-color: var(--color-primary); \/* #ABD58D *\/\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n text-align: center;\r\n padding: 80px 20px;\r\n }\r\n\r\n .final-cta-section h2 {\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n font-size: 2.2em;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .final-cta-section .cta-buttons-group {\r\n display: flex;\r\n justify-content: center;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .final-cta-section .cta-buttons-group a {\r\n background-color: var(--color-accent); \/* #01474F *\/\r\n color: var(--color-text-light); \/* #FAFAFA *\/\r\n padding: 15px 35px;\r\n text-decoration: none;\r\n border-radius: 5px;\r\n font-weight: bold;\r\n font-size: 1.1em;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .final-cta-section .cta-buttons-group a:hover {\r\n background-color: #003a3d; \/* \u0644\u0648\u0646 \u062b\u0627\u0628\u062a \u0644\u062a\u0639\u062a\u064a\u0645 #01474F *\/\r\n }\r\n\r\n \/* Media Queries \u0644\u0644\u062a\u062c\u0627\u0648\u0628\u064a\u0629 (Responsive Design) *\/\r\n @media (max-width: 768px) {\r\n .hero-section h1 {\r\n font-size: 2.5em;\r\n }\r\n .hero-section p {\r\n font-size: 1em;\r\n }\r\n .filters {\r\n flex-direction: column;\r\n }\r\n .filters button {\r\n width: 100%; \/* \u0627\u062c\u0639\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u062a\u0623\u062e\u0630 \u0639\u0631\u0636\u064b\u0627 \u0643\u0627\u0645\u0644\u0627\u064b \u0641\u064a \u0627\u0644\u062c\u0648\u0627\u0644 *\/\r\n }\r\n .stats-grid {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n .stat-item {\r\n flex-basis: 100%;\r\n }\r\n .final-cta-section .cta-buttons-group {\r\n flex-direction: column;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"hero-section\">\r\n <h1>\u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0648\u0645\u0628\u0627\u062f\u0631\u0627\u062a\u0646\u0627: \u0646\u0648\u0631\u064c \u064a\u0636\u064a\u0621 \u062f\u0631\u0648\u0628 \u0627\u0644\u0645\u0639\u0631\u0641\u0629<\/h1>\r\n <p>\u0627\u0643\u062a\u0634\u0641 \u0643\u064a\u0641 \u062a\u0633\u0627\u0647\u0645 \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0627\u0644\u0646\u0648\u0639\u064a\u0629 \u0641\u064a \u062e\u062f\u0645\u0629 \u0643\u062a\u0627\u0628 \u0627\u0644\u0644\u0647\u060c \u0648\u062a\u0645\u0643\u064a\u0646 \u0627\u0644\u0623\u0641\u0631\u0627\u062f\u060c \u0648\u0625\u062b\u0631\u0627\u0621 \u0627\u0644\u0648\u0639\u064a \u0627\u0644\u0642\u0631\u0622\u0646\u064a.<\/p>\r\n <a href=\"#programs\" class=\"cta-button\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0643\u0627\u0641\u0629 \u0627\u0644\u0628\u0631\u0627\u0645\u062c<\/a>\r\n <\/section>\r\n\r\n <section id=\"programs\" class=\"projects-section\">\r\n <h2>\u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0627\u0644\u0646\u0648\u0639\u064a\u0629<\/h2>\r\n\r\n <div class=\"filters\">\r\n <button class=\"active\" data-filter=\"\u0627\u0644\u0643\u0644\">\u0627\u0644\u0643\u0644<\/button>\r\n <button data-filter=\"\u0645\u0646\u0635\u0629\">\u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/button>\r\n <button data-filter=\"\u0627\u0644\u0645\u0633\u0627\u0628\u0642\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629\">\u0627\u0644\u0645\u0633\u0627\u0628\u0642\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629<\/button>\r\n <button data-filter=\"\u062f\u0648\u0631\u0627\u062a\">\u0627\u0644\u062f\u0648\u0631\u0627\u062a<\/button>\r\n <button data-filter=\"\u0628\u0631\u0627\u0645\u062c\">\u0628\u0631\u0627\u0645\u062c \u0645\u062a\u0642\u0646\u0629<\/button>\r\n <\/div>\r\n\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card\" data-category=\"\u0628\u0631\u0627\u0645\u062c\">\r\n <div class=\"icon-placeholder\">\r\n <i class=\"fas fa-quran \"><\/i> <\/div>\r\n <div class=\"project-card-content\">\r\n <h3> \u0628\u0631\u0646\u0627\u0645\u062c \u062a\u0644\u0627\u0648\u0629<\/h3>\r\n <p>\u064a\u0647\u062f\u0641 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0625\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0648\u0629 \u0648\u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0645\u062e\u0627\u0631\u062c \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645\u060c \u0644\u064a\u0635\u0644 \u0627\u0644\u0645\u062a\u062f\u0631\u0628 \u0625\u0644\u0649 \u0625\u062a\u0642\u0627\u0646 \u0627\u0644\u062a\u0644\u0627\u0648\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629 \u0628\u0625\u0634\u0631\u0627\u0641 \u0645\u062a\u062e\u0635\u0635.<\/p>\r\n <div class=\"details-info\">\r\n <span><strong>\u0648\u0642\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630:<\/strong> \u0644\u0645\u062f\u0629 \u0639\u0627\u0645 <\/span>\r\n <span><strong>\u0639\u062f\u062f \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646:<\/strong> 47<\/span>\r\n <span><strong>\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629:<\/strong> \u0627\u0644\u0631\u0627\u063a\u0628\u0648\u0646 \u0641\u064a \u062a\u0639\u0644\u0645 \u0627\u0644\u0642\u0631\u0622\u0646 \u0639\u0646 \u0628\u0639\u062f \u0645\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0639\u0645\u0627\u0631<\/span>\r\n <\/div>\r\n <div class=\"status-indicator completed\">\u0642\u0627\u0626\u0645<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-category=\"\u062f\u0648\u0631\u0627\u062a\">\r\n <div class=\"icon-placeholder\">\r\n <i class=\"fas fa-chalkboard-teacher\"><\/i> <\/div>\r\n <div class=\"project-card-content\">\r\n <h3>\u062f\u0648\u0631\u0627\u062a \u0625\u0639\u062f\u0627\u062f \u0645\u0639\u0644\u0645\u064a \u0627\u0644\u0642\u0631\u0622\u0646<\/h3>\r\n <p>\u062f\u0648\u0631\u0627\u062a \u0645\u062a\u062e\u0635\u0635\u0629 \u0644\u062a\u0623\u0647\u064a\u0644 \u0627\u0644\u0645\u0639\u0644\u0645\u064a\u0646 \u0648\u0627\u0644\u0645\u0639\u0644\u0645\u0627\u062a \u0628\u0623\u062d\u062f\u062b \u0627\u0644\u0645\u0646\u0627\u0647\u062c \u0627\u0644\u062a\u0631\u0628\u0648\u064a\u0629 \u0648\u0627\u0644\u0639\u0644\u0645\u064a\u0629 \u0644\u062a\u0639\u0644\u064a\u0645 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645 \u0628\u0643\u0641\u0627\u0621\u0629 \u0639\u0627\u0644\u064a\u0629.<\/p>\r\n <div class=\"details-info\">\r\n <span><strong>\u0648\u0642\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630:<\/strong> \u0644\u0645 \u064a\u0628\u062f\u0623 \u0628\u0639\u062f<\/span>\r\n <span><strong>\u0639\u062f\u062f \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646:<\/strong> 120 \u0645\u0639\u0644\u0645 \u0648\u0645\u0639\u0644\u0645\u0629<\/span>\r\n <span><strong>\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629:<\/strong> \u062d\u0645\u0644\u0629 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645 \u0627\u0644\u0631\u0627\u063a\u0628\u0648\u0646 \u0641\u064a \u0627\u0644\u062a\u062f\u0631\u064a\u0633<\/span>\r\n <\/div>\r\n <div class=\"status-indicator active\">\u0644\u0645 \u064a\u0628\u062f\u0623<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-card\" data-category=\"\u0627\u0644\u0645\u0633\u0627\u0628\u0642\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629\">\r\n <div class=\"icon-placeholder\">\r\n <i class=\"fas fa-book-open\"><\/i> <\/div>\r\n <div class=\"project-card-content\">\r\n <h3>\u0627\u0644\u0645\u0633\u0627\u0628\u0642\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629<\/h3>\r\n <p>\u0645\u0633\u0627\u0628\u0642\u0629 \u062a\u0647\u062f\u0641 \u0625\u0644\u0649 \u062a\u062d\u0641\u064a\u0632 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0641\u064a \u062d\u0641\u0638 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645 \u0648\u062a\u0644\u0627\u0648\u062a\u0647\u060c \u0645\u0646 \u062e\u0644\u0627\u0644 \u0644\u0642\u0627\u0621\u0627\u062a \u062a\u0646\u0627\u0641\u0633\u064a\u0629 \u062f\u0648\u0631\u064a\u0629 \u062a\u0639\u0632\u0632 \u0631\u0648\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646 \u0648\u0627\u0644\u062a\u0645\u064a\u0632 \u0628\u064a\u0646 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u064a\u0646.<\/p>\r\n <div class=\"details-info\">\r\n <span><strong>\u0648\u0642\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630:<\/strong> \u0644\u0645 \u064a\u0628\u062f\u0623 \u0628\u0639\u062f<\/span>\r\n <span><strong>\u0639\u062f\u062f \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646:<\/strong> 800 \u0645\u0634\u0627\u0631\u0643 \u0634\u0647\u0631\u064a\u064b\u0627<\/span>\r\n <span><strong>\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629:<\/strong> \u0639\u0645\u0648\u0645 \u0627\u0644\u0645\u0633\u0644\u0645\u064a\u0646 \u0627\u0644\u0631\u0627\u063a\u0628\u064a\u0646 \u0641\u064a \u062a\u062f\u0628\u0631 \u0627\u0644\u0642\u0631\u0622\u0646<\/span>\r\n <\/div>\r\n <div class=\"status-indicator active\">\u0644\u0645 \u064a\u0628\u062f\u0623<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-category=\"\u0645\u0646\u0635\u0629\">\r\n <div class=\"icon-placeholder\">\r\n <i class=\"fas fa-globe\"><\/i> <\/div>\r\n <div class=\"project-card-content\">\r\n <h3>\u062a\u0644\u0627\u0648\u0629<\/h3>\r\n <p> \u0645\u0646\u0635\u0629 \u062a\u0647\u062f\u0641 \u0628\u0634\u0643\u0644 \u0631\u0626\u064a\u0633\u064a \u0625\u0644\u0649 \u062e\u062f\u0645\u0629 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u0646\u0634\u0637\u0629 \u0648\u0627\u0644\u0645\u0628\u0627\u062f\u0631\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u064f\u0639\u0646\u0649 \u0628\u062a\u0639\u0644\u064a\u0645 \u0648\u062a\u0644\u0627\u0648\u0629 \u0648\u062d\u0641\u0638 \u0627\u0644\u0642\u0631\u0622\u0646\u060c \u0648\u0630\u0644\u0643 \u0628\u0623\u0633\u0627\u0644\u064a\u0628 \u062d\u062f\u064a\u062b\u0629 \u0648\u062a\u0646\u0638\u064a\u0645 \u0645\u0624\u0633\u0633\u064a.<\/p>\r\n <div class=\"details-info\">\r\n <span><strong>\u0648\u0642\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630:<\/strong> \u0644\u0645\u062f\u0629 \u0639\u0627\u0645<\/span>\r\n <span><strong>\u0639\u062f\u062f \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646:<\/strong> 47 <\/span>\r\n <span><strong>\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629:<\/strong> \u0627\u0644\u0631\u0627\u063a\u0628\u0648\u0646 \u0641\u064a \u062a\u062c\u0648\u064a\u062f \u0648\u062a\u062d\u0633\u064a\u0646 \u062a\u0644\u0627\u0648\u062a\u0647\u0645<\/span>\r\n <\/div>\r\n <div class=\"status-indicator completed\">\u0642\u0627\u0626\u0645<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"impact-section\">\r\n <h2>\u0623\u0631\u0642\u0627\u0645 \u062a\u062a\u062d\u062f\u062b \u0639\u0646 \u0623\u062b\u0631\u0646\u0627<\/h2>\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <div class=\"number\">47+<\/div>\r\n <div class=\"description\">\u0645\u0633\u062a\u0641\u064a\u062f \u0645\u0628\u0627\u0634\u0631<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"number\">1<\/div>\r\n <div class=\"description\">\u0628\u0631\u0646\u0627\u0645\u062c \u0645\u0643\u062a\u0645\u0644<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"number\">9+<\/div>\r\n <div class=\"description\">\u0645\u062a\u0637\u0648\u0639 \u0646\u0634\u0637<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"final-cta-section\">\r\n <h2>\u0643\u0646 \u062c\u0632\u0621\u064b\u0627 \u0645\u0646 \u0627\u0644\u062a\u063a\u064a\u064a\u0631\u060c \u0633\u0627\u0647\u0645 \u0645\u0639\u0646\u0627 \u0627\u0644\u064a\u0648\u0645!<\/h2>\r\n <div class=\"cta-buttons-group\">\r\n <a href=\"https:\/\/digitaltelawah.org.sa\/?page_id=48\">\u062a\u0628\u0631\u0639 \u0627\u0644\u0622\u0646<\/a>\r\n <a href=\"https:\/\/nvg.gov.sa\/\">\u062a\u0637\u0648\u0639 \u0645\u0639\u0646\u0627<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const filterButtons = document.querySelectorAll('.filters button');\r\n const projectCards = document.querySelectorAll('.project-card');\r\n\r\n \/\/ \u062f\u0627\u0644\u0629 \u0644\u062a\u062d\u062f\u064a\u062b \u062d\u0627\u0644\u0629 \u0627\u0644\u0641\u0644\u062a\u0631 \u0627\u0644\u0646\u0634\u0637 \u0648\u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a\r\n function filterProjects(filterValue) {\r\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u0641\u0626\u0629 'active' \u0645\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0641\u0626\u0629 'active' \u0644\u0644\u0632\u0631 \u0627\u0644\u0630\u064a \u062a\u0645 \u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u064a\u0647 (\u0623\u0648 \u0627\u0644\u0632\u0631 \"\u0627\u0644\u0643\u0644\" \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0627\u064b)\r\n document.querySelector(`.filters button[data-filter=\"${filterValue}\"]`).classList.add('active');\r\n\r\n projectCards.forEach(card => {\r\n const cardCategory = card.dataset.category;\r\n\r\n if (filterValue === '\u0627\u0644\u0643\u0644' || cardCategory === filterValue) {\r\n card.classList.remove('hidden'); \/\/ \u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\r\n } else {\r\n card.classList.add('hidden'); \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u062a\u0645\u0639\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0644\u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0641\u0644\u062a\u0631\r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', function() {\r\n const filterValue = this.dataset.filter;\r\n filterProjects(filterValue);\r\n });\r\n });\r\n\r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0641\u0644\u062a\u0631 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 (\u0639\u0631\u0636 \u0627\u0644\u0643\u0644)\r\n filterProjects('\u0627\u0644\u0643\u0644');\r\n\r\n \/\/ \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0640 hover\r\n const ctaButtons = document.querySelectorAll('.hero-section .cta-button, .final-cta-section .cta-buttons-group a');\r\n ctaButtons.forEach(button => {\r\n button.addEventListener('mouseover', function() {\r\n this.style.backgroundColor = '#003a3d'; \/\/ \u0644\u0648\u0646 \u0623\u063a\u0645\u0642 \u062b\u0627\u0628\u062a\r\n });\r\n button.addEventListener('mouseout', function() {\r\n this.style.backgroundColor = '#01474F'; \/\/ \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0635\u0644\u064a\r\n });\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-41f179e6 e-flex e-con-boxed e-con e-parent\" data-id=\"41f179e6\" 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-30dc5356 elementor-button-success elementor-align-right elementor-widget elementor-widget-button\" data-id=\"30dc5356\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"sticky":"bottom","sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/digitaltelawah.org.sa\/?page_id=48\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-heart\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u062a\u0628\u0631\u0639 \u0627\u0644\u0627\u0646<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u0634\u0627\u0631\u064a\u0639 \u0648\u0628\u0631\u0627\u0645\u062c \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0648\u0645\u0628\u0627\u062f\u0631\u0627\u062a\u0646\u0627: \u0646\u0648\u0631\u064c \u064a\u0636\u064a\u0621 \u062f\u0631\u0648\u0628 \u0627\u0644\u0645\u0639\u0631\u0641\u0629 \u0627\u0643\u062a\u0634\u0641 \u0643\u064a\u0641 \u062a\u0633\u0627\u0647\u0645 \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0627\u0644\u0646\u0648\u0639\u064a\u0629 \u0641\u064a \u062e\u062f\u0645\u0629 \u0643\u062a\u0627\u0628 \u0627\u0644\u0644\u0647\u060c \u0648\u062a\u0645\u0643\u064a\u0646 \u0627\u0644\u0623\u0641\u0631\u0627\u062f\u060c \u0648\u0625\u062b\u0631\u0627\u0621 \u0627\u0644\u0648\u0639\u064a \u0627\u0644\u0642\u0631\u0622\u0646\u064a. \u0627\u0633\u062a\u0643\u0634\u0641 \u0643\u0627\u0641\u0629 \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0627\u0644\u0646\u0648\u0639\u064a\u0629 \u0627\u0644\u0643\u0644 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u0628\u0642\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0628\u0631\u0627\u0645\u062c \u0645\u062a\u0642\u0646\u0629 \u0628\u0631\u0646\u0627\u0645\u062c \u062a\u0644\u0627\u0648\u0629 \u064a\u0647\u062f\u0641 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0625\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0648\u0629 \u0648\u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0645\u062e\u0627\u0631\u062c \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645\u060c \u0644\u064a\u0635\u0644 \u0627\u0644\u0645\u062a\u062f\u0631\u0628 \u0625\u0644\u0649 \u0625\u062a\u0642\u0627\u0646 \u0627\u0644\u062a\u0644\u0627\u0648\u0629 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629 \u0628\u0625\u0634\u0631\u0627\u0641 \u0645\u062a\u062e\u0635\u0635. \u0648\u0642\u062a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-50","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=50"}],"version-history":[{"count":46,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/50\/revisions"}],"predecessor-version":[{"id":935,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/50\/revisions\/935"}],"wp:attachment":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}