<,�tEXtComment File Manager

File Manager

Path: /home/u491334613/domains/globalreliefbridge.org/public_html/

Viewing File: index.php

<?php
// Start session for the cart
session_start();
if (!isset($_SESSION['cart'])) { $_SESSION['cart'] = []; }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Relief Bridge</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        /* --- 1. RESET & VARIABLES --- */
        :root {
            /* Palette */
            --primary: #007BFF;
            --primary-dark: #0056b3;
            --primary-gradient: linear-gradient(135deg, #007BFF 0%, #0062cc 100%);
            
            --text-main: #2c3e50;
            --text-muted: #5a6b7c;
            
            --bg-body: #f4f7f6;
            --bg-white: #ffffff;
            
            /* UI Elements */
            --radius: 16px;
            --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
            --shadow-lg: 0 20px 40px rgba(0, 123, 255, 0.1);
            --input-bg: #eef2f7;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
        body { background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; overflow-x: hidden; }
        a { text-decoration: none; color: inherit; transition: 0.3s ease; }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

        /* --- 2. LAYOUT UTILITIES --- */
        .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
        .section { padding: 90px 0; position: relative; }
        .text-center { text-align: center; }
        
        h1, h2, h3, h4 { color: #111; font-weight: 800; letter-spacing: -0.5px; }
        p { color: var(--text-muted); margin-bottom: 15px; font-size: 16px; }
        .text-primary { color: var(--primary) !important; }

        /* Mature Buttons */
        .btn {
            display: inline-block;
            background: var(--primary-gradient);
            color: #fff;
            font-weight: 600;
            padding: 14px 32px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.25);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 10px 25px rgba(0, 123, 255, 0.35);
        }
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            box-shadow: none;
        }
        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        /* --- 3. HEADER STYLES --- */
        header {
            background: rgba(255, 255, 255, 0.98);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            position: sticky; top: 0; z-index: 1000;
        }

        /* DESKTOP HEADER */
        .desktop-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 20px; max-width: 1200px; margin: 0 auto;
        }
        
        /* Logo Styling */
        .logo { font-size: 24px; font-weight: 900; color: var(--primary); display: flex; align-items: center; gap: 10px; }
        .logo i { font-size: 28px; }

        .desktop-nav { display: flex; gap: 35px; }
        .desktop-nav a { font-weight: 600; color: #444; font-size: 15px; position: relative; }
        .desktop-nav a:hover { color: var(--primary); }
        .desktop-nav a::after {
            content: ''; position: absolute; width: 0; height: 2px;
            bottom: -5px; left: 0; background: var(--primary); transition: 0.3s;
        }
        .desktop-nav a:hover::after { width: 100%; }
        
        .desktop-actions { display: flex; gap: 15px; align-items: center; }
        
        .currency-btn-desk {
            background: #f8f9fa; border: 1px solid #e9ecef;
            padding: 10px 18px; border-radius: 30px; cursor: pointer;
            font-size: 14px; display: flex; align-items: center; gap: 8px; color: #333; font-weight: 600;
        }
        .currency-btn-desk:hover { border-color: var(--primary); color: var(--primary); background: white; }

        .cart-icon-desk {
            position: relative; cursor: pointer; width: 42px; height: 42px;
            background: white; border: 1px solid #eee; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #333; transition: 0.3s;
        }
        .cart-icon-desk:hover { border-color: var(--primary); color: var(--primary); }

        /* MOBILE HEADER */
        .mobile-header { display: none; flex-direction: column; }
        .mobile-top-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: white; }
        .mobile-actions-top { display: flex; gap: 10px; align-items: center; }
        .currency-btn-mobile { background: #f0f0f0; border: none; padding: 8px 12px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
        .menu-btn-mobile { background: transparent; border: none; font-size: 20px; color: #333; cursor: pointer; }
        .mobile-bottom-row { display: flex; gap: 10px; align-items: center; padding: 0 15px 15px; background: white; }
        .mobile-donate-btn { flex-grow: 1; background: var(--primary); color: white; font-weight: 700; padding: 12px; border-radius: 10px; border: none; font-size: 15px; cursor: pointer; }
        .icon-box-mobile { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; position: relative; font-size: 18px; }
        .cart-box-mobile { background: var(--input-bg); color: var(--primary); }
        .search-box-mobile { background: white; border: 1px solid #eee; color: #555; }
        
        .cart-badge {
            position: absolute; top: -5px; right: -5px;
            background: #ff4757; color: white;
            font-size: 10px; width: 18px; height: 18px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-weight: bold; border: 2px solid white;
        }

        @media (max-width: 991px) {
            .desktop-header { display: none; }
            .mobile-header { display: flex; }
        }
        @media (min-width: 992px) {
            .desktop-header { display: flex; }
            .mobile-header { display: none; }
        }

        /* --- 4. HERO SECTION --- */
        .hero {
            position: relative; height: 600px; background: #000; overflow: hidden;
        }
        @media (max-width: 768px) { .hero { height: 450px; } }

        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center;
            opacity: 0; transition: opacity 1.5s ease-in-out;
            border-radius: 0;
        }
        .slide.active { opacity: 0.8; transform: scale(1.05); transition: opacity 1.5s, transform 6s; }
        
        .hero-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1));
            z-index: 1;
        }
        
        .hero-content {
            position: absolute; top: 45%; left: 0; transform: translateY(-50%);
            color: white; z-index: 2; width: 100%; padding: 0 20px;
        }
        .hero-inner { max-width: 1140px; margin: 0 auto; }
        
        .hero-title {
            font-size: 72px; font-weight: 900; line-height: 1.1; margin-bottom: 20px;
        }
        .hero-title span { color: #4facfe; } /* Bright Blue for Contrast on Dark */
        .hero-sub { font-size: 24px; font-weight: 400; opacity: 0.95; max-width: 600px; line-height: 1.4; }
        
        @media (max-width: 768px) { .hero-title { font-size: 42px; } .hero-sub { font-size: 16px; } }

        /* --- 5. DONATION WIDGET --- */
        .widget-section {
            margin-top: -80px; position: relative; z-index: 10; padding-bottom: 40px;
        }
        .widget-container {
            display: flex; gap: 15px; align-items: center;
            background: white; padding: 25px; border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            border: 1px solid rgba(0,0,0,0.05);
        }
        @media (max-width: 991px) {
            .widget-section { margin-top: 0; padding: 40px 0; }
            .widget-container { flex-direction: column; box-shadow: var(--shadow-sm); }
            .widget-row { display: flex; gap: 10px; width: 100%; }
        }
        
        .form-select {
            flex: 1; width: 100%;
            background-color: var(--input-bg);
            border: 1px solid transparent;
            padding: 16px 20px; border-radius: 12px;
            font-size: 15px; color: #333; font-weight: 600;
            cursor: pointer; outline: none; transition: 0.3s;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat; background-position: right 15px center; background-size: 16px;
        }
        .form-select:focus { background-color: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1); }

        .widget-btn-large {
            background: var(--primary-gradient); color: white;
            font-weight: 700; border: none; padding: 16px 40px;
            border-radius: 50px; cursor: pointer; font-size: 16px;
            white-space: nowrap; transition: 0.3s;
            box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
        }
        .widget-btn-large:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 123, 255, 0.4); }
        @media (max-width: 991px) { .widget-btn-large { width: 100%; } }

        /* --- 6. BADGES --- */
        .badges-row {
            display: flex; justify-content: center; gap: 60px; padding: 20px 0;
            margin-bottom: 20px; flex-wrap: wrap;
        }
        .badge-item {
            text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px;
            color: #555; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
        }
        .badge-circle {
            width: 80px; height: 80px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: white; box-shadow: var(--shadow-sm);
            font-size: 28px; color: var(--primary);
            transition: 0.3s; border: 2px solid #f0f0f0;
        }
        .badge-item:hover .badge-circle { transform: translateY(-5px); border-color: var(--primary); }

        /* --- 7. CARDS --- */
        .cards-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 40px; margin-top: 40px;
        }
        .card {
            background: white; border-radius: var(--radius); overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.03);
            transition: all 0.3s ease;
        }
        .card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0, 123, 255, 0.1); }
        .card-img-wrap { overflow: hidden; height: 240px; position:relative; }
        .card img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: 0.5s; }
        .card:hover img { transform: scale(1.08); }
        
        .card-body { padding: 35px; }
        .card h3 { color: #111; margin-bottom: 12px; font-size: 22px; }
        .card p { font-size: 15px; color: #666; margin-bottom: 25px; line-height: 1.6; }
        
        .btn-card {
            width: 100%; padding: 14px; border-radius: 12px;
            background: transparent; border: 2px solid var(--primary);
            color: var(--primary); font-weight: 700; cursor: pointer; transition: 0.3s;
            font-size: 15px;
        }
        .btn-card:hover { background: var(--primary); color: white; }

        /* --- 8. CONTENT BLOCKS --- */
        .content-block {
            display: flex; align-items: center; gap: 80px;
        }
        .content-block.reverse { flex-direction: row-reverse; }
        .cb-text { flex: 1; }
        .cb-img { flex: 1; position: relative; }
        
        .cb-img img { 
            border-radius: var(--radius); 
            box-shadow: var(--shadow-lg);
            width: 100%; 
        }
        
        @media (max-width: 991px) {
            .content-block, .content-block.reverse { flex-direction: column; gap: 40px; }
        }
        
        .section-heading { font-size: 42px; color: #111; margin-bottom: 25px; font-weight: 800; }
        .section-sub { max-width: 700px; margin: 0 auto 60px; color: #666; font-size: 18px; line-height:1.6; }
        
        .list-check li { margin-bottom: 18px; display: flex; gap: 15px; align-items: center; color: #333; font-size: 17px; font-weight: 500; }
        .list-check i { color: var(--primary); font-size: 20px; }

        /* --- 9. FAQ --- */
        .faq-box {
            background: white; border: 1px solid #eee;
            border-radius: 16px; margin-bottom: 15px; overflow: hidden;
            transition: 0.3s;
        }
        .faq-box.active { border-color: var(--primary); box-shadow: 0 5px 20px rgba(0, 123, 255, 0.08); }
        
        .faq-question {
            padding: 22px 30px; cursor: pointer;
            display: flex; justify-content: space-between; font-weight: 700; color: #222; font-size: 17px;
        }
        .faq-box.active .faq-question { color: var(--primary); }
        
        .faq-answer {
            background: #f9fcff; color: #555; padding: 0 30px;
            max-height: 0; overflow: hidden; transition: 0.4s ease;
            line-height: 1.7; font-size: 15px;
        }
        .faq-box.active .faq-answer { padding-bottom: 25px; max-height: 300px; }

        /* --- 10. SOCIAL BANNER --- */
        .social-banner {
            background: var(--primary-gradient);
            padding: 60px 80px; border-radius: 24px;
            color: white; display: flex; justify-content: space-between; align-items: center;
            box-shadow: 0 25px 50px rgba(0, 123, 255, 0.2);
            margin: 0 20px; position: relative; z-index: 5;
        }
        @media (max-width: 768px) { .social-banner { flex-direction: column; text-align: center; gap: 30px; padding: 40px; } }
        
        .social-links a {
            display: inline-block; width: 55px; height: 55px; line-height: 55px;
            background: rgba(255,255,255,0.2); text-align: center; border-radius: 50%;
            color: white; margin-left: 15px; transition: 0.3s; backdrop-filter: blur(5px); font-size: 20px;
        }
        .social-links a:hover { background: white; color: var(--primary); transform: translateY(-5px); }

        /* --- 11. FOOTER (LIGHT & PRO) --- */
        footer {
            background-color: #093fd629;
            color: #444; 
            padding: 120px 0 0; 
            margin-top: -60px; 
            border-top: 1px solid #eee;
            position: relative;
        }
        
        .footer-grid {
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px;
        }
        @media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } }
        
        /* Footer Headers */
        .footer h4 { color: #1a1a1a; margin-bottom: 25px; font-size: 18px; font-weight: 800; }
        
        /* Footer Links */
        .footer ul li { margin-bottom: 14px; }
        .footer a { color: #555; font-weight: 500; transition: 0.2s; }
        .footer a:hover { color: var(--primary); padding-left: 5px; }
        
        /* Footer Bottom Bar */
        .footer-bottom { 
            background: #f8f9fa; border-top: 1px solid #e9ecef; 
            padding: 25px 0; text-align: center; font-size: 14px; 
            color: #666; font-weight: 500;
        }

        /* --- OVERLAYS & MODALS --- */
        .overlay-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 2000; 
            display: none; justify-content: center; align-items: center;
        }
        .overlay-bg.active { display: flex; animation: fadeIn 0.3s; }
        
        .modal-content {
            background: white; padding: 30px; border-radius: 20px;
            width: 90%; max-width: 450px; box-shadow: 0 25px 50px rgba(0,0,0,0.25);
            position: relative;
        }
        
        .mobile-menu {
            position: fixed; top: 0; right: -100%; width: 300px; height: 100%;
            background: white; z-index: 3000; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
            padding: 30px; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        }
        .mobile-menu.active { right: 0; }
        
        .currency-dropdown {
            position: absolute; top: calc(100% + 10px); right: 0; background: white;
            border: 1px solid #eee; width: 140px; display: none; z-index: 200;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden;
            animation: fadeIn 0.2s;
        }
        .currency-dropdown.active { display: block; }
        .cur-opt { padding: 12px 15px; cursor: pointer; color: #333; font-size: 14px; font-weight: 600; }
        .cur-opt:hover { background: #f0f7ff; color: var(--primary); }

        .currency-wrapper { position: relative; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body>

    <header class="desktop-header">
        <a href="index.php" class="logo">
                <img src="img/logo.png" alt="Your Impact" style="height: 50px;">
            </a>
        <nav class="desktop-nav">
          
            
                <a href="index.php">Home</a>
                <a href="food.php">Food Aid</a>
                 <a href="water.php">Water Projects</a>
                <a href="orpan.php">Orphan Sponsorship</a>
                 <a href="zakat.php">Zakat</a>
                 <a href="blog.php">Blog</a>
                 <a href="about.php">About</a>
        </nav>
        <div class="desktop-actions">
            <div class="currency-wrapper">
                <button class="currency-btn-desk" onclick="toggleCurrency(this)">
                    <span class="cur-display">GBP</span> <i class="fas fa-chevron-down"></i>
                </button>
                <div class="currency-dropdown">
                    <div class="cur-opt" onclick="setCurrency('£', 'GBP')">GBP (£)</div>
                    <div class="cur-opt" onclick="setCurrency('$', 'USD')">USD ($)</div>
                    <div class="cur-opt" onclick="setCurrency('€', 'EUR')">EUR (€)</div>
                 </div>
            </div>
            
            <div class="cart-icon-desk" onclick="toggleCart()">
                <i class="fas fa-shopping-basket"></i>
                <div class="cart-badge" style="display:none;">0</div>
            </div>
            
            <button class="btn" onclick="scrollToDonate()">Donate Now</button>
        </div>
    </header>

    <header class="mobile-header">
        <div class="mobile-top-row">
             <a href="index.php" class="logo">
                <img src="img/logo.png" alt="Your Impact" style="height: 50px;">
            </a>
            <div class="mobile-actions-top">
                <div class="currency-wrapper">
                    <button class="currency-btn-mobile" onclick="toggleCurrency(this)">
                        <span class="cur-display">GBP</span> <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="currency-dropdown">
                        <div class="cur-opt" onclick="setCurrency('£', 'GBP')">GBP (£)</div>
                        <div class="cur-opt" onclick="setCurrency('$', 'USD')">USD ($)</div>
                        <div class="cur-opt" onclick="setCurrency('€', 'EUR')">EUR (€)</div>
                     </div>
                </div>

                <button class="menu-btn-mobile" onclick="toggleMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        <div class="mobile-bottom-row">
            <button class="mobile-donate-btn" onclick="scrollToDonate()">Donate</button>
            <div class="icon-box-mobile cart-box-mobile" onclick="toggleCart()">
                <i class="fas fa-shopping-basket"></i>
                <div class="cart-badge" style="display:none;">0</div>
            </div>
        </div>
    </header>

    <div class="hero">
        <div class="hero-overlay"></div>
        <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=1600');"></div>
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1594708767771-a7502209ff51?q=80&w=1600');"></div>
        
        <div class="hero-content">
            <div class="hero-inner">
                <div class="hero-title">GIVE<br><span>HOPE TODAY</span></div>
                <div class="hero-sub">Charity extinguishes sin just as water extinguishes fire. Join us in making a global impact.</div>
            </div>
        </div>
    </div>

    <div class="widget-section" id="donate-area">
        <div class="container">
            <div class="widget-container">
                <select id="d-cause" class="form-select">
                    <option>Gaza Famine Emergency</option>
                    <option>Clean Water Projects</option>
                    <option>Zakat Fund</option>
                    <option>Orphan Sponsorship</option>
                      <option>Need Is Greatest</option>
                    <option>Livelihood Projects</option>
                    <option>Food Aid</option>
                      <option>Emergency Aid</option> 
                </select>

                <div class="widget-row">
                    <select id="d-freq" class="form-select">
                        <option>One-Off</option>
                        <option>Monthly</option>
                    </select>
                    <select id="d-amount" class="form-select">
                        <option value="50" class="amt-opt">£ 50</option>
                        <option value="100" class="amt-opt">£ 100</option>
                        <option value="250" class="amt-opt">£ 250</option>
                        <option value="other">Other Amount</option>
                    </select>
                </div>

                <select id="d-type" class="form-select">
                    <option>General Donation</option>
                    <option>Zakat</option>
                    <option>Sadaqah</option>
                </select>

                <button class="widget-btn-large" onclick="addToCart()">
                    <i class="fas fa-heart" style="margin-right:8px;"></i> Donate Now
                </button>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="badges-row">
            <div class="badge-item">
                <div class="badge-circle"><i class="fas fa-check-shield"></i></div>
                <span>100% Policy</span>
            </div>
            <div class="badge-item">
                <div class="badge-circle"><i class="fas fa-award"></i></div>
                <span>Top Rated</span>
            </div>
            <div class="badge-item">
                <div class="badge-circle"><i class="fas fa-globe-americas"></i></div>
                <span>Global Reach</span>
            </div>
        </div>
    </div>

    <section class="section container">
        <div class="text-center">
            <h2 class="section-heading">Urgent Appeals</h2>
            <p class="section-sub">We deliver aid where it is needed most, providing relief to crisis-stricken communities.</p>
        </div>
        <div class="cards-grid">
            <div class="card">
                <div class="card-img-wrap">
                    <img src="https://images.unsplash.com/photo-1594708767771-a7502209ff51?q=80&w=600">
                </div>
                <div class="card-body">
                    <h3>Gaza Emergency</h3>
                    <p>Families are facing starvation. Your donation provides urgent food packs and medical aid.</p>
                    <button class="btn-card" onclick="addToCart()">Donate Now</button>
                </div>
            </div>
            <div class="card">
                <div class="card-img-wrap">
                    <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?auto=format&fit=crop&w=500">
                </div>
                <div class="card-body">
                    <h3>Zakat Appeal</h3>
                    <p>Purify your wealth. Your Zakat transforms lives by empowering the most vulnerable.</p>
                    <button class="btn-card" onclick="addToCart()">Pay Zakat</button>
                </div>
            </div>
            <div class="card">
                <div class="card-img-wrap">
                    <img src="https://plus.unsplash.com/premium_photo-1663100722417-6e36673fe0ed?q=80&w=600">
                </div>
                <div class="card-body">
                    <h3>Where Need is Greatest</h3>
                    <p>Allow us to allocate your funds to the most critical emergencies happening right now.</p>
                    <button class="btn-card" onclick="addToCart()">Give Support</button>
                </div>
            </div>
        </div>
    </section>

    <section class="section" style="background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);">
        <div class="container content-block">
            <div class="cb-text">
                <h2 class="section-heading text-primary">Fulfil Your Zakat</h2>
                <p style="font-size:18px;">Zakat is more than charity; it is a pillar of faith and a lifeline for the poor. We ensure your Zakat reaches those eligible with 100% transparency.</p>
                <ul class="list-check">
                    <li><i class="fas fa-check-circle"></i> Provide food security to starving families.</li>
                    <li><i class="fas fa-check-circle"></i> Build sustainable water wells in drought areas.</li>
                    <li><i class="fas fa-check-circle"></i> Sponsor orphans with education and care.</li>
                </ul>
                <button class="btn" style="margin-top:30px;" onclick="addToCart()">Calculate & Give Zakat</button>
            </div>
            <div class="cb-img">
                <img src="https://images.unsplash.com/photo-1459183885421-5cc683b8dbba?auto=format&fit=crop&w=800">
            </div>
        </div>
    </section>

    <section class="section container">
        <div class="content-block reverse">
            <div class="cb-text">
                <h2 class="section-heading text-primary">Why Trust Us?</h2>
                <p style="font-size:18px;">In a world of uncertainty, you need a partner you can trust. <strong>Global Relief Bridge</strong> is built on the principles of transparency, efficiency, and sincerity.</p>
                <ul class="list-check">
                    <li><i class="fas fa-check"></i> <strong>Regulated:</strong> Registered with the UK Charity Commission.</li>
                    <li><i class="fas fa-check"></i> <strong>Direct Delivery:</strong> We work on the ground to minimize costs.</li>
                    <li><i class="fas fa-check"></i> <strong>Feedback:</strong> Receive reports on exactly how your money helped.</li>
                </ul>
            </div>
            <div class="cb-img">
                <img src="img/2.png">
            </div>
        </div>
    </section>
    
    <section class="section sadaqah-bg">
        <div class="container">
              <h2 class="section-heading text-primary">The Prophet Muhammad (pbuh) said:</h2>
            <blockquote class="quote-box">
                "When a man dies, his deeds come to an end except for three things: Sadaqah Jariyah (ceaseless charity); a knowledge which is beneficial, or a virtuous descendant who prays for him."
            </blockquote>
            <button class="btn btn-green" style="border: 2px solid white;">Donate Now</button>
        </div>
    </section>

    <section class="section" style="background-color: #fff;">
        <div class="container">
            <div class="text-center" style="margin-bottom: 50px;">
                <h2 class="section-heading text-primary">Frequently Asked Questions</h2>
            </div>
            <div style="max-width: 800px; margin: 0 auto;">
                <div class="faq-box">
                    <div class="faq-question">How is my donation used? <i class="fas fa-chevron-down"></i></div>
                    <div class="faq-answer">We operate a 100% donation policy on specific appeals, meaning every penny goes to the cause. For others, a small admin fee covers operational costs.</div>
                </div>
                <div class="faq-box">
                    <div class="faq-question">Can I donate my Zakat here? <i class="fas fa-chevron-down"></i></div>
                    <div class="faq-answer">Yes, simply select 'Zakat' in the donation widget. We have a dedicated fund strictly for Zakat-eligible recipients.</div>
                </div>
                <div class="faq-box">
                    <div class="faq-question">Is this site secure? <i class="fas fa-chevron-down"></i></div>
                    <div class="faq-answer">Absolutely. We use SSL encryption and secure payment gateways (Stripe/PayPal) to protect your data.</div>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <div class="social-banner">
            <div>
                <h2>Join Our Community</h2>
                <p style="color: rgba(255,255,255,0.9); margin-bottom: 0;">Follow our journey and see the impact of your support.</p>
            </div>
            <div class="social-links">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div>
                    <h4>Global Relief Bridge</h4>
                    <p style="color:#555;">Empowering communities, saving lives, and building a better future through faith and action.</p>
                    <br>
                    <p style="color:#333; font-weight:600;"><i class="fas fa-phone-alt" style="margin-right:8px; color:var(--primary);"></i> 0333 533 0642</p>
                    <p style="color:#333; font-weight:600;"><i class="fas fa-envelope" style="margin-right:8px; color:var(--primary);"></i> support@globalreliefbridge.org</p>
                </div>
                <div>
                    <h4>Our Appeals</h4>
                    <ul>
                        <li><a href="#">Emergency Relief</a></li>
                        <li><a href="#">Food Aid</a></li>
                        <li><a href="#">Water Solutions</a></li>
                        <li><a href="#">Orphan Care</a></li>
                    </ul>
                </div>
                <div>
                    <h4>GlobalReliefBridge</h4>
                    <ul>
                        
                        <li><a href="index.php">Home</a></li>
                <li><a href="food.php">Food Aid</a></li>
                <li><a href="water.php">Water Projects</a></li>
                <li><a href="orpan.php">Orphan Sponsorship</a></li>
                <li><a href="zakat.php">Zakat</a></li>
                <li><a href="blog.php">Blog</a></li>
                <li><a href="about.php">About</a></li>
                       
                    </ul>
                </div>
                <div>
                    <h4>Accreditation</h4>
                    <p style="font-size:14px; margin-bottom:15px; color:#555;">Regulated by the Charity Commission.</p>
                    <div style="display:flex; gap:10px;">
                         <div style="width:40px; height:40px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#FFD700;"><i class="fas fa-award"></i></div>
                         <div style="width:40px; height:40px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#FFD700;"><i class="fas fa-star"></i></div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="container">
                    &copy; 2025 Global Relief Bridge - Charity Reg. No. 1192710. All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>

    <div class="overlay-bg" id="cart-modal">
        <div class="modal-content">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid #eee; padding-bottom:15px;">
                <h3 style="margin:0;">Donation Basket</h3>
                <i class="fas fa-times" onclick="toggleCart()" style="cursor:pointer; font-size:20px; color:#999; transition:0.3s;"></i>
            </div>
            
            <div id="cart-items" style="max-height:250px; overflow-y:auto; margin-bottom:20px;">
                <div style="text-align:center; padding:30px 0;">
                    <i class="fas fa-shopping-basket" style="font-size:40px; color:#eee; margin-bottom:10px;"></i>
                    <p style="color:#999;">Your basket is empty</p>
                </div>
            </div>
            
            <div style="background:#f9f9f9; padding:15px; border-radius:10px; margin-bottom:20px;">
                <div style="display:flex; justify-content:space-between; font-weight:bold; font-size:18px; color:#333;">
                    <span>Total Donation:</span> <span id="cart-total" class="text-primary">£0.00</span>
                </div>
            </div>
            
            <button class="btn" style="width:100%" onclick="checkout()">Proceed to Payment</button>
        </div>
    </div>

    <div class="mobile-menu" id="mobile-menu">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;">
            <h3 style="color:var(--primary); margin:0;">Menu</h3>
            <i class="fas fa-times" onclick="toggleMenu()" style="font-size:24px; cursor:pointer; color:#333;"></i>
        </div>
        <ul>
            <li style="padding:15px 0; border-bottom:1px solid #f0f0f0;"><a href="#" style="font-size:18px; font-weight:500; color:#333;">Home</a></li>
            <li style="padding:15px 0; border-bottom:1px solid #f0f0f0;"><a href="#" style="font-size:18px; font-weight:500; color:#333;">Food Aid</a></li>
            <li style="padding:15px 0; border-bottom:1px solid #f0f0f0;"><a href="#" style="font-size:18px; font-weight:500; color:#333;">Water Projects</a></li>
            <li style="padding:15px 0; border-bottom:1px solid #f0f0f0;"><a href="#" style="font-size:18px; font-weight:500; color:#333;">Zakat</a></li>
            <li style="padding:15px 0;"><a href="#" style="font-size:18px; font-weight:500; color:#333;">About Us</a></li>
        </ul>
    </div>

    <script>
        // --- LOGIC ---
        let cart = [];
        let currencySymbol = '£';

        // Toggles
        function toggleMenu() {
            document.getElementById('mobile-menu').classList.toggle('active');
        }
        function toggleCart() {
            document.getElementById('cart-modal').classList.toggle('active');
        }
        function toggleCurrency(btn) {
            const wrapper = btn.closest('.currency-wrapper');
            const dropdown = wrapper.querySelector('.currency-dropdown');
            // Close others first
            document.querySelectorAll('.currency-dropdown').forEach(el => {
                if(el !== dropdown) el.classList.remove('active');
            });
            dropdown.classList.toggle('active');
        }
        function scrollToDonate() {
            document.getElementById('donate-area').scrollIntoView({behavior: 'smooth'});
        }

        // Currency Setter
        function setCurrency(sym, text) {
            currencySymbol = sym;
            
            // Update ALL currency displays
            document.querySelectorAll('.cur-display').forEach(el => el.innerText = text);
            
            // Close all dropdowns
            document.querySelectorAll('.currency-dropdown').forEach(el => el.classList.remove('active'));
            
            // Update widget options
            const opts = document.querySelectorAll('.amt-opt');
            opts.forEach(opt => {
                let val = opt.value;
                opt.innerText = sym + " " + val;
            });
            renderCart();
        }

        // Cart Logic
        function addToCart() {
            const cause = document.getElementById('d-cause').value;
            const freq = document.getElementById('d-freq').value;
            const amtRaw = document.getElementById('d-amount').value;
            const amt = amtRaw === 'other' ? 50 : parseFloat(amtRaw); // Fallback for 'other'

            cart.push({cause, freq, amt});
            renderCart();
            
            // Visual Feedback
            toggleCart();
        }

        function renderCart() {
            const container = document.getElementById('cart-items');
            const totalDisplay = document.getElementById('cart-total');
            
            // Update Badges
            const badges = document.querySelectorAll('.cart-badge');
            badges.forEach(b => {
                b.innerText = cart.length;
                b.style.display = cart.length > 0 ? 'flex' : 'none';
            });

            // Empty State
            if(cart.length === 0) {
                container.innerHTML = `
                    <div style="text-align:center; padding:30px 0;">
                        <i class="fas fa-shopping-basket" style="font-size:40px; color:#eee; margin-bottom:10px;"></i>
                        <p style="color:#999;">Your basket is empty</p>
                    </div>`;
                totalDisplay.innerText = currencySymbol + '0.00';
                return;
            }

            let html = '';
            let total = 0;
            cart.forEach((item, index) => {
                total += item.amt;
                html += `
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #f0f0f0;">
                        <div>
                            <strong style="color:#333; display:block; margin-bottom:4px;">${item.cause}</strong>
                            <span style="font-size:12px; color:#666; background:#eee; padding:3px 10px; border-radius:4px; font-weight:600;">${item.freq}</span>
                        </div>
                        <div style="text-align:right;">
                            <span style="color:var(--primary); font-weight:bold; font-size:16px;">${currencySymbol}${item.amt}</span><br>
                            <span style="color:#ff4757; font-size:12px; cursor:pointer; font-weight:600; margin-top:5px; display:inline-block;" onclick="removeItem(${index})">Remove</span>
                        </div>
                    </div>
                `;
            });
            container.innerHTML = html;
            totalDisplay.innerText = currencySymbol + total.toFixed(2);
        }

        function removeItem(index) {
            cart.splice(index, 1);
            renderCart();
        }

        function checkout() {
            if(cart.length === 0) return alert("Your basket is empty.");
            
            // Simulated Post
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'checkout.php';
            
            const inputData = document.createElement('input');
            inputData.type = 'hidden';
            inputData.name = 'cart_data';
            inputData.value = JSON.stringify(cart);
            
            const inputSym = document.createElement('input');
            inputSym.type = 'hidden';
            inputSym.name = 'currency_symbol';
            inputSym.value = currencySymbol;

            form.appendChild(inputData);
            form.appendChild(inputSym);
            document.body.appendChild(form);
            form.submit();
        }

        // Slider
        let slideIndex = 0;
        const slides = document.querySelectorAll('.slide');
        setInterval(() => {
            slides[slideIndex].classList.remove('active');
            slideIndex = (slideIndex + 1) % slides.length;
            slides[slideIndex].classList.add('active');
        }, 5000);

        // FAQ Logic
        document.querySelectorAll('.faq-question').forEach(btn => {
            btn.addEventListener('click', () => {
                const parent = btn.parentElement;
                // Close others (Accordion style)
                document.querySelectorAll('.faq-box').forEach(box => {
                    if(box !== parent) box.classList.remove('active');
                });
                parent.classList.toggle('active');
            });
        });

        // Close dropdowns on click outside
        window.addEventListener('click', (e) => {
            if (!e.target.closest('.currency-wrapper')) {
                document.querySelectorAll('.currency-dropdown').forEach(el => el.classList.remove('active'));
            }
            if (e.target.classList.contains('overlay-bg')) {
                toggleCart();
            }
        });
    </script>
</body>
</html>

��b IDATx��ytVս��ϓ22 �A@�IR��:�h�CiZ[�v��*E��:�W��ũZA� ^d��QeQ ��@ !��j�Z�'�>g�s��V��仿$�|?g�)&x-E�IE�N�T ��;@x�T.i��%-��X��}S�v�S�5�.��r/UHz^�_$-��W"�w��)�Ɗ�/@Z �&IoX��P�$K��}��JzX��:�;`�� &�, ��ŋu�i��,�e��6��m��X� Ե��rKb1�ԗ��)D�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�A�݀!��I*��]R;I�2$eZ#OR��Z��Sr��r�6m��teff�u��*((P��u�'��v{��DIߔ4^�pI��m�'77WEEE;v�Ǝ��4�-��$]'�RI��{��\�I�&�G�� :I��HJ�� DWBB��=�\��W�R�޽m� o$K�(�V9��ABB�.��}��jѢ��v�`^?IO�ȅ}ڶm�G}T#F��J`�5�6��$-��ھ}�F��I�&��v;0(h;��Б�3�8CӧOWf��!�;A i:��F_m��9s&�|�q%=�#��w��Z�p�rrrl�a A� &��P\\��СC�[A#!� �{��o��l��F�} `��E2��}��M��K/��vV��)i��{4Bff�V�\��|ۭX�`��b�@��k��ɶ�@��%i��$K�z��5z�h�mX�[�I�XZ`� '��b%$��r�5��M��4�º��/�l� ԃ��ߖ�xhʔ)�[@=�} K�6IM}^��5k��㏷݆��z ��Η�ÿO��:gdG��B�m��y�T/��@+��Vɶ�纽z񕏵l�.��y�޴i�t뭷zV��0[�Y^>�Ws�qs}�\/�@$�(�T7�f��.��I�nݺi��R$푔n��.�~?H))\Z�RW'M�o�~v� Ov6o��ԃ��x��z��!�S,&�xm/�y�ɞԟ?�'ua��S�ѽ��b�,8�Gל�K��b��o�i�&��3t7Y,��)JJ��c[�n��z��ӳ�d�E��&K�sZ�Lӄ��I?@��&�%ӟ�۶mSMM�њ0��i�ؐSZ�,�|J+��N�� ~�,��0A0!5%Q-��YQQa��3}$_vV��r�f9f?S8`��zD�AD�AD�AD�AD�AD�AD�AD�AD�A�d��q�P��,ت��m��M��mg��1V?�r�S��I꒟��]�u|�l ��R��CyE�f�٢9�j��URb�zt�Ѱ!m5~tG��j�2�D��h�G�*�{H9�)꒟��ר3:(+3\?�/;TU��ݭ��ʴ~S�6lڧ��U��J*�i�$�d�(#=Yݺd�{�,�p|3��B))��q�:��vN0Y.�jk��ק6��;�SɶVzHJJЀ�-u��tѹ�սk��>�QUU��\��޲��~]fF�n��K?��&��ߡ��5��b��=z9�)��^�|u_�k�-[��y%Z��NU6 ��7M�i��:�]ۦt�k��[�n� ��X��(�e6B�b�.��"�8�cۭ|��~�t�e��u��u��w�|��ή��I-5�"��~��U��k��;��Zi�cE�m��N/��:�]�M��> cQ�^�ui�ƞ��??Ң��p�c#TUU�3�U��a��k��Nw�A`��:��Y_V��-8.KKf�R��itv�޲* 9S�6ֿ��j�,Ճ��NOMߤ��]��z�^��f��O�h��|��<�>@Å5��_��/I��u?{S��Y��4h�K��/2��]��4�%i��t�5��q�]�G�G��e�2�%i�R��| ��W��&f�*^]�??��vq[��Lg��E��_��3f}��F�xu~��}q��d�-��ږF�xu~I N>\��;��͗��O��֊�:�̗��W��J@Bh�W=��y��|��Ggwܷ�H�_NY��?��)T��d��i�'?��խw�h�lm�Qi� �!SUU��sw4kӺ�e4rf��x�u�-[n�Ht��MFj}�H�_��u�~w�>)�o�V}�(�T'��e��bʒ�v��3_�[+v�n@Ȭ\S�}��o��t��}w��=��k�H��F�n�xg��S�� 0eޢm~�l��}��u��q��Z�f��F��oZuu��E��g� ��`z�t~?b�;t�%�>��WTkķ�h��[�2e�G8L��IW�x��,��^\thr�l��^��Ϊ��{��=�ǆ��<}�q��V�@ ��⠨��W��y^��L��F_��>�0��U�k��D�u�ʫu��Cs$)I��v��:�IK��;6ֲ�4{^��6��ե��m+l��3>�݆��uM �9��u��?>�Z��c��}g�~q��h��Kw��ڭ��eFMM�~p�М�uq�ǿz��6T��b@8��@Y�|��jx��]�(^]�gf�}�M�"tG ��-w��.@�vOqh~/�HII��`��S�[l��.��6�nØXL��9�v�U�cOo��B�\�x�o��Ǥ�'�T�&I��Ǎ�Qw��_w�p�v��[�k�m��O�{�w�~�>�#=P1P�ɞ�a�-w��e�:i�Ǐl��H��o�׈��꒟�f9��SzH�?��+s�h�k%F��s:��q��Vh�qY��`��j�vO�'ρ?PyX3�lх��]�˾u��V�{��ݞ]1��,�M�z�YN�W~̈́�joY�n��}��ȚF߾׮mS]��F�� z�+�E��D�xm/��d{�F��{-�W��-�4w�Y��듏:�?��?��_�g�P�f� ^3��e��cg ��ҵs��8R��2�מ�z�@T��A��N��Gj�)��}CNi��/�R~��}��c:5�{��!��Z�HӋӾ��6}T�]��G�]�7W�6^��n �9*,��Y��qOZj��:P?�Q�� DF��L�|��?��-�^��.��Ɵ�7��}f�F�h׶��xe��2P�s��c��z�1��&5\cn��[�=�V��n[��ĶE鎀uˌ��d3G�II ��k�;�l�NmشOuuRVf��BE��]ۣ�eӶu :��X�-[��(��e��r�4��~��LH�i�6:��Ѻ@ԅ��r��ST�0��trk%$Č��0ez��"� *��z�"��T�/X9|8��.��C5F�eg}��C�Q%�͞�ˣ��JvL��/��?�j�^��h��&�9x�F��`�њ�Z��(��&�y��F��&Iݻf�g��#��W��;�3^�{Wo^4�'v�V[[�K'��;+��m��Ӎִ�]AC@��W?1^{�එyh��+^]��f��m��~�i��Ե�]AB@��WTk�̏t��uR�?�l�.O�IH�i�Yy�Զ�]A�ˀ7c��:��q}ힽ��a�f�6��Z~�қm(��+sK4{^�6}T��*UUu�]��n��.��:kx{�:��2�� _m��=�sA�ߤ�U��@?��Z��-V�ކ�е��z왍��Nэ��{|5� pڶn��b� �p-@��sPg]0G7�fy��-��M�{GCF��'%�{�4`��=�$-�Ge\��eU:m�+Z�t�'�W��jO�!O�AF@��i�k&t�݆��ϥ_�� e��}��=]"��Wz��_��.��͜�E3�l�e�W��F�i��h|t��-w��Z��ۍ��-�u��w=�6�YN��{��6|��}��|��*={��Ѽ��n.�S�.��z��1z��j�ۻT��H]��흾� �D�u��D��v��mv��K��.`V]yY�~s�I��@��t?/��ϓ.� ��m�&�["�+��P��?M��z�ovV��ЫG3�-�G��RR��[(!!\�_��,��^��%?�v@��ҵ�ő�� m��`�Y)�te�m8��G��Mx.))A�]Y��i`�V��i��W�`�?�^��~!�S#��^+�ѽ��GZj��?V�ģ�0.))A�꨷��l�z�L�*��]��O��X�r��Y�`DBBL�Oj��{��-M�H'�ii�-ϰ��ok�7^�� )쭡�b��]�UX��S�ְ�mռY��|5��*��c�ֽk��0B��7镹%ڽ��P#8n�Ȏ��q}mJr�23��_>��l��E�5��$i��wu��i�+ ��H�~�F`��IjƵ@�q �\ �@#qG�0"��.�0"� l��`��.�0!� ,�AQ�HN6�q��z�k��KJ�#��o;`X�v2��>,tێJ��J��7Z/*��A��.@f�ف�jM��zk��g��@TvZ�H3Z�xu�6Ra��'%��O��?/d�Q��5�x��Yk��U]��R�ֽk�ق@��Da�S^�RS�ּ�5��|��B��e��HNN�͘p �Hvc�Y�c��C5:��y �#��`�οb��;z��2��.��!��k��r��}g��U��Wk��yZ��n�=�f�� Pv��sn��3�p��~�;4p�˚=�ē~�Nm�I] ��¾0lH[��_��L��h�sh��_��ғߤ��c_њ�e��c�)��g�7��V�IZ��5��yr�gk̞W��#��IjӪ�v�>��՞��y睝��M�8�[�|�]��\�շ��8�M��6�%�|@P��Z��ڨ�I-m��>=�k��=�'a��iRo�-x�?>Q��.��}`�Ȏ:�Ws�mu� �u�� > �.@,&��;+!!�˱�tﭧD��Q�w��RW\��vF\~Q7�>�s�p�Y�w$��%A~�;~}��6��¾��g�&if_��=��j�,�v+�U��L�1(tW��a��ke��:@Ș>�j�$�Gq�2�t7S?�vL��|��]u�/�� .�(�0�E��6M��k�6�h��iۺ��z�ښ��O��r��i�f�ޱ�xm/��G�x>�� La�l%%��~�{��l�Bs��R4�*��}{�0Z/��t��N�I��ɚ��p�V^#�L�f�:u@k#�RSu�� =��S^��Zy��uR/��.@n�&��΃z~��B=��0eg뺆��#,��Þ�[�B/?�H� uUf�7�y ��W��y}Bw��eg��ל`��Wh�(|��|��`l`.�;�Ws��?��V�@"��c:i�ɍ��L֯��PG�v�6z�c�tM��̠��'��:w��uW��;d��=�;E�v�e��D��}��9�J@B(��0�iհ�b�v�P�1{�\P��&��G�7��D��޴I��y��_��$-Q�jm�~Yrr�&]�C��Dv%b�h|�Yz�n�i_�R;�k��g�}n��JOII��w��yuL}{�Ќǋ�}�:+3Y�?:��W��J/N+Rz��d=�h��b��;d��j͒su��ݔ��@NKMԄ�j��qz��C��5@��y°�h��L��m;*5�ezᕏ��=�ep�� X��L�n?�מ:��r�`��۵�tŤ�Z�|�1�v`�V�뽧��_c��s�ج'�ߤ%o�Tuum�k%%%h�)�u�y]��N�k��[�n� ��'b�2� �l�.=��͜�E%��gf$��[c;�s:�V-�͞W��ߤW�h��-��j�7��]4��=��F-X�]�>��Z�LS�i��[�Y��*�W��e;��Z�a��n(ӇW|e(HNNP��5[= r4tP �&0�<��p�c#��`�v�TNV GFq��v�T�i�*��Ty�a�m�$��ߏWyE�*�V��JKMTfF�w��>'��$-�ؽ�.Ho��.��8��c��"@D�AD�AD�AD�AD�AD�AD�AD�AD�A~�j��*֘,N;Pi�3599�h=��g�o�ضL�g��i��J�5��փy~�}&��Z��d9p֚ e:|��h��L��`��`��b/��d9p�?�fgg+%%�hM��gXo��s�ج��, Ω��Ol0Z��h=x��d��j��L��m��h��ݻ�o��O�[�g_�l�,8a��]�٭+��ӧ��0��$��I�]��c��]:粹:Te��ꢢ"�5a^��K�g�h,&��=��=��՟^��߶�ߢE�ܹS �J}��I%�:8 �IDAT~,�9/ʃPW'M�o�}z��N�ƍ쨓z�Pb��NZ�~�^z�=4m��s��w��g;5�� Y�~��S�VM��RXUյڱ�R��f��?��s�:w �;6�H:�º��i��5��-�maM��&O��3;1I�K�eam�Z�h�͛7+##�v+�c ~u�~ca]�Gn��F'��ټL~��PPP��b��n� v�o��C�4R,ӟ��gg��%�hq}@#M�4IÇ�� O�y^�x�M��Z�x�� )� �yOw@H�k�N˖-Sǎm�b]X@n��+i��͖��!++K3g�d��\�$m�t�$^��Y�f��J��\8PR��F�)77W��א!Cl��$i��:�@@��_o��G�� I{$��#� ��8磌��ŋ9�1A��(�I�m7��֭��>}�ߴ�J�q�7ޗt��^� -[��ԩS�j�*��}��%]&�'� -��ɓ'�ꫯVzz��vB#�;a �7@G��xI��{��j޼�ƌ��.�LÇWBB�7��`O��"I�$/�@R�@eee��@�۷��>}�0��,ɒ2$53Xs��|c��S~��rpTYYY��} kH�c�%��&k��.]��, @��AD�AD�AD�AD�AD�AD�AD�AD�A��@�l��T��<%''�*��L�o�^={��رc5h� %$+CnܸQ3f��ҥK�}�vUVV��s�9G� R,�_{�x��ˇ��3��o߾��;TTTd�}��馛��]uuuG��~��i�ԩ��@4��b��n��v�m�vfϞ�/�Peeeq}}za I~,�誫��{UWW뮻��}��_~Y�ƍSMMM��Yχ֝w��aw\�ď�cxꩧt�E��ƍկ_?�۷��5��@�u�?�1�k�N�ׯWzz�/�w�y�>}z�j��3�� k�(�ٺu��q_�Z�v�f̘��:~�AB�Q&�r��|��!��%K��ҥK��g��Ԟ={<_��X-�z� !��C�y�FUU��z~�AB�QIIIjݺ��W�$UXX��D��ٳ��Z~�AB�Q�ƍ�e��c��W�$<(~<�RSS�v�Zu��jjjԧO�Z��Qu��@4� 8��m�&&&j�ԩ��g�$�ď��1h� ͟?_��{�768��@��g �=@�`)))��5o��6m��3��)��ѣ�ƌ��J�;w��ҿUTT��/��K��ZR�{~a=@��0o�<��*狔��i�F��ɶ[�ˎ;T]]��OX@��?��K�.�ۈ�xN ��pppppppppppppppppP��fl߾],�{ｧ��k۶mڿ��o�5B��TӦMӴiӴ|�r�� DB��2e�|�A��n!D��y�'t��k�Ν�[A� $***t�5��'�� "�!�駟��o�a�Dn�Ν:t�֭[g�D��ШQ��0�6q�D��;��@ ��x� M�6�v�(Pii��z�m��Z�4e��w��"@��̴i�x��f��[��~-F�ٱc��&I�Z�2�|��n��!�?$@��{�[��H�T��ɏ�#��@�h��Ȏ��I#�_�m�(F��/6Z3��z��'�\r�,��r��!��;��w2Z3j��=~�G��Y��7��"I�$��i�I.�p��_"��?�p��N`�y��DD��?: ��_�� G�ÿa��b�7J��!B��x@�0�� B��o ��c��G��@`1��C��[@�0��G ��@`0��C��_�u�V1�� a��CX��>�W�` |��`!<��S�`"<��.��`#�c�`�?c��A��C4 �?��c�� p#��~@�0��?:��0��8&��_��M�Q1��J�h#��?��/`��7��;I��q7�aw�Q��A�1Hp ��!�#��<8��/#@�1��U�l7��=�S�=��K.�4Z�?E��_$i��@��!�1�!E4�?��`��P_� ��@��Bă�1��0�#��:��"��a��U�,�x�b��F��Y1� ��[��n|��n� ��#'��v�E��H:`�x��b� ��#��v��D��4��Y ��h��i.i��&��E�Ζ��v#��O� H��4�I�Ŷ��}�:I�k�h��@t��ZR��F��#��(�tXҙ��zZ �?��I��3l7q��@õ��|ۍ�1,G��p�u��Y� ��Ꮿ@h��J��v#�x��xk$ ��v#�9��5��}��_��$��c �S�#��=+��"K�{F��*m7�`#��%�H:NRS�p�6I?��sIՖ{Ap��$I$I:QR��v�2$�Z�@�UJ*��$�]<��F��O4IEND�B`