{"id":11,"date":"2017-06-10T08:24:41","date_gmt":"2017-06-10T08:24:41","guid":{"rendered":"http:\/\/xtratheme.com\/business\/?page_id=6"},"modified":"2026-04-26T15:44:59","modified_gmt":"2026-04-26T12:44:59","slug":"about","status":"publish","type":"page","link":"https:\/\/www.mada-alhadithah.com.sa\/en\/about\/","title":{"rendered":"About the organization"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af2164c e-con-full e-flex e-con e-parent\" data-id=\"af2164c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5938450 elementor-widget elementor-widget-html\" data-id=\"5938450\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    \/* --- CSS VARIABLES --- *\/\r\n    :root {\r\n        \/* Colors *\/\r\n        --color-dark: #064E3B;      \/* Deep Green *\/\r\n        --color-gold: #D4AF37;      \/* Gold *\/\r\n        --color-light: #ffffff;     \/* White *\/\r\n        --color-gray: #f8f9fa;      \/* Light Gray *\/\r\n        --text-dark: #1a202c;       \/* Dark Text *\/\r\n        --text-light: #ffffff;      \/* White Text *\/\r\n        \r\n        \/* Effects *\/\r\n        --glass-bg: rgba(255, 255, 255, 0.1);\r\n        --glass-border: rgba(255, 255, 255, 0.2);\r\n        --shadow-light: 0 10px 30px rgba(0,0,0,0.08);\r\n        \r\n        --transition-speed: 0.8s;\r\n        --font-arabic: 'Noto Naskh Arabic', serif; \/* Font Updated *\/\r\n    }\r\n\r\n    * { box-sizing: border-box; }\r\n\r\n    body {\r\n        margin: 0;\r\n        padding: 0;\r\n        font-family: var(--font-arabic);\r\n        line-height: 1.8;\r\n        overflow-x: hidden;\r\n        direction: rtl; \/* Right to Left *\/\r\n        text-align: right;\r\n    }\r\n\r\n    h1, h2, h3, h4 { margin-top: 0; line-height: 1.4; font-weight: 700; }\r\n    \r\n    .container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n    }\r\n    \r\n    .text-gold { color: var(--color-gold) !important; }\r\n    .text-center { text-align: center; }\r\n\r\n    \/* --- ANIMATION CLASSES --- *\/\r\n    .reveal {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all var(--transition-speed) ease-out;\r\n    }\r\n    .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n    .reveal-right { \r\n        opacity: 0;\r\n        transform: translateX(-50px);\r\n        transition: all var(--transition-speed) ease-out;\r\n    }\r\n    .reveal-left { \r\n        opacity: 0;\r\n        transform: translateX(50px);\r\n        transition: all var(--transition-speed) ease-out;\r\n    }\r\n    .reveal-left.active, .reveal-right.active {\r\n        opacity: 1; transform: translateX(0);\r\n    }\r\n\r\n    \/* --- HERO SECTION --- *\/\r\n    .hero-section {\r\n        position: relative;\r\n        height: 85vh;\r\n        min-height: 500px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        color: var(--text-light);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .hero-bg {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background-image: linear-gradient(to bottom, rgba(6, 78, 59, 0.8), var(--color-dark)), url('https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2024\/04\/banner.jpg');\r\n        background-size: cover;\r\n        background-position: center;\r\n        z-index: -1;\r\n        animation: slowZoom 12s infinite alternate;\r\n    }\r\n\r\n    @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.1); } }\r\n\r\n    .hero-content h1 {\r\n        font-size: 4rem;\r\n        margin-bottom: 15px;\r\n        font-weight: 700; \/* Adjusted for Noto Naskh *\/\r\n    }\r\n    \r\n    .hero-content p { font-size: 1.4rem; opacity: 0.9; font-weight: 400; }\r\n\r\n    \/* --- ABOUT STORY --- *\/\r\n    .about-section {\r\n        background-color: var(--color-light);\r\n        color: var(--text-dark);\r\n        padding: 120px 0;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .about-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 70px;\r\n        align-items: center;\r\n    }\r\n\r\n    .about-text h2 {\r\n        font-size: 2.5rem;\r\n        margin-bottom: 30px;\r\n        color: var(--color-dark);\r\n    }\r\n\r\n    .about-text p {\r\n        color: #4a5568;\r\n        margin-bottom: 20px;\r\n        font-size: 1.2rem; \/* Slightly larger for Arabic readability *\/\r\n    }\r\n\r\n    .about-image-wrapper {\r\n        position: relative;\r\n        box-shadow: var(--shadow-light);\r\n        border-radius: 8px;\r\n    }\r\n\r\n    .about-image-wrapper img {\r\n        width: 100%;\r\n        border-radius: 8px;\r\n        display: block;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .about-image-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 20px; right: 20px; \/* Right for RTL *\/\r\n        width: 100%; height: 100%;\r\n        border: 2px solid var(--color-gold);\r\n        border-radius: 8px;\r\n        z-index: 0;\r\n        transition: transform 0.4s ease;\r\n    }\r\n    \r\n    .about-image-wrapper:hover::after { transform: translate(-10px, 10px); }\r\n\r\n    \/* --- STATS SECTION --- *\/\r\n    .stats-section {\r\n        background-color: var(--color-dark);\r\n        color: var(--text-light);\r\n        padding: 100px 0;\r\n        position: relative;\r\n        background-image: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);\r\n    }\r\n\r\n    .stats-container {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n        gap: 30px;\r\n    }\r\n\r\n    .glass-card {\r\n        background: var(--glass-bg);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n        border: 1px solid var(--glass-border);\r\n        padding: 40px 20px;\r\n        text-align: center;\r\n        border-radius: 8px;\r\n        opacity: 0;\r\n    }\r\n\r\n    .glass-card:hover {\r\n        background: rgba(255,255,255,0.15);\r\n        border-color: var(--color-gold);\r\n        transform: translateY(-5px);\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .glass-card.visible { animation: fadeInUp 0.8s forwards; }\r\n    \r\n    .stat-number {\r\n        font-size: 3.5rem;\r\n        font-weight: 700;\r\n        color: var(--color-gold);\r\n        display: block;\r\n        line-height: 1;\r\n        margin-bottom: 10px;\r\n        font-family: sans-serif; \/* Keep numbers in standard sans-serif for clarity *\/\r\n    }\r\n\r\n    @keyframes fadeInUp {\r\n        from { opacity: 0; transform: translateY(40px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* --- FEATURES SECTION --- *\/\r\n    .features-section {\r\n        background-color: var(--color-gray);\r\n        color: var(--text-dark);\r\n        padding: 120px 0;\r\n    }\r\n    \r\n    .feature-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n        gap: 30px;\r\n    }\r\n\r\n    .feature-card {\r\n        background: #ffffff;\r\n        padding: 40px;\r\n        border-radius: 8px;\r\n        box-shadow: 0 5px 20px rgba(0,0,0,0.05);\r\n        border-top: 4px solid var(--color-gold);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n\r\n    .feature-card:hover {\r\n        transform: translateY(-10px);\r\n        box-shadow: 0 15px 40px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    .feature-card h3 {\r\n        color: var(--color-dark);\r\n        font-size: 1.5rem;\r\n        margin-bottom: 15px;\r\n    }\r\n    \r\n    .feature-card p { color: #666; margin: 0; font-size: 1.1rem; }\r\n\r\n    .btn-contact {\r\n        display: inline-block;\r\n        margin-top: 20px;\r\n        padding: 12px 35px;\r\n        background: var(--color-dark);\r\n        color: #fff;\r\n        text-decoration: none;\r\n        border-radius: 4px;\r\n        font-weight: 700;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .btn-contact:hover { background: var(--color-gold); color: #fff;}\r\n\r\n    \/* --- RESPONSIVE --- *\/\r\n    @media (max-width: 768px) {\r\n        .hero-content h1 { font-size: 2.5rem; }\r\n        .about-grid { grid-template-columns: 1fr; gap: 40px; }\r\n        .about-text { text-align: center; }\r\n        .reveal-left, .reveal-right { transform: translateY(30px); }\r\n    }\r\n\r\n    \/* ========================================================== *\/\r\n    \/* --- ENGLISH TRANSLATION & LTR FIXES (TranslatePress) --- *\/\r\n    \/* ========================================================== *\/\r\n\r\n    \/* Change overall direction and alignment to LTR *\/\r\n    html[lang^=\"en\"] body,\r\n    html.translated-ltr body,\r\n    [dir=\"ltr\"] body {\r\n        direction: ltr !important;\r\n        text-align: left !important;\r\n    }\r\n\r\n    \/* Safely apply English font to text elements only (Protects Icons) *\/\r\n    html[lang^=\"en\"] h1, html[lang^=\"en\"] h2, html[lang^=\"en\"] h3, html[lang^=\"en\"] h4, html[lang^=\"en\"] p, html[lang^=\"en\"] a, html[lang^=\"en\"] span,\r\n    html.translated-ltr h1, html.translated-ltr h2, html.translated-ltr h3, html.translated-ltr h4, html.translated-ltr p, html.translated-ltr a, html.translated-ltr span,\r\n    [dir=\"ltr\"] h1, [dir=\"ltr\"] h2, [dir=\"ltr\"] h3, [dir=\"ltr\"] h4, [dir=\"ltr\"] p, [dir=\"ltr\"] a, [dir=\"ltr\"] span {\r\n        font-family: system-ui, -apple-system, sans-serif !important;\r\n    }\r\n\r\n    \/* Keep specific elements centered in English *\/\r\n    html[lang^=\"en\"] .text-center, html[lang^=\"en\"] .hero-content, html[lang^=\"en\"] .glass-card,\r\n    html.translated-ltr .text-center, html.translated-ltr .hero-content, html.translated-ltr .glass-card,\r\n    [dir=\"ltr\"] .text-center, [dir=\"ltr\"] .hero-content, [dir=\"ltr\"] .glass-card {\r\n        text-align: center !important;\r\n    }\r\n\r\n    \/* Keep Mobile About Text Centered *\/\r\n    @media (max-width: 768px) {\r\n        html[lang^=\"en\"] .about-text,\r\n        html.translated-ltr .about-text,\r\n        [dir=\"ltr\"] .about-text {\r\n            text-align: center !important;\r\n        }\r\n    }\r\n\r\n    \/* Fix About Image Background Border Positioning for LTR *\/\r\n    html[lang^=\"en\"] .about-image-wrapper::after,\r\n    html.translated-ltr .about-image-wrapper::after,\r\n    [dir=\"ltr\"] .about-image-wrapper::after {\r\n        right: auto !important;\r\n        left: 20px !important;\r\n    }\r\n\r\n    \/* Fix About Image Hover Animation Direction for LTR *\/\r\n    html[lang^=\"en\"] .about-image-wrapper:hover::after,\r\n    html.translated-ltr .about-image-wrapper:hover::after,\r\n    [dir=\"ltr\"] .about-image-wrapper:hover::after {\r\n        transform: translate(10px, 10px) !important;\r\n    }\r\n<\/style>\r\n\r\n<section class=\"hero-section\">\r\n    <div class=\"hero-bg\"><\/div>\r\n    <div class=\"container hero-content\">\r\n        <!--<h4 class=\"text-gold reveal active\" style=\"transition-delay: 0.2s;\">\u062a\u0623\u0633\u0633\u062a \u0639\u0627\u0645 2017<\/h4>-->\r\n        <h1 class=\"reveal active\" style=\"transition-delay: 0.4s;\">\u0639\u0646 \u0645\u062f\u0649 \u0627\u0644\u062d\u062f\u064a\u062b\u0629<\/h1>\r\n        <p class=\"reveal active\" style=\"transition-delay: 0.6s;\">\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u0627\u0644\u0633\u0644\u0639 \u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643\u064a\u0629 \u0628\u0625\u0631\u062b \u0645\u0646 \u0627\u0644\u062b\u0642\u0629.<\/p>\r\n    <\/div>\r\n<\/section>\r\n\r\n<section class=\"about-section\">\r\n    <div class=\"container about-grid\">\r\n        \r\n        <div class=\"about-text reveal-right\">\r\n            <h4 class=\"text-gold\" style=\"font-weight:bold; margin-bottom:10px;\">\u0645\u0646 \u0646\u062d\u0646<\/h4>\r\n            <h2>\u0646\u0631\u0628\u0637 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0646 \u0627\u0644\u062f\u0648\u0644\u064a\u064a\u0646 \u0648\u0627\u0644\u0645\u062d\u0644\u064a\u064a\u0646 \u0628\u0627\u0644\u0645\u0633\u062a\u0647\u0644\u0643 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/h2>\r\n            <p>\u0628\u0631\u0632\u062a \u0634\u0631\u0643\u0629 \u0645\u062f\u0649 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0633\u0631\u064a\u0639\u0627\u064b \u0643\u0627\u0633\u0645 \u0645\u0648\u062b\u0648\u0642 \u0628\u0647 \u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a. \u0646\u062d\u0646 \u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u062a\u0648\u0632\u064a\u0639 \u0648\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0633\u0644\u0639 \u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643\u064a\u0629 \u0648\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u063a\u0630\u0627\u0626\u064a\u0629\u060c \u0648\u0646\u063a\u0637\u064a \u062c\u0645\u064a\u0639 \u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u0645\u0644\u0643\u0629.<\/p>\r\n            <p>\u0645\u0646 \u062e\u0644\u0627\u0644 \u0642\u0627\u0639\u062f\u0629 \u0642\u0648\u064a\u0629 \u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 <strong>22 \u0639\u0627\u0645\u0627\u064b \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0643\u0645\u0629<\/strong>\u060c \u0646\u0639\u0645\u0644 \u0643\u062c\u0633\u0631 \u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0646 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u064a\u0646 \u0648\u0627\u0644\u0645\u062d\u0644\u064a\u064a\u0646 \u0648\u0628\u064a\u0646 \u0627\u0644\u0645\u0633\u062a\u0647\u0644\u0643\u064a\u0646 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u064a\u0646.<\/p>\r\n            \r\n            <a href=\"#\" class=\"btn-contact\">\u0627\u062a\u0635\u0644 \u0628\u0646\u0627<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"about-image-wrapper reveal-left\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2024\/04\/slider-1-1.jpg\" alt=\"\u0641\u0631\u064a\u0642 \u0645\u062f\u0649 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\">\r\n        <\/div>\r\n        \r\n    <\/div>\r\n<\/section>\r\n\r\n<section class=\"stats-section\" id=\"statsSection\">\r\n    <div class=\"container\">\r\n        <div class=\"text-center reveal\" style=\"margin-bottom:50px;\">\r\n            <h2 style=\"font-size:2.5rem;\">\u062a\u0623\u062b\u064a\u0631\u0646\u0627 \u0641\u064a \u0627\u0644\u0623\u0631\u0642\u0627\u0645<\/h2>\r\n            <div style=\"height:2px; width:60px; background:var(--color-gold); margin:10px auto;\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"stats-container\">\r\n            <div class=\"glass-card\">\r\n                <span class=\"stat-number\" data-target=\"22\">0<\/span>\r\n                <span style=\"color:#eee; font-size:1rem; font-weight:600;\">\u0639\u0627\u0645\u0627\u064b \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629<\/span>\r\n            <\/div>\r\n            <div class=\"glass-card\">\r\n                <span class=\"stat-number\" data-target=\"25\">0<\/span>\r\n                <span style=\"color:#eee; font-size:1rem; font-weight:600;\">\u0645\u0648\u0638\u0641\u0627\u064b<\/span>\r\n            <\/div>\r\n            <div class=\"glass-card\">\r\n                <span class=\"stat-number\" data-target=\"1200\">0<\/span>\r\n                <span style=\"color:#eee; font-size:1rem; font-weight:600;\">\u0639\u0645\u064a\u0644\u0627\u064b<\/span>\r\n            <\/div>\r\n            <div class=\"glass-card\">\r\n                <span class=\"stat-number\" data-target=\"10\">0<\/span>\r\n                <span style=\"color:#eee; font-size:1rem; font-weight:600;\">\u0634\u0631\u0643\u0627\u0621 \u0639\u0627\u0644\u0645\u064a\u064a\u0646<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<section class=\"features-section\">\r\n    <div class=\"container\">\r\n        <div class=\"text-center reveal\" style=\"margin-bottom: 60px;\">\r\n            <h2 style=\"color:var(--color-dark); font-size:2.5rem;\">\u0646\u0642\u0627\u0637 \u0642\u0648\u062a\u0646\u0627 \u0627\u0644\u062c\u0648\u0647\u0631\u064a\u0629<\/h2>\r\n            <p style=\"color:#666; font-size: 1.1rem;\">\u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646 \u0627\u0644\u0634\u0631\u064a\u0643 \u0627\u0644\u0645\u0641\u0636\u0644 \u0641\u064a \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"feature-list\">\r\n            <div class=\"feature-card reveal\" style=\"transition-delay: 0.1s;\">\r\n                <h3>\u062e\u0628\u0631\u0629 \u0627\u0644\u0633\u0648\u0642<\/h3>\r\n                <p>\u0645\u0639\u0631\u0641\u0629 \u0639\u0645\u064a\u0642\u0629 \u0628\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u062a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u0648\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u0633\u062a\u0647\u0644\u0643 \u0627\u0644\u0645\u062a\u0631\u0627\u0643\u0645\u0629 \u0639\u0628\u0631 \u0639\u0642\u062f\u064a\u0646 \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629.<\/p>\r\n            <\/div>\r\n            <div class=\"feature-card reveal\" style=\"transition-delay: 0.2s;\">\r\n                <h3>\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0627\u0644\u0639\u0627\u0644\u0645\u064a<\/h3>\r\n                <p>\u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0645\u0646\u062a\u062c\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629 \u0645\u0646 \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a\u060c \u0645\u0635\u0631\u060c \u0625\u0646\u062f\u0648\u0646\u064a\u0633\u064a\u0627\u060c \u0627\u0644\u0635\u064a\u0646\u060c \u0627\u0644\u0647\u0646\u062f\u060c \u062a\u0631\u0643\u064a\u0627\u060c \u0648\u0623\u0648\u0631\u0648\u0628\u0627 \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0645\u062d\u0644\u064a\u0629.<\/p>\r\n            <\/div>\r\n            <div class=\"feature-card reveal\" style=\"transition-delay: 0.3s;\">\r\n                <h3>\u062a\u0648\u0632\u064a\u0639 \u0648\u0627\u0633\u0639<\/h3>\r\n                <p>\u062a\u063a\u0637\u064a \u0634\u0628\u0643\u062a\u0646\u0627 \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a\u0629 \u0643\u0627\u0641\u0629 \u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u0645\u0644\u0643\u0629\u060c \u0645\u0645\u0627 \u064a\u0636\u0645\u0646 \u0648\u0635\u0648\u0644 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u062a\u062c\u0627\u0631 \u0648\u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u062a\u0645\u0648\u064a\u0646 \u0628\u0643\u0641\u0627\u0621\u0629 \u0639\u0627\u0644\u064a\u0629.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        \r\n        \/\/ 1. SCROLL REVEAL OBSERVER\r\n        const observerOptions = { threshold: 0.15 };\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('active');\r\n                    if (entry.target.classList.contains('glass-card')) {\r\n                        entry.target.classList.add('visible');\r\n                    }\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach(el => observer.observe(el));\r\n        document.querySelectorAll('.glass-card').forEach(el => observer.observe(el));\r\n\r\n        \/\/ 2. NUMBER COUNTER\r\n        const statsSection = document.getElementById('statsSection');\r\n        let counted = false;\r\n\r\n        const statsObserver = new IntersectionObserver((entries) => {\r\n            if (entries[0].isIntersecting && !counted) {\r\n                counted = true;\r\n                const counters = document.querySelectorAll('.stat-number');\r\n                const speed = 200;\r\n\r\n                counters.forEach(counter => {\r\n                    const updateCount = () => {\r\n                        const target = +counter.getAttribute('data-target');\r\n                        const count = +counter.innerText;\r\n                        const inc = target \/ speed;\r\n\r\n                        if (count < target) {\r\n                            counter.innerText = Math.ceil(count + inc);\r\n                            setTimeout(updateCount, 20);\r\n                        } else {\r\n                            counter.innerText = target + \"+\";\r\n                        }\r\n                    };\r\n                    updateCount();\r\n                });\r\n            }\r\n        }, { threshold: 0.5 });\r\n\r\n        if(statsSection) {\r\n            statsObserver.observe(statsSection);\r\n        }\r\n    });\r\n<\/script>\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>\u0639\u0646 \u0645\u062f\u0649 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u0627\u0644\u0633\u0644\u0639 \u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643\u064a\u0629 \u0628\u0625\u0631\u062b \u0645\u0646 \u0627\u0644\u062b\u0642\u0629. \u0645\u0646 \u0646\u062d\u0646 \u0646\u0631\u0628\u0637 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0646 \u0627\u0644\u062f\u0648\u0644\u064a\u064a\u0646 \u0648\u0627\u0644\u0645\u062d\u0644\u064a\u064a\u0646 \u0628\u0627\u0644\u0645\u0633\u062a\u0647\u0644\u0643 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u0628\u0631\u0632\u062a \u0634\u0631\u0643\u0629 \u0645\u062f\u0649 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0633\u0631\u064a\u0639\u0627\u064b \u0643\u0627\u0633\u0645 \u0645\u0648\u062b\u0648\u0642 \u0628\u0647 \u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a. \u0646\u062d\u0646 \u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u062a\u0648\u0632\u064a\u0639 \u0648\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0633\u0644\u0639 \u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643\u064a\u0629 \u0648\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u063a\u0630\u0627\u0626\u064a\u0629\u060c \u0648\u0646\u063a\u0637\u064a \u062c\u0645\u064a\u0639 \u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u0645\u0644\u0643\u0629. \u0645\u0646 \u062e\u0644\u0627\u0644 \u0642\u0627\u0639\u062f\u0629 \u0642\u0648\u064a\u0629 \u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 22 \u0639\u0627\u0645\u0627\u064b \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":5,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":4555,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages\/11\/revisions\/4555"}],"wp:attachment":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}