<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House of Prayer | All Faith & All Nations Community Center</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,400&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: {
                            light: '#E6CA65',
                            DEFAULT: '#C5A059',
                            dark: '#9A7B38',
                            metallic: 'linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%)'
                        },
                        emerald: {
                            light: '#2D6A4F',
                            DEFAULT: '#1B4332',
                            dark: '#0F5132'
                        },
                        obsidian: {
                            light: '#2A2A2A',
                            DEFAULT: '#111111',
                            dark: '#0A0A0A'
                        },
                        cream: {
                            light: '#FFFFFF',
                            DEFAULT: '#FDFBF7',
                            dark: '#F4EFE6'
                        }
                    },
                    fontFamily: {
                        serif: ['Cinzel', 'serif'],
                        body: ['"Plus Jakarta Sans"', 'sans-serif'],
                        accent: ['"Playfair Display"', 'serif']
                    }
                }
            }
        }
    </script>
    <style>
        .gold-gradient-text {
            background: linear-gradient(135deg, #BF953F 0%, #E2C275 30%, #B38728 70%, #AA771C 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .gold-gradient-bg {
            background: linear-gradient(135deg, #BF953F 0%, #D4AF37 50%, #A27B2C 100%);
        }
        .gold-gradient-bg-hover:hover {
            background: linear-gradient(135deg, #D4AF37 0%, #E2C275 50%, #BF953F 100%);
        }
        .gold-border-gradient {
            border-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728) 1;
        }
        .emerald-gradient-bg {
            background: linear-gradient(135deg, #1B4332 0%, #0F5132 100%);
        }
        .box-glow {
            box-shadow: 0 10px 30px -10px rgba(197, 160, 89, 0.25);
        }
    </style>
</head>
<body class="bg-cream font-body text-obsidian antialiased flex flex-col min-h-screen">

    <!-- TOP ANNOUNCEMENT BAR -->
    <div class="bg-obsidian text-cream-dark text-xs sm:text-sm py-2 px-4 border-b border-gold/30">
        <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-2 text-center sm:text-left">
            <div class="flex items-center gap-4">
                <span class="flex items-center gap-2 text-gold"><i class="fa-solid fa-location-dot"></i> 123 Community Way, Faith City</span>
                <span class="hidden md:inline text-gray-500">|</span>
                <span class="hidden md:flex items-center gap-2 text-gray-300"><i class="fa-regular fa-clock"></i> Sunday Service: 10:00 AM</span>
            </div>
            <div class="flex items-center gap-4 text-xs">
                <a href="tel:+18005550199" class="hover:text-gold transition-colors"><i class="fa-solid fa-phone text-gold mr-1"></i> (800) 555-0199</a>
                <span class="text-gray-500">|</span>
                <div class="flex gap-3 text-gold">
                    <a href="#" class="hover:opacity-80"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#" class="hover:opacity-80"><i class="fa-brands fa-youtube"></i></a>
                    <a href="#" class="hover:opacity-80"><i class="fa-brands fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!-- MAIN HEADER / NAVBAR -->
    <header class="sticky top-0 z-40 bg-cream/95 backdrop-blur-md border-b border-gold/20 shadow-sm transition-all duration-300" id="main-header">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 sm:h-24 flex items-center justify-between">
            <!-- Brand Logo & Name -->
            <a href="#" class="flex items-center gap-3 sm:gap-4 group">
                <div class="relative w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 transition-transform duration-300 group-hover:scale-105">
                    <!-- Inline SVG Representation of the Seal -->
                    <svg viewBox="0 0 200 200" class="w-full h-full drop-shadow-md">
                        <circle cx="100" cy="100" r="96" fill="#111111" stroke="#C5A059" stroke-width="4"/>
                        <circle cx="100" cy="100" r="84" fill="#FDFBF7" stroke="#C5A059" stroke-width="2"/>
                        <!-- Outer Text Ring Simulation -->
                        <path id="textArcTop" d="M 30,100 A 70,70 0 1,1 170,100" fill="none"/>
                        <text font-family="Cinzel" font-size="11" font-weight="bold" fill="#C5A059" text-anchor="middle">
                            <textPath href="#textArcTop" startOffset="50%">HOUSE OF PRAYER</textPath>
                        </text>
                        <!-- Open Book -->
                        <path d="M 55 125 Q 100 115 100 135 Q 100 115 145 125 L 145 100 Q 100 90 100 110 Q 100 90 55 100 Z" fill="#111111" stroke="#C5A059" stroke-width="2.5"/>
                        <!-- Dove / Flame Symbol -->
                        <path d="M 100 60 C 90 75 85 90 100 105 C 115 90 110 75 100 60 Z" fill="#C5A059"/>
                        <path d="M 100 50 C 92 65 92 78 100 88 C 103 72 110 65 100 50 Z" fill="#0F5132"/>
                        <!-- Ichthys Fish & Alpha Omega -->
                        <path d="M 80 155 Q 100 145 120 155 Q 100 165 80 155 Z M 120 155 L 126 150 M 120 155 L 126 160" fill="none" stroke="#C5A059" stroke-width="2"/>
                        <text x="100" y="157" font-family="Cinzel" font-size="8" font-weight="bold" fill="#C5A059" text-anchor="middle">A Ω</text>
                    </svg>
                </div>
                <div class="flex flex-col">
                    <span class="font-serif font-bold text-lg sm:text-xl md:text-2xl tracking-wider text-obsidian leading-none">
                        HOUSE OF PRAYER
                    </span>
                    <span class="text-[10px] sm:text-xs font-semibold tracking-widest text-emerald-dark uppercase mt-1">
                        All Faith & All Nations Community Center
                    </span>
                </div>
            </a>

            <!-- Desktop Navigation -->
            <nav class="hidden lg:flex items-center gap-7 font-medium text-sm text-obsidian-light">
                <a href="#home" class="text-gold font-semibold hover:text-gold transition-colors">Home</a>
                <a href="#about" class="hover:text-gold transition-colors">About Us</a>
                <a href="#pillars" class="hover:text-gold transition-colors">Ministries</a>
                <a href="#events" class="hover:text-gold transition-colors">Events</a>
                <a href="#prayer" class="hover:text-gold transition-colors">Prayer Request</a>
                <a href="#contact" class="hover:text-gold transition-colors">Contact</a>
            </nav>

            <!-- Action Buttons -->
            <div class="hidden sm:flex items-center gap-3">
                <button onclick="openModal('prayerModal')" class="border border-gold text-obsidian hover:bg-gold/10 font-semibold px-4 py-2.5 rounded-full text-xs tracking-wider uppercase transition-all">
                    Submit Prayer
                </button>
                <button onclick="openModal('donateModal')" class="gold-gradient-bg hover:opacity-95 text-obsidian font-bold px-5 py-2.5 rounded-full text-xs tracking-wider uppercase shadow-md transition-all">
                    <i class="fa-solid fa-heart mr-1.5 text-xs"></i> Donate
                </button>
            </div>

            <!-- Mobile Menu Button -->
            <button id="mobile-menu-btn" class="lg:hidden text-obsidian text-2xl p-2 focus:outline-none" aria-label="Toggle Navigation">
                <i class="fa-solid fa-bars" id="menu-icon"></i>
            </button>
        </div>

        <!-- Mobile Dropdown Menu -->
        <div id="mobile-menu" class="hidden lg:hidden bg-cream border-b border-gold/30 px-6 py-6 shadow-xl transition-all">
            <div class="flex flex-col gap-4 font-medium text-base">
                <a href="#home" class="mobile-link text-gold font-semibold">Home</a>
                <a href="#about" class="mobile-link hover:text-gold">About Us</a>
                <a href="#pillars" class="mobile-link hover:text-gold">Ministries & Pillars</a>
                <a href="#events" class="mobile-link hover:text-gold">Upcoming Events</a>
                <a href="#prayer" class="mobile-link hover:text-gold">Prayer Request</a>
                <a href="#contact" class="mobile-link hover:text-gold">Contact Us</a>
                <hr class="border-gold/20 my-2">
                <div class="flex flex-col gap-3 pt-2">
                    <button onclick="openModal('prayerModal')" class="w-full text-center border border-gold text-obsidian py-2.5 rounded-full font-semibold text-xs uppercase tracking-wider">
                        Submit Prayer Request
                    </button>
                    <button onclick="openModal('donateModal')" class="w-full text-center gold-gradient-bg text-obsidian py-2.5 rounded-full font-bold text-xs uppercase tracking-wider shadow">
                        Donate Now
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="flex-grow">
        <!-- HERO SECTION -->
        <section id="home" class="relative bg-obsidian text-cream py-20 lg:py-32 overflow-hidden">
            <!-- Background Decorative Elements -->
            <div class="absolute inset-0 opacity-15 bg-[radial-gradient(#C5A059_1px,transparent_1px)] [background-size:24px_24px]"></div>
            <div class="absolute -top-40 -right-40 w-96 h-96 bg-emerald-dark/40 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-gold/20 rounded-full blur-3xl pointer-events-none"></div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                    
                    <!-- Hero Content -->
                    <div class="lg:col-span-7 text-center lg:text-left">
                        <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-gold/40 bg-gold/10 text-gold text-xs sm:text-sm font-semibold tracking-wider uppercase mb-6">
                            <i class="fa-solid fa-dove text-emerald-light"></i> Welcome to Our Sacred Space
                        </div>
                        <h1 class="font-serif text-3xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 text-cream">
                            A Place of <span class="gold-gradient-text">Worship, Prayer</span> & Community for All Nations
                        </h1>
                        <p class="text-gray-300 text-base sm:text-lg mb-8 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-light">
                            Uniting diverse hearts under faith, love, and service. Whether seeking spiritual growth, fellowship, or a quiet sanctuary for prayer, our doors are open to everyone.
                        </p>
                        
                        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                            <a href="#events" class="gold-gradient-bg text-obsidian font-bold px-8 py-4 rounded-full text-sm uppercase tracking-wider shadow-lg hover:shadow-gold/20 transition-all flex items-center justify-center gap-2">
                                <i class="fa-solid fa-play text-xs"></i> Watch Live Worship
                            </a>
                            <a href="#about" class="border border-gold text-cream hover:bg-gold/10 font-semibold px-8 py-4 rounded-full text-sm uppercase tracking-wider transition-all flex items-center justify-center gap-2">
                                Plan Your Visit <i class="fa-solid fa-arrow-right text-xs"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Seal / Emblem Display Card -->
                    <div class="lg:col-span-5 flex justify-center">
                        <div class="relative w-72 h-72 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-full p-3 bg-gradient-to-tr from-gold/40 via-emerald/30 to-gold/40 shadow-2xl box-glow flex items-center justify-center">
                            <div class="w-full h-full rounded-full bg-obsidian p-6 border-2 border-gold/50 flex flex-col items-center justify-center text-center relative overflow-hidden">
                                <div class="absolute inset-0 bg-emerald/10 rounded-full"></div>
                                
                                <!-- Center Symbol Illustration -->
                                <div class="relative z-10 flex flex-col items-center">
                                    <i class="fa-solid fa-fire-flame-curved text-4xl sm:text-5xl text-emerald-light mb-1"></i>
                                    <i class="fa-solid fa-book-bible text-5xl sm:text-6xl gold-gradient-text mb-3"></i>
                                    <div class="font-serif font-bold text-xl sm:text-2xl tracking-widest text-cream mb-1">
                                        HOUSE OF PRAYER
                                    </div>
                                    <div class="h-0.5 w-24 bg-gold/60 my-2"></div>
                                    <div class="text-[10px] sm:text-xs tracking-widest text-gold uppercase font-semibold">
                                        All Faith & All Nations
                                    </div>
                                    <div class="text-xs text-gray-400 font-serif italic mt-2">
                                        "My house shall be called a house of prayer for all nations"
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- SERVICE TIMES & QUICK INFO BANNER -->
        <section class="bg-emerald-dark text-cream py-8 border-y-2 border-gold/40 shadow-md">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 divide-y md:divide-y-0 md:divide-x divide-gold/20 text-center md:text-left">
                    
                    <div class="flex items-center justify-center md:justify-start gap-4 pt-4 md:pt-0">
                        <div class="w-12 h-12 rounded-full bg-gold/20 flex items-center justify-center text-gold text-xl flex-shrink-0">
                            <i class="fa-regular fa-calendar-check"></i>
                        </div>
                        <div>
                            <h4 class="font-serif font-bold text-gold text-lg">Sunday Worship Service</h4>
                            <p class="text-sm text-gray-200">10:00 AM – Main Sanctuary & Online</p>
                        </div>
                    </div>

                    <div class="flex items-center justify-center md:justify-start gap-4 pt-4 md:pt-0 md:pl-6">
                        <div class="w-12 h-12 rounded-full bg-gold/20 flex items-center justify-center text-gold text-xl flex-shrink-0">
                            <i class="fa-solid fa-hands-praying"></i>
                        </div>
                        <div>
                            <h4 class="font-serif font-bold text-gold text-lg">Midweek Prayer Gathering</h4>
                            <p class="text-sm text-gray-200">Wednesdays at 7:00 PM</p>
                        </div>
                    </div>

                    <div class="flex items-center justify-center md:justify-start gap-4 pt-4 md:pt-0 md:pl-6">
                        <div class="w-12 h-12 rounded-full bg-gold/20 flex items-center justify-center text-gold text-xl flex-shrink-0">
                            <i class="fa-solid fa-map-location-dot"></i>
                        </div>
                        <div>
                            <h4 class="font-serif font-bold text-gold text-lg">Our Location</h4>
                            <p class="text-sm text-gray-200">123 Community Way, Faith City, FC 12345</p>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- ABOUT / MISSION SECTION -->
        <section id="about" class="py-20 bg-cream">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    
                    <div class="relative">
                        <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl border-2 border-gold/30 bg-obsidian text-cream p-8 sm:p-12">
                            <span class="text-gold font-serif text-sm uppercase tracking-widest block mb-2">Our Foundation</span>
                            <h2 class="font-serif text-3xl sm:text-4xl font-bold mb-6 text-cream">
                                Embracing All People, Restoring Hope, Building Community
                            </h2>
                            <p class="text-gray-300 mb-6 leading-relaxed">
                                House of Prayer: All Faith & All Nations Community Center stands as a beacon of light, worship, and compassionate outreach. Grounded in unconditional love, we welcome people of all backgrounds, cultures, and walks of life to experience authentic fellowship and spiritual growth.
                            </p>
                            <p class="text-gray-300 leading-relaxed mb-8">
                                From dedicated prayer vigils and inspiring worship services to community food pantries and youth empowerment programs, our vision is to serve both the spiritual and practical needs of our global family.
                            </p>
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-full gold-gradient-bg flex items-center justify-center text-obsidian text-xl font-bold">
                                    <i class="fa-solid fa-quote-left"></i>
                                </div>
                                <div>
                                    <p class="font-serif italic text-gold font-medium">"Unity in faith, strength in community, peace for all nations."</p>
                                </div>
                            </div>
                        </div>
                        <div class="absolute -bottom-6 -right-6 w-full h-full border-2 border-gold/40 rounded-2xl -z-0 hidden sm:block"></div>
                    </div>

                    <div class="space-y-6">
                        <div class="bg-white p-6 rounded-xl border border-gold/20 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex gap-4">
                                <div class="w-12 h-12 rounded-lg bg-emerald/10 text-emerald-dark flex items-center justify-center text-xl font-bold flex-shrink-0">
                                    <i class="fa-solid fa-earth-americas"></i>
                                </div>
                                <div>
                                    <h3 class="font-serif font-bold text-lg text-obsidian mb-1">All Nations Inclusion</h3>
                                    <p class="text-gray-600 text-sm">Celebrating cultural diversity through multicultural worship, translation services, and global fellowship outreach.</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white p-6 rounded-xl border border-gold/20 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex gap-4">
                                <div class="w-12 h-12 rounded-lg bg-gold/10 text-gold-dark flex items-center justify-center text-xl font-bold flex-shrink-0">
                                    <i class="fa-solid fa-hands-holding-child"></i>
                                </div>
                                <div>
                                    <h3 class="font-serif font-bold text-lg text-obsidian mb-1">Compassionate Community Outreach</h3>
                                    <p class="text-gray-600 text-sm">Providing food distribution, family support, counseling resources, and mentorship for those in need.</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white p-6 rounded-xl border border-gold/20 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex gap-4">
                                <div class="w-12 h-12 rounded-lg bg-emerald/10 text-emerald-dark flex items-center justify-center text-xl font-bold flex-shrink-0">
                                    <i class="fa-solid fa-flame"></i>
                                </div>
                                <div>
                                    <h3 class="font-serif font-bold text-lg text-obsidian mb-1">Unceasing Prayer & Worship</h3>
                                    <p class="text-gray-600 text-sm">Maintaining a dedicated sanctuary space for intercessory prayer, personal reflection, and uplifting spiritual devotion.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- CORE PILLARS / MINISTRIES GRID -->
        <section id="pillars" class="py-20 bg-cream-dark/50 border-t border-gold/20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="text-gold-dark font-serif text-sm uppercase tracking-widest font-semibold block mb-2">How We Serve</span>
                    <h2 class="font-serif text-3xl sm:text-4xl font-bold text-obsidian mb-4">Core Pillars & Ministries</h2>
                    <p class="text-gray-600">Discover where you can connect, grow, and serve within our community family.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <!-- Card 1 -->
                    <div class="bg-white rounded-2xl p-6 border border-gold/30 shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between">
                        <div>
                            <div class="w-14 h-14 rounded-full gold-gradient-bg text-obsidian flex items-center justify-center text-2xl mb-6 shadow">
                                <i class="fa-solid fa-hands-praying"></i>
                            </div>
                            <h3 class="font-serif font-bold text-xl text-obsidian mb-3">Prayer & Intercession</h3>
                            <p class="text-gray-600 text-sm leading-relaxed mb-6">Dedicated prayer teams standing in unity for personal needs, local families, and global peace around the clock.</p>
                        </div>
                        <a href="#prayer" class="text-gold-dark font-semibold text-xs uppercase tracking-wider flex items-center gap-1 hover:gap-2 transition-all">
                            Request Prayer <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </a>
                    </div>

                    <!-- Card 2 -->
                    <div class="bg-white rounded-2xl p-6 border border-gold/30 shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between">
                        <div>
                            <div class="w-14 h-14 rounded-full bg-emerald-dark text-cream flex items-center justify-center text-2xl mb-6 shadow">
                                <i class="fa-solid fa-people-roof"></i>
                            </div>
                            <h3 class="font-serif font-bold text-xl text-obsidian mb-3">Community Center</h3>
                            <p class="text-gray-600 text-sm leading-relaxed mb-6">A safe, welcoming space offering educational workshops, cultural celebrations, and social assistance for families.</p>
                        </div>
                        <a href="#contact" class="text-emerald-dark font-semibold text-xs uppercase tracking-wider flex items-center gap-1 hover:gap-2 transition-all">
                            Get Involved <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </a>
                    </div>

                    <!-- Card 3 -->
                    <div class="bg-white rounded-2xl p-6 border border-gold/30 shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between">
                        <div>
                            <div class="w-14 h-14 rounded-full gold-gradient-bg text-obsidian flex items-center justify-center text-2xl mb-6 shadow">
                                <i class="fa-solid fa-child-reaching"></i>
                            </div>
                            <h3 class="font-serif font-bold text-xl text-obsidian mb-3">Youth & NextGen</h3>
                            <p class="text-gray-600 text-sm leading-relaxed mb-6">Empowering young minds through faith formation, leadership training, sports, and constructive creative activities.</p>
                        </div>
                        <a href="#contact" class="text-gold-dark font-semibold text-xs uppercase tracking-wider flex items-center gap-1 hover:gap-2 transition-all">
                            Learn More <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </a>
                    </div>

                    <!-- Card 4 -->
                    <div class="bg-white rounded-2xl p-6 border border-gold/30 shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between">
                        <div>
                            <div class="w-14 h-14 rounded-full bg-emerald-dark text-cream flex items-center justify-center text-2xl mb-6 shadow">
                                <i class="fa-solid fa-hand-holding-heart"></i>
                            </div>
                            <h3 class="font-serif font-bold text-xl text-obsidian mb-3">Global Outreach</h3>
                            <p class="text-gray-600 text-sm leading-relaxed mb-6">Partnering with humanitarian organizations to deliver food relief, medical supplies, and hope across borders.</p>
                        </div>
                        <a href="#donate" onclick="openModal('donateModal')" class="text-emerald-dark font-semibold text-xs uppercase tracking-wider flex items-center gap-1 hover:gap-2 transition-all">
                            Support Cause <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </a>
                    </div>

                </div>
            </div>
        </section>

        <!-- UPCOMING EVENTS SECTION -->
        <section id="events" class="py-20 bg-cream">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
                    <div>
                        <span class="text-gold-dark font-serif text-sm uppercase tracking-widest font-semibold block mb-2">Mark Your Calendar</span>
                        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-obsidian">Upcoming Gatherings</h2>
                    </div>
                    <a href="#" class="mt-4 md:mt-0 text-gold-dark font-bold text-sm uppercase tracking-wider hover:underline flex items-center gap-2">
                        View Full Calendar <i class="fa-solid fa-arrow-right text-xs"></i>
                    </a>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    
                    <!-- Event 1 -->
                    <div class="bg-white rounded-2xl overflow-hidden border border-gold/30 shadow-md flex flex-col">
                        <div class="bg-obsidian text-cream p-6 flex justify-between items-center border-b border-gold/20">
                            <div>
                                <span class="text-gold font-bold text-2xl font-serif block">NOV 15</span>
                                <span class="text-xs text-gray-400 uppercase tracking-wider">Friday • 7:00 PM</span>
                            </div>
                            <span class="px-3 py-1 bg-gold/20 text-gold rounded-full text-xs font-semibold">Special Event</span>
                        </div>
                        <div class="p-6 flex-grow flex flex-col justify-between">
                            <div>
                                <h3 class="font-serif font-bold text-xl text-obsidian mb-2">All-Nations Night of Worship & Praise</h3>
                                <p class="text-gray-600 text-sm mb-6">An inspiring evening of multilingual worship music, testimonies, and unity prayer across cultures.</p>
                            </div>
                            <div class="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-100">
                                <span><i class="fa-solid fa-location-dot text-gold mr-1"></i> Main Sanctuary</span>
                                <button onclick="alert('Event added to your reminders!')" class="text-gold-dark font-bold uppercase hover:underline">Remind Me</button>
                            </div>
                        </div>
                    </div>

                    <!-- Event 2 -->
                    <div class="bg-white rounded-2xl overflow-hidden border border-gold/30 shadow-md flex flex-col">
                        <div class="bg-emerald-dark text-cream p-6 flex justify-between items-center border-b border-gold/20">
                            <div>
                                <span class="text-gold font-bold text-2xl font-serif block">NOV 22</span>
                                <span class="text-xs text-gray-200 uppercase tracking-wider">Saturday • 9:00 AM</span>
                            </div>
                            <span class="px-3 py-1 bg-cream/20 text-cream rounded-full text-xs font-semibold">Community</span>
                        </div>
                        <div class="p-6 flex-grow flex flex-col justify-between">
                            <div>
                                <h3 class="font-serif font-bold text-xl text-obsidian mb-2">Thanksgiving Food & Resource Drive</h3>
                                <p class="text-gray-600 text-sm mb-6">Join our volunteer team as we assemble and distribute meal boxes for local families in need.</p>
                            </div>
                            <div class="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-100">
                                <span><i class="fa-solid fa-location-dot text-emerald-dark mr-1"></i> Community Center Hall</span>
                                <button onclick="alert('Thank you for volunteering interest!')" class="text-emerald-dark font-bold uppercase hover:underline">Volunteer</button>
                            </div>
                        </div>
                    </div>

                    <!-- Event 3 -->
                    <div class="bg-white rounded-2xl overflow-hidden border border-gold/30 shadow-md flex flex-col">
                        <div class="bg-obsidian text-cream p-6 flex justify-between items-center border-b border-gold/20">
                            <div>
                                <span class="text-gold font-bold text-2xl font-serif block">EVERY WED</span>
                                <span class="text-xs text-gray-400 uppercase tracking-wider">Wednesdays • 7:00 PM</span>
                            </div>
                            <span class="px-3 py-1 bg-gold/20 text-gold rounded-full text-xs font-semibold">Weekly</span>
                        </div>
                        <div class="p-6 flex-grow flex flex-col justify-between">
                            <div>
                                <h3 class="font-serif font-bold text-xl text-obsidian mb-2">Midweek Faith & Prayer Gathering</h3>
                                <p class="text-gray-600 text-sm mb-6">A peaceful mid-week recharge with interactive bible study and open intercessory prayer time.</p>
                            </div>
                            <div class="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-100">
                                <span><i class="fa-solid fa-video text-gold mr-1"></i> In-Person & Zoom</span>
                                <a href="#prayer" class="text-gold-dark font-bold uppercase hover:underline">Join Online</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- INTERACTIVE PRAYER & CONTACT FORM SECTION -->
        <section id="prayer" class="py-20 bg-obsidian text-cream relative">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="bg-cream text-obsidian rounded-3xl p-8 sm:p-12 shadow-2xl border-2 border-gold">
                    
                    <div class="text-center mb-8">
                        <div class="w-16 h-16 rounded-full gold-gradient-bg mx-auto flex items-center justify-center text-obsidian text-2xl mb-4 shadow-lg">
                            <i class="fa-solid fa-hands-praying"></i>
                        </div>
                        <h2 class="font-serif text-2xl sm:text-3xl font-bold text-obsidian mb-2">We Are Here To Stand With You</h2>
                        <p class="text-gray-600 text-sm sm:text-base max-w-lg mx-auto">
                            Submit your confidential prayer request, or get in touch with our ministry leadership team.
                        </p>
                    </div>

                    <!-- Interactive Form Tabs -->
                    <div class="flex justify-center mb-8 border-b border-gray-200">
                        <button id="tab-prayer-btn" onclick="switchTab('prayer')" class="px-6 py-3 font-serif font-bold text-sm sm:text-base border-b-2 border-gold text-gold-dark transition-all">
                            Prayer Request
                        </button>
                        <button id="tab-contact-btn" onclick="switchTab('contact')" class="px-6 py-3 font-serif font-medium text-sm sm:text-base text-gray-400 border-b-2 border-transparent hover:text-obsidian transition-all">
                            General Inquiry
                        </button>
                    </div>

                    <!-- Prayer Form -->
                    <form id="prayer-form" onsubmit="handleFormSubmit(event, 'Prayer request received. Our prayer team will keep you in prayer.')" class="space-y-5">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Your Name</label>
                                <input type="text" required placeholder="Full Name" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-cream-light">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Email Address</label>
                                <input type="email" required placeholder="name@domain.com" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-cream-light">
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Privacy Preference</label>
                            <select class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold text-sm bg-cream-light">
                                <option>Keep Confidential (Pastoral Team Only)</option>
                                <option>Share with Intercessory Prayer Circle</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Your Prayer Request</label>
                            <textarea rows="4" required placeholder="Share what is on your heart..." class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-cream-light"></textarea>
                        </div>

                        <button type="submit" class="w-full gold-gradient-bg text-obsidian font-bold py-4 rounded-xl text-sm uppercase tracking-wider shadow-lg hover:opacity-95 transition-all">
                            Submit Prayer Request
                        </button>
                    </form>

                    <!-- Contact Form (Hidden by default) -->
                    <form id="contact-form" onsubmit="handleFormSubmit(event, 'Message sent successfully! We will reply shortly.')" class="space-y-5 hidden">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Your Name</label>
                                <input type="text" required placeholder="Full Name" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-cream-light">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Phone Number</label>
                                <input type="tel" placeholder="(555) 000-0000" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-cream-light">
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Subject</label>
                            <input type="text" required placeholder="Volunteering, Facility Use, Services..." class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold text-sm bg-cream-light">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Message</label>
                            <textarea rows="4" required placeholder="How can we help you?" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-cream-light"></textarea>
                        </div>

                        <button type="submit" class="w-full bg-emerald-dark text-cream font-bold py-4 rounded-xl text-sm uppercase tracking-wider shadow-lg hover:bg-emerald transition-all">
                            Send Message
                        </button>
                    </form>

                </div>
            </div>
        </section>
    </main>

    <!-- FOOTER -->
    <footer id="contact" class="bg-obsidian-dark text-cream border-t border-gold/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                
                <!-- Col 1: Brand Info -->
                <div class="space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full gold-gradient-bg flex items-center justify-center text-obsidian text-xl font-bold">
                            <i class="fa-solid fa-hands-praying"></i>
                        </div>
                        <span class="font-serif font-bold text-lg text-cream tracking-wider">HOUSE OF PRAYER</span>
                    </div>
                    <p class="text-xs text-gray-400 leading-relaxed">
                        All Faith & All Nations Community Center is committed to fostering spiritual renewal, peace, and humanitarian unity for all cultures.
                    </p>
                    <div class="flex gap-3 text-gold text-sm pt-2">
                        <a href="#" class="w-8 h-8 rounded-full bg-obsidian border border-gold/30 flex items-center justify-center hover:bg-gold hover:text-obsidian transition-colors"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#" class="w-8 h-8 rounded-full bg-obsidian border border-gold/30 flex items-center justify-center hover:bg-gold hover:text-obsidian transition-colors"><i class="fa-brands fa-youtube"></i></a>
                        <a href="#" class="w-8 h-8 rounded-full bg-obsidian border border-gold/30 flex items-center justify-center hover:bg-gold hover:text-obsidian transition-colors"><i class="fa-brands fa-instagram"></i></a>
                    </div>
                </div>

                <!-- Col 2: Quick Links -->
                <div>
                    <h4 class="font-serif font-bold text-gold text-sm uppercase tracking-wider mb-4 border-b border-gold/20 pb-2">Quick Navigation</h4>
                    <ul class="space-y-2.5 text-xs text-gray-300">
                        <li><a href="#home" class="hover:text-gold transition-colors">Home Page</a></li>
                        <li><a href="#about" class="hover:text-gold transition-colors">About Our Mission</a></li>
                        <li><a href="#pillars" class="hover:text-gold transition-colors">Ministries & Programs</a></li>
                        <li><a href="#events" class="hover:text-gold transition-colors">Upcoming Events Schedule</a></li>
                        <li><a href="#prayer" class="hover:text-gold transition-colors">Submit Prayer Requests</a></li>
                    </ul>
                </div>

                <!-- Col 3: Service Times -->
                <div>
                    <h4 class="font-serif font-bold text-gold text-sm uppercase tracking-wider mb-4 border-b border-gold/20 pb-2">Gathering Times</h4>
                    <ul class="space-y-2.5 text-xs text-gray-300">
                        <li class="flex justify-between"><span>Sunday Morning Worship:</span> <span class="text-gold">10:00 AM</span></li>
                        <li class="flex justify-between"><span>Wednesday Prayer:</span> <span class="text-gold">7:00 PM</span></li>
                        <li class="flex justify-between"><span>Youth Night (Bi-weekly):</span> <span class="text-gold">6:30 PM</span></li>
                        <li class="flex justify-between"><span>Community Pantry:</span> <span class="text-gold">Sat 9:00 AM</span></li>
                    </ul>
                </div>

                <!-- Col 4: Newsletter -->
                <div>
                    <h4 class="font-serif font-bold text-gold text-sm uppercase tracking-wider mb-4 border-b border-gold/20 pb-2">Stay Connected</h4>
                    <p class="text-xs text-gray-400 mb-4">Subscribe for weekly updates, encouragement messages, and community announcements.</p>
                    <form onsubmit="handleFormSubmit(event, 'Thank you for subscribing!')" class="space-y-2">
                        <input type="email" required placeholder="Enter your email" class="w-full px-3 py-2.5 rounded-lg bg-obsidian border border-gold/40 text-xs text-cream focus:outline-none focus:border-gold">
                        <button type="submit" class="w-full gold-gradient-bg text-obsidian font-bold py-2.5 rounded-lg text-xs uppercase tracking-wider hover:opacity-90 transition-opacity">
                            Subscribe
                        </button>
                    </form>
                </div>

            </div>

            <div class="border-t border-gold/20 mt-12 pt-6 text-center text-xs text-gray-500">
                <p>&copy; 2026 House of Prayer: All Faith & All Nations Community Center. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <!-- MODAL: DONATE OVERLAY -->
    <div id="donateModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-cream rounded-3xl max-w-md w-full p-6 sm:p-8 border-2 border-gold relative shadow-2xl">
            <button onclick="closeModal('donateModal')" class="absolute top-4 right-4 text-gray-400 hover:text-obsidian text-xl"><i class="fa-solid fa-xmark"></i></button>
            <div class="text-center mb-6">
                <div class="w-12 h-12 rounded-full gold-gradient-bg text-obsidian mx-auto flex items-center justify-center text-xl mb-3">
                    <i class="fa-solid fa-heart"></i>
                </div>
                <h3 class="font-serif font-bold text-2xl text-obsidian">Support Our Mission</h3>
                <p class="text-xs text-gray-600">Your generous contribution empowers community outreach and global fellowship.</p>
            </div>

            <form onsubmit="handleFormSubmit(event, 'Thank you for your generous gift!'); closeModal('donateModal');" class="space-y-4">
                <div>
                    <label class="block text-xs font-bold text-gray-700 uppercase mb-2">Select Gift Amount</label>
                    <div class="grid grid-cols-4 gap-2 mb-3">
                        <button type="button" onclick="setAmount(25)" class="py-2 border border-gold rounded-lg text-xs font-bold hover:bg-gold hover:text-obsidian transition-colors">$25</button>
                        <button type="button" onclick="setAmount(50)" class="py-2 border border-gold rounded-lg text-xs font-bold hover:bg-gold hover:text-obsidian transition-colors">$50</button>
                        <button type="button" onclick="setAmount(100)" class="py-2 border border-gold rounded-lg text-xs font-bold hover:bg-gold hover:text-obsidian transition-colors">$100</button>
                        <button type="button" onclick="setAmount(250)" class="py-2 border border-gold rounded-lg text-xs font-bold hover:bg-gold hover:text-obsidian transition-colors">$250</button>
                    </div>
                    <input type="number" id="customAmount" placeholder="Custom Amount ($)" class="w-full px-3 py-2 rounded-lg border border-gray-300 text-xs">
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-700 uppercase mb-2">Designation</label>
                    <select class="w-full px-3 py-2 rounded-lg border border-gray-300 text-xs">
                        <option>General Ministry & Center Support</option>
                        <option>Community Food & Relief Fund</option>
                        <option>Youth & NextGen Ministry</option>
                        <option>Global Mission Support</option>
                    </select>
                </div>

                <button type="submit" class="w-full gold-gradient-bg text-obsidian font-bold py-3 rounded-xl text-xs uppercase tracking-wider shadow">
                    Proceed to Secure Payment
                </button>
            </form>
        </div>
    </div>

    <!-- MODAL: PRAYER OVERLAY -->
    <div id="prayerModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
        <div class="bg-cream rounded-3xl max-w-md w-full p-6 sm:p-8 border-2 border-gold relative shadow-2xl">
            <button onclick="closeModal('prayerModal')" class="absolute top-4 right-4 text-gray-400 hover:text-obsidian text-xl"><i class="fa-solid fa-xmark"></i></button>
            <div class="text-center mb-6">
                <div class="w-12 h-12 rounded-full bg-emerald-dark text-cream mx-auto flex items-center justify-center text-xl mb-3">
                    <i class="fa-solid fa-hands-praying"></i>
                </div>
                <h3 class="font-serif font-bold text-2xl text-obsidian">Submit Prayer Request</h3>
                <p class="text-xs text-gray-600">Our intercessory prayer team will keep your needs in prayer.</p>
            </div>

            <form onsubmit="handleFormSubmit(event, 'Prayer request received!'); closeModal('prayerModal');" class="space-y-4">
                <input type="text" placeholder="Your Name" required class="w-full px-3 py-2 rounded-lg border border-gray-300 text-xs">
                <input type="email" placeholder="Your Email" required class="w-full px-3 py-2 rounded-lg border border-gray-300 text-xs">
                <textarea placeholder="Describe your prayer request..." rows="3" required class="w-full px-3 py-2 rounded-lg border border-gray-300 text-xs"></textarea>
                <button type="submit" class="w-full bg-emerald-dark text-cream font-bold py-3 rounded-xl text-xs uppercase tracking-wider shadow">
                    Send Prayer Request
                </button>
            </form>
        </div>
    </div>

    <!-- NOTIFICATION TOAST -->
    <div id="toast" class="fixed bottom-6 right-6 z-50 bg-obsidian text-gold border border-gold px-6 py-4 rounded-2xl shadow-2xl hidden flex items-center gap-3">
        <i class="fa-solid fa-circle-check text-emerald-light text-xl"></i>
        <span id="toast-message" class="text-sm font-medium">Action successful!</span>
    </div>

    <!-- JAVASCRIPT CONTROLS -->
    <script>
        // Mobile Navigation Toggle
        const menuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const menuIcon = document.getElementById('menu-icon');

        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            if(mobileMenu.classList.contains('hidden')) {
                menuIcon.className = 'fa-solid fa-bars';
            } else {
                menuIcon.className = 'fa-solid fa-xmark';
            }
        });

        // Close mobile menu on clicking nav links
        document.querySelectorAll('.mobile-link').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                menuIcon.className = 'fa-solid fa-bars';
            });
        });

        // Tab Switching for Forms
        function switchTab(tab) {
            const prayerForm = document.getElementById('prayer-form');
            const contactForm = document.getElementById('contact-form');
            const prayerBtn = document.getElementById('tab-prayer-btn');
            const contactBtn = document.getElementById('tab-contact-btn');

            if(tab === 'prayer') {
                prayerForm.classList.remove('hidden');
                contactForm.classList.add('hidden');
                prayerBtn.className = "px-6 py-3 font-serif font-bold text-sm sm:text-base border-b-2 border-gold text-gold-dark transition-all";
                contactBtn.className = "px-6 py-3 font-serif font-medium text-sm sm:text-base text-gray-400 border-b-2 border-transparent hover:text-obsidian transition-all";
            } else {
                prayerForm.classList.add('hidden');
                contactForm.classList.remove('hidden');
                contactBtn.className = "px-6 py-3 font-serif font-bold text-sm sm:text-base border-b-2 border-emerald-dark text-emerald-dark transition-all";
                prayerBtn.className = "px-6 py-3 font-serif font-medium text-sm sm:text-base text-gray-400 border-b-2 border-transparent hover:text-obsidian transition-all";
            }
        }

        // Modal Controls
        function openModal(id) {
            document.getElementById(id).classList.remove('hidden');
        }

        function closeModal(id) {
            document.getElementById(id).classList.add('hidden');
        }

        function setAmount(amt) {
            document.getElementById('customAmount').value = amt;
        }

        // Toast Feedback Handling
        function handleFormSubmit(e, message) {
            e.preventDefault();
            const toast = document.getElementById('toast');
            const toastMsg = document.getElementById('toast-message');
            
            toastMsg.innerText = message;
            toast.classList.remove('hidden');

            setTimeout(() => {
                toast.classList.add('hidden');
            }, 4000);
        }
    </script>
</body>
</html>