{"id":54,"date":"2025-05-14T20:05:26","date_gmt":"2025-05-14T20:05:26","guid":{"rendered":"https:\/\/digitaltelawah.org.sa\/?page_id=54"},"modified":"2025-06-09T16:30:21","modified_gmt":"2025-06-09T16:30:21","slug":"%d9%85%d9%83%d8%aa%d8%a8%d8%a9-%d8%a7%d9%84%d8%b5%d9%88%d8%b1","status":"publish","type":"page","link":"https:\/\/digitaltelawah.org.sa\/?page_id=54","title":{"rendered":"\u0645\u0643\u062a\u0628\u0629 \u0627\u0644\u0635\u0648\u0631"},"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\u0643\u062a\u0628\u0629 \u0635\u0648\u0631 \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Define color palette and font *\/\r\n :root {\r\n --primary-dark-blue: #01474F; \/* From #01474F *\/\r\n --accent-green: #ABD58D; \/* From #ABD58D *\/\r\n --dark-text: #111111; \/* From #111111 *\/\r\n --light-bg: #FAFAFA; \/* From #FAFAFA *\/\r\n --white: #ffffff;\r\n --border-color: #e0e0e0;\r\n --font-family: 'Cairo', sans-serif;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --box-shadow-hover: rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n body {\r\n font-family: var(--font-family);\r\n margin: 0;\r\n background-color: var(--light-bg);\r\n color: var(--dark-text);\r\n line-height: 1.6;\r\n direction: rtl; \/* Ensure RTL for all text *\/\r\n padding: 20px; \/* Add some padding around the edges *\/\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 40px auto;\r\n background: var(--white);\r\n padding: 30px 40px; \/* Slightly more horizontal padding *\/\r\n border-radius: 12px; \/* More rounded corners for modern look *\/\r\n box-shadow: 0 8px 25px var(--box-shadow-light); \/* Softer, larger shadow *\/\r\n }\r\n\r\n .header-section {\r\n text-align: center;\r\n margin-bottom: 50px; \/* More space below header *\/\r\n }\r\n\r\n .header-section h1 {\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 3.2em; \/* Larger main title *\/\r\n margin-bottom: 10px; \/* Closer to subtitle *\/\r\n position: relative;\r\n display: inline-block; \/* To center the ::after element correctly *\/\r\n padding-bottom: 20px; \/* Space for the underline *\/\r\n }\r\n\r\n .header-section h1::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px; \/* Wider accent line *\/\r\n height: 6px; \/* Thicker accent line *\/\r\n background-color: var(--accent-green); \/* Use accent color *\/\r\n border-radius: 3px;\r\n }\r\n\r\n .header-section h2 {\r\n color: #555; \/* Softer color for subtitle *\/\r\n font-weight: 400; \/* Lighter weight for subtitle *\/\r\n font-size: 1.6em; \/* Appropriate size for subtitle *\/\r\n margin-top: 0;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Gallery specific styles *\/\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); \/* Flexible columns for images *\/\r\n gap: 30px; \/* Space between image cards *\/\r\n }\r\n\r\n .image-card {\r\n background-color: var(--white);\r\n border: 1px solid var(--border-color);\r\n border-radius: 12px;\r\n box-shadow: 0 6px 18px var(--box-shadow-light);\r\n transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\r\n overflow: hidden; \/* Ensures image corners are rounded *\/\r\n display: flex;\r\n flex-direction: column;\r\n text-align: right; \/* RTL alignment *\/\r\n }\r\n\r\n .image-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 12px 30px var(--box-shadow-hover);\r\n }\r\n\r\n .image-card img {\r\n width: 100%;\r\n height: 220px; \/* Fixed height for consistency *\/\r\n object-fit: cover; \/* Ensures image covers area without distortion *\/\r\n display: block;\r\n border-bottom: 1px solid var(--border-color); \/* Separator *\/\r\n }\r\n\r\n .image-info {\r\n padding: 20px;\r\n }\r\n\r\n .image-info h3 {\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 1.4em;\r\n margin-top: 0;\r\n margin-bottom: 10px;\r\n line-height: 1.3;\r\n }\r\n\r\n .image-info p {\r\n font-size: 0.95em;\r\n line-height: 1.6;\r\n color: #555;\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 992px) {\r\n .container {\r\n margin: 30px auto;\r\n padding: 25px 30px;\r\n }\r\n .header-section h1 {\r\n font-size: 2.8em;\r\n }\r\n .header-section h2 {\r\n font-size: 1.4em;\r\n }\r\n .gallery-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 25px;\r\n }\r\n .image-card img {\r\n height: 200px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 15px;\r\n }\r\n .container {\r\n margin: 20px auto;\r\n padding: 20px 25px;\r\n border-radius: 10px;\r\n }\r\n .header-section {\r\n margin-bottom: 40px;\r\n }\r\n .header-section h1 {\r\n font-size: 2.2em;\r\n padding-bottom: 15px;\r\n }\r\n .header-section h1::after {\r\n width: 90px;\r\n height: 5px;\r\n }\r\n .header-section h2 {\r\n font-size: 1.2em;\r\n }\r\n .gallery-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n .image-card img {\r\n height: 180px;\r\n }\r\n .image-info {\r\n padding: 15px;\r\n }\r\n .image-info h3 {\r\n font-size: 1.2em;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n padding: 15px 20px;\r\n }\r\n .gallery-grid {\r\n grid-template-columns: 1fr; \/* Single column on very small screens *\/\r\n gap: 20px;\r\n }\r\n .image-card img {\r\n height: 200px; \/* Keep a decent height on single column *\/\r\n }\r\n .header-section h1 {\r\n font-size: 1.8em;\r\n padding-bottom: 10px;\r\n }\r\n .header-section h1::after {\r\n width: 70px;\r\n height: 4px;\r\n }\r\n .header-section h2 {\r\n font-size: 1em;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header-section\">\r\n <h1>\u0645\u0643\u062a\u0628\u0629 \u0635\u0648\u0631 \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/h1>\r\n <h2>\u0644\u062d\u0638\u0627\u062a \u0639\u0637\u0627\u0621 \u0648\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0645\u0644\u0647\u0645\u0629<\/h2>\r\n <\/div>\r\n\r\n <div class=\"gallery-grid\" id=\"gallery-container\">\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Sample image data (replace with your actual image paths and descriptions)\r\n const images = [\r\n {\r\n src: \"images\/placeholder-program-1.jpg\", \/\/ placeholder for a program image\r\n title: \"\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629\",\r\n description: \"\u0635\u0648\u0631 \u0645\u0646 \u0645\u0634\u0627\u0631\u064a\u0639\u0646\u0627 \u0627\u0644\u0647\u0627\u062f\u0641\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629 \u0641\u064a \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0645\u062d\u0644\u064a\u0629.\"\r\n },\r\n {\r\n src: \"images\/placeholder-event-2.jpg\", \/\/ placeholder for an event image\r\n title: \"\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u062a\u0648\u0639\u0648\u064a\u0629 \u0648\u062a\u062b\u0642\u064a\u0641\u064a\u0629\",\r\n description: \"\u0644\u0642\u0637\u0627\u062a \u0645\u0646 \u0648\u0631\u0634 \u0627\u0644\u0639\u0645\u0644 \u0648\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0627\u0644\u062a\u0648\u0639\u0648\u064a\u0629 \u0627\u0644\u062a\u064a \u0646\u0638\u0645\u062a\u0647\u0627 \u0627\u0644\u062c\u0645\u0639\u064a\u0629.\"\r\n },\r\n {\r\n src: \"images\/placeholder-partnership-3.jpg\", \/\/ placeholder for a partnership image\r\n title: \"\u0634\u0631\u0627\u0643\u0627\u062a \u0645\u062c\u062a\u0645\u0639\u064a\u0629 \u0645\u0624\u062b\u0631\u0629\",\r\n description: \"\u0635\u0648\u0631 \u062a\u0648\u0636\u062d \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0648\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u0645\u0639 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0623\u062b\u0631.\"\r\n },\r\n {\r\n src: \"images\/placeholder-achievement-4.jpg\", \/\/ placeholder for an achievement image\r\n title: \"\u062a\u0643\u0631\u064a\u0645 \u0627\u0644\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0648\u0627\u0644\u062c\u0647\u0648\u062f\",\r\n description: \"\u0644\u062d\u0638\u0627\u062a \u0645\u0646 \u062a\u0643\u0631\u064a\u0645 \u0627\u0644\u0641\u0631\u0642 \u0627\u0644\u0639\u0627\u0645\u0644\u0629 \u0648\u0627\u0644\u0645\u062a\u0637\u0648\u0639\u064a\u0646 \u0639\u0644\u0649 \u0625\u0646\u062c\u0627\u0632\u0627\u062a\u0647\u0645 \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629.\"\r\n },\r\n {\r\n src: \"images\/placeholder-community-5.jpg\", \/\/ placeholder for a community image\r\n title: \"\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639 \u0648\u0627\u0644\u0639\u0637\u0627\u0621\",\r\n description: \"\u0635\u0648\u0631 \u062a\u0639\u0643\u0633 \u0645\u0628\u0627\u062f\u0631\u0627\u062a\u0646\u0627 \u0641\u064a \u062e\u062f\u0645\u0629 \u0645\u062e\u062a\u0644\u0641 \u0634\u0631\u0627\u0626\u062d \u0627\u0644\u0645\u062c\u062a\u0645\u0639.\"\r\n },\r\n {\r\n src: \"images\/placeholder-vision-6.jpg\", \/\/ placeholder for a vision image\r\n title: \"\u0631\u0624\u064a\u062a\u0646\u0627 \u0641\u064a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u062e\u064a\u0631\u064a\",\r\n description: \"\u062a\u062c\u0633\u064a\u062f \u0628\u0635\u0631\u064a \u0644\u0645\u0628\u0627\u062f\u0626 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0648\u0631\u0624\u064a\u062a\u0647\u0627 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a\u0629.\"\r\n }\r\n \/\/ Add more images here\r\n ];\r\n\r\n const galleryContainer = document.getElementById('gallery-container');\r\n\r\n function displayImages(imagesToDisplay) {\r\n galleryContainer.innerHTML = ''; \/\/ Clear previous images\r\n\r\n if (imagesToDisplay.length === 0) {\r\n galleryContainer.innerHTML = '<p style=\"text-align: center; width: 100%; color: #666; padding: 30px; font-size: 1.1em; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 8px var(--box-shadow-light);\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0635\u0648\u0631 \u0644\u0639\u0631\u0636\u0647\u0627 \u062d\u0627\u0644\u064a\u064b\u0627.<\/p>';\r\n return;\r\n }\r\n\r\n imagesToDisplay.forEach(image => {\r\n const imageCard = document.createElement('div');\r\n imageCard.classList.add('image-card');\r\n imageCard.innerHTML = `\r\n <img decoding=\"async\" src=\"${image.src}\" alt=\"${image.title}\">\r\n <div class=\"image-info\">\r\n <h3>${image.title}<\/h3>\r\n <p>${image.description}<\/p>\r\n <\/div>\r\n `;\r\n galleryContainer.appendChild(imageCard);\r\n });\r\n }\r\n\r\n \/\/ Initial display of all images\r\n document.addEventListener('DOMContentLoaded', () => {\r\n displayImages(images);\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-1ad70904 e-flex e-con-boxed e-con e-parent\" data-id=\"1ad70904\" 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-6048dc5 elementor-button-success elementor-align-right elementor-widget elementor-widget-button\" data-id=\"6048dc5\" 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\u0643\u062a\u0628\u0629 \u0635\u0648\u0631 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0645\u0643\u062a\u0628\u0629 \u0635\u0648\u0631 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0644\u062d\u0638\u0627\u062a \u0639\u0637\u0627\u0621 \u0648\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0645\u0644\u0647\u0645\u0629 \u062a\u0628\u0631\u0639 \u0627\u0644\u0627\u0646<\/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-54","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/54","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=54"}],"version-history":[{"count":22,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":891,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions\/891"}],"wp:attachment":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}