رسالة الخطأ

Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 462 of themes/gavias_kunco/gva_content_builder/gva_column.php).

element_gva_column->render_content(Array, '



    
    
    
    تقارير وإنجازات | وجدان الخيرية

    
    

    
    
    
    

    
    

    
    

    
        /* CSS Variables */
        :root {
            --primary: #6d2435;
            --primary-dark: #6d2435;
            --secondary: #6d2435;
            --accent: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 1rem;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            margin-bottom: 3rem;
        }
h1.hero-title.aos-init.aos-animate {
    font-family: 'aljazerabold';
color:#fff;
}
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/sites/default/files/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    /* filter: grayscale(100%) brightness(0.5); */
}
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 4rem 0;
            text-align: center;
        }

        .hero-badge {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: rgba(178, 148, 107, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: 'aljazerabold';
}
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        /* Buttons */
        .btn {
            padding: 1rem 2rem;
            border-radius: 9999px;
            border: none;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
font-family: 'aljazerabold';
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            color: #fff;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
background: transparent;
        }

        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Charts Section */
        .charts {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 4rem;
        }

        .section-title {
          font-size: 2rem;
    font-family: 'aljazerabold';
    font-weight: 900;
    color: #b2946b;
    margin-bottom: 2rem;
    position: relative;
    padding-right: 1.5rem;
        }

        .section-title::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            border-radius: 2px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-wrapper {
            background: var(--light);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            top: 0;
            bottom: 0;
            right: 50%;
            margin-right: -2px;
            border-radius: 9999px;
ont-family: 'aljazera';
        }

.timeline-content h3 {
    font-family: 'aljazerabold';
    color: #6d2435;
}

        .timeline-item {
            padding: 1rem 2rem;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            right: 0;
        }

        .timeline-item:nth-child(even) {
            right: 50%;
        }

        .timeline-content {
            padding: 1.5rem;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            position: relative;
            border-right: 4px solid var(--secondary);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Reports Grid */
        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .report-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .report-card:hover {
            transform: translateY(-10px);
        }

        .report-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
        }

        .report-title {
           font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'aljazerabold';
    color: #b2946b;
        }

        .report-body {
            padding: 1.5rem;
        }

        .report-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .report-stat-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
        }

        .report-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .report-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Download Section */
        .download {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--radius);
            padding: 3rem;
            margin-bottom: 4rem;
            text-align: center;
        }

        .download-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 2rem;
