<footer id="footer">
    <!-- Newsletter Section -->
    <div class="footer-newsletter">
        <div class="awesome-container">
            <div class="newsletter-wrapper">
                <div class="newsletter-left">
                    <div class="am-logo-small">Awesome <span>Mall</span></div>
                    <div class="newsletter-content">
                        <h5>New to Awesome Mall?</h5>
                        <p>Subscribe to our newsletter to get updates on our latest offers!</p>
                    </div>
                </div>

                <div class="newsletter-form">
                    <form class="d-flex" onsubmit="event.preventDefault(); alert('Thank you for subscribing!');">
                        <div class="newsletter-input-group">
                            <span class="input-icon"><i class="fa fa-envelope"></i></span>
                            <input type="email" placeholder="Enter E-mail Address" required>
                        </div>
                        <button type="submit" class="btn-subscribe">Subscribe</button>
                    </form>
                </div>

                <div class="app-download">
                    <div class="app-box">
                        <div class="app-icon"><i class="fa fa-star text-warning"></i></div>
                        <div class="app-text">
                            DOWNLOAD FREE APP
                            <strong>Get access to exclusive offers!</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Links Section -->
    <div class="footer-links">
        <div class="awesome-container">
            <div class="row">
                <div class="col-md-3 col-6 footer-col">
                    <h6 class="footer-title">Need Help?</h6>
                    <ul class="footer-list">
                        <li><a href="#">Chat with us</a></li>
                        <li><a href="contact-us.php">Help Center</a></li>
                        <li><a href="contact-us.php">Contact Us</a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-6 footer-col">
                    <h6 class="footer-title">About Awesome Mall</h6>
                    <ul class="footer-list">
                        <li><a href="about-us.php">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="terms-conditions.php">Terms and Conditions</a></li>
                        <li><a href="privacy-policy.php">Privacy Policy</a></li>
                        <li><a href="return-policy.php">Return Policy</a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-6 footer-col">
                    <h6 class="footer-title">Make Money</h6>
                    <ul class="footer-list">
                        <li><a href="vendor-register.php">Sell on Awesome Mall</a></li>
                        <li><a href="vendor-login.php">Vendor Login</a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-6 footer-col">
                    <h6 class="footer-title">International</h6>
                    <ul class="footer-list">
                        <li><a href="#">Ghana</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Social and Payment -->
    <div class="footer-social-payment">
        <div class="awesome-container">
            <div class="row align-items-center">
                <div class="col-md-6 col-12 mb-3 mb-md-0">
                    <div class="d-flex align-items-center gap-3">
                        <h6 class="footer-title mb-0">Join us on</h6>
                        <div class="social-icons">
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-instagram"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-youtube-play"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-12">
                    <div class="d-flex align-items-center justify-content-md-end gap-3">
                        <h6 class="footer-title mb-0">Payment Methods</h6>
                        <div class="payment-icons">
                            <!-- Using text representation or generic icons if images not available -->
                            <i class="fa fa-cc-visa fa-2x text-white me-2"></i>
                            <i class="fa fa-cc-mastercard fa-2x text-white me-2"></i>
                            <i class="fa fa-cc-paypal fa-2x text-white"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Brands (Simplified) -->
    <div class="footer-brands d-none d-md-block">
        <div class="awesome-container">
            <div class="row">
                <div class="col-12 brand-col">
                    <div class="brand-list">
                        <a href="#">Apple</a> | <a href="#">Samsung</a> | <a href="#">Huawei</a> | <a
                            href="#">Lenovo</a> | <a href="#">Sony</a> | <a href="#">HP</a> | <a href="#">Dell</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
