{"id":48,"date":"2025-05-14T20:04:22","date_gmt":"2025-05-14T20:04:22","guid":{"rendered":"https:\/\/digitaltelawah.org.sa\/?page_id=48"},"modified":"2026-01-07T15:12:33","modified_gmt":"2026-01-07T15:12:33","slug":"%d9%85%d9%86%d8%b5%d8%a9-%d8%ac%d9%85%d8%b9-%d8%a7%d9%84%d8%aa%d8%a8%d8%b1%d8%b9%d8%a7%d8%aa","status":"publish","type":"page","link":"https:\/\/digitaltelawah.org.sa\/?page_id=48","title":{"rendered":"\u0645\u0646\u0635\u0629 \u062c\u0645\u0639 \u0627\u0644\u062a\u0628\u0631\u0639\u0627\u062a"},"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 Hero Section - \u062a\u0628\u0631\u0639<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n\r\n <section id=\"hero-section\">\r\n <style>\r\n \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 *\/\r\n :root {\r\n --primary-dark-blue: #01474F;\r\n --accent-green: #ABD58D;\r\n --white: #ffffff;\r\n --hero-overlay-color: rgba(0, 0, 0, 0.6);\r\n --elegant-dark-bg: #00252A;\r\n --font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n #hero-section {\r\n height: 450px; \/* \u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0644\u0644\u0642\u0633\u0645 *\/\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: var(--white);\r\n overflow: hidden;\r\n background-color: var(--elegant-dark-bg);\r\n }\r\n #hero-section img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n z-index: -1;\r\n }\r\n #hero-section .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: var(--hero-overlay-color);\r\n z-index: -1;\r\n }\r\n #hero-section .hero-content {\r\n z-index: 1;\r\n max-width: 700px; \/* \u062a\u0635\u063a\u064a\u0631 \u0623\u0642\u0635\u0649 \u0639\u0631\u0636 \u0644\u0644\u0645\u062d\u062a\u0648\u0649 *\/\r\n padding: 15px; \/* \u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u0628\u0627\u062f\u064a\u0646\u063a *\/\r\n }\r\n #hero-section h1 {\r\n font-family: var(--font-family);\r\n font-size: 2.8em; \/* \u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637 *\/\r\n font-weight: 700;\r\n margin-bottom: 8px; \/* \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0633\u0641\u0644\u064a\u0629 *\/\r\n color: var(--white);\r\n text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);\r\n }\r\n #hero-section p {\r\n font-family: var(--font-family);\r\n font-size: 1.1em; \/* \u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637 *\/\r\n line-height: 1.7;\r\n margin-bottom: 30px; \/* \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0633\u0641\u0644\u064a\u0629 *\/\r\n color: var(--white);\r\n text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);\r\n }\r\n #hero-section .cta-button {\r\n display: inline-block;\r\n background-color: var(--accent-green);\r\n color: var(--primary-dark-blue);\r\n padding: 12px 30px; \/* \u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0632\u0631 *\/\r\n border-radius: 8px;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 1.1em; \/* \u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u062e\u0637 \u0627\u0644\u0632\u0631 *\/\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); \/* \u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u0638\u0644 *\/\r\n }\r\n #hero-section .cta-button:hover {\r\n background-color: #9ECF7C;\r\n transform: translateY(-2px); \/* \u062a\u0635\u063a\u064a\u0631 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0631\u0641\u0639 *\/\r\n }\r\n\r\n \/* \u062a\u0639\u062f\u064a\u0644\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0633\u0645 \u0627\u0644\u0647\u064a\u0631\u0648 *\/\r\n @media (max-width: 992px) {\r\n #hero-section { height: 400px; } \/* \u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629 *\/\r\n #hero-section h1 { font-size: 2.4em; }\r\n #hero-section p { font-size: 1em; }\r\n }\r\n @media (max-width: 768px) {\r\n #hero-section { height: 350px; }\r\n #hero-section h1 { font-size: 2em; }\r\n #hero-section p { font-size: 0.9em; margin-bottom: 25px; }\r\n #hero-section .cta-button { padding: 10px 25px; font-size: 1em; }\r\n }\r\n @media (max-width: 480px) {\r\n #hero-section { height: 300px; }\r\n #hero-section h1 { font-size: 1.6em; }\r\n #hero-section p { font-size: 0.8em; margin-bottom: 20px; }\r\n #hero-section .cta-button { padding: 8px 20px; font-size: 0.9em; }\r\n }\r\n <\/style>\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/1920x600\/01474F\/ABD58D?text=\u0627\u062f\u0639\u0645+\u0627\u0644\u062e\u064a\u0631+\u0648\u0627\u0644\u062a\u0646\u0645\u064a\u0629\" alt=\"\u0635\u0648\u0631\u0629 \u062e\u0644\u0641\u064a\u0629 \u0645\u0644\u0647\u0645\u0629 \u0644\u062c\u0645\u0639 \u0627\u0644\u062a\u0628\u0631\u0639\u0627\u062a\">\r\n <div class=\"overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1>\u062a\u0628\u0631\u0639 \u0627\u0644\u0622\u0646.. \u0627\u0635\u0646\u0639 \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627<\/h1>\r\n <p>\u0643\u0644 \u0645\u0633\u0627\u0647\u0645\u0629 \u0645\u0646\u0643 \u062a\u062f\u0639\u0645 \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629 \u0648\u062a\u0635\u0644 \u0625\u0644\u0649 \u0645\u0633\u062a\u062d\u0642\u064a\u0647\u0627 \u0628\u0623\u0645\u0627\u0646 \u0648\u0634\u0641\u0627\u0641\u064a\u0629.<\/p>\r\n <!-- <a href=\"#current-campaigns-section\" class=\"cta-button\">\u0633\u0627\u0647\u0645 \u0641\u064a \u0627\u0644\u062e\u064a\u0631 \u0627\u0644\u064a\u0648\u0645<\/a>-->\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d8b128 e-flex e-con-boxed e-con e-parent\" data-id=\"0d8b128\" 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-a955302 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"a955302\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Why Donate Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n\r\n <section id=\"why-donate-section\">\r\n <style>\r\n \/* Colors and Fonts for this section *\/\r\n :root {\r\n --primary-dark-blue: #01474F;\r\n --accent-green: #ABD58D;\r\n --dark-text: #111111;\r\n --white: #ffffff;\r\n --light-bg: #FAFAFA;\r\n --border-color: #e0e0e0;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --box-shadow-medium: rgba(0, 0, 0, 0.1);\r\n --font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n #why-donate-section {\r\n padding: 60px 0;\r\n text-align: center;\r\n background-color: var(--white); \/* Default background *\/\r\n margin-bottom: 20px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 20px var(--box-shadow-light);\r\n }\r\n #why-donate-section .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n #why-donate-section h2 {\r\n font-family: var(--font-family);\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n }\r\n #why-donate-section p {\r\n font-family: var(--font-family);\r\n color: #555;\r\n font-size: 1.1em;\r\n line-height: 1.8;\r\n max-width: 900px;\r\n margin: 0 auto 30px auto;\r\n }\r\n #why-donate-section .why-donate-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n margin-top: 40px;\r\n }\r\n #why-donate-section .reason-card {\r\n background-color: var(--white);\r\n padding: 25px;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 10px var(--box-shadow-light);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n text-align: center;\r\n border: 1px solid var(--border-color);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n #why-donate-section .reason-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 20px var(--box-shadow-medium);\r\n }\r\n #why-donate-section .reason-card .icon {\r\n font-size: 3em;\r\n color: var(--accent-green);\r\n margin-bottom: 15px;\r\n }\r\n #why-donate-section .reason-card h3 {\r\n font-family: var(--font-family);\r\n font-size: 1.4em;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n color: var(--primary-dark-blue);\r\n }\r\n #why-donate-section .reason-card p {\r\n font-family: var(--font-family);\r\n font-size: 0.95em;\r\n color: #666;\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Responsive Why Donate Section *\/\r\n @media (max-width: 992px) {\r\n #why-donate-section h2 { font-size: 2em; }\r\n #why-donate-section p { font-size: 1em; }\r\n }\r\n @media (max-width: 768px) {\r\n #why-donate-section .why-donate-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n }\r\n #why-donate-section .reason-card { padding: 20px; }\r\n #why-donate-section .reason-card .icon { font-size: 2.5em; }\r\n #why-donate-section .reason-card h3 { font-size: 1.2em; }\r\n }\r\n @media (max-width: 480px) {\r\n #why-donate-section { padding: 30px 0; }\r\n #why-donate-section h2 { font-size: 1.8em; }\r\n #why-donate-section .why-donate-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n #why-donate-section .reason-card { padding: 15px; }\r\n #why-donate-section .reason-card .icon { font-size: 2em; }\r\n #why-donate-section .reason-card h3 { font-size: 1.1em; }\r\n }\r\n <\/style>\r\n <div class=\"container\">\r\n <h2>\u0644\u0645\u0627\u0630\u0627 \u062a\u062a\u0628\u0631\u0639 \u0644\u062c\u0645\u0639\u064a\u062a\u0646\u0627\u061f<\/h2>\r\n <p>\u0646\u0639\u0645\u0644 \u0628\u062c\u062f \u0648\u0634\u063a\u0641 \u0644\u0636\u0645\u0627\u0646 \u0648\u0635\u0648\u0644 \u0623\u062b\u0631 \u062a\u0628\u0631\u0639\u0627\u062a\u0643\u0645 \u0625\u0644\u0649 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646 \u0628\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u0634\u0641\u0627\u0641\u064a\u0629\u060c \u0648\u0628\u0645\u0627 \u064a\u062d\u0642\u0642 \u0623\u0639\u0638\u0645 \u0627\u0644\u0623\u062b\u0631 \u0641\u064a \u062e\u062f\u0645\u0629 \u0643\u062a\u0627\u0628 \u0627\u0644\u0644\u0647 \u0648\u0646\u0634\u0631 \u0631\u0633\u0627\u0644\u062a\u0647.<\/p>\r\n <div class=\"why-donate-grid\">\r\n <div class=\"reason-card\">\r\n <div class=\"icon\"><i class=\"fas fa-hand-holding-heart\"><\/i><\/div>\r\n <h3>\u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0645\u0644\u0645\u0648\u0633<\/h3>\r\n <p>\u062a\u0628\u0631\u0639\u0627\u062a\u0643\u0645 \u062a\u064f\u062d\u062f\u062b \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627 \u0641\u064a \u062d\u064a\u0627\u0629 \u0627\u0644\u0623\u0641\u0631\u0627\u062f \u0648\u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a.<\/p>\r\n <\/div>\r\n <div class=\"reason-card\">\r\n <div class=\"icon\"><i class=\"fas fa-shield-alt\"><\/i><\/div>\r\n <h3>\u0634\u0641\u0627\u0641\u064a\u0629 \u0648\u0645\u0648\u062b\u0648\u0642\u064a\u0629<\/h3>\r\n <p>\u0646\u0644\u062a\u0632\u0645 \u0628\u0623\u0639\u0644\u0649 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0634\u0641\u0627\u0641\u064a\u0629 \u0641\u064a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0623\u0645\u0648\u0627\u0644.<\/p>\r\n <\/div>\r\n <div class=\"reason-card\">\r\n <div class=\"icon\"><i class=\"fas fa-users-cog\"><\/i><\/div>\r\n <h3>\u062e\u0628\u0631\u0629 \u0648\u062a\u0645\u0643\u064a\u0646<\/h3>\r\n <p>\u0641\u0631\u064a\u0642 \u0645\u062a\u062e\u0635\u0635 \u064a\u0639\u0645\u0644 \u0639\u0644\u0649 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0646\u0641\u064a\u0630 \u0628\u0631\u0627\u0645\u062c \u062a\u0639\u0644\u064a\u0645\u064a\u0629.<\/p>\r\n <\/div>\r\n <div class=\"reason-card\">\r\n <div class=\"icon\"><i class=\"fas fa-certificate\"><\/i><\/div>\r\n <h3>\u062a\u0631\u0627\u062e\u064a\u0635 \u0648\u0645\u0648\u0627\u0641\u0642\u0627\u062a<\/h3>\r\n <p>\u0646\u0639\u0645\u0644 \u062a\u062d\u062a \u0625\u0634\u0631\u0627\u0641 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u0631\u0633\u0645\u064a\u0629 \u0648\u0628\u0645\u0648\u0627\u0641\u0642\u0627\u062a\u0647\u0627.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7887fbf e-flex e-con-boxed e-con e-parent\" data-id=\"7887fbf\" 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-6dabda7 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6dabda7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n <html lang=\"ar\" dir=\"rtl\">\r\n <head>\r\n <meta charset=\"UTF-M\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Current Campaigns Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <\/head>\r\n <body>\r\n\r\n <section id=\"current-campaigns-section\">\r\n <style>\r\n \/* Colors and Fonts for this section *\/\r\n :root {\r\n --primary-dark-blue: #01474F;\r\n --accent-green: #ABD58D;\r\n --dark-text: #111111;\r\n --white: #ffffff;\r\n --light-bg: #FAFAFA;\r\n --border-color: #e0e0e0;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --box-shadow-medium: rgba(0, 0, 0, 0.1);\r\n --font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n #current-campaigns-section {\r\n padding: 60px 0;\r\n text-align: center;\r\n background-color: var(--light-bg); \/* Alternate background *\/\r\n margin-bottom: 20px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 20px var(--box-shadow-light);\r\n }\r\n #current-campaigns-section .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n #current-campaigns-section h2 {\r\n font-family: var(--font-family);\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n }\r\n #current-campaigns-section p {\r\n font-family: var(--font-family);\r\n color: #555;\r\n font-size: 1.1em;\r\n line-height: 1.8;\r\n max-width: 900px;\r\n margin: 0 auto 30px auto;\r\n }\r\n #current-campaigns-section .campaigns-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); \/* Smaller cards *\/\r\n gap: 20px; \/* Reduced gap for smaller cards *\/\r\n margin-top: 40px;\r\n }\r\n #current-campaigns-section .campaign-card {\r\n background-color: var(--white);\r\n border-radius: 12px;\r\n box-shadow: 0 6px 18px var(--box-shadow-light);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n text-align: right;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n #current-campaigns-section .campaign-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 10px 25px var(--box-shadow-medium);\r\n }\r\n #current-campaigns-section .campaign-card img {\r\n width: 100%;\r\n height: 150px; \/* Adjusted height for smaller cards *\/\r\n object-fit: cover;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n #current-campaigns-section .campaign-info {\r\n padding: 15px; \/* Adjusted padding for smaller cards *\/\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n #current-campaigns-section .campaign-info h3 {\r\n font-family: var(--font-family);\r\n font-size: 1.3em; \/* Adjusted font size for smaller cards *\/\r\n font-weight: 700;\r\n margin-top: 0;\r\n margin-bottom: 8px; \/* Reduced margin for smaller cards *\/\r\n color: var(--primary-dark-blue);\r\n }\r\n #current-campaigns-section .campaign-info p {\r\n font-family: var(--font-family);\r\n font-size: 0.9em;\r\n color: #555;\r\n margin-bottom: 10px; \/* Reduced margin for smaller cards *\/\r\n line-height: 1.6;\r\n }\r\n #current-campaigns-section .progress-bar-container {\r\n width: 100%;\r\n background-color: #f3f3f3;\r\n border-radius: 5px;\r\n margin-bottom: 8px; \/* Reduced margin for smaller cards *\/\r\n height: 6px; \/* Adjusted height for smaller cards *\/\r\n overflow: hidden;\r\n }\r\n #current-campaigns-section .progress-bar {\r\n height: 100%;\r\n width: 0%; \/* Initial width *\/\r\n background-color: var(--accent-green);\r\n border-radius: 5px;\r\n transition: width 1s ease-out; \/* Smooth transition *\/\r\n }\r\n #current-campaigns-section .campaign-stats {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.85em; \/* Adjusted font size for smaller cards *\/\r\n color: #777;\r\n margin-bottom: 10px; \/* Reduced margin for smaller cards *\/\r\n }\r\n #current-campaigns-section .campaign-stats span strong {\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n }\r\n #current-campaigns-section .cta-button {\r\n width: 100%;\r\n text-align: center;\r\n padding: 12px 15px; \/* Increased padding for better visibility *\/\r\n font-size: 1em; \/* Increased font size *\/\r\n box-shadow: none;\r\n background-color: var(--accent-green); \/* Ensure background color is applied *\/\r\n color: var(--white); \/* Ensure text color is white *\/\r\n border: none; \/* Remove default button border *\/\r\n border-radius: 8px; \/* Add some border radius *\/\r\n cursor: pointer;\r\n text-decoration: none; \/* Remove underline for links *\/\r\n display: inline-block; \/* Make it behave like a block element for width\/padding *\/\r\n }\r\n #current-campaigns-section .cta-button:hover {\r\n box-shadow: 0 4px 12px var(--box-shadow-medium); \/* Stronger hover shadow *\/\r\n background-color: #9ac27d; \/* Slightly darker green on hover *\/\r\n }\r\n #current-campaigns-section .general-donation-button {\r\n margin-top: 50px; \/* Adjusted margin for clear separation *\/\r\n }\r\n\r\n \/* Responsive Current Campaigns Section *\/\r\n @media (max-width: 992px) {\r\n #current-campaigns-section h2 { font-size: 2em; }\r\n #current-campaigns-section p { font-size: 1em; }\r\n }\r\n @media (max-width: 768px) {\r\n #current-campaigns-section .campaigns-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); \/* Even smaller cards on smaller screens *\/\r\n gap: 15px;\r\n }\r\n #current-campaigns-section .campaign-card img { height: 130px; } \/* Adjusted height for smaller cards *\/\r\n #current-campaigns-section .campaign-info { padding: 10px; } \/* Adjusted padding for smaller cards *\/\r\n #current-campaigns-section .campaign-info h3 { font-size: 1.2em; } \/* Adjusted font size for smaller cards *\/\r\n #current-campaigns-section .campaign-info p { font-size: 0.85em; } \/* Adjusted font size for smaller cards *\/\r\n }\r\n @media (max-width: 480px) {\r\n #current-campaigns-section { padding: 30px 0; }\r\n #current-campaigns-section h2 { font-size: 1.8em; }\r\n #current-campaigns-section .campaigns-grid {\r\n grid-template-columns: 1fr;\r\n gap: 15px;\r\n }\r\n #current-campaigns-section .campaign-card img { height: 120px; } \/* Adjusted height for smaller cards *\/\r\n }\r\n <\/style>\r\n <!--\r\n <div class=\"container\">\r\n <h2>\u062d\u0645\u0644\u0627\u062a\u0646\u0627 \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/h2>\r\n <p>\u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0630\u064a \u062a\u0648\u062f \u062f\u0639\u0645\u0647\u060c \u0648\u0643\u0644 \u0645\u0633\u0627\u0647\u0645\u0629 \u0645\u0647\u0645\u0627 \u0643\u0627\u0646\u062a \u0635\u063a\u064a\u0631\u0629 \u062a\u062d\u062f\u062b \u0641\u0631\u0642\u064b\u0627 \u0643\u0628\u064a\u0631\u064b\u0627.<\/p>\r\n <div class=\"campaigns-grid\">\r\n <div class=\"campaign-card\">\r\n <img decoding=\"async\" src=\"https:\/\/digitaltelawah.org.sa\/wp-content\/uploads\/2025\/05\/Online-Quran-classes-for-all.jpg\" alt=\"\u0635\u0648\u0631\u0629 \u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0645\u0639\u0644\u0645\u064a\u0646\">\r\n <div class=\"campaign-info\">\r\n <div>\r\n <h3>\u062f\u0639\u0645 \u0627\u0644\u0645\u0639\u0644\u0645\u064a\u0646 \u0648\u062a\u0637\u0648\u064a\u0631\u0647\u0645<\/h3>\r\n <p>\u0644\u062a\u0648\u0641\u064a\u0631 \u0641\u0631\u0635 \u062a\u062f\u0631\u064a\u0628 \u0645\u0633\u062a\u0645\u0631 \u0648\u062f\u0639\u0645 \u0645\u0627\u0644\u064a \u0644\u0644\u0645\u0639\u0644\u0645\u064a\u0646 \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u064a\u0646 \u0644\u0631\u0641\u0639 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0639\u0644\u064a\u0645.<\/p>\r\n <\/div>\r\n <div class=\"campaign-progress\">\r\n <div class=\"progress-bar-container\">\r\n <div class=\"progress-bar\" style=\"width: 75%;\" data-progress=\"75\"><\/div>\r\n <\/div>\r\n <div class=\"campaign-stats\">\r\n <span>\u062a\u0645 \u062c\u0645\u0639: <strong>75,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <span>\u0627\u0644\u0647\u062f\u0641: <strong>100,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"cta-button\">\u062a\u0628\u0631\u0639 \u0644\u062f\u0639\u0645 \u0627\u0644\u0645\u0639\u0644\u0645\u064a\u0646<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"campaign-card\">\r\n <img decoding=\"async\" src=\"https:\/\/digitaltelawah.org.sa\/wp-content\/uploads\/2025\/05\/islamic-Students.jpg\" alt=\"\u0635\u0648\u0631\u0629 \u0644\u062f\u0639\u0645 \u0627\u0644\u0637\u0644\u0627\u0628\">\r\n <div class=\"campaign-info\">\r\n <div>\r\n <h3>\u062f\u0639\u0645 \u0627\u0644\u0637\u0644\u0627\u0628<\/h3>\r\n <p>\u0644\u062a\u063a\u0637\u064a\u0629 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a\u0629 \u0648\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0645\u0633\u062a\u0644\u0632\u0645\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0644\u0644\u0637\u0644\u0627\u0628 \u0627\u0644\u0623\u0642\u0644 \u062d\u0638\u064b\u0627.<\/p>\r\n <\/div>\r\n <div class=\"campaign-progress\">\r\n <div class=\"progress-bar-container\">\r\n <div class=\"progress-bar\" style=\"width: 50%;\" data-progress=\"50\"><\/div>\r\n <\/div>\r\n <div class=\"campaign-stats\">\r\n <span>\u062a\u0645 \u062c\u0645\u0639: <strong>25,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <span>\u0627\u0644\u0647\u062f\u0641: <strong>50,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"cta-button\">\u062a\u0628\u0631\u0639 \u0644\u062f\u0639\u0645 \u0627\u0644\u0637\u0644\u0627\u0628<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"campaign-card\">\r\n <img decoding=\"async\" src=\"https:\/\/digitaltelawah.org.sa\/wp-content\/uploads\/2025\/05\/\u062a\u0646\u0632\u064a\u0644-1.jpg\" alt=\"\u0635\u0648\u0631\u0629 \u0644\u062f\u0639\u0645 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\u064a\u0629\">\r\n <div class=\"campaign-info\">\r\n <div>\r\n <h3>\u062f\u0639\u0645 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\u064a\u0629 \u0644\u0644\u062c\u0645\u0639\u064a\u0629<\/h3>\r\n <p>\u0644\u0636\u0645\u0627\u0646 \u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0648\u0645\u0634\u0627\u0631\u064a\u0639\u0646\u0627 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u063a\u0637\u064a\u0629 \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641 \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629 \u0648\u0627\u0644\u062a\u0634\u063a\u064a\u0644\u064a\u0629.<\/p>\r\n <\/div>\r\n <div class=\"campaign-progress\">\r\n <div class=\"progress-bar-container\">\r\n <div class=\"progress-bar\" style=\"width: 90%;\" data-progress=\"90\"><\/div>\r\n <\/div>\r\n <div class=\"campaign-stats\">\r\n <span>\u062a\u0645 \u062c\u0645\u0639: <strong>45,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <span>\u0627\u0644\u0647\u062f\u0641: <strong>50,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"cta-button\">\u062a\u0628\u0631\u0639 \u0644\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\u064a\u0629<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"campaign-card\">\r\n <img decoding=\"async\" src=\"https:\/\/digitaltelawah.org.sa\/wp-content\/uploads\/2025\/05\/learning-quran.jpg\" alt=\"\u0635\u0648\u0631\u0629 \u0637\u0644\u0627\u0628 \u0641\u064a \u062d\u0644\u0642\u0629 \u062a\u062d\u0641\u064a\u0638 \u0642\u0631\u0622\u0646\">\r\n <div class=\"campaign-info\">\r\n <div>\r\n <h3>\u062f\u0639\u0645 \u062d\u0644\u0642\u0627\u062a \u062a\u062d\u0641\u064a\u0638 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645<\/h3>\r\n <p>\u0644\u062a\u062d\u0641\u064a\u0632 \u0627\u0644\u0637\u0644\u0627\u0628 \u0648\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u062d\u0644\u0642\u0627\u062a \u062a\u062d\u0641\u064a\u0638 \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645.<\/p>\r\n <\/div>\r\n <div class=\"campaign-progress\">\r\n <div class=\"progress-bar-container\">\r\n <div class=\"progress-bar\" style=\"width: 60%;\" data-progress=\"60\"><\/div>\r\n <\/div>\r\n <div class=\"campaign-stats\">\r\n <span>\u062a\u0645 \u062c\u0645\u0639: <strong>30,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <span>\u0627\u0644\u0647\u062f\u0641: <strong>50,000 \u0631\u064a\u0627\u0644<\/strong><\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"cta-button\">\u062a\u0628\u0631\u0639 \u0644\u062f\u0639\u0645 \u0627\u0644\u062d\u0644\u0642\u0627\u062a<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <a href=\"#\" class=\"cta-button general-donation-button\">\u062a\u0628\u0631\u0639 \u0644\u062f\u0639\u0645 \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0628\u0634\u0643\u0644 \u0639\u0627\u0645<\/a>\r\n <\/div>-->\r\n <script>\r\n \/\/ JavaScript for Progress Bar Animation in this section\r\n document.addEventListener('DOMContentLoaded', () => {\r\n document.querySelectorAll('#current-campaigns-section .progress-bar').forEach(bar => {\r\n const progress = bar.dataset.progress;\r\n bar.style.width = progress + '%';\r\n });\r\n });\r\n <\/script>\r\n <\/section>\r\n\r\n <\/body>\r\n <\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0b17bf4 e-flex e-con-boxed e-con e-parent\" data-id=\"0b17bf4\" 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-ed93ad3 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"ed93ad3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Donation Steps Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n\r\n <section id=\"donation-steps-section\">\r\n <style>\r\n \/* Colors and Fonts for this section *\/\r\n :root {\r\n --primary-dark-blue: #01474F;\r\n --accent-green: #ABD58D;\r\n --dark-text: #111111;\r\n --white: #ffffff;\r\n --light-bg: #FAFAFA;\r\n --border-color: #e0e0e0;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n #donation-steps-section {\r\n padding: 60px 0;\r\n text-align: center;\r\n background-color: var(--white); \/* Default background *\/\r\n margin-bottom: 20px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 20px var(--box-shadow-light);\r\n }\r\n #donation-steps-section .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n #donation-steps-section h2 {\r\n font-family: var(--font-family);\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n }\r\n #donation-steps-section p {\r\n font-family: var(--font-family);\r\n color: #555;\r\n font-size: 1.1em;\r\n line-height: 1.8;\r\n max-width: 900px;\r\n margin: 0 auto 30px auto;\r\n }\r\n #donation-steps-section .steps-grid {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 30px;\r\n margin-top: 40px;\r\n }\r\n #donation-steps-section .step-card {\r\n flex: 1 1 220px; \/* Flexible item in a row *\/\r\n max-width: 250px;\r\n text-align: center;\r\n background-color: var(--white);\r\n padding: 30px 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 10px var(--box-shadow-light);\r\n border: 1px solid var(--border-color);\r\n }\r\n #donation-steps-section .step-card .icon {\r\n font-size: 3.5em;\r\n color: var(--primary-dark-blue);\r\n margin-bottom: 20px;\r\n position: relative;\r\n }\r\n #donation-steps-section .step-card .icon::after {\r\n content: attr(data-step-number);\r\n position: absolute;\r\n top: -10px;\r\n right: -10px;\r\n background-color: var(--accent-green);\r\n color: var(--primary-dark-blue);\r\n border-radius: 50%;\r\n width: 35px;\r\n height: 35px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.8em;\r\n font-weight: 700;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\r\n }\r\n #donation-steps-section .step-card h3 {\r\n font-family: var(--font-family);\r\n font-size: 1.5em;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n #donation-steps-section .step-card p {\r\n font-family: var(--font-family);\r\n font-size: 0.95em;\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Responsive Donation Steps Section *\/\r\n @media (max-width: 992px) {\r\n #donation-steps-section h2 { font-size: 2em; }\r\n #donation-steps-section p { font-size: 1em; }\r\n }\r\n @media (max-width: 768px) {\r\n #donation-steps-section .steps-grid {\r\n gap: 20px;\r\n }\r\n #donation-steps-section .step-card {\r\n flex: 1 1 45%;\r\n max-width: 48%;\r\n }\r\n }\r\n @media (max-width: 480px) {\r\n #donation-steps-section { padding: 30px 0; }\r\n #donation-steps-section h2 { font-size: 1.8em; }\r\n #donation-steps-section .steps-grid {\r\n gap: 15px;\r\n }\r\n #donation-steps-section .step-card {\r\n flex: 1 1 100%;\r\n max-width: 100%;\r\n }\r\n }\r\n <\/style>\r\n <div class=\"container\">\r\n <h2>\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u062a\u0628\u0631\u0639 \u0628\u0633\u064a\u0637\u0629 \u0648\u0622\u0645\u0646\u0629<\/h2>\r\n <p>\u062a\u0627\u0628\u0639 \u0647\u0630\u0647 \u0627\u0644\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u0642\u0644\u064a\u0644\u0629 \u0644\u0625\u062a\u0645\u0627\u0645 \u062a\u0628\u0631\u0639\u0643 \u0628\u0633\u0631\u0639\u0629 \u0648\u0623\u0645\u0627\u0646.<\/p>\r\n <div class=\"steps-grid\">\r\n <div class=\"step-card\">\r\n <div class=\"icon\" data-step-number=\"1\"><i class=\"fas fa-coins\"><\/i><\/div>\r\n <h3>\u0627\u062e\u062a\u0631 \u0645\u0628\u0644\u063a\u0643<\/h3>\r\n <p>\u062d\u062f\u062f \u0627\u0644\u0645\u0628\u0644\u063a \u0627\u0644\u0630\u064a \u062a\u0648\u062f \u0627\u0644\u062a\u0628\u0631\u0639 \u0628\u0647.<\/p>\r\n <\/div>\r\n <div class=\"step-card\">\r\n <div class=\"icon\" data-step-number=\"2\"><i class=\"fas fa-user-check\"><\/i><\/div>\r\n <h3>\u0623\u062f\u062e\u0644 \u0628\u064a\u0627\u0646\u0627\u062a\u0643<\/h3>\r\n <p>\u0623\u0643\u0645\u0644 \u0645\u0639\u0644\u0648\u0645\u0627\u062a\u0643 \u0627\u0644\u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0636\u0631\u0648\u0631\u064a\u0629.<\/p>\r\n <\/div>\r\n <div class=\"step-card\">\r\n <div class=\"icon\" data-step-number=\"3\"><i class=\"fas fa-credit-card\"><\/i><\/div>\r\n <h3>\u0627\u062e\u062a\u0631 \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062f\u0641\u0639<\/h3>\r\n <p>\u0627\u062e\u062a\u0631 \u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0644\u062f\u064a\u0643.<\/p>\r\n <\/div>\r\n <div class=\"step-card\">\r\n <div class=\"icon\" data-step-number=\"4\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n <h3>\u0623\u0643\u0645\u0644 \u0627\u0644\u062a\u0628\u0631\u0639<\/h3>\r\n <p>\u0631\u0627\u062c\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062a\u0643 \u0648\u0623\u062a\u0645 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0628\u0646\u062c\u0627\u062d.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0a30212 e-flex e-con-boxed e-con e-parent\" data-id=\"0a30212\" 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-b37cdc9 elementor-widget elementor-widget-html\" data-id=\"b37cdc9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Impact Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n\r\n <section id=\"impact-section\">\r\n <style>\r\n \/* Colors and Fonts for this section *\/\r\n :root {\r\n --primary-dark-blue: #01474F;\r\n --accent-green: #ABD58D;\r\n --dark-text: #111111;\r\n --white: #ffffff;\r\n --light-bg: #FAFAFA;\r\n --border-color: #e0e0e0;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n #impact-section {\r\n padding: 60px 0;\r\n text-align: center;\r\n background-color: var(--light-bg); \/* Alternate background *\/\r\n margin-bottom: 20px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 20px var(--box-shadow-light);\r\n }\r\n #impact-section .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n #impact-section h2 {\r\n font-family: var(--font-family);\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n }\r\n #impact-section p {\r\n font-family: var(--font-family);\r\n color: #555;\r\n font-size: 1.1em;\r\n line-height: 1.8;\r\n max-width: 900px;\r\n margin: 0 auto 30px auto;\r\n }\r\n #impact-section .impact-item-wrapper {\r\n max-width: 900px;\r\n margin: 40px auto 0 auto;\r\n position: relative;\r\n overflow: hidden;\r\n padding: 20px;\r\n }\r\n #impact-section .impact-item {\r\n display: none; \/* Hidden by default, JS will manage display *\/\r\n text-align: center;\r\n background-color: var(--white);\r\n padding: 40px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 15px var(--box-shadow-light);\r\n border: 1px solid var(--border-color);\r\n transition: opacity 1s ease-in-out;\r\n }\r\n #impact-section .impact-item.active {\r\n display: block;\r\n opacity: 1;\r\n }\r\n #impact-section .impact-image {\r\n width: 100%;\r\n height: 300px;\r\n object-fit: contain; \/* Show full image *\/\r\n margin-bottom: 25px;\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n }\r\n #impact-section .impact-description {\r\n font-family: var(--font-family);\r\n font-size: 1.3em;\r\n font-weight: 600;\r\n color: var(--primary-dark-blue);\r\n margin-bottom: 0;\r\n line-height: 1.5;\r\n }\r\n #impact-section .impact-nav-dots {\r\n margin-top: 30px;\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n #impact-section .impact-dot {\r\n width: 12px;\r\n height: 12px;\r\n background-color: #ccc;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n }\r\n #impact-section .impact-dot.active {\r\n background-color: var(--accent-green);\r\n }\r\n\r\n \/* Responsive Impact Section *\/\r\n @media (max-width: 992px) {\r\n #impact-section h2 { font-size: 2em; }\r\n #impact-section p { font-size: 1em; }\r\n #impact-section .impact-image { height: 250px; }\r\n #impact-section .impact-description { font-size: 1.2em; }\r\n }\r\n @media (max-width: 768px) {\r\n #impact-section .impact-image { height: 200px; }\r\n #impact-section .impact-description { font-size: 1.1em; }\r\n #impact-section .impact-item { padding: 30px; }\r\n }\r\n @media (max-width: 480px) {\r\n #impact-section { padding: 30px 0; }\r\n #impact-section h2 { font-size: 1.8em; }\r\n #impact-section .impact-image { height: 150px; }\r\n #impact-section .impact-description { font-size: 1em; }\r\n #impact-section .impact-item { padding: 20px; }\r\n }\r\n <\/style>\r\n <div class=\"container\">\r\n <h2>\u0634\u0627\u0647\u062f \u0623\u062b\u0631 \u062a\u0628\u0631\u0639\u0627\u062a\u0643\u0645<\/h2>\r\n <p>\u062a\u0628\u0631\u0639\u0627\u062a\u0643\u0645 \u062a\u064f\u062d\u062f\u062b \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627 \u0641\u064a \u062d\u064a\u0627\u0629 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646. \u0625\u0644\u064a\u0643\u0645 \u0628\u0639\u0636 \u0627\u0644\u0623\u0645\u062b\u0644\u0629:<\/p>\r\n <div class=\"impact-item-wrapper\">\r\n <div class=\"impact-item active\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/800x300\/01474F\/ABD58D?text=\u0628\u0646\u0627\u0621+\u0641\u0635\u0648\u0644+\u062f\u0631\u0627\u0633\u064a\u0629+\u062c\u062f\u064a\u062f\u0629\" alt=\"\u0635\u0648\u0631\u0629 \u0628\u0646\u0627\u0621 \u0641\u0635\u0648\u0644 \u062f\u0631\u0627\u0633\u064a\u0629\">\r\n <p class=\"impact-description\">\u0628\u0646\u0627\u0621 \u0641\u0635\u0648\u0644 \u062f\u0631\u0627\u0633\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0648\u0641\u0631 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0622\u0645\u0646\u0629 \u0644\u0645\u0626\u0627\u062a \u0627\u0644\u0637\u0644\u0627\u0628.<\/p>\r\n <\/div>\r\n <div class=\"impact-item\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/800x300\/ABD58D\/01474F?text=\u062a\u0648\u0632\u064a\u0639+\u0645\u0648\u0627\u062f+\u0625\u063a\u0627\u062b\u064a\u0629\" alt=\"\u0635\u0648\u0631\u0629 \u062a\u0648\u0632\u064a\u0639 \u0645\u0648\u0627\u062f \u0625\u063a\u0627\u062b\u064a\u0629\">\r\n <p class=\"impact-description\">\u062a\u0648\u0632\u064a\u0639 \u0645\u0648\u0627\u062f \u0625\u063a\u0627\u062b\u064a\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u0645\u062a\u0636\u0631\u0631\u064a\u0646 \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062b\u060c \u0623\u0639\u0627\u062f \u0644\u0647\u0645 \u0627\u0644\u0623\u0645\u0644.<\/p>\r\n <\/div>\r\n <div class=\"impact-item\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/800x300\/01474F\/ABD58D?text=\u062a\u062f\u0631\u064a\u0628+\u0645\u0647\u0646\u064a\" alt=\"\u0635\u0648\u0631\u0629 \u062a\u062f\u0631\u064a\u0628 \u0645\u0647\u0646\u064a\">\r\n <p class=\"impact-description\">\u062f\u0648\u0631\u0627\u062a \u062a\u062f\u0631\u064a\u0628 \u0645\u0647\u0646\u064a \u0645\u0643\u062b\u0641\u0629 \u0633\u0627\u0639\u062f\u062a \u0627\u0644\u0634\u0628\u0627\u0628 \u0639\u0644\u0649 \u0625\u064a\u062c\u0627\u062f \u0641\u0631\u0635 \u0639\u0645\u0644.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"impact-nav-dots\">\r\n <span class=\"impact-dot active\" data-slide=\"0\"><\/span>\r\n <span class=\"impact-dot\" data-slide=\"1\"><\/span>\r\n <span class=\"impact-dot\" data-slide=\"2\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n \/\/ JavaScript for Impact Slider in this section\r\n const impactSlides = document.querySelectorAll('#impact-section .impact-item');\r\n const impactDots = document.querySelectorAll('#impact-section .impact-dot');\r\n let currentImpactSlide = 0;\r\n let impactSlideInterval;\r\n const impactSlideDelay = 6000; \/\/ 6 seconds\r\n\r\n function showImpactSlide(index) {\r\n impactSlides.forEach((slide, i) => {\r\n slide.classList.remove('active');\r\n if (i === index) {\r\n slide.classList.add('active');\r\n }\r\n });\r\n impactDots.forEach((dot, i) => {\r\n dot.classList.remove('active');\r\n if (i === index) {\r\n dot.classList.add('active');\r\n }\r\n });\r\n currentImpactSlide = index;\r\n }\r\n\r\n function nextImpactSlide() {\r\n currentImpactSlide = (currentImpactSlide + 1) % impactSlides.length;\r\n showImpactSlide(currentImpactSlide);\r\n }\r\n\r\n function startImpactInterval() {\r\n impactSlideInterval = setInterval(nextImpactSlide, impactSlideDelay);\r\n }\r\n\r\n function resetImpactInterval() {\r\n clearInterval(impactSlideInterval);\r\n startImpactInterval();\r\n }\r\n\r\n \/\/ Event Listeners for Impact Dots\r\n impactDots.forEach(dot => {\r\n dot.addEventListener('click', (e) => {\r\n const slideIndex = parseInt(e.target.dataset.slide);\r\n showImpactSlide(slideIndex);\r\n resetImpactInterval();\r\n });\r\n });\r\n\r\n \/\/ Initialize and start auto-play for Impact Slider\r\n document.addEventListener('DOMContentLoaded', () => {\r\n showImpactSlide(currentImpactSlide);\r\n startImpactInterval();\r\n });\r\n <\/script>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0818207 e-flex e-con-boxed e-con e-parent\" data-id=\"0818207\" 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-97c58c3 elementor-widget elementor-widget-html\" data-id=\"97c58c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Contact Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n\r\n <section id=\"contact-section\">\r\n <style>\r\n \/* Colors and Fonts for this section *\/\r\n :root {\r\n --primary-dark-blue: #01474F;\r\n --accent-green: #ABD58D;\r\n --dark-text: #111111;\r\n --white: #ffffff;\r\n --light-bg: #FAFAFA;\r\n --box-shadow-light: rgba(0, 0, 0, 0.04);\r\n --box-shadow-medium: rgba(0, 0, 0, 0.1);\r\n --font-family: 'Cairo', sans-serif;\r\n }\r\n\r\n #contact-section {\r\n padding: 60px 0;\r\n text-align: center;\r\n background-color: var(--white); \/* Default background *\/\r\n margin-bottom: 20px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 20px var(--box-shadow-light);\r\n }\r\n #contact-section .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n #contact-section h2 {\r\n font-family: var(--font-family);\r\n color: var(--primary-dark-blue);\r\n font-weight: 700;\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n }\r\n #contact-section p {\r\n font-family: var(--font-family);\r\n color: #555;\r\n font-size: 1.1em;\r\n line-height: 1.8;\r\n max-width: 900px;\r\n margin: 0 auto 30px auto;\r\n }\r\n #contact-section .cta-button {\r\n display: inline-block;\r\n background-color: var(--primary-dark-blue); \/* Different color for contact button *\/\r\n color: var(--white);\r\n padding: 15px 40px;\r\n border-radius: 8px;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 1.2em;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px var(--box-shadow-medium);\r\n }\r\n #contact-section .cta-button:hover {\r\n background-color: #00363C; \/* Slightly darker blue on hover *\/\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Responsive Contact Section *\/\r\n @media (max-width: 992px) {\r\n #contact-section h2 { font-size: 2em; }\r\n #contact-section p { font-size: 1em; }\r\n }\r\n @media (max-width: 768px) {\r\n #contact-section h2 { font-size: 1.8em; }\r\n #contact-section p { font-size: 0.95em; }\r\n #contact-section .cta-button { padding: 12px 30px; font-size: 1.1em; }\r\n }\r\n @media (max-width: 480px) {\r\n #contact-section { padding: 30px 0; }\r\n #contact-section h2 { font-size: 1.8em; }\r\n #contact-section .cta-button { padding: 10px 25px; font-size: 1em; }\r\n }\r\n <\/style>\r\n <div class=\"container\">\r\n <h2>\u0647\u0644 \u0644\u062f\u064a\u0643 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u061f<\/h2>\r\n <p>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0644\u062f\u064a\u0643 \u0623\u064a \u0623\u0633\u0626\u0644\u0629 \u062d\u0648\u0644 \u0627\u0644\u062a\u0628\u0631\u0639 \u0623\u0648 \u0628\u0631\u0627\u0645\u062c\u0646\u0627\u060c \u0641\u0644\u0627 \u062a\u062a\u0631\u062f\u062f \u0641\u064a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627.<\/p>\r\n <a href=\"mailto:telawah2024@gmail.com\" class=\"cta-button\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0639\u0628\u0631 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/a>\r\n <p style=\"margin-top: 20px; font-size: 1em; color: #555;\">\u0623\u0648 \u0627\u062a\u0635\u0644 \u0628\u0646\u0627 \u0645\u0628\u0627\u0634\u0631\u0629: <strong> 0551988143 <\/strong><\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero Section – \u062a\u0628\u0631\u0639 \u062a\u0628\u0631\u0639 \u0627\u0644\u0622\u0646.. \u0627\u0635\u0646\u0639 \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627 \u0643\u0644 \u0645\u0633\u0627\u0647\u0645\u0629 \u0645\u0646\u0643 \u062a\u062f\u0639\u0645 \u0628\u0631\u0627\u0645\u062c\u0646\u0627 \u0627\u0644\u0642\u0631\u0622\u0646\u064a\u0629 \u0648\u062a\u0635\u0644 \u0625\u0644\u0649 \u0645\u0633\u062a\u062d\u0642\u064a\u0647\u0627 \u0628\u0623\u0645\u0627\u0646 \u0648\u0634\u0641\u0627\u0641\u064a\u0629. Why Donate Section \u0644\u0645\u0627\u0630\u0627 \u062a\u062a\u0628\u0631\u0639 \u0644\u062c\u0645\u0639\u064a\u062a\u0646\u0627\u061f \u0646\u0639\u0645\u0644 \u0628\u062c\u062f \u0648\u0634\u063a\u0641 \u0644\u0636\u0645\u0627\u0646 \u0648\u0635\u0648\u0644 \u0623\u062b\u0631 \u062a\u0628\u0631\u0639\u0627\u062a\u0643\u0645 \u0625\u0644\u0649 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646 \u0628\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u0634\u0641\u0627\u0641\u064a\u0629\u060c \u0648\u0628\u0645\u0627 \u064a\u062d\u0642\u0642 \u0623\u0639\u0638\u0645 \u0627\u0644\u0623\u062b\u0631 \u0641\u064a \u062e\u062f\u0645\u0629 \u0643\u062a\u0627\u0628 \u0627\u0644\u0644\u0647 \u0648\u0646\u0634\u0631 \u0631\u0633\u0627\u0644\u062a\u0647. \u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0645\u0644\u0645\u0648\u0633 \u062a\u0628\u0631\u0639\u0627\u062a\u0643\u0645 \u062a\u064f\u062d\u062f\u062b \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627 \u0641\u064a \u062d\u064a\u0627\u0629 […]<\/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-48","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/48","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=48"}],"version-history":[{"count":46,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":976,"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions\/976"}],"wp:attachment":[{"href":"https:\/\/digitaltelawah.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}