color: #fff;
    font-family: 'aljazerabold';

        }

        .download-formats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .format-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .format-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Floating Buttons */
        .floating-buttons {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .timeline::after {
                right: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-right: 70px;
                padding-left: 25px;
            }
            
            .timeline-item:nth-child(even) {
                right: 0;
            }
            
            .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .floating-buttons {
                bottom: 1rem;
                left: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .download {
                padding: 2rem 1rem;
            }
        }
    




    
    
    
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        // Initialize charts
        let charts = {};

        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            animateNumbers();
        });

        function initializeCharts() {
            // Projects by Sector Chart
            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');
            charts.projectsBySector = new Chart(projectsCtx, {
                type: 'pie',
                data: {
                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],
                    datasets: [{
                        data: [35, 25, 20, 10, 5, 5],
                        backgroundColor: [
                            '#1a5fb4',
                            '#10b981',
                            '#e6b325',
                            '#8b5cf6',
                            '#f59e0b',
                            '#ef4444'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Beneficiaries Growth Chart
            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');
            charts.beneficiariesGrowth = new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['2020', '2021', '2022', '2023', '2024'],
                    datasets: [{
                        label: 'عدد المستفيدين',
                        data: [25000, 45000, 75000, 105000, 125847],
                        borderColor: '#1a5fb4',
                        backgroundColor: 'rgba(26, 95, 180, 0.1)',
                        borderWidth: 3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Animate numbers
        function animateNumbers() {
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter =&gt; {
                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));
                const suffix = counter.textContent.replace(/[0-9,.]/g, '');
                const duration = 1500;
                let current = 0;
                const increment = target / (duration / 16);
                
                const timer = setInterval(() =&gt; {
                    current += increment;
                    if (current &gt;= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    
                    let displayValue;
                    if (suffix.includes('K')) {
                        displayValue = (current / 1000).toFixed(1) + 'K';
                    } else if (counter.textContent.includes('$')) {
                        displayValue = '$' + Math.floor(current).toLocaleString();
                    } else {
                        displayValue = Math.floor(current).toLocaleString();
                    }
                    
                    counter.textContent = displayValue;
                }, 16);
            });
        }

        // Utility functions
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function downloadFullReport() {
            showNotification('جاري تحميل التقرير السنوي الكامل...');
        }

        function printPage() {
            window.print();
        }

        function viewReport(reportId) {
            showNotification(`جاري عرض التقرير: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`جاري تحميل التقرير: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`جاري تحميل التقارير بصيغة ${format}`);
        }

        function showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 20px;
                background: var(--primary);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() =&gt; {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() =&gt; notification.remove(), 300);
            }, 3000);
            
            // Add animation styles
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(-100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                    @keyframes slideOut {
                        from { transform: translateX(0); opacity: 1; }
                        to { transform: translateX(-100%); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    

    
        
        
            
                
                إنجازات 
            
            
            
                تقارير وإنجازات وجدان الخيرية
            
            
            
                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.
            
            
            
                
                     عرض الإحصائيات
                
                
                     التقارير السنوية
                
            
        
    ') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '



    
    
    
    تقارير وإنجازات | وجدان الخيرية

    
    

    
    
    
    

    
    

    
    

    
        /* CSS Variables */
        :root {
            --primary: #6d2435;
            --primary-dark: #6d2435;
            --secondary: #6d2435;
            --accent: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 1rem;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            margin-bottom: 3rem;
        }
h1.hero-title.aos-init.aos-animate {
    font-family: 'aljazerabold';
color:#fff;
}
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/sites/default/files/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    /* filter: grayscale(100%) brightness(0.5); */
}
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 4rem 0;
            text-align: center;
        }

        .hero-badge {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: rgba(178, 148, 107, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: 'aljazerabold';
}
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        /* Buttons */
        .btn {
            padding: 1rem 2rem;
            border-radius: 9999px;
            border: none;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
font-family: 'aljazerabold';
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            color: #fff;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
background: transparent;
        }

        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Charts Section */
        .charts {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 4rem;
        }

        .section-title {
          font-size: 2rem;
    font-family: 'aljazerabold';
    font-weight: 900;
    color: #b2946b;
    margin-bottom: 2rem;
    position: relative;
    padding-right: 1.5rem;
        }

        .section-title::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            border-radius: 2px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-wrapper {
            background: var(--light);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            top: 0;
            bottom: 0;
            right: 50%;
            margin-right: -2px;
            border-radius: 9999px;
ont-family: 'aljazera';
        }

.timeline-content h3 {
    font-family: 'aljazerabold';
    color: #6d2435;
}

        .timeline-item {
            padding: 1rem 2rem;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            right: 0;
        }

        .timeline-item:nth-child(even) {
            right: 50%;
        }

        .timeline-content {
            padding: 1.5rem;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            position: relative;
            border-right: 4px solid var(--secondary);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Reports Grid */
        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .report-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .report-card:hover {
            transform: translateY(-10px);
        }

        .report-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
        }

        .report-title {
           font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'aljazerabold';
    color: #b2946b;
        }

        .report-body {
            padding: 1.5rem;
        }

        .report-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .report-stat-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
        }

        .report-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .report-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Download Section */
        .download {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--radius);
            padding: 3rem;
            margin-bottom: 4rem;
            text-align: center;
        }

        .download-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 2rem;
color: #fff;
    font-family: 'aljazerabold';

        }

        .download-formats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .format-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .format-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Floating Buttons */
        .floating-buttons {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .timeline::after {
                right: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-right: 70px;
                padding-left: 25px;
            }
            
            .timeline-item:nth-child(even) {
                right: 0;
            }
            
            .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .floating-buttons {
                bottom: 1rem;
                left: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .download {
                padding: 2rem 1rem;
            }
        }
    




    
    
    
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        // Initialize charts
        let charts = {};

        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            animateNumbers();
        });

        function initializeCharts() {
            // Projects by Sector Chart
            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');
            charts.projectsBySector = new Chart(projectsCtx, {
                type: 'pie',
                data: {
                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],
                    datasets: [{
                        data: [35, 25, 20, 10, 5, 5],
                        backgroundColor: [
                            '#1a5fb4',
                            '#10b981',
                            '#e6b325',
                            '#8b5cf6',
                            '#f59e0b',
                            '#ef4444'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Beneficiaries Growth Chart
            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');
            charts.beneficiariesGrowth = new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['2020', '2021', '2022', '2023', '2024'],
                    datasets: [{
                        label: 'عدد المستفيدين',
                        data: [25000, 45000, 75000, 105000, 125847],
                        borderColor: '#1a5fb4',
                        backgroundColor: 'rgba(26, 95, 180, 0.1)',
                        borderWidth: 3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Animate numbers
        function animateNumbers() {
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter =&gt; {
                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));
                const suffix = counter.textContent.replace(/[0-9,.]/g, '');
                const duration = 1500;
                let current = 0;
                const increment = target / (duration / 16);
                
                const timer = setInterval(() =&gt; {
                    current += increment;
                    if (current &gt;= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    
                    let displayValue;
                    if (suffix.includes('K')) {
                        displayValue = (current / 1000).toFixed(1) + 'K';
                    } else if (counter.textContent.includes('$')) {
                        displayValue = '$' + Math.floor(current).toLocaleString();
                    } else {
                        displayValue = Math.floor(current).toLocaleString();
                    }
                    
                    counter.textContent = displayValue;
                }, 16);
            });
        }

        // Utility functions
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function downloadFullReport() {
            showNotification('جاري تحميل التقرير السنوي الكامل...');
        }

        function printPage() {
            window.print();
        }

        function viewReport(reportId) {
            showNotification(`جاري عرض التقرير: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`جاري تحميل التقرير: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`جاري تحميل التقارير بصيغة ${format}`);
        }

        function showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 20px;
                background: var(--primary);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() =&gt; {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() =&gt; notification.remove(), 300);
            }, 3000);
            
            // Add animation styles
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(-100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                    @keyframes slideOut {
                        from { transform: translateX(0); opacity: 1; }
                        to { transform: translateX(-100%); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    

    
        
        
            
                
                إنجازات 
            
            
            
                تقارير وإنجازات وجدان الخيرية
            
            
            
                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.
            
            
            
                
                     عرض الإحصائيات
                
                
                     التقارير السنوية
                
            
        
    ') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n    تقارير وإنجازات | وجدان الخيرية\r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n        /* CSS Variables */\r\n        :root {\r\n            --primary: #6d2435;\r\n            --primary-dark: #6d2435;\r\n            --secondary: #6d2435;\r\n            --accent: #10b981;\r\n            --dark: #1e293b;\r\n            --light: #f8fafc;\r\n            --gray: #64748b;\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --radius: 1rem;\r\n            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        /* Base Styles */\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            color: var(--dark);\r\n            line-height: 1.7;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        /* Container */\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 1.5rem;\r\n        }\r\n\r\n        /* Hero Section */\r\n        .hero {\r\n            position: relative;\r\n            min-height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n            color: white;\r\n            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\r\n            margin-bottom: 3rem;\r\n        }\r\nh1.hero-title.aos-init.aos-animate {\r\n    font-family: 'aljazerabold';\r\ncolor:#fff;\r\n}\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/sites/default/files/hero-bg.jpg);\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    opacity: 0.15;\r\n    /* filter: grayscale(100%) brightness(0.5); */\r\n}\r\n        .hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            padding: 4rem 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .hero-badge {\r\n       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n    background-color: rgba(178, 148, 107, 0.8);\r\n    backdrop-filter: blur(4px);\r\n    color: white;\r\n    padding: 0.25rem 1rem;\r\n    border-radius: 9999px;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    display: inline-block;\r\n    font-family: 'aljazerabold';\r\n}\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 900;\r\n            line-height: 1.1;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.25rem;\r\n            opacity: 0.9;\r\n            max-width: 800px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n\r\n        /* Buttons */\r\n        .btn {\r\n            padding: 1rem 2rem;\r\n            border-radius: 9999px;\r\n            border: none;\r\n            font-weight: 900;\r\n            cursor: pointer;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition);\r\nfont-family: 'aljazerabold';\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            color: white;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--shadow);\r\nbackground: transparent;\r\n        }\r\n\r\n        /* Stats Section */\r\n        .stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .stat-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1rem;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Charts Section */\r\n        .charts {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .section-title {\r\n          font-size: 2rem;\r\n    font-family: 'aljazerabold';\r\n    font-weight: 900;\r\n    color: #b2946b;\r\n    margin-bottom: 2rem;\r\n    position: relative;\r\n    padding-right: 1.5rem;\r\n        }\r\n\r\n        .section-title::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 5px;\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .charts-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            background: var(--light);\r\n            border-radius: var(--radius);\r\n            padding: 1.5rem;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        /* Timeline */\r\n        .timeline {\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin: 0 auto 4rem;\r\n        }\r\n\r\n        .timeline::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 50%;\r\n            margin-right: -2px;\r\n            border-radius: 9999px;\r\nont-family: 'aljazera';\r\n        }\r\n\r\n.timeline-content h3 {\r\n    font-family: 'aljazerabold';\r\n    color: #6d2435;\r\n}\r\n\r\n        .timeline-item {\r\n            padding: 1rem 2rem;\r\n            position: relative;\r\n            width: 50%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .timeline-item:nth-child(odd) {\r\n            right: 0;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            right: 50%;\r\n        }\r\n\r\n        .timeline-content {\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            position: relative;\r\n            border-right: 4px solid var(--secondary);\r\n        }\r\n\r\n        .timeline-year {\r\n            font-size: 1.25rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Reports Grid */\r\n        .reports-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .report-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .report-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .report-header {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-title {\r\n           font-size: 1.6rem;\r\n    font-weight: 800;\r\n    margin-bottom: 0.5rem;\r\n    font-family: 'aljazerabold';\r\n    color: #b2946b;\r\n        }\r\n\r\n        .report-body {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .report-stat-value {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .report-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .report-btn {\r\n            flex: 1;\r\n            padding: 0.75rem;\r\n            border: none;\r\n            border-radius: var(--radius);\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        /* Download Section */\r\n        .download {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border-radius: var(--radius);\r\n            padding: 3rem;\r\n            margin-bottom: 4rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .download-title {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            margin-bottom: 2rem;\r\ncolor: #fff;\r\n    font-family: 'aljazerabold';\r\n\r\n        }\r\n\r\n        .download-formats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .format-btn {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            color: white;\r\n            padding: 1rem 1.5rem;\r\n            border-radius: var(--radius);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .format-btn:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        /* Floating Buttons */\r\n        .floating-buttons {\r\n            position: fixed;\r\n            bottom: 2rem;\r\n            left: 2rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            z-index: 1000;\r\n        }\r\n\r\n        .floating-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        /* Responsive Design */\r\n        @media (max-width: 768px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .stats {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .charts-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .timeline::after {\r\n                right: 31px;\r\n            }\r\n            \r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-right: 70px;\r\n                padding-left: 25px;\r\n            }\r\n            \r\n            .timeline-item:nth-child(even) {\r\n                right: 0;\r\n            }\r\n            \r\n            .reports-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .floating-buttons {\r\n                bottom: 1rem;\r\n                left: 1rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .section-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .download {\r\n                padding: 2rem 1rem;\r\n            }\r\n        }\r\n    \r\n\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n        // Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n\r\n        // Initialize charts\r\n        let charts = {};\r\n\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeCharts();\r\n            animateNumbers();\r\n        });\r\n\r\n        function initializeCharts() {\r\n            // Projects by Sector Chart\r\n            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');\r\n            charts.projectsBySector = new Chart(projectsCtx, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],\r\n                    datasets: [{\r\n                        data: [35, 25, 20, 10, 5, 5],\r\n                        backgroundColor: [\r\n                            '#1a5fb4',\r\n                            '#10b981',\r\n                            '#e6b325',\r\n                            '#8b5cf6',\r\n                            '#f59e0b',\r\n                            '#ef4444'\r\n                        ]\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false\r\n                }\r\n            });\r\n\r\n            // Beneficiaries Growth Chart\r\n            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');\r\n            charts.beneficiariesGrowth = new Chart(growthCtx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['2020', '2021', '2022', '2023', '2024'],\r\n                    datasets: [{\r\n                        label: 'عدد المستفيدين',\r\n                        data: [25000, 45000, 75000, 105000, 125847],\r\n                        borderColor: '#1a5fb4',\r\n                        backgroundColor: 'rgba(26, 95, 180, 0.1)',\r\n                        borderWidth: 3,\r\n                        fill: true\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    scales: {\r\n                        y: {\r\n                            beginAtZero: true\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        // Animate numbers\r\n        function animateNumbers() {\r\n            const counters = document.querySelectorAll('.stat-number');\r\n            counters.forEach(counter =&gt; {\r\n                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));\r\n                const suffix = counter.textContent.replace(/[0-9,.]/g, '');\r\n                const duration = 1500;\r\n                let current = 0;\r\n                const increment = target / (duration / 16);\r\n                \r\n                const timer = setInterval(() =&gt; {\r\n                    current += increment;\r\n                    if (current &gt;= target) {\r\n                        current = target;\r\n                        clearInterval(timer);\r\n                    }\r\n                    \r\n                    let displayValue;\r\n                    if (suffix.includes('K')) {\r\n                        displayValue = (current / 1000).toFixed(1) + 'K';\r\n                    } else if (counter.textContent.includes('$')) {\r\n                        displayValue = '$' + Math.floor(current).toLocaleString();\r\n                    } else {\r\n                        displayValue = Math.floor(current).toLocaleString();\r\n                    }\r\n                    \r\n                    counter.textContent = displayValue;\r\n                }, 16);\r\n            });\r\n        }\r\n\r\n        // Utility functions\r\n        function scrollToSection(sectionId) {\r\n            const section = document.getElementById(sectionId);\r\n            if (section) {\r\n                section.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n        }\r\n\r\n        function scrollToTop() {\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n\r\n        function downloadFullReport() {\r\n            showNotification('جاري تحميل التقرير السنوي الكامل...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`جاري عرض التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`جاري تحميل التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`جاري تحميل التقارير بصيغة ${format}`);\r\n        }\r\n\r\n        function showNotification(message) {\r\n            // Create notification element\r\n            const notification = document.createElement('div');\r\n            notification.textContent = message;\r\n            notification.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                left: 20px;\r\n                background: var(--primary);\r\n                color: white;\r\n                padding: 1rem 1.5rem;\r\n                border-radius: var(--radius);\r\n                box-shadow: var(--shadow);\r\n                z-index: 1000;\r\n                animation: slideIn 0.3s ease;\r\n            `;\r\n            \r\n            document.body.appendChild(notification);\r\n            \r\n            // Remove notification after 3 seconds\r\n            setTimeout(() =&gt; {\r\n                notification.style.animation = 'slideOut 0.3s ease';\r\n                setTimeout(() =&gt; notification.remove(), 300);\r\n            }, 3000);\r\n            \r\n            // Add animation styles\r\n            if (!document.querySelector('#notification-styles')) {\r\n                const style = document.createElement('style');\r\n                style.id = 'notification-styles';\r\n                style.textContent = `\r\n                    @keyframes slideIn {\r\n                        from { transform: translateX(-100%); opacity: 0; }\r\n                        to { transform: translateX(0); opacity: 1; }\r\n                    }\r\n                    @keyframes slideOut {\r\n                        from { transform: translateX(0); opacity: 1; }\r\n                        to { transform: translateX(-100%); opacity: 0; }\r\n                    }\r\n                `;\r\n                document.head.appendChild(style);\r\n            }\r\n        }\r\n    \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"    \r\n        \r\n        \r\n            \r\n                \r\n                إنجازات \r\n            \r\n            \r\n            \r\n                تقارير وإنجازات وجدان الخيرية\r\n            \r\n            \r\n            \r\n                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.\r\n            \r\n            \r\n            \r\n                \r\n                     عرض الإحصائيات\r\n                \r\n                \r\n                     التقارير السنوية\r\n                \r\n            \r\n        \r\n    ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"},{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container","class":"aboutus takrirr"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"    \r\n        \r\n        \r\n            أبرز الإحصائيات\r\n            \r\n                \r\n                    \r\n                        \r\n                    \r\n                    125,847\r\n                    مستفيد مباشر\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    143\r\n                    مشروع إنساني\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    8\r\n                    دولة حول العالم\r\n                \r\n\r\n            \r\n        \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"        \r\n        \r\n            رحلة الإنجازات\r\n            \r\n            \r\n                \r\n                    \r\n                        2024\r\n                        توسعة العمل في دول جديدة\r\n                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        البرنامج الإغاثي الشامل\r\n                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا\r\n                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.\r\n                    \r\n                \r\n            \r\n        ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    التقارير السنوية\r\n    \r\n    \r\n        \r\n            \r\n                تقرير 2023 السنوي\r\n                يناير - ديسمبر 2023\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2023.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                تقرير 2024 السنوي\r\n                يناير - ديسمبر 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2024.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    \r\n        الملف التعريفي لجمعية وجدان الخيرية\r\n    \r\n\r\n    \r\n        <a download>\r\n            \r\n            PDF\r\n        </a>\r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_column->render_content() (line 463 of themes/gavias_kunco/gva_content_builder/gva_column.php).

element_gva_column->render_content(Array, '



    
    
    
    تقارير وإنجازات | وجدان الخيرية

    
    

    
    
    
    

    
    

    
    

    
        /* CSS Variables */
        :root {
            --primary: #6d2435;
            --primary-dark: #6d2435;
            --secondary: #6d2435;
            --accent: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 1rem;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            margin-bottom: 3rem;
        }
h1.hero-title.aos-init.aos-animate {
    font-family: 'aljazerabold';
color:#fff;
}
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/sites/default/files/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    /* filter: grayscale(100%) brightness(0.5); */
}
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 4rem 0;
            text-align: center;
        }

        .hero-badge {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: rgba(178, 148, 107, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: 'aljazerabold';
}
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        /* Buttons */
        .btn {
            padding: 1rem 2rem;
            border-radius: 9999px;
            border: none;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
font-family: 'aljazerabold';
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            color: #fff;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
background: transparent;
        }

        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Charts Section */
        .charts {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 4rem;
        }

        .section-title {
          font-size: 2rem;
    font-family: 'aljazerabold';
    font-weight: 900;
    color: #b2946b;
    margin-bottom: 2rem;
    position: relative;
    padding-right: 1.5rem;
        }

        .section-title::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            border-radius: 2px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-wrapper {
            background: var(--light);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            top: 0;
            bottom: 0;
            right: 50%;
            margin-right: -2px;
            border-radius: 9999px;
ont-family: 'aljazera';
        }

.timeline-content h3 {
    font-family: 'aljazerabold';
    color: #6d2435;
}

        .timeline-item {
            padding: 1rem 2rem;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            right: 0;
        }

        .timeline-item:nth-child(even) {
            right: 50%;
        }

        .timeline-content {
            padding: 1.5rem;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            position: relative;
            border-right: 4px solid var(--secondary);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Reports Grid */
        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .report-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .report-card:hover {
            transform: translateY(-10px);
        }

        .report-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
        }

        .report-title {
           font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'aljazerabold';
    color: #b2946b;
        }

        .report-body {
            padding: 1.5rem;
        }

        .report-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .report-stat-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
        }

        .report-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .report-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Download Section */
        .download {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--radius);
            padding: 3rem;
            margin-bottom: 4rem;
            text-align: center;
        }

        .download-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 2rem;
color: #fff;
    font-family: 'aljazerabold';

        }

        .download-formats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .format-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .format-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Floating Buttons */
        .floating-buttons {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .timeline::after {
                right: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-right: 70px;
                padding-left: 25px;
            }
            
            .timeline-item:nth-child(even) {
                right: 0;
            }
            
            .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .floating-buttons {
                bottom: 1rem;
                left: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .download {
                padding: 2rem 1rem;
            }
        }
    




    
    
    
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        // Initialize charts
        let charts = {};

        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            animateNumbers();
        });

        function initializeCharts() {
            // Projects by Sector Chart
            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');
            charts.projectsBySector = new Chart(projectsCtx, {
                type: 'pie',
                data: {
                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],
                    datasets: [{
                        data: [35, 25, 20, 10, 5, 5],
                        backgroundColor: [
                            '#1a5fb4',
                            '#10b981',
                            '#e6b325',
                            '#8b5cf6',
                            '#f59e0b',
                            '#ef4444'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Beneficiaries Growth Chart
            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');
            charts.beneficiariesGrowth = new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['2020', '2021', '2022', '2023', '2024'],
                    datasets: [{
                        label: 'عدد المستفيدين',
                        data: [25000, 45000, 75000, 105000, 125847],
                        borderColor: '#1a5fb4',
                        backgroundColor: 'rgba(26, 95, 180, 0.1)',
                        borderWidth: 3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Animate numbers
        function animateNumbers() {
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter =&gt; {
                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));
                const suffix = counter.textContent.replace(/[0-9,.]/g, '');
                const duration = 1500;
                let current = 0;
                const increment = target / (duration / 16);
                
                const timer = setInterval(() =&gt; {
                    current += increment;
                    if (current &gt;= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    
                    let displayValue;
                    if (suffix.includes('K')) {
                        displayValue = (current / 1000).toFixed(1) + 'K';
                    } else if (counter.textContent.includes('$')) {
                        displayValue = '$' + Math.floor(current).toLocaleString();
                    } else {
                        displayValue = Math.floor(current).toLocaleString();
                    }
                    
                    counter.textContent = displayValue;
                }, 16);
            });
        }

        // Utility functions
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function downloadFullReport() {
            showNotification('جاري تحميل التقرير السنوي الكامل...');
        }

        function printPage() {
            window.print();
        }

        function viewReport(reportId) {
            showNotification(`جاري عرض التقرير: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`جاري تحميل التقرير: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`جاري تحميل التقارير بصيغة ${format}`);
        }

        function showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 20px;
                background: var(--primary);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() =&gt; {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() =&gt; notification.remove(), 300);
            }, 3000);
            
            // Add animation styles
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(-100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                    @keyframes slideOut {
                        from { transform: translateX(0); opacity: 1; }
                        to { transform: translateX(-100%); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    

    
        
        
            
                
                إنجازات 
            
            
            
                تقارير وإنجازات وجدان الخيرية
            
            
            
                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.
            
            
            
                
                     عرض الإحصائيات
                
                
                     التقارير السنوية
                
            
        
    ') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '



    
    
    
    تقارير وإنجازات | وجدان الخيرية

    
    

    
    
    
    

    
    

    
    

    
        /* CSS Variables */
        :root {
            --primary: #6d2435;
            --primary-dark: #6d2435;
            --secondary: #6d2435;
            --accent: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 1rem;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            margin-bottom: 3rem;
        }
h1.hero-title.aos-init.aos-animate {
    font-family: 'aljazerabold';
color:#fff;
}
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/sites/default/files/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    /* filter: grayscale(100%) brightness(0.5); */
}
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 4rem 0;
            text-align: center;
        }

        .hero-badge {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: rgba(178, 148, 107, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: 'aljazerabold';
}
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        /* Buttons */
        .btn {
            padding: 1rem 2rem;
            border-radius: 9999px;
            border: none;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
font-family: 'aljazerabold';
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            color: #fff;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
background: transparent;
        }

        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Charts Section */
        .charts {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 4rem;
        }

        .section-title {
          font-size: 2rem;
    font-family: 'aljazerabold';
    font-weight: 900;
    color: #b2946b;
    margin-bottom: 2rem;
    position: relative;
    padding-right: 1.5rem;
        }

        .section-title::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            border-radius: 2px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-wrapper {
            background: var(--light);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            top: 0;
            bottom: 0;
            right: 50%;
            margin-right: -2px;
            border-radius: 9999px;
ont-family: 'aljazera';
        }

.timeline-content h3 {
    font-family: 'aljazerabold';
    color: #6d2435;
}

        .timeline-item {
            padding: 1rem 2rem;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            right: 0;
        }

        .timeline-item:nth-child(even) {
            right: 50%;
        }

        .timeline-content {
            padding: 1.5rem;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            position: relative;
            border-right: 4px solid var(--secondary);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Reports Grid */
        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .report-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .report-card:hover {
            transform: translateY(-10px);
        }

        .report-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
        }

        .report-title {
           font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'aljazerabold';
    color: #b2946b;
        }

        .report-body {
            padding: 1.5rem;
        }

        .report-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .report-stat-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
        }

        .report-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .report-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Download Section */
        .download {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--radius);
            padding: 3rem;
            margin-bottom: 4rem;
            text-align: center;
        }

        .download-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 2rem;
color: #fff;
    font-family: 'aljazerabold';

        }

        .download-formats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .format-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .format-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Floating Buttons */
        .floating-buttons {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .timeline::after {
                right: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-right: 70px;
                padding-left: 25px;
            }
            
            .timeline-item:nth-child(even) {
                right: 0;
            }
            
            .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .floating-buttons {
                bottom: 1rem;
                left: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .download {
                padding: 2rem 1rem;
            }
        }
    




    
    
    
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        // Initialize charts
        let charts = {};

        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            animateNumbers();
        });

        function initializeCharts() {
            // Projects by Sector Chart
            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');
            charts.projectsBySector = new Chart(projectsCtx, {
                type: 'pie',
                data: {
                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],
                    datasets: [{
                        data: [35, 25, 20, 10, 5, 5],
                        backgroundColor: [
                            '#1a5fb4',
                            '#10b981',
                            '#e6b325',
                            '#8b5cf6',
                            '#f59e0b',
                            '#ef4444'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Beneficiaries Growth Chart
            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');
            charts.beneficiariesGrowth = new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['2020', '2021', '2022', '2023', '2024'],
                    datasets: [{
                        label: 'عدد المستفيدين',
                        data: [25000, 45000, 75000, 105000, 125847],
                        borderColor: '#1a5fb4',
                        backgroundColor: 'rgba(26, 95, 180, 0.1)',
                        borderWidth: 3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Animate numbers
        function animateNumbers() {
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter =&gt; {
                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));
                const suffix = counter.textContent.replace(/[0-9,.]/g, '');
                const duration = 1500;
                let current = 0;
                const increment = target / (duration / 16);
                
                const timer = setInterval(() =&gt; {
                    current += increment;
                    if (current &gt;= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    
                    let displayValue;
                    if (suffix.includes('K')) {
                        displayValue = (current / 1000).toFixed(1) + 'K';
                    } else if (counter.textContent.includes('$')) {
                        displayValue = '$' + Math.floor(current).toLocaleString();
                    } else {
                        displayValue = Math.floor(current).toLocaleString();
                    }
                    
                    counter.textContent = displayValue;
                }, 16);
            });
        }

        // Utility functions
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function downloadFullReport() {
            showNotification('جاري تحميل التقرير السنوي الكامل...');
        }

        function printPage() {
            window.print();
        }

        function viewReport(reportId) {
            showNotification(`جاري عرض التقرير: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`جاري تحميل التقرير: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`جاري تحميل التقارير بصيغة ${format}`);
        }

        function showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 20px;
                background: var(--primary);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() =&gt; {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() =&gt; notification.remove(), 300);
            }, 3000);
            
            // Add animation styles
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(-100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                    @keyframes slideOut {
                        from { transform: translateX(0); opacity: 1; }
                        to { transform: translateX(-100%); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    

    
        
        
            
                
                إنجازات 
            
            
            
                تقارير وإنجازات وجدان الخيرية
            
            
            
                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.
            
            
            
                
                     عرض الإحصائيات
                
                
                     التقارير السنوية
                
            
        
    ') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n    تقارير وإنجازات | وجدان الخيرية\r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n        /* CSS Variables */\r\n        :root {\r\n            --primary: #6d2435;\r\n            --primary-dark: #6d2435;\r\n            --secondary: #6d2435;\r\n            --accent: #10b981;\r\n            --dark: #1e293b;\r\n            --light: #f8fafc;\r\n            --gray: #64748b;\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --radius: 1rem;\r\n            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        /* Base Styles */\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            color: var(--dark);\r\n            line-height: 1.7;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        /* Container */\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 1.5rem;\r\n        }\r\n\r\n        /* Hero Section */\r\n        .hero {\r\n            position: relative;\r\n            min-height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n            color: white;\r\n            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\r\n            margin-bottom: 3rem;\r\n        }\r\nh1.hero-title.aos-init.aos-animate {\r\n    font-family: 'aljazerabold';\r\ncolor:#fff;\r\n}\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/sites/default/files/hero-bg.jpg);\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    opacity: 0.15;\r\n    /* filter: grayscale(100%) brightness(0.5); */\r\n}\r\n        .hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            padding: 4rem 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .hero-badge {\r\n       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n    background-color: rgba(178, 148, 107, 0.8);\r\n    backdrop-filter: blur(4px);\r\n    color: white;\r\n    padding: 0.25rem 1rem;\r\n    border-radius: 9999px;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    display: inline-block;\r\n    font-family: 'aljazerabold';\r\n}\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 900;\r\n            line-height: 1.1;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.25rem;\r\n            opacity: 0.9;\r\n            max-width: 800px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n\r\n        /* Buttons */\r\n        .btn {\r\n            padding: 1rem 2rem;\r\n            border-radius: 9999px;\r\n            border: none;\r\n            font-weight: 900;\r\n            cursor: pointer;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition);\r\nfont-family: 'aljazerabold';\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            color: white;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--shadow);\r\nbackground: transparent;\r\n        }\r\n\r\n        /* Stats Section */\r\n        .stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .stat-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1rem;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Charts Section */\r\n        .charts {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .section-title {\r\n          font-size: 2rem;\r\n    font-family: 'aljazerabold';\r\n    font-weight: 900;\r\n    color: #b2946b;\r\n    margin-bottom: 2rem;\r\n    position: relative;\r\n    padding-right: 1.5rem;\r\n        }\r\n\r\n        .section-title::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 5px;\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .charts-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            background: var(--light);\r\n            border-radius: var(--radius);\r\n            padding: 1.5rem;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        /* Timeline */\r\n        .timeline {\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin: 0 auto 4rem;\r\n        }\r\n\r\n        .timeline::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 50%;\r\n            margin-right: -2px;\r\n            border-radius: 9999px;\r\nont-family: 'aljazera';\r\n        }\r\n\r\n.timeline-content h3 {\r\n    font-family: 'aljazerabold';\r\n    color: #6d2435;\r\n}\r\n\r\n        .timeline-item {\r\n            padding: 1rem 2rem;\r\n            position: relative;\r\n            width: 50%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .timeline-item:nth-child(odd) {\r\n            right: 0;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            right: 50%;\r\n        }\r\n\r\n        .timeline-content {\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            position: relative;\r\n            border-right: 4px solid var(--secondary);\r\n        }\r\n\r\n        .timeline-year {\r\n            font-size: 1.25rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Reports Grid */\r\n        .reports-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .report-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .report-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .report-header {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-title {\r\n           font-size: 1.6rem;\r\n    font-weight: 800;\r\n    margin-bottom: 0.5rem;\r\n    font-family: 'aljazerabold';\r\n    color: #b2946b;\r\n        }\r\n\r\n        .report-body {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .report-stat-value {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .report-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .report-btn {\r\n            flex: 1;\r\n            padding: 0.75rem;\r\n            border: none;\r\n            border-radius: var(--radius);\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        /* Download Section */\r\n        .download {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border-radius: var(--radius);\r\n            padding: 3rem;\r\n            margin-bottom: 4rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .download-title {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            margin-bottom: 2rem;\r\ncolor: #fff;\r\n    font-family: 'aljazerabold';\r\n\r\n        }\r\n\r\n        .download-formats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .format-btn {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            color: white;\r\n            padding: 1rem 1.5rem;\r\n            border-radius: var(--radius);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .format-btn:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        /* Floating Buttons */\r\n        .floating-buttons {\r\n            position: fixed;\r\n            bottom: 2rem;\r\n            left: 2rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            z-index: 1000;\r\n        }\r\n\r\n        .floating-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        /* Responsive Design */\r\n        @media (max-width: 768px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .stats {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .charts-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .timeline::after {\r\n                right: 31px;\r\n            }\r\n            \r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-right: 70px;\r\n                padding-left: 25px;\r\n            }\r\n            \r\n            .timeline-item:nth-child(even) {\r\n                right: 0;\r\n            }\r\n            \r\n            .reports-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .floating-buttons {\r\n                bottom: 1rem;\r\n                left: 1rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .section-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .download {\r\n                padding: 2rem 1rem;\r\n            }\r\n        }\r\n    \r\n\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n        // Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n\r\n        // Initialize charts\r\n        let charts = {};\r\n\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeCharts();\r\n            animateNumbers();\r\n        });\r\n\r\n        function initializeCharts() {\r\n            // Projects by Sector Chart\r\n            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');\r\n            charts.projectsBySector = new Chart(projectsCtx, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],\r\n                    datasets: [{\r\n                        data: [35, 25, 20, 10, 5, 5],\r\n                        backgroundColor: [\r\n                            '#1a5fb4',\r\n                            '#10b981',\r\n                            '#e6b325',\r\n                            '#8b5cf6',\r\n                            '#f59e0b',\r\n                            '#ef4444'\r\n                        ]\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false\r\n                }\r\n            });\r\n\r\n            // Beneficiaries Growth Chart\r\n            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');\r\n            charts.beneficiariesGrowth = new Chart(growthCtx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['2020', '2021', '2022', '2023', '2024'],\r\n                    datasets: [{\r\n                        label: 'عدد المستفيدين',\r\n                        data: [25000, 45000, 75000, 105000, 125847],\r\n                        borderColor: '#1a5fb4',\r\n                        backgroundColor: 'rgba(26, 95, 180, 0.1)',\r\n                        borderWidth: 3,\r\n                        fill: true\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    scales: {\r\n                        y: {\r\n                            beginAtZero: true\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        // Animate numbers\r\n        function animateNumbers() {\r\n            const counters = document.querySelectorAll('.stat-number');\r\n            counters.forEach(counter =&gt; {\r\n                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));\r\n                const suffix = counter.textContent.replace(/[0-9,.]/g, '');\r\n                const duration = 1500;\r\n                let current = 0;\r\n                const increment = target / (duration / 16);\r\n                \r\n                const timer = setInterval(() =&gt; {\r\n                    current += increment;\r\n                    if (current &gt;= target) {\r\n                        current = target;\r\n                        clearInterval(timer);\r\n                    }\r\n                    \r\n                    let displayValue;\r\n                    if (suffix.includes('K')) {\r\n                        displayValue = (current / 1000).toFixed(1) + 'K';\r\n                    } else if (counter.textContent.includes('$')) {\r\n                        displayValue = '$' + Math.floor(current).toLocaleString();\r\n                    } else {\r\n                        displayValue = Math.floor(current).toLocaleString();\r\n                    }\r\n                    \r\n                    counter.textContent = displayValue;\r\n                }, 16);\r\n            });\r\n        }\r\n\r\n        // Utility functions\r\n        function scrollToSection(sectionId) {\r\n            const section = document.getElementById(sectionId);\r\n            if (section) {\r\n                section.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n        }\r\n\r\n        function scrollToTop() {\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n\r\n        function downloadFullReport() {\r\n            showNotification('جاري تحميل التقرير السنوي الكامل...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`جاري عرض التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`جاري تحميل التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`جاري تحميل التقارير بصيغة ${format}`);\r\n        }\r\n\r\n        function showNotification(message) {\r\n            // Create notification element\r\n            const notification = document.createElement('div');\r\n            notification.textContent = message;\r\n            notification.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                left: 20px;\r\n                background: var(--primary);\r\n                color: white;\r\n                padding: 1rem 1.5rem;\r\n                border-radius: var(--radius);\r\n                box-shadow: var(--shadow);\r\n                z-index: 1000;\r\n                animation: slideIn 0.3s ease;\r\n            `;\r\n            \r\n            document.body.appendChild(notification);\r\n            \r\n            // Remove notification after 3 seconds\r\n            setTimeout(() =&gt; {\r\n                notification.style.animation = 'slideOut 0.3s ease';\r\n                setTimeout(() =&gt; notification.remove(), 300);\r\n            }, 3000);\r\n            \r\n            // Add animation styles\r\n            if (!document.querySelector('#notification-styles')) {\r\n                const style = document.createElement('style');\r\n                style.id = 'notification-styles';\r\n                style.textContent = `\r\n                    @keyframes slideIn {\r\n                        from { transform: translateX(-100%); opacity: 0; }\r\n                        to { transform: translateX(0); opacity: 1; }\r\n                    }\r\n                    @keyframes slideOut {\r\n                        from { transform: translateX(0); opacity: 1; }\r\n                        to { transform: translateX(-100%); opacity: 0; }\r\n                    }\r\n                `;\r\n                document.head.appendChild(style);\r\n            }\r\n        }\r\n    \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"    \r\n        \r\n        \r\n            \r\n                \r\n                إنجازات \r\n            \r\n            \r\n            \r\n                تقارير وإنجازات وجدان الخيرية\r\n            \r\n            \r\n            \r\n                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.\r\n            \r\n            \r\n            \r\n                \r\n                     عرض الإحصائيات\r\n                \r\n                \r\n                     التقارير السنوية\r\n                \r\n            \r\n        \r\n    ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"},{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container","class":"aboutus takrirr"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"    \r\n        \r\n        \r\n            أبرز الإحصائيات\r\n            \r\n                \r\n                    \r\n                        \r\n                    \r\n                    125,847\r\n                    مستفيد مباشر\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    143\r\n                    مشروع إنساني\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    8\r\n                    دولة حول العالم\r\n                \r\n\r\n            \r\n        \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"        \r\n        \r\n            رحلة الإنجازات\r\n            \r\n            \r\n                \r\n                    \r\n                        2024\r\n                        توسعة العمل في دول جديدة\r\n                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        البرنامج الإغاثي الشامل\r\n                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا\r\n                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.\r\n                    \r\n                \r\n            \r\n        ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    التقارير السنوية\r\n    \r\n    \r\n        \r\n            \r\n                تقرير 2023 السنوي\r\n                يناير - ديسمبر 2023\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2023.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                تقرير 2024 السنوي\r\n                يناير - ديسمبر 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2024.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    \r\n        الملف التعريفي لجمعية وجدان الخيرية\r\n    \r\n\r\n    \r\n        <a download>\r\n            \r\n            PDF\r\n        </a>\r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in element_gva_row->render_content() (line 317 of themes/gavias_kunco/gva_content_builder/gva_row.php).

element_gva_row->render_content(Array, '		
	      
	         
	           



    
    
    
    تقارير وإنجازات | وجدان الخيرية

    
    

    
    
    
    

    
    

    
    

    
        /* CSS Variables */
        :root {
            --primary: #6d2435;
            --primary-dark: #6d2435;
            --secondary: #6d2435;
            --accent: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 1rem;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            margin-bottom: 3rem;
        }
h1.hero-title.aos-init.aos-animate {
    font-family: 'aljazerabold';
color:#fff;
}
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/sites/default/files/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    /* filter: grayscale(100%) brightness(0.5); */
}
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 4rem 0;
            text-align: center;
        }

        .hero-badge {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: rgba(178, 148, 107, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: 'aljazerabold';
}
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        /* Buttons */
        .btn {
            padding: 1rem 2rem;
            border-radius: 9999px;
            border: none;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
font-family: 'aljazerabold';
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            color: #fff;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
background: transparent;
        }

        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Charts Section */
        .charts {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 4rem;
        }

        .section-title {
          font-size: 2rem;
    font-family: 'aljazerabold';
    font-weight: 900;
    color: #b2946b;
    margin-bottom: 2rem;
    position: relative;
    padding-right: 1.5rem;
        }

        .section-title::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            border-radius: 2px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-wrapper {
            background: var(--light);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            top: 0;
            bottom: 0;
            right: 50%;
            margin-right: -2px;
            border-radius: 9999px;
ont-family: 'aljazera';
        }

.timeline-content h3 {
    font-family: 'aljazerabold';
    color: #6d2435;
}

        .timeline-item {
            padding: 1rem 2rem;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            right: 0;
        }

        .timeline-item:nth-child(even) {
            right: 50%;
        }

        .timeline-content {
            padding: 1.5rem;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            position: relative;
            border-right: 4px solid var(--secondary);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Reports Grid */
        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .report-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .report-card:hover {
            transform: translateY(-10px);
        }

        .report-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
        }

        .report-title {
           font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'aljazerabold';
    color: #b2946b;
        }

        .report-body {
            padding: 1.5rem;
        }

        .report-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .report-stat-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
        }

        .report-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .report-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Download Section */
        .download {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--radius);
            padding: 3rem;
            margin-bottom: 4rem;
            text-align: center;
        }

        .download-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 2rem;
color: #fff;
    font-family: 'aljazerabold';

        }

        .download-formats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .format-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .format-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Floating Buttons */
        .floating-buttons {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .timeline::after {
                right: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-right: 70px;
                padding-left: 25px;
            }
            
            .timeline-item:nth-child(even) {
                right: 0;
            }
            
            .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .floating-buttons {
                bottom: 1rem;
                left: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .download {
                padding: 2rem 1rem;
            }
        }
    




    
    
    
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        // Initialize charts
        let charts = {};

        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            animateNumbers();
        });

        function initializeCharts() {
            // Projects by Sector Chart
            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');
            charts.projectsBySector = new Chart(projectsCtx, {
                type: 'pie',
                data: {
                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],
                    datasets: [{
                        data: [35, 25, 20, 10, 5, 5],
                        backgroundColor: [
                            '#1a5fb4',
                            '#10b981',
                            '#e6b325',
                            '#8b5cf6',
                            '#f59e0b',
                            '#ef4444'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Beneficiaries Growth Chart
            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');
            charts.beneficiariesGrowth = new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['2020', '2021', '2022', '2023', '2024'],
                    datasets: [{
                        label: 'عدد المستفيدين',
                        data: [25000, 45000, 75000, 105000, 125847],
                        borderColor: '#1a5fb4',
                        backgroundColor: 'rgba(26, 95, 180, 0.1)',
                        borderWidth: 3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Animate numbers
        function animateNumbers() {
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter =&gt; {
                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));
                const suffix = counter.textContent.replace(/[0-9,.]/g, '');
                const duration = 1500;
                let current = 0;
                const increment = target / (duration / 16);
                
                const timer = setInterval(() =&gt; {
                    current += increment;
                    if (current &gt;= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    
                    let displayValue;
                    if (suffix.includes('K')) {
                        displayValue = (current / 1000).toFixed(1) + 'K';
                    } else if (counter.textContent.includes('$')) {
                        displayValue = '$' + Math.floor(current).toLocaleString();
                    } else {
                        displayValue = Math.floor(current).toLocaleString();
                    }
                    
                    counter.textContent = displayValue;
                }, 16);
            });
        }

        // Utility functions
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function downloadFullReport() {
            showNotification('جاري تحميل التقرير السنوي الكامل...');
        }

        function printPage() {
            window.print();
        }

        function viewReport(reportId) {
            showNotification(`جاري عرض التقرير: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`جاري تحميل التقرير: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`جاري تحميل التقارير بصيغة ${format}`);
        }

        function showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 20px;
                background: var(--primary);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() =&gt; {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() =&gt; notification.remove(), 300);
            }, 3000);
            
            // Add animation styles
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(-100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                    @keyframes slideOut {
                        from { transform: translateX(0); opacity: 1; }
                        to { transform: translateX(-100%); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    

    
        
        
            
                
                إنجازات 
            
            
            
                تقارير وإنجازات وجدان الخيرية
            
            
            
                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.
            
            
            
                
                     عرض الإحصائيات
                
                
                     التقارير السنوية
                
            
        
    	           
	         	      
	    
	   ') (Line: 110)
gavias_content_builder_render_element('gva_row', Array, '		
	      
	         
	           



    
    
    
    تقارير وإنجازات | وجدان الخيرية

    
    

    
    
    
    

    
    

    
    

    
        /* CSS Variables */
        :root {
            --primary: #6d2435;
            --primary-dark: #6d2435;
            --secondary: #6d2435;
            --accent: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --radius: 1rem;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            margin-bottom: 3rem;
        }
h1.hero-title.aos-init.aos-animate {
    font-family: 'aljazerabold';
color:#fff;
}
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(/sites/default/files/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    /* filter: grayscale(100%) brightness(0.5); */
}
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 4rem 0;
            text-align: center;
        }

        .hero-badge {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: rgba(178, 148, 107, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: 'aljazerabold';
}
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        /* Buttons */
        .btn {
            padding: 1rem 2rem;
            border-radius: 9999px;
            border: none;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
font-family: 'aljazerabold';
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            color: #fff;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
background: transparent;
        }

        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .stat-card {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Charts Section */
        .charts {
            background: white;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 4rem;
        }

        .section-title {
          font-size: 2rem;
    font-family: 'aljazerabold';
    font-weight: 900;
    color: #b2946b;
    margin-bottom: 2rem;
    position: relative;
    padding-right: 1.5rem;
        }

        .section-title::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);
            border-radius: 2px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-wrapper {
            background: var(--light);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Timeline */
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto 4rem;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            top: 0;
            bottom: 0;
            right: 50%;
            margin-right: -2px;
            border-radius: 9999px;
ont-family: 'aljazera';
        }

.timeline-content h3 {
    font-family: 'aljazerabold';
    color: #6d2435;
}

        .timeline-item {
            padding: 1rem 2rem;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item:nth-child(odd) {
            right: 0;
        }

        .timeline-item:nth-child(even) {
            right: 50%;
        }

        .timeline-content {
            padding: 1.5rem;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            position: relative;
            border-right: 4px solid var(--secondary);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        /* Reports Grid */
        .reports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .report-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .report-card:hover {
            transform: translateY(-10px);
        }

        .report-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
        }

        .report-title {
           font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    font-family: 'aljazerabold';
    color: #b2946b;
        }

        .report-body {
            padding: 1.5rem;
        }

        .report-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .report-stat-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
        }

        .report-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .report-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: var(--radius);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Download Section */
        .download {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--radius);
            padding: 3rem;
            margin-bottom: 4rem;
            text-align: center;
        }

        .download-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 2rem;
color: #fff;
    font-family: 'aljazerabold';

        }

        .download-formats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .format-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .format-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Floating Buttons */
        .floating-buttons {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .timeline::after {
                right: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-right: 70px;
                padding-left: 25px;
            }
            
            .timeline-item:nth-child(even) {
                right: 0;
            }
            
            .reports-grid {
                grid-template-columns: 1fr;
            }
            
            .floating-buttons {
                bottom: 1rem;
                left: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .download {
                padding: 2rem 1rem;
            }
        }
    




    
    
    
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        // Initialize charts
        let charts = {};

        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            animateNumbers();
        });

        function initializeCharts() {
            // Projects by Sector Chart
            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');
            charts.projectsBySector = new Chart(projectsCtx, {
                type: 'pie',
                data: {
                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],
                    datasets: [{
                        data: [35, 25, 20, 10, 5, 5],
                        backgroundColor: [
                            '#1a5fb4',
                            '#10b981',
                            '#e6b325',
                            '#8b5cf6',
                            '#f59e0b',
                            '#ef4444'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // Beneficiaries Growth Chart
            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');
            charts.beneficiariesGrowth = new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['2020', '2021', '2022', '2023', '2024'],
                    datasets: [{
                        label: 'عدد المستفيدين',
                        data: [25000, 45000, 75000, 105000, 125847],
                        borderColor: '#1a5fb4',
                        backgroundColor: 'rgba(26, 95, 180, 0.1)',
                        borderWidth: 3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Animate numbers
        function animateNumbers() {
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter =&gt; {
                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));
                const suffix = counter.textContent.replace(/[0-9,.]/g, '');
                const duration = 1500;
                let current = 0;
                const increment = target / (duration / 16);
                
                const timer = setInterval(() =&gt; {
                    current += increment;
                    if (current &gt;= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    
                    let displayValue;
                    if (suffix.includes('K')) {
                        displayValue = (current / 1000).toFixed(1) + 'K';
                    } else if (counter.textContent.includes('$')) {
                        displayValue = '$' + Math.floor(current).toLocaleString();
                    } else {
                        displayValue = Math.floor(current).toLocaleString();
                    }
                    
                    counter.textContent = displayValue;
                }, 16);
            });
        }

        // Utility functions
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function downloadFullReport() {
            showNotification('جاري تحميل التقرير السنوي الكامل...');
        }

        function printPage() {
            window.print();
        }

        function viewReport(reportId) {
            showNotification(`جاري عرض التقرير: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`جاري تحميل التقرير: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`جاري تحميل التقارير بصيغة ${format}`);
        }

        function showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 20px;
                background: var(--primary);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() =&gt; {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() =&gt; notification.remove(), 300);
            }, 3000);
            
            // Add animation styles
            if (!document.querySelector('#notification-styles')) {
                const style = document.createElement('style');
                style.id = 'notification-styles';
                style.textContent = `
                    @keyframes slideIn {
                        from { transform: translateX(-100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                    @keyframes slideOut {
                        from { transform: translateX(0); opacity: 1; }
                        to { transform: translateX(-100%); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
    

    
        
        
            
                
                إنجازات 
            
            
            
                تقارير وإنجازات وجدان الخيرية
            
            
            
                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.
            
            
            
                
                     عرض الإحصائيات
                
                
                     التقارير السنوية
                
            
        
    	           
	         	      
	    
	   ') (Line: 62)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n    تقارير وإنجازات | وجدان الخيرية\r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n        /* CSS Variables */\r\n        :root {\r\n            --primary: #6d2435;\r\n            --primary-dark: #6d2435;\r\n            --secondary: #6d2435;\r\n            --accent: #10b981;\r\n            --dark: #1e293b;\r\n            --light: #f8fafc;\r\n            --gray: #64748b;\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --radius: 1rem;\r\n            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        /* Base Styles */\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            color: var(--dark);\r\n            line-height: 1.7;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        /* Container */\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 1.5rem;\r\n        }\r\n\r\n        /* Hero Section */\r\n        .hero {\r\n            position: relative;\r\n            min-height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n            color: white;\r\n            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\r\n            margin-bottom: 3rem;\r\n        }\r\nh1.hero-title.aos-init.aos-animate {\r\n    font-family: 'aljazerabold';\r\ncolor:#fff;\r\n}\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/sites/default/files/hero-bg.jpg);\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    opacity: 0.15;\r\n    /* filter: grayscale(100%) brightness(0.5); */\r\n}\r\n        .hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            padding: 4rem 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .hero-badge {\r\n       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n    background-color: rgba(178, 148, 107, 0.8);\r\n    backdrop-filter: blur(4px);\r\n    color: white;\r\n    padding: 0.25rem 1rem;\r\n    border-radius: 9999px;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    display: inline-block;\r\n    font-family: 'aljazerabold';\r\n}\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 900;\r\n            line-height: 1.1;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.25rem;\r\n            opacity: 0.9;\r\n            max-width: 800px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n\r\n        /* Buttons */\r\n        .btn {\r\n            padding: 1rem 2rem;\r\n            border-radius: 9999px;\r\n            border: none;\r\n            font-weight: 900;\r\n            cursor: pointer;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition);\r\nfont-family: 'aljazerabold';\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            color: white;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--shadow);\r\nbackground: transparent;\r\n        }\r\n\r\n        /* Stats Section */\r\n        .stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .stat-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1rem;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Charts Section */\r\n        .charts {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .section-title {\r\n          font-size: 2rem;\r\n    font-family: 'aljazerabold';\r\n    font-weight: 900;\r\n    color: #b2946b;\r\n    margin-bottom: 2rem;\r\n    position: relative;\r\n    padding-right: 1.5rem;\r\n        }\r\n\r\n        .section-title::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 5px;\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .charts-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            background: var(--light);\r\n            border-radius: var(--radius);\r\n            padding: 1.5rem;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        /* Timeline */\r\n        .timeline {\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin: 0 auto 4rem;\r\n        }\r\n\r\n        .timeline::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 50%;\r\n            margin-right: -2px;\r\n            border-radius: 9999px;\r\nont-family: 'aljazera';\r\n        }\r\n\r\n.timeline-content h3 {\r\n    font-family: 'aljazerabold';\r\n    color: #6d2435;\r\n}\r\n\r\n        .timeline-item {\r\n            padding: 1rem 2rem;\r\n            position: relative;\r\n            width: 50%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .timeline-item:nth-child(odd) {\r\n            right: 0;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            right: 50%;\r\n        }\r\n\r\n        .timeline-content {\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            position: relative;\r\n            border-right: 4px solid var(--secondary);\r\n        }\r\n\r\n        .timeline-year {\r\n            font-size: 1.25rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Reports Grid */\r\n        .reports-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .report-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .report-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .report-header {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-title {\r\n           font-size: 1.6rem;\r\n    font-weight: 800;\r\n    margin-bottom: 0.5rem;\r\n    font-family: 'aljazerabold';\r\n    color: #b2946b;\r\n        }\r\n\r\n        .report-body {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .report-stat-value {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .report-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .report-btn {\r\n            flex: 1;\r\n            padding: 0.75rem;\r\n            border: none;\r\n            border-radius: var(--radius);\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        /* Download Section */\r\n        .download {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border-radius: var(--radius);\r\n            padding: 3rem;\r\n            margin-bottom: 4rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .download-title {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            margin-bottom: 2rem;\r\ncolor: #fff;\r\n    font-family: 'aljazerabold';\r\n\r\n        }\r\n\r\n        .download-formats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .format-btn {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            color: white;\r\n            padding: 1rem 1.5rem;\r\n            border-radius: var(--radius);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .format-btn:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        /* Floating Buttons */\r\n        .floating-buttons {\r\n            position: fixed;\r\n            bottom: 2rem;\r\n            left: 2rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            z-index: 1000;\r\n        }\r\n\r\n        .floating-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        /* Responsive Design */\r\n        @media (max-width: 768px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .stats {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .charts-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .timeline::after {\r\n                right: 31px;\r\n            }\r\n            \r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-right: 70px;\r\n                padding-left: 25px;\r\n            }\r\n            \r\n            .timeline-item:nth-child(even) {\r\n                right: 0;\r\n            }\r\n            \r\n            .reports-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .floating-buttons {\r\n                bottom: 1rem;\r\n                left: 1rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .section-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .download {\r\n                padding: 2rem 1rem;\r\n            }\r\n        }\r\n    \r\n\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n        // Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n\r\n        // Initialize charts\r\n        let charts = {};\r\n\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeCharts();\r\n            animateNumbers();\r\n        });\r\n\r\n        function initializeCharts() {\r\n            // Projects by Sector Chart\r\n            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');\r\n            charts.projectsBySector = new Chart(projectsCtx, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],\r\n                    datasets: [{\r\n                        data: [35, 25, 20, 10, 5, 5],\r\n                        backgroundColor: [\r\n                            '#1a5fb4',\r\n                            '#10b981',\r\n                            '#e6b325',\r\n                            '#8b5cf6',\r\n                            '#f59e0b',\r\n                            '#ef4444'\r\n                        ]\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false\r\n                }\r\n            });\r\n\r\n            // Beneficiaries Growth Chart\r\n            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');\r\n            charts.beneficiariesGrowth = new Chart(growthCtx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['2020', '2021', '2022', '2023', '2024'],\r\n                    datasets: [{\r\n                        label: 'عدد المستفيدين',\r\n                        data: [25000, 45000, 75000, 105000, 125847],\r\n                        borderColor: '#1a5fb4',\r\n                        backgroundColor: 'rgba(26, 95, 180, 0.1)',\r\n                        borderWidth: 3,\r\n                        fill: true\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    scales: {\r\n                        y: {\r\n                            beginAtZero: true\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        // Animate numbers\r\n        function animateNumbers() {\r\n            const counters = document.querySelectorAll('.stat-number');\r\n            counters.forEach(counter =&gt; {\r\n                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));\r\n                const suffix = counter.textContent.replace(/[0-9,.]/g, '');\r\n                const duration = 1500;\r\n                let current = 0;\r\n                const increment = target / (duration / 16);\r\n                \r\n                const timer = setInterval(() =&gt; {\r\n                    current += increment;\r\n                    if (current &gt;= target) {\r\n                        current = target;\r\n                        clearInterval(timer);\r\n                    }\r\n                    \r\n                    let displayValue;\r\n                    if (suffix.includes('K')) {\r\n                        displayValue = (current / 1000).toFixed(1) + 'K';\r\n                    } else if (counter.textContent.includes('$')) {\r\n                        displayValue = '$' + Math.floor(current).toLocaleString();\r\n                    } else {\r\n                        displayValue = Math.floor(current).toLocaleString();\r\n                    }\r\n                    \r\n                    counter.textContent = displayValue;\r\n                }, 16);\r\n            });\r\n        }\r\n\r\n        // Utility functions\r\n        function scrollToSection(sectionId) {\r\n            const section = document.getElementById(sectionId);\r\n            if (section) {\r\n                section.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n        }\r\n\r\n        function scrollToTop() {\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n\r\n        function downloadFullReport() {\r\n            showNotification('جاري تحميل التقرير السنوي الكامل...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`جاري عرض التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`جاري تحميل التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`جاري تحميل التقارير بصيغة ${format}`);\r\n        }\r\n\r\n        function showNotification(message) {\r\n            // Create notification element\r\n            const notification = document.createElement('div');\r\n            notification.textContent = message;\r\n            notification.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                left: 20px;\r\n                background: var(--primary);\r\n                color: white;\r\n                padding: 1rem 1.5rem;\r\n                border-radius: var(--radius);\r\n                box-shadow: var(--shadow);\r\n                z-index: 1000;\r\n                animation: slideIn 0.3s ease;\r\n            `;\r\n            \r\n            document.body.appendChild(notification);\r\n            \r\n            // Remove notification after 3 seconds\r\n            setTimeout(() =&gt; {\r\n                notification.style.animation = 'slideOut 0.3s ease';\r\n                setTimeout(() =&gt; notification.remove(), 300);\r\n            }, 3000);\r\n            \r\n            // Add animation styles\r\n            if (!document.querySelector('#notification-styles')) {\r\n                const style = document.createElement('style');\r\n                style.id = 'notification-styles';\r\n                style.textContent = `\r\n                    @keyframes slideIn {\r\n                        from { transform: translateX(-100%); opacity: 0; }\r\n                        to { transform: translateX(0); opacity: 1; }\r\n                    }\r\n                    @keyframes slideOut {\r\n                        from { transform: translateX(0); opacity: 1; }\r\n                        to { transform: translateX(-100%); opacity: 0; }\r\n                    }\r\n                `;\r\n                document.head.appendChild(style);\r\n            }\r\n        }\r\n    \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"    \r\n        \r\n        \r\n            \r\n                \r\n                إنجازات \r\n            \r\n            \r\n            \r\n                تقارير وإنجازات وجدان الخيرية\r\n            \r\n            \r\n            \r\n                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.\r\n            \r\n            \r\n            \r\n                \r\n                     عرض الإحصائيات\r\n                \r\n                \r\n                     التقارير السنوية\r\n                \r\n            \r\n        \r\n    ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"},{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container","class":"aboutus takrirr"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"    \r\n        \r\n        \r\n            أبرز الإحصائيات\r\n            \r\n                \r\n                    \r\n                        \r\n                    \r\n                    125,847\r\n                    مستفيد مباشر\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    143\r\n                    مشروع إنساني\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    8\r\n                    دولة حول العالم\r\n                \r\n\r\n            \r\n        \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"        \r\n        \r\n            رحلة الإنجازات\r\n            \r\n            \r\n                \r\n                    \r\n                        2024\r\n                        توسعة العمل في دول جديدة\r\n                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        البرنامج الإغاثي الشامل\r\n                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا\r\n                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.\r\n                    \r\n                \r\n            \r\n        ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    التقارير السنوية\r\n    \r\n    \r\n        \r\n            \r\n                تقرير 2023 السنوي\r\n                يناير - ديسمبر 2023\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2023.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                تقرير 2024 السنوي\r\n                يناير - ديسمبر 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2024.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    \r\n        الملف التعريفي لجمعية وجدان الخيرية\r\n    \r\n\r\n    \r\n        <a download>\r\n            \r\n            PDF\r\n        </a>\r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

element_gva_column->render_content(Array, '    
        
        
            أبرز الإحصائيات
            
                
                    
                        
                    
                    125,847
                    مستفيد مباشر
                

                
                    
                        
                    
                    143
                    مشروع إنساني
                

                
                    
                        
                    
                    8
                    دولة حول العالم
                

            
        
        
        
            رحلة الإنجازات
            
            
                
                    
                        2024
                        توسعة العمل في دول جديدة
                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.
                    
                

                
                    
                        2023
                        البرنامج الإغاثي الشامل
                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.
                    
                

                
                    
                        2023
                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا
                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.
                    
                
            
        

    التقارير السنوية
    
    
        
            
                تقرير 2023 السنوي
                يناير - ديسمبر 2023
            
            
                
                    
                        143
                        مشروع
                    
                    
                        
                        
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2023.
                
                    <a href="https://drive.google.com/file/d/1RK_ADwUcATzgP0D5c9pk3s_pXZtqGFFT/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        

        
            
                تقرير 2024 السنوي
                يناير - ديسمبر 2024
            
            
                
                    
                        143
                        مشروع
                    
                    
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2024.
                
                    <a href="https://drive.google.com/file/d/16H-tITFvkHQpviNG0HTqHSfhhAdU5fcZ/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        
            
        
    


    
        الملف التعريفي لجمعية وجدان الخيرية
    

    
        <a href="https://drive.google.com/file/d/1dx5VokJHEhs7SXtnc5S70aEEHXcyDEeG/view?usp=sharing" class="format-btn" download>
            
            PDF
        </a>
    
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '    
        
        
            أبرز الإحصائيات
            
                
                    
                        
                    
                    125,847
                    مستفيد مباشر
                

                
                    
                        
                    
                    143
                    مشروع إنساني
                

                
                    
                        
                    
                    8
                    دولة حول العالم
                

            
        
        
        
            رحلة الإنجازات
            
            
                
                    
                        2024
                        توسعة العمل في دول جديدة
                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.
                    
                

                
                    
                        2023
                        البرنامج الإغاثي الشامل
                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.
                    
                

                
                    
                        2023
                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا
                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.
                    
                
            
        

    التقارير السنوية
    
    
        
            
                تقرير 2023 السنوي
                يناير - ديسمبر 2023
            
            
                
                    
                        143
                        مشروع
                    
                    
                        
                        
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2023.
                
                    <a href="https://drive.google.com/file/d/1RK_ADwUcATzgP0D5c9pk3s_pXZtqGFFT/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        

        
            
                تقرير 2024 السنوي
                يناير - ديسمبر 2024
            
            
                
                    
                        143
                        مشروع
                    
                    
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2024.
                
                    <a href="https://drive.google.com/file/d/16H-tITFvkHQpviNG0HTqHSfhhAdU5fcZ/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        
            
        
    


    
        الملف التعريفي لجمعية وجدان الخيرية
    

    
        <a href="https://drive.google.com/file/d/1dx5VokJHEhs7SXtnc5S70aEEHXcyDEeG/view?usp=sharing" class="format-btn" download>
            
            PDF
        </a>
    
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n    تقارير وإنجازات | وجدان الخيرية\r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n        /* CSS Variables */\r\n        :root {\r\n            --primary: #6d2435;\r\n            --primary-dark: #6d2435;\r\n            --secondary: #6d2435;\r\n            --accent: #10b981;\r\n            --dark: #1e293b;\r\n            --light: #f8fafc;\r\n            --gray: #64748b;\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --radius: 1rem;\r\n            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        /* Base Styles */\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            color: var(--dark);\r\n            line-height: 1.7;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        /* Container */\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 1.5rem;\r\n        }\r\n\r\n        /* Hero Section */\r\n        .hero {\r\n            position: relative;\r\n            min-height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n            color: white;\r\n            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\r\n            margin-bottom: 3rem;\r\n        }\r\nh1.hero-title.aos-init.aos-animate {\r\n    font-family: 'aljazerabold';\r\ncolor:#fff;\r\n}\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/sites/default/files/hero-bg.jpg);\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    opacity: 0.15;\r\n    /* filter: grayscale(100%) brightness(0.5); */\r\n}\r\n        .hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            padding: 4rem 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .hero-badge {\r\n       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n    background-color: rgba(178, 148, 107, 0.8);\r\n    backdrop-filter: blur(4px);\r\n    color: white;\r\n    padding: 0.25rem 1rem;\r\n    border-radius: 9999px;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    display: inline-block;\r\n    font-family: 'aljazerabold';\r\n}\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 900;\r\n            line-height: 1.1;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.25rem;\r\n            opacity: 0.9;\r\n            max-width: 800px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n\r\n        /* Buttons */\r\n        .btn {\r\n            padding: 1rem 2rem;\r\n            border-radius: 9999px;\r\n            border: none;\r\n            font-weight: 900;\r\n            cursor: pointer;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition);\r\nfont-family: 'aljazerabold';\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            color: white;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--shadow);\r\nbackground: transparent;\r\n        }\r\n\r\n        /* Stats Section */\r\n        .stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .stat-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1rem;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Charts Section */\r\n        .charts {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .section-title {\r\n          font-size: 2rem;\r\n    font-family: 'aljazerabold';\r\n    font-weight: 900;\r\n    color: #b2946b;\r\n    margin-bottom: 2rem;\r\n    position: relative;\r\n    padding-right: 1.5rem;\r\n        }\r\n\r\n        .section-title::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 5px;\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .charts-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            background: var(--light);\r\n            border-radius: var(--radius);\r\n            padding: 1.5rem;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        /* Timeline */\r\n        .timeline {\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin: 0 auto 4rem;\r\n        }\r\n\r\n        .timeline::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 50%;\r\n            margin-right: -2px;\r\n            border-radius: 9999px;\r\nont-family: 'aljazera';\r\n        }\r\n\r\n.timeline-content h3 {\r\n    font-family: 'aljazerabold';\r\n    color: #6d2435;\r\n}\r\n\r\n        .timeline-item {\r\n            padding: 1rem 2rem;\r\n            position: relative;\r\n            width: 50%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .timeline-item:nth-child(odd) {\r\n            right: 0;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            right: 50%;\r\n        }\r\n\r\n        .timeline-content {\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            position: relative;\r\n            border-right: 4px solid var(--secondary);\r\n        }\r\n\r\n        .timeline-year {\r\n            font-size: 1.25rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Reports Grid */\r\n        .reports-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .report-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .report-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .report-header {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-title {\r\n           font-size: 1.6rem;\r\n    font-weight: 800;\r\n    margin-bottom: 0.5rem;\r\n    font-family: 'aljazerabold';\r\n    color: #b2946b;\r\n        }\r\n\r\n        .report-body {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .report-stat-value {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .report-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .report-btn {\r\n            flex: 1;\r\n            padding: 0.75rem;\r\n            border: none;\r\n            border-radius: var(--radius);\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        /* Download Section */\r\n        .download {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border-radius: var(--radius);\r\n            padding: 3rem;\r\n            margin-bottom: 4rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .download-title {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            margin-bottom: 2rem;\r\ncolor: #fff;\r\n    font-family: 'aljazerabold';\r\n\r\n        }\r\n\r\n        .download-formats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .format-btn {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            color: white;\r\n            padding: 1rem 1.5rem;\r\n            border-radius: var(--radius);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .format-btn:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        /* Floating Buttons */\r\n        .floating-buttons {\r\n            position: fixed;\r\n            bottom: 2rem;\r\n            left: 2rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            z-index: 1000;\r\n        }\r\n\r\n        .floating-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        /* Responsive Design */\r\n        @media (max-width: 768px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .stats {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .charts-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .timeline::after {\r\n                right: 31px;\r\n            }\r\n            \r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-right: 70px;\r\n                padding-left: 25px;\r\n            }\r\n            \r\n            .timeline-item:nth-child(even) {\r\n                right: 0;\r\n            }\r\n            \r\n            .reports-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .floating-buttons {\r\n                bottom: 1rem;\r\n                left: 1rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .section-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .download {\r\n                padding: 2rem 1rem;\r\n            }\r\n        }\r\n    \r\n\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n        // Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n\r\n        // Initialize charts\r\n        let charts = {};\r\n\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeCharts();\r\n            animateNumbers();\r\n        });\r\n\r\n        function initializeCharts() {\r\n            // Projects by Sector Chart\r\n            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');\r\n            charts.projectsBySector = new Chart(projectsCtx, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],\r\n                    datasets: [{\r\n                        data: [35, 25, 20, 10, 5, 5],\r\n                        backgroundColor: [\r\n                            '#1a5fb4',\r\n                            '#10b981',\r\n                            '#e6b325',\r\n                            '#8b5cf6',\r\n                            '#f59e0b',\r\n                            '#ef4444'\r\n                        ]\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false\r\n                }\r\n            });\r\n\r\n            // Beneficiaries Growth Chart\r\n            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');\r\n            charts.beneficiariesGrowth = new Chart(growthCtx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['2020', '2021', '2022', '2023', '2024'],\r\n                    datasets: [{\r\n                        label: 'عدد المستفيدين',\r\n                        data: [25000, 45000, 75000, 105000, 125847],\r\n                        borderColor: '#1a5fb4',\r\n                        backgroundColor: 'rgba(26, 95, 180, 0.1)',\r\n                        borderWidth: 3,\r\n                        fill: true\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    scales: {\r\n                        y: {\r\n                            beginAtZero: true\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        // Animate numbers\r\n        function animateNumbers() {\r\n            const counters = document.querySelectorAll('.stat-number');\r\n            counters.forEach(counter =&gt; {\r\n                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));\r\n                const suffix = counter.textContent.replace(/[0-9,.]/g, '');\r\n                const duration = 1500;\r\n                let current = 0;\r\n                const increment = target / (duration / 16);\r\n                \r\n                const timer = setInterval(() =&gt; {\r\n                    current += increment;\r\n                    if (current &gt;= target) {\r\n                        current = target;\r\n                        clearInterval(timer);\r\n                    }\r\n                    \r\n                    let displayValue;\r\n                    if (suffix.includes('K')) {\r\n                        displayValue = (current / 1000).toFixed(1) + 'K';\r\n                    } else if (counter.textContent.includes('$')) {\r\n                        displayValue = '$' + Math.floor(current).toLocaleString();\r\n                    } else {\r\n                        displayValue = Math.floor(current).toLocaleString();\r\n                    }\r\n                    \r\n                    counter.textContent = displayValue;\r\n                }, 16);\r\n            });\r\n        }\r\n\r\n        // Utility functions\r\n        function scrollToSection(sectionId) {\r\n            const section = document.getElementById(sectionId);\r\n            if (section) {\r\n                section.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n        }\r\n\r\n        function scrollToTop() {\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n\r\n        function downloadFullReport() {\r\n            showNotification('جاري تحميل التقرير السنوي الكامل...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`جاري عرض التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`جاري تحميل التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`جاري تحميل التقارير بصيغة ${format}`);\r\n        }\r\n\r\n        function showNotification(message) {\r\n            // Create notification element\r\n            const notification = document.createElement('div');\r\n            notification.textContent = message;\r\n            notification.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                left: 20px;\r\n                background: var(--primary);\r\n                color: white;\r\n                padding: 1rem 1.5rem;\r\n                border-radius: var(--radius);\r\n                box-shadow: var(--shadow);\r\n                z-index: 1000;\r\n                animation: slideIn 0.3s ease;\r\n            `;\r\n            \r\n            document.body.appendChild(notification);\r\n            \r\n            // Remove notification after 3 seconds\r\n            setTimeout(() =&gt; {\r\n                notification.style.animation = 'slideOut 0.3s ease';\r\n                setTimeout(() =&gt; notification.remove(), 300);\r\n            }, 3000);\r\n            \r\n            // Add animation styles\r\n            if (!document.querySelector('#notification-styles')) {\r\n                const style = document.createElement('style');\r\n                style.id = 'notification-styles';\r\n                style.textContent = `\r\n                    @keyframes slideIn {\r\n                        from { transform: translateX(-100%); opacity: 0; }\r\n                        to { transform: translateX(0); opacity: 1; }\r\n                    }\r\n                    @keyframes slideOut {\r\n                        from { transform: translateX(0); opacity: 1; }\r\n                        to { transform: translateX(-100%); opacity: 0; }\r\n                    }\r\n                `;\r\n                document.head.appendChild(style);\r\n            }\r\n        }\r\n    \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"    \r\n        \r\n        \r\n            \r\n                \r\n                إنجازات \r\n            \r\n            \r\n            \r\n                تقارير وإنجازات وجدان الخيرية\r\n            \r\n            \r\n            \r\n                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.\r\n            \r\n            \r\n            \r\n                \r\n                     عرض الإحصائيات\r\n                \r\n                \r\n                     التقارير السنوية\r\n                \r\n            \r\n        \r\n    ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"},{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container","class":"aboutus takrirr"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"    \r\n        \r\n        \r\n            أبرز الإحصائيات\r\n            \r\n                \r\n                    \r\n                        \r\n                    \r\n                    125,847\r\n                    مستفيد مباشر\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    143\r\n                    مشروع إنساني\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    8\r\n                    دولة حول العالم\r\n                \r\n\r\n            \r\n        \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"        \r\n        \r\n            رحلة الإنجازات\r\n            \r\n            \r\n                \r\n                    \r\n                        2024\r\n                        توسعة العمل في دول جديدة\r\n                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        البرنامج الإغاثي الشامل\r\n                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا\r\n                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.\r\n                    \r\n                \r\n            \r\n        ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    التقارير السنوية\r\n    \r\n    \r\n        \r\n            \r\n                تقرير 2023 السنوي\r\n                يناير - ديسمبر 2023\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2023.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                تقرير 2024 السنوي\r\n                يناير - ديسمبر 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2024.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    \r\n        الملف التعريفي لجمعية وجدان الخيرية\r\n    \r\n\r\n    \r\n        <a download>\r\n            \r\n            PDF\r\n        </a>\r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

element_gva_column->render_content(Array, '    
        
        
            أبرز الإحصائيات
            
                
                    
                        
                    
                    125,847
                    مستفيد مباشر
                

                
                    
                        
                    
                    143
                    مشروع إنساني
                

                
                    
                        
                    
                    8
                    دولة حول العالم
                

            
        
        
        
            رحلة الإنجازات
            
            
                
                    
                        2024
                        توسعة العمل في دول جديدة
                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.
                    
                

                
                    
                        2023
                        البرنامج الإغاثي الشامل
                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.
                    
                

                
                    
                        2023
                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا
                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.
                    
                
            
        

    التقارير السنوية
    
    
        
            
                تقرير 2023 السنوي
                يناير - ديسمبر 2023
            
            
                
                    
                        143
                        مشروع
                    
                    
                        
                        
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2023.
                
                    <a href="https://drive.google.com/file/d/1RK_ADwUcATzgP0D5c9pk3s_pXZtqGFFT/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        

        
            
                تقرير 2024 السنوي
                يناير - ديسمبر 2024
            
            
                
                    
                        143
                        مشروع
                    
                    
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2024.
                
                    <a href="https://drive.google.com/file/d/16H-tITFvkHQpviNG0HTqHSfhhAdU5fcZ/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        
            
        
    


    
        الملف التعريفي لجمعية وجدان الخيرية
    

    
        <a href="https://drive.google.com/file/d/1dx5VokJHEhs7SXtnc5S70aEEHXcyDEeG/view?usp=sharing" class="format-btn" download>
            
            PDF
        </a>
    
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '    
        
        
            أبرز الإحصائيات
            
                
                    
                        
                    
                    125,847
                    مستفيد مباشر
                

                
                    
                        
                    
                    143
                    مشروع إنساني
                

                
                    
                        
                    
                    8
                    دولة حول العالم
                

            
        
        
        
            رحلة الإنجازات
            
            
                
                    
                        2024
                        توسعة العمل في دول جديدة
                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.
                    
                

                
                    
                        2023
                        البرنامج الإغاثي الشامل
                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.
                    
                

                
                    
                        2023
                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا
                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.
                    
                
            
        

    التقارير السنوية
    
    
        
            
                تقرير 2023 السنوي
                يناير - ديسمبر 2023
            
            
                
                    
                        143
                        مشروع
                    
                    
                        
                        
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2023.
                
                    <a href="https://drive.google.com/file/d/1RK_ADwUcATzgP0D5c9pk3s_pXZtqGFFT/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        

        
            
                تقرير 2024 السنوي
                يناير - ديسمبر 2024
            
            
                
                    
                        143
                        مشروع
                    
                    
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2024.
                
                    <a href="https://drive.google.com/file/d/16H-tITFvkHQpviNG0HTqHSfhhAdU5fcZ/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        
            
        
    


    
        الملف التعريفي لجمعية وجدان الخيرية
    

    
        <a href="https://drive.google.com/file/d/1dx5VokJHEhs7SXtnc5S70aEEHXcyDEeG/view?usp=sharing" class="format-btn" download>
            
            PDF
        </a>
    
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n    تقارير وإنجازات | وجدان الخيرية\r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n        /* CSS Variables */\r\n        :root {\r\n            --primary: #6d2435;\r\n            --primary-dark: #6d2435;\r\n            --secondary: #6d2435;\r\n            --accent: #10b981;\r\n            --dark: #1e293b;\r\n            --light: #f8fafc;\r\n            --gray: #64748b;\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --radius: 1rem;\r\n            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        /* Base Styles */\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            color: var(--dark);\r\n            line-height: 1.7;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        /* Container */\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 1.5rem;\r\n        }\r\n\r\n        /* Hero Section */\r\n        .hero {\r\n            position: relative;\r\n            min-height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n            color: white;\r\n            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\r\n            margin-bottom: 3rem;\r\n        }\r\nh1.hero-title.aos-init.aos-animate {\r\n    font-family: 'aljazerabold';\r\ncolor:#fff;\r\n}\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/sites/default/files/hero-bg.jpg);\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    opacity: 0.15;\r\n    /* filter: grayscale(100%) brightness(0.5); */\r\n}\r\n        .hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            padding: 4rem 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .hero-badge {\r\n       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n    background-color: rgba(178, 148, 107, 0.8);\r\n    backdrop-filter: blur(4px);\r\n    color: white;\r\n    padding: 0.25rem 1rem;\r\n    border-radius: 9999px;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    display: inline-block;\r\n    font-family: 'aljazerabold';\r\n}\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 900;\r\n            line-height: 1.1;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.25rem;\r\n            opacity: 0.9;\r\n            max-width: 800px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n\r\n        /* Buttons */\r\n        .btn {\r\n            padding: 1rem 2rem;\r\n            border-radius: 9999px;\r\n            border: none;\r\n            font-weight: 900;\r\n            cursor: pointer;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition);\r\nfont-family: 'aljazerabold';\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            color: white;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--shadow);\r\nbackground: transparent;\r\n        }\r\n\r\n        /* Stats Section */\r\n        .stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .stat-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1rem;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Charts Section */\r\n        .charts {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .section-title {\r\n          font-size: 2rem;\r\n    font-family: 'aljazerabold';\r\n    font-weight: 900;\r\n    color: #b2946b;\r\n    margin-bottom: 2rem;\r\n    position: relative;\r\n    padding-right: 1.5rem;\r\n        }\r\n\r\n        .section-title::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 5px;\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .charts-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            background: var(--light);\r\n            border-radius: var(--radius);\r\n            padding: 1.5rem;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        /* Timeline */\r\n        .timeline {\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin: 0 auto 4rem;\r\n        }\r\n\r\n        .timeline::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 50%;\r\n            margin-right: -2px;\r\n            border-radius: 9999px;\r\nont-family: 'aljazera';\r\n        }\r\n\r\n.timeline-content h3 {\r\n    font-family: 'aljazerabold';\r\n    color: #6d2435;\r\n}\r\n\r\n        .timeline-item {\r\n            padding: 1rem 2rem;\r\n            position: relative;\r\n            width: 50%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .timeline-item:nth-child(odd) {\r\n            right: 0;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            right: 50%;\r\n        }\r\n\r\n        .timeline-content {\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            position: relative;\r\n            border-right: 4px solid var(--secondary);\r\n        }\r\n\r\n        .timeline-year {\r\n            font-size: 1.25rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Reports Grid */\r\n        .reports-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .report-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .report-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .report-header {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-title {\r\n           font-size: 1.6rem;\r\n    font-weight: 800;\r\n    margin-bottom: 0.5rem;\r\n    font-family: 'aljazerabold';\r\n    color: #b2946b;\r\n        }\r\n\r\n        .report-body {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .report-stat-value {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .report-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .report-btn {\r\n            flex: 1;\r\n            padding: 0.75rem;\r\n            border: none;\r\n            border-radius: var(--radius);\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        /* Download Section */\r\n        .download {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border-radius: var(--radius);\r\n            padding: 3rem;\r\n            margin-bottom: 4rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .download-title {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            margin-bottom: 2rem;\r\ncolor: #fff;\r\n    font-family: 'aljazerabold';\r\n\r\n        }\r\n\r\n        .download-formats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .format-btn {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            color: white;\r\n            padding: 1rem 1.5rem;\r\n            border-radius: var(--radius);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .format-btn:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        /* Floating Buttons */\r\n        .floating-buttons {\r\n            position: fixed;\r\n            bottom: 2rem;\r\n            left: 2rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            z-index: 1000;\r\n        }\r\n\r\n        .floating-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        /* Responsive Design */\r\n        @media (max-width: 768px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .stats {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .charts-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .timeline::after {\r\n                right: 31px;\r\n            }\r\n            \r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-right: 70px;\r\n                padding-left: 25px;\r\n            }\r\n            \r\n            .timeline-item:nth-child(even) {\r\n                right: 0;\r\n            }\r\n            \r\n            .reports-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .floating-buttons {\r\n                bottom: 1rem;\r\n                left: 1rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .section-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .download {\r\n                padding: 2rem 1rem;\r\n            }\r\n        }\r\n    \r\n\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n        // Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n\r\n        // Initialize charts\r\n        let charts = {};\r\n\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeCharts();\r\n            animateNumbers();\r\n        });\r\n\r\n        function initializeCharts() {\r\n            // Projects by Sector Chart\r\n            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');\r\n            charts.projectsBySector = new Chart(projectsCtx, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],\r\n                    datasets: [{\r\n                        data: [35, 25, 20, 10, 5, 5],\r\n                        backgroundColor: [\r\n                            '#1a5fb4',\r\n                            '#10b981',\r\n                            '#e6b325',\r\n                            '#8b5cf6',\r\n                            '#f59e0b',\r\n                            '#ef4444'\r\n                        ]\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false\r\n                }\r\n            });\r\n\r\n            // Beneficiaries Growth Chart\r\n            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');\r\n            charts.beneficiariesGrowth = new Chart(growthCtx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['2020', '2021', '2022', '2023', '2024'],\r\n                    datasets: [{\r\n                        label: 'عدد المستفيدين',\r\n                        data: [25000, 45000, 75000, 105000, 125847],\r\n                        borderColor: '#1a5fb4',\r\n                        backgroundColor: 'rgba(26, 95, 180, 0.1)',\r\n                        borderWidth: 3,\r\n                        fill: true\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    scales: {\r\n                        y: {\r\n                            beginAtZero: true\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        // Animate numbers\r\n        function animateNumbers() {\r\n            const counters = document.querySelectorAll('.stat-number');\r\n            counters.forEach(counter =&gt; {\r\n                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));\r\n                const suffix = counter.textContent.replace(/[0-9,.]/g, '');\r\n                const duration = 1500;\r\n                let current = 0;\r\n                const increment = target / (duration / 16);\r\n                \r\n                const timer = setInterval(() =&gt; {\r\n                    current += increment;\r\n                    if (current &gt;= target) {\r\n                        current = target;\r\n                        clearInterval(timer);\r\n                    }\r\n                    \r\n                    let displayValue;\r\n                    if (suffix.includes('K')) {\r\n                        displayValue = (current / 1000).toFixed(1) + 'K';\r\n                    } else if (counter.textContent.includes('$')) {\r\n                        displayValue = '$' + Math.floor(current).toLocaleString();\r\n                    } else {\r\n                        displayValue = Math.floor(current).toLocaleString();\r\n                    }\r\n                    \r\n                    counter.textContent = displayValue;\r\n                }, 16);\r\n            });\r\n        }\r\n\r\n        // Utility functions\r\n        function scrollToSection(sectionId) {\r\n            const section = document.getElementById(sectionId);\r\n            if (section) {\r\n                section.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n        }\r\n\r\n        function scrollToTop() {\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n\r\n        function downloadFullReport() {\r\n            showNotification('جاري تحميل التقرير السنوي الكامل...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`جاري عرض التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`جاري تحميل التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`جاري تحميل التقارير بصيغة ${format}`);\r\n        }\r\n\r\n        function showNotification(message) {\r\n            // Create notification element\r\n            const notification = document.createElement('div');\r\n            notification.textContent = message;\r\n            notification.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                left: 20px;\r\n                background: var(--primary);\r\n                color: white;\r\n                padding: 1rem 1.5rem;\r\n                border-radius: var(--radius);\r\n                box-shadow: var(--shadow);\r\n                z-index: 1000;\r\n                animation: slideIn 0.3s ease;\r\n            `;\r\n            \r\n            document.body.appendChild(notification);\r\n            \r\n            // Remove notification after 3 seconds\r\n            setTimeout(() =&gt; {\r\n                notification.style.animation = 'slideOut 0.3s ease';\r\n                setTimeout(() =&gt; notification.remove(), 300);\r\n            }, 3000);\r\n            \r\n            // Add animation styles\r\n            if (!document.querySelector('#notification-styles')) {\r\n                const style = document.createElement('style');\r\n                style.id = 'notification-styles';\r\n                style.textContent = `\r\n                    @keyframes slideIn {\r\n                        from { transform: translateX(-100%); opacity: 0; }\r\n                        to { transform: translateX(0); opacity: 1; }\r\n                    }\r\n                    @keyframes slideOut {\r\n                        from { transform: translateX(0); opacity: 1; }\r\n                        to { transform: translateX(-100%); opacity: 0; }\r\n                    }\r\n                `;\r\n                document.head.appendChild(style);\r\n            }\r\n        }\r\n    \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"    \r\n        \r\n        \r\n            \r\n                \r\n                إنجازات \r\n            \r\n            \r\n            \r\n                تقارير وإنجازات وجدان الخيرية\r\n            \r\n            \r\n            \r\n                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.\r\n            \r\n            \r\n            \r\n                \r\n                     عرض الإحصائيات\r\n                \r\n                \r\n                     التقارير السنوية\r\n                \r\n            \r\n        \r\n    ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"},{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container","class":"aboutus takrirr"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"    \r\n        \r\n        \r\n            أبرز الإحصائيات\r\n            \r\n                \r\n                    \r\n                        \r\n                    \r\n                    125,847\r\n                    مستفيد مباشر\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    143\r\n                    مشروع إنساني\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    8\r\n                    دولة حول العالم\r\n                \r\n\r\n            \r\n        \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"        \r\n        \r\n            رحلة الإنجازات\r\n            \r\n            \r\n                \r\n                    \r\n                        2024\r\n                        توسعة العمل في دول جديدة\r\n                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        البرنامج الإغاثي الشامل\r\n                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا\r\n                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.\r\n                    \r\n                \r\n            \r\n        ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    التقارير السنوية\r\n    \r\n    \r\n        \r\n            \r\n                تقرير 2023 السنوي\r\n                يناير - ديسمبر 2023\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2023.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                تقرير 2024 السنوي\r\n                يناير - ديسمبر 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2024.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    \r\n        الملف التعريفي لجمعية وجدان الخيرية\r\n    \r\n\r\n    \r\n        <a download>\r\n            \r\n            PDF\r\n        </a>\r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

element_gva_row->render_content(Array, '		
	      
	         
	               
        
        
            أبرز الإحصائيات
            
                
                    
                        
                    
                    125,847
                    مستفيد مباشر
                

                
                    
                        
                    
                    143
                    مشروع إنساني
                

                
                    
                        
                    
                    8
                    دولة حول العالم
                

            
        
        
        
            رحلة الإنجازات
            
            
                
                    
                        2024
                        توسعة العمل في دول جديدة
                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.
                    
                

                
                    
                        2023
                        البرنامج الإغاثي الشامل
                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.
                    
                

                
                    
                        2023
                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا
                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.
                    
                
            
        

    التقارير السنوية
    
    
        
            
                تقرير 2023 السنوي
                يناير - ديسمبر 2023
            
            
                
                    
                        143
                        مشروع
                    
                    
                        
                        
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2023.
                
                    <a href="https://drive.google.com/file/d/1RK_ADwUcATzgP0D5c9pk3s_pXZtqGFFT/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        

        
            
                تقرير 2024 السنوي
                يناير - ديسمبر 2024
            
            
                
                    
                        143
                        مشروع
                    
                    
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2024.
                
                    <a href="https://drive.google.com/file/d/16H-tITFvkHQpviNG0HTqHSfhhAdU5fcZ/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        
            
        
    


    
        الملف التعريفي لجمعية وجدان الخيرية
    

    
        <a href="https://drive.google.com/file/d/1dx5VokJHEhs7SXtnc5S70aEEHXcyDEeG/view?usp=sharing" class="format-btn" download>
            
            PDF
        </a>
    
	           
	         	      
	    
	   ') (Line: 110)
gavias_content_builder_render_element('gva_row', Array, '		
	      
	         
	               
        
        
            أبرز الإحصائيات
            
                
                    
                        
                    
                    125,847
                    مستفيد مباشر
                

                
                    
                        
                    
                    143
                    مشروع إنساني
                

                
                    
                        
                    
                    8
                    دولة حول العالم
                

            
        
        
        
            رحلة الإنجازات
            
            
                
                    
                        2024
                        توسعة العمل في دول جديدة
                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.
                    
                

                
                    
                        2023
                        البرنامج الإغاثي الشامل
                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.
                    
                

                
                    
                        2023
                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا
                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.
                    
                
            
        

    التقارير السنوية
    
    
        
            
                تقرير 2023 السنوي
                يناير - ديسمبر 2023
            
            
                
                    
                        143
                        مشروع
                    
                    
                        
                        
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2023.
                
                    <a href="https://drive.google.com/file/d/1RK_ADwUcATzgP0D5c9pk3s_pXZtqGFFT/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        

        
            
                تقرير 2024 السنوي
                يناير - ديسمبر 2024
            
            
                
                    
                        143
                        مشروع
                    
                    
                    
                    
                        125K
                        مستفيد
                    
                    
                        8
                        دول
                    
                
                تقرير شامل عن إنجازات الجمعية خلال عام 2024.
                
                    <a href="https://drive.google.com/file/d/16H-tITFvkHQpviNG0HTqHSfhhAdU5fcZ/view?usp=sharing" class="report-btn" download>
                         تحميل
                    </a>
                
            
        
            
        
    


    
        الملف التعريفي لجمعية وجدان الخيرية
    

    
        <a href="https://drive.google.com/file/d/1dx5VokJHEhs7SXtnc5S70aEEHXcyDEeG/view?usp=sharing" class="format-btn" download>
            
            PDF
        </a>
    
	           
	         	      
	    
	   ') (Line: 62)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container-fw","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n    تقارير وإنجازات | وجدان الخيرية\r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n    \r\n\r\n    \r\n        /* CSS Variables */\r\n        :root {\r\n            --primary: #6d2435;\r\n            --primary-dark: #6d2435;\r\n            --secondary: #6d2435;\r\n            --accent: #10b981;\r\n            --dark: #1e293b;\r\n            --light: #f8fafc;\r\n            --gray: #64748b;\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --radius: 1rem;\r\n            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        /* Base Styles */\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'IBM Plex Sans Arabic', sans-serif;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            color: var(--dark);\r\n            line-height: 1.7;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        /* Container */\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 1.5rem;\r\n        }\r\n\r\n        /* Hero Section */\r\n        .hero {\r\n            position: relative;\r\n            min-height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);\r\n            color: white;\r\n            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\r\n            margin-bottom: 3rem;\r\n        }\r\nh1.hero-title.aos-init.aos-animate {\r\n    font-family: 'aljazerabold';\r\ncolor:#fff;\r\n}\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/sites/default/files/hero-bg.jpg);\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    opacity: 0.15;\r\n    /* filter: grayscale(100%) brightness(0.5); */\r\n}\r\n        .hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            width: 100%;\r\n            padding: 4rem 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .hero-badge {\r\n       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n    background-color: rgba(178, 148, 107, 0.8);\r\n    backdrop-filter: blur(4px);\r\n    color: white;\r\n    padding: 0.25rem 1rem;\r\n    border-radius: 9999px;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    display: inline-block;\r\n    font-family: 'aljazerabold';\r\n}\r\n        }\r\n\r\n        .hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 900;\r\n            line-height: 1.1;\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n        }\r\n\r\n        .hero-subtitle {\r\n            font-size: 1.25rem;\r\n            opacity: 0.9;\r\n            max-width: 800px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n\r\n        /* Buttons */\r\n        .btn {\r\n            padding: 1rem 2rem;\r\n            border-radius: 9999px;\r\n            border: none;\r\n            font-weight: 900;\r\n            cursor: pointer;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            transition: var(--transition);\r\nfont-family: 'aljazerabold';\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n            color: white;\r\n            border: 1px solid rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--shadow);\r\nbackground: transparent;\r\n        }\r\n\r\n        /* Stats Section */\r\n        .stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .stat-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1rem;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n\r\n        .stat-number {\r\n            font-size: 2.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Charts Section */\r\n        .charts {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            padding: 2rem;\r\n            box-shadow: var(--shadow);\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .section-title {\r\n          font-size: 2rem;\r\n    font-family: 'aljazerabold';\r\n    font-weight: 900;\r\n    color: #b2946b;\r\n    margin-bottom: 2rem;\r\n    position: relative;\r\n    padding-right: 1.5rem;\r\n        }\r\n\r\n        .section-title::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 5px;\r\n            background: linear-gradient(135deg, var(--secondary) 0%, #6d2435 100%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .charts-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            background: var(--light);\r\n            border-radius: var(--radius);\r\n            padding: 1.5rem;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        /* Timeline */\r\n        .timeline {\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin: 0 auto 4rem;\r\n        }\r\n\r\n        .timeline::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 4px;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            top: 0;\r\n            bottom: 0;\r\n            right: 50%;\r\n            margin-right: -2px;\r\n            border-radius: 9999px;\r\nont-family: 'aljazera';\r\n        }\r\n\r\n.timeline-content h3 {\r\n    font-family: 'aljazerabold';\r\n    color: #6d2435;\r\n}\r\n\r\n        .timeline-item {\r\n            padding: 1rem 2rem;\r\n            position: relative;\r\n            width: 50%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .timeline-item:nth-child(odd) {\r\n            right: 0;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            right: 50%;\r\n        }\r\n\r\n        .timeline-content {\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            position: relative;\r\n            border-right: 4px solid var(--secondary);\r\n        }\r\n\r\n        .timeline-year {\r\n            font-size: 1.25rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        /* Reports Grid */\r\n        .reports-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 4rem;\r\n        }\r\n\r\n        .report-card {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .report-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .report-header {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-title {\r\n           font-size: 1.6rem;\r\n    font-weight: 800;\r\n    margin-bottom: 0.5rem;\r\n    font-family: 'aljazerabold';\r\n    color: #b2946b;\r\n        }\r\n\r\n        .report-body {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .report-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 1rem;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .report-stat-value {\r\n            font-size: 1.5rem;\r\n            font-weight: 900;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .report-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .report-btn {\r\n            flex: 1;\r\n            padding: 0.75rem;\r\n            border: none;\r\n            border-radius: var(--radius);\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        /* Download Section */\r\n        .download {\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border-radius: var(--radius);\r\n            padding: 3rem;\r\n            margin-bottom: 4rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .download-title {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            margin-bottom: 2rem;\r\ncolor: #fff;\r\n    font-family: 'aljazerabold';\r\n\r\n        }\r\n\r\n        .download-formats {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .format-btn {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            color: white;\r\n            padding: 1rem 1.5rem;\r\n            border-radius: var(--radius);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .format-btn:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        /* Floating Buttons */\r\n        .floating-buttons {\r\n            position: fixed;\r\n            bottom: 2rem;\r\n            left: 2rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            z-index: 1000;\r\n        }\r\n\r\n        .floating-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        /* Responsive Design */\r\n        @media (max-width: 768px) {\r\n            .hero-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .stats {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .charts-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .timeline::after {\r\n                right: 31px;\r\n            }\r\n            \r\n            .timeline-item {\r\n                width: 100%;\r\n                padding-right: 70px;\r\n                padding-left: 25px;\r\n            }\r\n            \r\n            .timeline-item:nth-child(even) {\r\n                right: 0;\r\n            }\r\n            \r\n            .reports-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .floating-buttons {\r\n                bottom: 1rem;\r\n                left: 1rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .section-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .download {\r\n                padding: 2rem 1rem;\r\n            }\r\n        }\r\n    \r\n\r\n\r\n\r\n\r\n    \r\n    \r\n    \r\n        // Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n\r\n        // Initialize charts\r\n        let charts = {};\r\n\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeCharts();\r\n            animateNumbers();\r\n        });\r\n\r\n        function initializeCharts() {\r\n            // Projects by Sector Chart\r\n            const projectsCtx = document.getElementById('projectsBySectorChart').getContext('2d');\r\n            charts.projectsBySector = new Chart(projectsCtx, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['الإغاثة', 'الصحة', 'التعليم', 'المياه', 'التمكين', 'الأيتام'],\r\n                    datasets: [{\r\n                        data: [35, 25, 20, 10, 5, 5],\r\n                        backgroundColor: [\r\n                            '#1a5fb4',\r\n                            '#10b981',\r\n                            '#e6b325',\r\n                            '#8b5cf6',\r\n                            '#f59e0b',\r\n                            '#ef4444'\r\n                        ]\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false\r\n                }\r\n            });\r\n\r\n            // Beneficiaries Growth Chart\r\n            const growthCtx = document.getElementById('beneficiariesGrowthChart').getContext('2d');\r\n            charts.beneficiariesGrowth = new Chart(growthCtx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['2020', '2021', '2022', '2023', '2024'],\r\n                    datasets: [{\r\n                        label: 'عدد المستفيدين',\r\n                        data: [25000, 45000, 75000, 105000, 125847],\r\n                        borderColor: '#1a5fb4',\r\n                        backgroundColor: 'rgba(26, 95, 180, 0.1)',\r\n                        borderWidth: 3,\r\n                        fill: true\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    scales: {\r\n                        y: {\r\n                            beginAtZero: true\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        // Animate numbers\r\n        function animateNumbers() {\r\n            const counters = document.querySelectorAll('.stat-number');\r\n            counters.forEach(counter =&gt; {\r\n                const target = parseInt(counter.textContent.replace(/[$,]/g, '').replace('K', '000'));\r\n                const suffix = counter.textContent.replace(/[0-9,.]/g, '');\r\n                const duration = 1500;\r\n                let current = 0;\r\n                const increment = target / (duration / 16);\r\n                \r\n                const timer = setInterval(() =&gt; {\r\n                    current += increment;\r\n                    if (current &gt;= target) {\r\n                        current = target;\r\n                        clearInterval(timer);\r\n                    }\r\n                    \r\n                    let displayValue;\r\n                    if (suffix.includes('K')) {\r\n                        displayValue = (current / 1000).toFixed(1) + 'K';\r\n                    } else if (counter.textContent.includes('$')) {\r\n                        displayValue = '$' + Math.floor(current).toLocaleString();\r\n                    } else {\r\n                        displayValue = Math.floor(current).toLocaleString();\r\n                    }\r\n                    \r\n                    counter.textContent = displayValue;\r\n                }, 16);\r\n            });\r\n        }\r\n\r\n        // Utility functions\r\n        function scrollToSection(sectionId) {\r\n            const section = document.getElementById(sectionId);\r\n            if (section) {\r\n                section.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n        }\r\n\r\n        function scrollToTop() {\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n\r\n        function downloadFullReport() {\r\n            showNotification('جاري تحميل التقرير السنوي الكامل...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`جاري عرض التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`جاري تحميل التقرير: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`جاري تحميل التقارير بصيغة ${format}`);\r\n        }\r\n\r\n        function showNotification(message) {\r\n            // Create notification element\r\n            const notification = document.createElement('div');\r\n            notification.textContent = message;\r\n            notification.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                left: 20px;\r\n                background: var(--primary);\r\n                color: white;\r\n                padding: 1rem 1.5rem;\r\n                border-radius: var(--radius);\r\n                box-shadow: var(--shadow);\r\n                z-index: 1000;\r\n                animation: slideIn 0.3s ease;\r\n            `;\r\n            \r\n            document.body.appendChild(notification);\r\n            \r\n            // Remove notification after 3 seconds\r\n            setTimeout(() =&gt; {\r\n                notification.style.animation = 'slideOut 0.3s ease';\r\n                setTimeout(() =&gt; notification.remove(), 300);\r\n            }, 3000);\r\n            \r\n            // Add animation styles\r\n            if (!document.querySelector('#notification-styles')) {\r\n                const style = document.createElement('style');\r\n                style.id = 'notification-styles';\r\n                style.textContent = `\r\n                    @keyframes slideIn {\r\n                        from { transform: translateX(-100%); opacity: 0; }\r\n                        to { transform: translateX(0); opacity: 1; }\r\n                    }\r\n                    @keyframes slideOut {\r\n                        from { transform: translateX(0); opacity: 1; }\r\n                        to { transform: translateX(-100%); opacity: 0; }\r\n                    }\r\n                `;\r\n                document.head.appendChild(style);\r\n            }\r\n        }\r\n    \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"    \r\n        \r\n        \r\n            \r\n                \r\n                إنجازات \r\n            \r\n            \r\n            \r\n                تقارير وإنجازات وجدان الخيرية\r\n            \r\n            \r\n            \r\n                شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.\r\n            \r\n            \r\n            \r\n                \r\n                     عرض الإحصائيات\r\n                \r\n                \r\n                     التقارير السنوية\r\n                \r\n            \r\n        \r\n    ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"},{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","padding_top":"0","padding_bottom":"0","margin_top":"0","margin_bottom":"0","layout":"container","class":"aboutus takrirr"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"    \r\n        \r\n        \r\n            أبرز الإحصائيات\r\n            \r\n                \r\n                    \r\n                        \r\n                    \r\n                    125,847\r\n                    مستفيد مباشر\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    143\r\n                    مشروع إنساني\r\n                \r\n\r\n                \r\n                    \r\n                        \r\n                    \r\n                    8\r\n                    دولة حول العالم\r\n                \r\n\r\n            \r\n        \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"        \r\n        \r\n            رحلة الإنجازات\r\n            \r\n            \r\n                \r\n                    \r\n                        2024\r\n                        توسعة العمل في دول جديدة\r\n                        بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        البرنامج الإغاثي الشامل\r\n                        إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.\r\n                    \r\n                \r\n\r\n                \r\n                    \r\n                        2023\r\n                        الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا\r\n                        حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.\r\n                    \r\n                \r\n            \r\n        ","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    التقارير السنوية\r\n    \r\n    \r\n        \r\n            \r\n                تقرير 2023 السنوي\r\n                يناير - ديسمبر 2023\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2023.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                تقرير 2024 السنوي\r\n                يناير - ديسمبر 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        مشروع\r\n                    \r\n                    \r\n                    \r\n                    \r\n                        125K\r\n                        مستفيد\r\n                    \r\n                    \r\n                        8\r\n                        دول\r\n                    \r\n                \r\n                تقرير شامل عن إنجازات الجمعية خلال عام 2024.\r\n                \r\n                    <a download>\r\n                         تحميل\r\n                    </a>\r\n                \r\n            \r\n        \r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    \r\n        الملف التعريفي لجمعية وجدان الخيرية\r\n    \r\n\r\n    \r\n        <a download>\r\n            \r\n            PDF\r\n        </a>\r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

X LT

تقارير وإنجازات

تقارير وإنجازات | وجدان الخيرية

إنجازات

تقارير وإنجازات وجدان الخيرية

شفافية وأرقام وإحصائيات تبرز حجم تأثيرنا الإنساني وجهودنا في خدمة المحتاجين حول العالم.

أبرز الإحصائيات

125,847

مستفيد مباشر

143

مشروع إنساني

دولة حول العالم

رحلة الإنجازات

2024

توسعة العمل في دول جديدة

بدء العمل الإنساني في أفغانستان ، مع إطلاق العديد من المشاريع الجديدة.

2023

البرنامج الإغاثي الشامل

إطلاق أكبر حملة إغاثية لغزة منذ بدء الحرب ويشمل العديد من المشاريع الإغاثية والتنموية والموسمية.

2023

الحملة الشاملة لإغاثة متضرري الزلال في سوريا وتركيا

حملة إغاثية وتنموية في الجنوب التركي والشمال السوري لإغاثة المتضررين من الزلال حيث تم إرسال العديد من القوافل تحمل الإمدادات الطبية والإغاثية والإيواء.

التقارير السنوية

تقرير 2023 السنوي

يناير - ديسمبر 2023

143

مشروع

125K

مستفيد

دول

تقرير شامل عن إنجازات الجمعية خلال عام 2023.

تحميل

تقرير 2024 السنوي

يناير - ديسمبر 2024

143