Error message

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, '



    
    
    
    Reports &amp; Achievements | Vicdan Charity

    
    

    
    
    
    

    
    

    
    

    
        /* 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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],
                    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: 'Number of Beneficiaries',
                        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('Downloading the full annual report...');
        }

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

        function viewReport(reportId) {
            showNotification(`Viewing report: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`Downloading report: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`Downloading reports in ${format} 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);
            }
        }
    


    
    
        
            
            Achievements
        
        
        
            Vicdan Charity Reports &amp; Achievements
        
        
        
            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.
        
        
        
            
                 View Statistics
            
            
                 Annual Reports
            
        
    
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '



    
    
    
    Reports &amp; Achievements | Vicdan Charity

    
    

    
    
    
    

    
    

    
    

    
        /* 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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],
                    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: 'Number of Beneficiaries',
                        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('Downloading the full annual report...');
        }

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

        function viewReport(reportId) {
            showNotification(`Viewing report: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`Downloading report: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`Downloading reports in ${format} 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);
            }
        }
    


    
    
        
            
            Achievements
        
        
        
            Vicdan Charity Reports &amp; Achievements
        
        
        
            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.
        
        
        
            
                 View Statistics
            
            
                 Annual Reports
            
        
    
') (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    Reports &amp; Achievements | Vicdan Charity\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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],\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: 'Number of Beneficiaries',\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('Downloading the full annual report...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`Viewing report: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`Downloading report: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`Downloading reports in ${format} 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            Achievements\r\n        \r\n        \r\n        \r\n            Vicdan Charity Reports &amp; Achievements\r\n        \r\n        \r\n        \r\n            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.\r\n        \r\n        \r\n        \r\n            \r\n                 View Statistics\r\n            \r\n            \r\n                 Annual Reports\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        Key Statistics\r\n        \r\n            \r\n                \r\n                    \r\n                \r\n                125,847\r\n                Direct Beneficiaries\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                143\r\n                Humanitarian Projects\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                8\r\n                Countries Worldwide\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                $4.2M\r\n                Donation Value\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Journey of Achievements\r\n    \r\n    \r\n        \r\n            \r\n                2024\r\n                Expansion to 3 New Countries\r\n                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2023\r\n                Comprehensive Food Security Program\r\n                Launched the largest food security program reaching 60,000 families across 5 countries.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2022\r\n                Education for All Campaign\r\n                Built and renovated 12 schools and provided scholarships for 2,000 students.\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Annual Reports\r\n    \r\n    \r\n        \r\n            \r\n                2024 Annual Report\r\n                January - December 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        Projects\r\n                    \r\n                    \r\n                        $4.2M\r\n                        Budget\r\n                    \r\n                    \r\n                        125K\r\n                        Beneficiaries\r\n                    \r\n                    \r\n                        8\r\n                        Countries\r\n                    \r\n                \r\n                A comprehensive report on the charity's achievements during 2024.\r\n                \r\n                    \r\n                         Download\r\n                    \r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                2024 Financial Report\r\n                Full Financial Review\r\n            \r\n            \r\n                \r\n                    \r\n                        93%\r\n                        Field Spending Ratio\r\n                    \r\n                    \r\n                        4.2%\r\n                        Administrative Expenses\r\n                    \r\n                    \r\n                        2.8%\r\n                        Promotional Costs\r\n                    \r\n                    \r\n                        0%\r\n                        Debts\r\n                    \r\n                \r\n                A detailed financial report showing funding sources and expense distribution.\r\n                \r\n                    \r\n                         Download\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    We believe in complete transparency, so all our reports are available for direct download\r\n    \r\n    \r\n        \r\n            \r\n            PDF\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"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (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, '



    
    
    
    Reports &amp; Achievements | Vicdan Charity

    
    

    
    
    
    

    
    

    
    

    
        /* 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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],
                    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: 'Number of Beneficiaries',
                        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('Downloading the full annual report...');
        }

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

        function viewReport(reportId) {
            showNotification(`Viewing report: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`Downloading report: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`Downloading reports in ${format} 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);
            }
        }
    


    
    
        
            
            Achievements
        
        
        
            Vicdan Charity Reports &amp; Achievements
        
        
        
            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.
        
        
        
            
                 View Statistics
            
            
                 Annual Reports
            
        
    
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '



    
    
    
    Reports &amp; Achievements | Vicdan Charity

    
    

    
    
    
    

    
    

    
    

    
        /* 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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],
                    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: 'Number of Beneficiaries',
                        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('Downloading the full annual report...');
        }

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

        function viewReport(reportId) {
            showNotification(`Viewing report: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`Downloading report: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`Downloading reports in ${format} 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);
            }
        }
    


    
    
        
            
            Achievements
        
        
        
            Vicdan Charity Reports &amp; Achievements
        
        
        
            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.
        
        
        
            
                 View Statistics
            
            
                 Annual Reports
            
        
    
') (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    Reports &amp; Achievements | Vicdan Charity\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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],\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: 'Number of Beneficiaries',\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('Downloading the full annual report...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`Viewing report: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`Downloading report: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`Downloading reports in ${format} 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            Achievements\r\n        \r\n        \r\n        \r\n            Vicdan Charity Reports &amp; Achievements\r\n        \r\n        \r\n        \r\n            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.\r\n        \r\n        \r\n        \r\n            \r\n                 View Statistics\r\n            \r\n            \r\n                 Annual Reports\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        Key Statistics\r\n        \r\n            \r\n                \r\n                    \r\n                \r\n                125,847\r\n                Direct Beneficiaries\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                143\r\n                Humanitarian Projects\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                8\r\n                Countries Worldwide\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                $4.2M\r\n                Donation Value\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Journey of Achievements\r\n    \r\n    \r\n        \r\n            \r\n                2024\r\n                Expansion to 3 New Countries\r\n                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2023\r\n                Comprehensive Food Security Program\r\n                Launched the largest food security program reaching 60,000 families across 5 countries.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2022\r\n                Education for All Campaign\r\n                Built and renovated 12 schools and provided scholarships for 2,000 students.\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Annual Reports\r\n    \r\n    \r\n        \r\n            \r\n                2024 Annual Report\r\n                January - December 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        Projects\r\n                    \r\n                    \r\n                        $4.2M\r\n                        Budget\r\n                    \r\n                    \r\n                        125K\r\n                        Beneficiaries\r\n                    \r\n                    \r\n                        8\r\n                        Countries\r\n                    \r\n                \r\n                A comprehensive report on the charity's achievements during 2024.\r\n                \r\n                    \r\n                         Download\r\n                    \r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                2024 Financial Report\r\n                Full Financial Review\r\n            \r\n            \r\n                \r\n                    \r\n                        93%\r\n                        Field Spending Ratio\r\n                    \r\n                    \r\n                        4.2%\r\n                        Administrative Expenses\r\n                    \r\n                    \r\n                        2.8%\r\n                        Promotional Costs\r\n                    \r\n                    \r\n                        0%\r\n                        Debts\r\n                    \r\n                \r\n                A detailed financial report showing funding sources and expense distribution.\r\n                \r\n                    \r\n                         Download\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    We believe in complete transparency, so all our reports are available for direct download\r\n    \r\n    \r\n        \r\n            \r\n            PDF\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"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (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, '		
	      
	         
	           



    
    
    
    Reports &amp; Achievements | Vicdan Charity

    
    

    
    
    
    

    
    

    
    

    
        /* 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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],
                    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: 'Number of Beneficiaries',
                        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('Downloading the full annual report...');
        }

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

        function viewReport(reportId) {
            showNotification(`Viewing report: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`Downloading report: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`Downloading reports in ${format} 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);
            }
        }
    


    
    
        
            
            Achievements
        
        
        
            Vicdan Charity Reports &amp; Achievements
        
        
        
            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.
        
        
        
            
                 View Statistics
            
            
                 Annual Reports
            
        
    
	           
	         	      
	    
	   ') (Line: 110)
gavias_content_builder_render_element('gva_row', Array, '		
	      
	         
	           



    
    
    
    Reports &amp; Achievements | Vicdan Charity

    
    

    
    
    
    

    
    

    
    

    
        /* 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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],
                    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: 'Number of Beneficiaries',
                        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('Downloading the full annual report...');
        }

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

        function viewReport(reportId) {
            showNotification(`Viewing report: ${reportId}`);
        }

        function downloadReport(reportId) {
            showNotification(`Downloading report: ${reportId}`);
        }

        function downloadFormat(format) {
            showNotification(`Downloading reports in ${format} 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);
            }
        }
    


    
    
        
            
            Achievements
        
        
        
            Vicdan Charity Reports &amp; Achievements
        
        
        
            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.
        
        
        
            
                 View Statistics
            
            
                 Annual Reports
            
        
    
	           
	         	      
	    
	   ') (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    Reports &amp; Achievements | Vicdan Charity\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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],\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: 'Number of Beneficiaries',\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('Downloading the full annual report...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`Viewing report: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`Downloading report: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`Downloading reports in ${format} 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            Achievements\r\n        \r\n        \r\n        \r\n            Vicdan Charity Reports &amp; Achievements\r\n        \r\n        \r\n        \r\n            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.\r\n        \r\n        \r\n        \r\n            \r\n                 View Statistics\r\n            \r\n            \r\n                 Annual Reports\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        Key Statistics\r\n        \r\n            \r\n                \r\n                    \r\n                \r\n                125,847\r\n                Direct Beneficiaries\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                143\r\n                Humanitarian Projects\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                8\r\n                Countries Worldwide\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                $4.2M\r\n                Donation Value\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Journey of Achievements\r\n    \r\n    \r\n        \r\n            \r\n                2024\r\n                Expansion to 3 New Countries\r\n                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2023\r\n                Comprehensive Food Security Program\r\n                Launched the largest food security program reaching 60,000 families across 5 countries.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2022\r\n                Education for All Campaign\r\n                Built and renovated 12 schools and provided scholarships for 2,000 students.\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Annual Reports\r\n    \r\n    \r\n        \r\n            \r\n                2024 Annual Report\r\n                January - December 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        Projects\r\n                    \r\n                    \r\n                        $4.2M\r\n                        Budget\r\n                    \r\n                    \r\n                        125K\r\n                        Beneficiaries\r\n                    \r\n                    \r\n                        8\r\n                        Countries\r\n                    \r\n                \r\n                A comprehensive report on the charity's achievements during 2024.\r\n                \r\n                    \r\n                         Download\r\n                    \r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                2024 Financial Report\r\n                Full Financial Review\r\n            \r\n            \r\n                \r\n                    \r\n                        93%\r\n                        Field Spending Ratio\r\n                    \r\n                    \r\n                        4.2%\r\n                        Administrative Expenses\r\n                    \r\n                    \r\n                        2.8%\r\n                        Promotional Costs\r\n                    \r\n                    \r\n                        0%\r\n                        Debts\r\n                    \r\n                \r\n                A detailed financial report showing funding sources and expense distribution.\r\n                \r\n                    \r\n                         Download\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    We believe in complete transparency, so all our reports are available for direct download\r\n    \r\n    \r\n        \r\n            \r\n            PDF\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"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (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, '
    
    
        Key Statistics
        
            
                
                    
                
                125,847
                Direct Beneficiaries
            

            
                
                    
                
                143
                Humanitarian Projects
            

            
                
                    
                
                8
                Countries Worldwide
            

            
                
                    
                
                $4.2M
                Donation Value
            
        
    


    Journey of Achievements
    
    
        
            
                2024
                Expansion to 3 New Countries
                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.
            
        

        
            
                2023
                Comprehensive Food Security Program
                Launched the largest food security program reaching 60,000 families across 5 countries.
            
        

        
            
                2022
                Education for All Campaign
                Built and renovated 12 schools and provided scholarships for 2,000 students.
            
        
    


    Annual Reports
    
    
        
            
                2024 Annual Report
                January - December 2024
            
            
                
                    
                        143
                        Projects
                    
                    
                        $4.2M
                        Budget
                    
                    
                        125K
                        Beneficiaries
                    
                    
                        8
                        Countries
                    
                
                A comprehensive report on the charity's achievements during 2024.
                
                    
                         Download
                    
                
            
        

        
            
                2024 Financial Report
                Full Financial Review
            
            
                
                    
                        93%
                        Field Spending Ratio
                    
                    
                        4.2%
                        Administrative Expenses
                    
                    
                        2.8%
                        Promotional Costs
                    
                    
                        0%
                        Debts
                    
                
                A detailed financial report showing funding sources and expense distribution.
                
                    
                         Download
                    
                
            
        
    


    We believe in complete transparency, so all our reports are available for direct download
    
    
        
            
            PDF
        
        
            
            Excel
        
        
            
            Word
        
        --&gt;
    

') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
    
    
        Key Statistics
        
            
                
                    
                
                125,847
                Direct Beneficiaries
            

            
                
                    
                
                143
                Humanitarian Projects
            

            
                
                    
                
                8
                Countries Worldwide
            

            
                
                    
                
                $4.2M
                Donation Value
            
        
    


    Journey of Achievements
    
    
        
            
                2024
                Expansion to 3 New Countries
                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.
            
        

        
            
                2023
                Comprehensive Food Security Program
                Launched the largest food security program reaching 60,000 families across 5 countries.
            
        

        
            
                2022
                Education for All Campaign
                Built and renovated 12 schools and provided scholarships for 2,000 students.
            
        
    


    Annual Reports
    
    
        
            
                2024 Annual Report
                January - December 2024
            
            
                
                    
                        143
                        Projects
                    
                    
                        $4.2M
                        Budget
                    
                    
                        125K
                        Beneficiaries
                    
                    
                        8
                        Countries
                    
                
                A comprehensive report on the charity's achievements during 2024.
                
                    
                         Download
                    
                
            
        

        
            
                2024 Financial Report
                Full Financial Review
            
            
                
                    
                        93%
                        Field Spending Ratio
                    
                    
                        4.2%
                        Administrative Expenses
                    
                    
                        2.8%
                        Promotional Costs
                    
                    
                        0%
                        Debts
                    
                
                A detailed financial report showing funding sources and expense distribution.
                
                    
                         Download
                    
                
            
        
    


    We believe in complete transparency, so all our reports are available for direct download
    
    
        
            
            PDF
        
        
            
            Excel
        
        
            
            Word
        
        --&gt;
    

') (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    Reports &amp; Achievements | Vicdan Charity\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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],\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: 'Number of Beneficiaries',\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('Downloading the full annual report...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`Viewing report: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`Downloading report: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`Downloading reports in ${format} 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            Achievements\r\n        \r\n        \r\n        \r\n            Vicdan Charity Reports &amp; Achievements\r\n        \r\n        \r\n        \r\n            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.\r\n        \r\n        \r\n        \r\n            \r\n                 View Statistics\r\n            \r\n            \r\n                 Annual Reports\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        Key Statistics\r\n        \r\n            \r\n                \r\n                    \r\n                \r\n                125,847\r\n                Direct Beneficiaries\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                143\r\n                Humanitarian Projects\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                8\r\n                Countries Worldwide\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                $4.2M\r\n                Donation Value\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Journey of Achievements\r\n    \r\n    \r\n        \r\n            \r\n                2024\r\n                Expansion to 3 New Countries\r\n                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2023\r\n                Comprehensive Food Security Program\r\n                Launched the largest food security program reaching 60,000 families across 5 countries.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2022\r\n                Education for All Campaign\r\n                Built and renovated 12 schools and provided scholarships for 2,000 students.\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Annual Reports\r\n    \r\n    \r\n        \r\n            \r\n                2024 Annual Report\r\n                January - December 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        Projects\r\n                    \r\n                    \r\n                        $4.2M\r\n                        Budget\r\n                    \r\n                    \r\n                        125K\r\n                        Beneficiaries\r\n                    \r\n                    \r\n                        8\r\n                        Countries\r\n                    \r\n                \r\n                A comprehensive report on the charity's achievements during 2024.\r\n                \r\n                    \r\n                         Download\r\n                    \r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                2024 Financial Report\r\n                Full Financial Review\r\n            \r\n            \r\n                \r\n                    \r\n                        93%\r\n                        Field Spending Ratio\r\n                    \r\n                    \r\n                        4.2%\r\n                        Administrative Expenses\r\n                    \r\n                    \r\n                        2.8%\r\n                        Promotional Costs\r\n                    \r\n                    \r\n                        0%\r\n                        Debts\r\n                    \r\n                \r\n                A detailed financial report showing funding sources and expense distribution.\r\n                \r\n                    \r\n                         Download\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    We believe in complete transparency, so all our reports are available for direct download\r\n    \r\n    \r\n        \r\n            \r\n            PDF\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"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (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, '
    
    
        Key Statistics
        
            
                
                    
                
                125,847
                Direct Beneficiaries
            

            
                
                    
                
                143
                Humanitarian Projects
            

            
                
                    
                
                8
                Countries Worldwide
            

            
                
                    
                
                $4.2M
                Donation Value
            
        
    


    Journey of Achievements
    
    
        
            
                2024
                Expansion to 3 New Countries
                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.
            
        

        
            
                2023
                Comprehensive Food Security Program
                Launched the largest food security program reaching 60,000 families across 5 countries.
            
        

        
            
                2022
                Education for All Campaign
                Built and renovated 12 schools and provided scholarships for 2,000 students.
            
        
    


    Annual Reports
    
    
        
            
                2024 Annual Report
                January - December 2024
            
            
                
                    
                        143
                        Projects
                    
                    
                        $4.2M
                        Budget
                    
                    
                        125K
                        Beneficiaries
                    
                    
                        8
                        Countries
                    
                
                A comprehensive report on the charity's achievements during 2024.
                
                    
                         Download
                    
                
            
        

        
            
                2024 Financial Report
                Full Financial Review
            
            
                
                    
                        93%
                        Field Spending Ratio
                    
                    
                        4.2%
                        Administrative Expenses
                    
                    
                        2.8%
                        Promotional Costs
                    
                    
                        0%
                        Debts
                    
                
                A detailed financial report showing funding sources and expense distribution.
                
                    
                         Download
                    
                
            
        
    


    We believe in complete transparency, so all our reports are available for direct download
    
    
        
            
            PDF
        
        
            
            Excel
        
        
            
            Word
        
        --&gt;
    

') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
    
    
        Key Statistics
        
            
                
                    
                
                125,847
                Direct Beneficiaries
            

            
                
                    
                
                143
                Humanitarian Projects
            

            
                
                    
                
                8
                Countries Worldwide
            

            
                
                    
                
                $4.2M
                Donation Value
            
        
    


    Journey of Achievements
    
    
        
            
                2024
                Expansion to 3 New Countries
                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.
            
        

        
            
                2023
                Comprehensive Food Security Program
                Launched the largest food security program reaching 60,000 families across 5 countries.
            
        

        
            
                2022
                Education for All Campaign
                Built and renovated 12 schools and provided scholarships for 2,000 students.
            
        
    


    Annual Reports
    
    
        
            
                2024 Annual Report
                January - December 2024
            
            
                
                    
                        143
                        Projects
                    
                    
                        $4.2M
                        Budget
                    
                    
                        125K
                        Beneficiaries
                    
                    
                        8
                        Countries
                    
                
                A comprehensive report on the charity's achievements during 2024.
                
                    
                         Download
                    
                
            
        

        
            
                2024 Financial Report
                Full Financial Review
            
            
                
                    
                        93%
                        Field Spending Ratio
                    
                    
                        4.2%
                        Administrative Expenses
                    
                    
                        2.8%
                        Promotional Costs
                    
                    
                        0%
                        Debts
                    
                
                A detailed financial report showing funding sources and expense distribution.
                
                    
                         Download
                    
                
            
        
    


    We believe in complete transparency, so all our reports are available for direct download
    
    
        
            
            PDF
        
        
            
            Excel
        
        
            
            Word
        
        --&gt;
    

') (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    Reports &amp; Achievements | Vicdan Charity\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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],\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: 'Number of Beneficiaries',\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('Downloading the full annual report...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`Viewing report: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`Downloading report: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`Downloading reports in ${format} 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            Achievements\r\n        \r\n        \r\n        \r\n            Vicdan Charity Reports &amp; Achievements\r\n        \r\n        \r\n        \r\n            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.\r\n        \r\n        \r\n        \r\n            \r\n                 View Statistics\r\n            \r\n            \r\n                 Annual Reports\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        Key Statistics\r\n        \r\n            \r\n                \r\n                    \r\n                \r\n                125,847\r\n                Direct Beneficiaries\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                143\r\n                Humanitarian Projects\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                8\r\n                Countries Worldwide\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                $4.2M\r\n                Donation Value\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Journey of Achievements\r\n    \r\n    \r\n        \r\n            \r\n                2024\r\n                Expansion to 3 New Countries\r\n                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2023\r\n                Comprehensive Food Security Program\r\n                Launched the largest food security program reaching 60,000 families across 5 countries.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2022\r\n                Education for All Campaign\r\n                Built and renovated 12 schools and provided scholarships for 2,000 students.\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Annual Reports\r\n    \r\n    \r\n        \r\n            \r\n                2024 Annual Report\r\n                January - December 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        Projects\r\n                    \r\n                    \r\n                        $4.2M\r\n                        Budget\r\n                    \r\n                    \r\n                        125K\r\n                        Beneficiaries\r\n                    \r\n                    \r\n                        8\r\n                        Countries\r\n                    \r\n                \r\n                A comprehensive report on the charity's achievements during 2024.\r\n                \r\n                    \r\n                         Download\r\n                    \r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                2024 Financial Report\r\n                Full Financial Review\r\n            \r\n            \r\n                \r\n                    \r\n                        93%\r\n                        Field Spending Ratio\r\n                    \r\n                    \r\n                        4.2%\r\n                        Administrative Expenses\r\n                    \r\n                    \r\n                        2.8%\r\n                        Promotional Costs\r\n                    \r\n                    \r\n                        0%\r\n                        Debts\r\n                    \r\n                \r\n                A detailed financial report showing funding sources and expense distribution.\r\n                \r\n                    \r\n                         Download\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    We believe in complete transparency, so all our reports are available for direct download\r\n    \r\n    \r\n        \r\n            \r\n            PDF\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"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (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, '		
	      
	         
	           
    
    
        Key Statistics
        
            
                
                    
                
                125,847
                Direct Beneficiaries
            

            
                
                    
                
                143
                Humanitarian Projects
            

            
                
                    
                
                8
                Countries Worldwide
            

            
                
                    
                
                $4.2M
                Donation Value
            
        
    


    Journey of Achievements
    
    
        
            
                2024
                Expansion to 3 New Countries
                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.
            
        

        
            
                2023
                Comprehensive Food Security Program
                Launched the largest food security program reaching 60,000 families across 5 countries.
            
        

        
            
                2022
                Education for All Campaign
                Built and renovated 12 schools and provided scholarships for 2,000 students.
            
        
    


    Annual Reports
    
    
        
            
                2024 Annual Report
                January - December 2024
            
            
                
                    
                        143
                        Projects
                    
                    
                        $4.2M
                        Budget
                    
                    
                        125K
                        Beneficiaries
                    
                    
                        8
                        Countries
                    
                
                A comprehensive report on the charity's achievements during 2024.
                
                    
                         Download
                    
                
            
        

        
            
                2024 Financial Report
                Full Financial Review
            
            
                
                    
                        93%
                        Field Spending Ratio
                    
                    
                        4.2%
                        Administrative Expenses
                    
                    
                        2.8%
                        Promotional Costs
                    
                    
                        0%
                        Debts
                    
                
                A detailed financial report showing funding sources and expense distribution.
                
                    
                         Download
                    
                
            
        
    


    We believe in complete transparency, so all our reports are available for direct download
    
    
        
            
            PDF
        
        
            
            Excel
        
        
            
            Word
        
        --&gt;
    

	           
	         	      
	    
	   ') (Line: 110)
gavias_content_builder_render_element('gva_row', Array, '		
	      
	         
	           
    
    
        Key Statistics
        
            
                
                    
                
                125,847
                Direct Beneficiaries
            

            
                
                    
                
                143
                Humanitarian Projects
            

            
                
                    
                
                8
                Countries Worldwide
            

            
                
                    
                
                $4.2M
                Donation Value
            
        
    


    Journey of Achievements
    
    
        
            
                2024
                Expansion to 3 New Countries
                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.
            
        

        
            
                2023
                Comprehensive Food Security Program
                Launched the largest food security program reaching 60,000 families across 5 countries.
            
        

        
            
                2022
                Education for All Campaign
                Built and renovated 12 schools and provided scholarships for 2,000 students.
            
        
    


    Annual Reports
    
    
        
            
                2024 Annual Report
                January - December 2024
            
            
                
                    
                        143
                        Projects
                    
                    
                        $4.2M
                        Budget
                    
                    
                        125K
                        Beneficiaries
                    
                    
                        8
                        Countries
                    
                
                A comprehensive report on the charity's achievements during 2024.
                
                    
                         Download
                    
                
            
        

        
            
                2024 Financial Report
                Full Financial Review
            
            
                
                    
                        93%
                        Field Spending Ratio
                    
                    
                        4.2%
                        Administrative Expenses
                    
                    
                        2.8%
                        Promotional Costs
                    
                    
                        0%
                        Debts
                    
                
                A detailed financial report showing funding sources and expense distribution.
                
                    
                         Download
                    
                
            
        
    


    We believe in complete transparency, so all our reports are available for direct download
    
    
        
            
            PDF
        
        
            
            Excel
        
        
            
            Word
        
        --&gt;
    

	           
	         	      
	    
	   ') (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    Reports &amp; Achievements | Vicdan Charity\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: ['Relief', 'Health', 'Education', 'Water', 'Empowerment', 'Orphans'],\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: 'Number of Beneficiaries',\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('Downloading the full annual report...');\r\n        }\r\n\r\n        function printPage() {\r\n            window.print();\r\n        }\r\n\r\n        function viewReport(reportId) {\r\n            showNotification(`Viewing report: ${reportId}`);\r\n        }\r\n\r\n        function downloadReport(reportId) {\r\n            showNotification(`Downloading report: ${reportId}`);\r\n        }\r\n\r\n        function downloadFormat(format) {\r\n            showNotification(`Downloading reports in ${format} 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            Achievements\r\n        \r\n        \r\n        \r\n            Vicdan Charity Reports &amp; Achievements\r\n        \r\n        \r\n        \r\n            Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.\r\n        \r\n        \r\n        \r\n            \r\n                 View Statistics\r\n            \r\n            \r\n                 Annual Reports\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        Key Statistics\r\n        \r\n            \r\n                \r\n                    \r\n                \r\n                125,847\r\n                Direct Beneficiaries\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                143\r\n                Humanitarian Projects\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                8\r\n                Countries Worldwide\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                \r\n                $4.2M\r\n                Donation Value\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Journey of Achievements\r\n    \r\n    \r\n        \r\n            \r\n                2024\r\n                Expansion to 3 New Countries\r\n                Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2023\r\n                Comprehensive Food Security Program\r\n                Launched the largest food security program reaching 60,000 families across 5 countries.\r\n            \r\n        \r\n\r\n        \r\n            \r\n                2022\r\n                Education for All Campaign\r\n                Built and renovated 12 schools and provided scholarships for 2,000 students.\r\n            \r\n        \r\n    \r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n    Annual Reports\r\n    \r\n    \r\n        \r\n            \r\n                2024 Annual Report\r\n                January - December 2024\r\n            \r\n            \r\n                \r\n                    \r\n                        143\r\n                        Projects\r\n                    \r\n                    \r\n                        $4.2M\r\n                        Budget\r\n                    \r\n                    \r\n                        125K\r\n                        Beneficiaries\r\n                    \r\n                    \r\n                        8\r\n                        Countries\r\n                    \r\n                \r\n                A comprehensive report on the charity's achievements during 2024.\r\n                \r\n                    \r\n                         Download\r\n                    \r\n                \r\n            \r\n        \r\n\r\n        \r\n            \r\n                2024 Financial Report\r\n                Full Financial Review\r\n            \r\n            \r\n                \r\n                    \r\n                        93%\r\n                        Field Spending Ratio\r\n                    \r\n                    \r\n                        4.2%\r\n                        Administrative Expenses\r\n                    \r\n                    \r\n                        2.8%\r\n                        Promotional Costs\r\n                    \r\n                    \r\n                        0%\r\n                        Debts\r\n                    \r\n                \r\n                A detailed financial report showing funding sources and expense distribution.\r\n                \r\n                    \r\n                         Download\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    We believe in complete transparency, so all our reports are available for direct download\r\n    \r\n    \r\n        \r\n            \r\n            PDF\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"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'en') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (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

Reports & Achievements

Reports & Achievements | Vicdan Charity

Achievements

Vicdan Charity Reports & Achievements

Transparency, numbers, and statistics highlighting the scope of our humanitarian impact and efforts to serve those in need worldwide.

Key Statistics

125,847

Direct Beneficiaries

143

Humanitarian Projects

Countries Worldwide

$4.2M

Donation Value

Journey of Achievements

2024

Expansion to 3 New Countries

Started humanitarian work in Somalia, Yemen, and Bangladesh, launching 15 new projects.

2023

Comprehensive Food Security Program

Launched the largest food security program reaching 60,000 families across 5 countries.

2022

Education for All Campaign

Built and renovated 12 schools and provided scholarships for 2,000 students.

Annual Reports

2024 Annual Report

January - December 2024

143

Projects

$4.2M

Budget

125K

Beneficiaries

Countries

A comprehensive report on the charity's achievements during 2024.

2024 Financial Report

Full Financial Review

93%

Field Spending Ratio

4.2%

Administrative Expenses

2.8%

Promotional Costs

Debts

A detailed financial report showing funding sources and expense distribution.

Reports & Achievements

Vicdan Charity Reports & Achievements

Key Statistics

Journey of Achievements

Expansion to 3 New Countries

Comprehensive Food Security Program

Education for All Campaign

Annual Reports

2024 Annual Report

2024 Financial Report

We believe in complete transparency, so all our reports are available for direct download

Contact Information

Quick Links

Sectors

Bank Accounts