<!--FOOTER SECTION-->

    <div class="hero-section">
        <!-- Cartoon Characters -->
        <div class="character character-left-1" data-aos="fade-right">
            <svg width="120" height="140" viewBox="0 0 120 140">
                <!-- African child character with traditional clothing -->
                <circle cx="60" cy="40" r="25" fill="#8B4513"/>
                <circle cx="52" cy="35" r="3" fill="#000"/>
                <circle cx="68" cy="35" r="3" fill="#000"/>
                <path d="M55 45 Q60 50 65 45" stroke="#000" stroke-width="2" fill="none"/>
                <rect x="45" y="65" width="30" height="40" fill="#FF4500" rx="5"/>
                <rect x="35" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="70" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="50" y="105" width="10" height="20" fill="#8B4513"/>
                <rect x="60" y="105" width="10" height="20" fill="#8B4513"/>
                <!-- Traditional headwrap -->
                <ellipse cx="60" cy="20" rx="35" ry="15" fill="#FFD700"/>
                <path d="M25 20 Q60 5 95 20" fill="#FF6347"/>
            </svg>
        </div>

        <div class="character character-left-2" data-aos="fade-right">
            <svg width="120" height="140" viewBox="0 0 120 140">
                <!-- African girl character -->
                <circle cx="60" cy="40" r="25" fill="#8B4513"/>
                <circle cx="52" cy="35" r="3" fill="#000"/>
                <circle cx="68" cy="35" r="3" fill="#000"/>
                <path d="M55 45 Q60 50 65 45" stroke="#000" stroke-width="2" fill="none"/>
                <rect x="45" y="65" width="30" height="40" fill="#32CD32" rx="5"/>
                <rect x="35" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="70" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="50" y="105" width="10" height="20" fill="#8B4513"/>
                <rect x="60" y="105" width="10" height="20" fill="#8B4513"/>
                <!-- Hair with beads -->
                <circle cx="45" cy="25" r="4" fill="#000"/>
                <circle cx="75" cy="25" r="4" fill="#000"/>
                <circle cx="60" cy="15" r="4" fill="#000"/>
                <circle cx="45" cy="25" r="2" fill="#FF0000"/>
                <circle cx="75" cy="25" r="2" fill="#FFD700"/>
                <circle cx="60" cy="15" r="2" fill="#00FF00"/>
            </svg>
        </div>

        <div class="character character-right-1" data-aos="fade-left">
            <svg width="120" height="140" viewBox="0 0 120 140">
                <!-- Boy with traditional elements -->
                <circle cx="60" cy="40" r="25" fill="#8B4513"/>
                <circle cx="52" cy="35" r="3" fill="#000"/>
                <circle cx="68" cy="35" r="3" fill="#000"/>
                <path d="M55 45 Q60 50 65 45" stroke="#000" stroke-width="2" fill="none"/>
                <rect x="45" y="65" width="30" height="40" fill="#4169E1" rx="5"/>
                <rect x="35" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="70" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="50" y="105" width="10" height="20" fill="#8B4513"/>
                <rect x="60" y="105" width="10" height="20" fill="#8B4513"/>
                <!-- Traditional cap -->
                <ellipse cx="60" cy="20" rx="30" ry="12" fill="#8B4513"/>
                <ellipse cx="60" cy="18" rx="25" ry="10" fill="#FFD700"/>
            </svg>
        </div>

        <div class="character character-right-2" data-aos="fade-left">
            <svg width="120" height="140" viewBox="0 0 120 140">
                <!-- Girl with traditional dress -->
                <circle cx="60" cy="40" r="25" fill="#8B4513"/>
                <circle cx="52" cy="35" r="3" fill="#000"/>
                <circle cx="68" cy="35" r="3" fill="#000"/>
                <path d="M55 45 Q60 50 65 45" stroke="#000" stroke-width="2" fill="none"/>
                <rect x="40" y="65" width="40" height="40" fill="#FF1493" rx="5"/>
                <rect x="35" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="70" y="75" width="15" height="25" fill="#8B4513"/>
                <rect x="50" y="105" width="10" height="20" fill="#8B4513"/>
                <rect x="60" y="105" width="10" height="20" fill="#8B4513"/>
                <!-- Traditional hairstyle -->
                <path d="M35 25 Q60 10 85 25 Q60 30 35 25" fill="#000"/>
            </svg>
        </div>

        <div class="hero-content" data-aos="fade-up">
            <h1 class="hero-title" data-aos="fade-up">Discover Your African Heritage<br>Through Our Rich Folk Tales</h1>
            <a href="#" class="cta-button" data-aos="fade-left">Explore Stories</a>
        </div>
        
        <div class="grass"></div>
    </div>

    <footer class="footer">
        <div class="footer-container">
            <div class="footer-section logo-section" data-aos="fade-right">
                <img src="./assets/images/ngazi-logo.jpg" alt="Ngazi Arts Logo" class="logo">
                <p class="tagline" data-aos="fade-right">Preserving African Heritage Through Timeless Stories</p>
            </div>

            <div class="footer-section" data-aos="fade-up">
                <h3>EXPLORE CONTENT</h3>
                <a href="#">Folk Tales Collection</a>
                <a href="#">Cultural Documentaries</a>
                <a href="#">Traditional Music</a>
                <a href="#">Historical Chronicles</a>
                <a href="#">Cultural Workshops</a>
                <a href="#">Heritage Tours</a>
            </div>

            <div class="footer-section" data-aos="fade-up">
                <h3>COMMUNITY</h3>
                <a href="#">Storytellers Network</a>
                <a href="#">Cultural Events</a>
                <a href="#">Educational Resources</a>
                <a href="#">Partner Organizations</a>
                <a href="#">Cultural Ambassadors</a>
                <a href="#">Youth Programs</a>
            </div>

            <div class="footer-section" data-aos="fade-up">
                <h3>GET IN TOUCH</h3>
                <div class="contact-info" data-aos="fade-up">
                    <p><strong>Location:</strong>PO Box: 102993 Kawempe<br>Kampala, Uganda</p>
                </div>
                <div class="contact-info" data-aos="fade-up">
                    <p><strong>Tel:</strong>+256 7722936124</p>
                </div>
                <div class="contact-info" data-aos="fade-up">
                    <p><strong>Email:</strong> you@ngaziarts.ug</p>
                </div>
                
            </div>
        </div>
        <!-- initialize scroll effect !-->        
    <script>
            AOS.init({
            duration: 1000,
            easing: "ease-in-out",
            once: true,
            mirror: false
            });
    </script>
        
    <script>end_load()</script>
    

<script>
    (function (w, d, s, u) {
    w.gbwawc = {
    url: u,
    options: {
            waId: "+256772293612",
            siteName: "Ngazi Arts",
            siteTag: "",
            siteLogo: "https://lwegatech.net/ngazi-arts/assets/images/ngazi-logo.jpg",
            widgetPosition: "RIGHT",
            triggerMessage: "Talk to Us!",
            welcomeMessage: "How can I help you?",
            brandColor: "#128C7E",
            messageText: "",
            replyOptions: ['',''],
        },
    };
    var h = d.getElementsByTagName(s)[0],
    j = d.createElement(s);
    j.async = true;
    j.src = u + "/whatsapp-widget.min.js?_=" + Math.random();
    h.parentNode.insertBefore(j, h);
    })(window, document, "script", "https://waw.gallabox.com");
    </script>

    </footer>