<script>
      document.addEventListener("DOMContentLoaded", () => {
          const progressBar = document.getElementById("scroll-progress-bar");
          window.addEventListener("scroll", () => {
              const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
              const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
              const progress = (scrollTop / scrollHeight) * 100;
              progressBar.style.width = progress + "%";
          });
      });
  </script>

<!-- Header / Navigation (Fully Responsive with Mobile Drawer) -->
<header class="header js-header" style="background: transparent; position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; box-sizing: border-box; z-index: 100; padding: 2.2rem 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden !important;">
    <div style="max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;">
        <a href="index.html" class="header__logo" style="display: flex; align-items: center; gap: 0.6rem; text-decoration: none;">
            <img src="assets/images/logo.svg" alt="Franciscan Society" width="36" height="44">
            <span style="font-family: 'DM Sans', sans-serif; font-weight: 900; font-size: 1.2rem; color: #ffffff; letter-spacing: 0.05em; text-transform: uppercase;">FRANCISCAN<span style="color: #e6c888;">.</span></span>
        </a>
        <nav class="desktop-nav" style="display: flex; gap: 2rem; align-items: center;">
            <a href="index.html" style="color: #e6c888; font-weight: 800; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">Home</a>
            <a href="about.html" style="color: #ffffff; font-weight: 600; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">About Us</a>
            <a href="gallery.html" style="color: #ffffff; font-weight: 600; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">Gallery</a>
            <a href="ministries.html" style="color: #ffffff; font-weight: 600; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">Ministries</a>
            <a href="community.html" style="color: #ffffff; font-weight: 600; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">Community</a>
            <a href="news.html" style="color: #ffffff; font-weight: 600; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">News</a>
            <a href="contact.html" style="color: #ffffff; font-weight: 600; font-size: 0.88rem; text-decoration: none; font-family: 'DM Sans', sans-serif;">Contact Us</a>
        </nav>
        <div style="display: flex; align-items: center; gap: 1rem;">
            <a href="contact.html#enquiry" class="header-cta-btn"><span>ENQUIRE NOW</span> <span class="btn-arrow">&#8599;</span></a>
            <button class="mobile-toggle" aria-label="Toggle Navigation" onclick="document.querySelector('.mobile-nav-drawer').classList.toggle('active')" style="display: none; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; width: 40px; height: 40px; border-radius: 6px; font-size: 1.25rem; cursor: pointer; align-items: center; justify-content: center;">&#9776;</button>
        </div>
    </div>

    <!-- Mobile Slide-out Drawer Navigation -->
    <div class="mobile-nav-drawer" style="position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: #0c1727; color: #fff; z-index: 9999; padding: 2rem 2rem; transition: right 0.4s ease; display: flex; flex-direction: column; gap: 1.5rem; box-sizing: border-box;">
        <div style="display: flex; justify-content: flex-end; align-items: center; margin-bottom: 1rem;">
            <button onclick="document.querySelector('.mobile-nav-drawer').classList.remove('active')" style="background: #ffffff; border: none; color: #0c1727; width: 45px; height: 45px; border-radius: 8px; font-size: 1.5rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center;">&times;</button>
        </div>
        <a href="index.html" style="color: #e6c888; font-weight: 800; text-decoration: none; font-size: 1.1rem;">Home</a>
        <a href="about.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">About Us</a>
        <a href="gallery.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Gallery</a>
        <a href="ministries.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Ministries</a>
        <a href="community.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Community</a>
        <a href="news.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">News</a>
        <a href="contact.html" style="color: #fff; font-weight: 600; text-decoration: none; font-size: 1.1rem;">Contact Us</a>
    </div>
</header>

    <!-- Main Content Area with Cream Background (#FAF7F0) -->
    <main id="main-content" style="padding-top: 0; background-color: #FFFFFF;">

        <!-- 1. Hero Section (Rounded Card Container on Cream Canvas) -->
        <section class="hero-section" style="position: relative; padding: 1.5rem 1.5rem 0 1.5rem; background-color: #FFFFFF; box-sizing: border-box;">
            
            <!-- Rounded Card Container -->
            <div style="position: relative; width: 100%; max-width: 1400px; margin: 0 auto; min-height: calc(100vh - 3.5rem); border-radius: 24px; overflow: hidden !important; box-shadow: 0 20px 50px rgba(0,0,0,0.18); display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box;">
                
                <!-- Background Video inside Rounded Card -->
                <video id="hero-bg-video" autoplay loop muted playsinline style="position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; z-index: 1; border-radius: 24px;">
                    <source src="assets/videos/Church_interior_with_crucifix.mp4" type="video/mp4">
                </video>

                <!-- Content Grid (Exact Reference Screenshot 1 Parallel Alignment & Spacing) -->
                <div class="hero-grid hero-grid-layout">
                    
                    <!-- Left Column: Eyebrow, Title & Buttons -->
                    <div class="js-hero-text" style="display: flex; flex-direction: column; justify-content: flex-end;">
                        <!-- Eyebrow Pill Tag -->
                        <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem; width: fit-content;">
                            <span style="width: 6px; height: 6px; background-color: #e6c888; border-radius: 50%; display: inline-block;"></span>
                            <span style="color: #ffffff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Instrument Sans', sans-serif;">THIRD ORDER REGULAR OF ST. FRANCIS</span>
                        </div>

                        <!-- Main Title: Phudu, 600 weight, 62px size, 62px line height -->
                        <h1 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.6rem, 4.2vw, 62px) !important; font-weight: 600 !important; color: #ffffff !important; text-transform: uppercase; line-height: 62px !important; letter-spacing: -0.01em; margin-bottom: 2.2rem; text-shadow: none !important;">
                            WALKING IN PEACE<br>SERVED IN GOD'S LOVE
                        </h1>

                        <!-- Buttons Row -->
                        <div class="hero-buttons-row" style="display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;">
                            <a href="contact.html#enquiry" class="btn-fill-animation">
                                <span>JOIN OUR CHURCH</span> <span class="btn-arrow">&#8599;</span>
                            </a>
                            <a href="about.html" class="btn-fill-outline">
                                <span>GET STARTED</span> <span class="btn-arrow">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Right Column: Subtitle Paragraph & Stats Counter Strip -->
                    <div class="js-hero-text" style="display: flex; flex-direction: column; justify-content: flex-end;">
                        <!-- Subtitle paragraph parallel horizontally across from line 2 of title -->
                        <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #ffffff !important; line-height: 26px !important; margin-bottom: 2.2rem; max-width: 490px; text-shadow: 0 2px 14px rgba(0,0,0,0.9);">
                            Conversion, contemplation, poverty, and humility lie at the heart of Franciscan identity. Walking together in penance, peace, and service across Ranchi, Jharkhand, and global missions.
                        </p>

                        <!-- Stats Counter Strip -->
                        <div class="responsive-grid-3" style="position: relative; z-index: 20; display: grid; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 1.25rem;">
                            <div style="border-right: 1px solid rgba(255, 255, 255, 0.18); padding-right: 1rem;">
                                <div style="font-size: 2.2rem; font-weight: 900; color: #ffffff; line-height: 1; font-family: 'Phudu', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.8);">104+</div>
                                <div style="font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; font-weight: 700; font-family: 'Instrument Sans', sans-serif;">Professed Friars</div>
                            </div>
                            <div style="border-right: 1px solid rgba(255, 255, 255, 0.18); padding-left: 1.25rem; padding-right: 1rem;">
                                <div style="font-size: 2.2rem; font-weight: 900; color: #ffffff; line-height: 1; font-family: 'Phudu', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.8);">14+</div>
                                <div style="font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; font-weight: 700; font-family: 'Instrument Sans', sans-serif;">Parishes Served</div>
                            </div>
                            <div style="padding-left: 1.25rem;">
                                <div style="font-size: 2.2rem; font-weight: 900; color: #ffffff; line-height: 1; font-family: 'Phudu', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.8);">800+</div>
                                <div style="font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; font-weight: 700; font-family: 'Instrument Sans', sans-serif;">Years of Grace</div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Holy Bible PNG Aligned 100% Directly Over Watermark Icon inside Rounded Hero Card -->
                                <!-- Holy Bible PNG Positioned in Exact Center of Hero Card Container -->
                                <!-- Holy Bible PNG Positioned at Center-Right of Hero Container with Smaller Size (95px) -->
                                <!-- Holy Bible PNG Positioned Upward Above Paragraph (No Overlap) -->
                
                <!-- Divine Golden Meteor Streaks & Celestial Sparkle System -->
                <div id="divine-meteor-system" style="position: absolute !important; top: 28% !important; right: 9% !important; width: 240px !important; height: 240px !important; transform: translate(30%, -35%) !important; pointer-events: none !important; z-index: 1 !important; overflow: visible !important;">
                    
                    <!-- Pulsing Golden Aura Halo behind Bible -->
                    <div id="divine-aura-glow" style="position: absolute; top: 50%; left: 50%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,107,0.35) 0%, rgba(255,201,74,0.15) 50%, rgba(255,216,107,0) 75%); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; filter: blur(10px);"></div>
                    
                    <!-- Dynamic Meteor Streaks Layer (Behind & In Front) -->
                    <div id="meteor-streaks-layer" style="position: absolute; inset: 0; pointer-events: none;"></div>

                    <!-- Floating Gold Dust & Star Sparkles Layer -->
                    <div id="sparkles-layer" style="position: absolute; inset: 0; pointer-events: none;"></div>
                </div>

                <img src="assets/images/bible.png" alt="Holy Bible" class="hero-bible-img" style="position: absolute !important; top: 28% !important; right: 9% !important; width: 90px !important; height: auto !important; z-index: 2 !important; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.85)) !important; pointer-events: none !important;">
            </div>
        </section>

        <!-- 2. Welcome Message Section (Pure White Canvas #FFFFFF & Panoramic Bottom Sketch Illustration) -->
        <section id="welcome-section" style="position: relative; padding: 6.5rem 2rem 10rem 2rem; background-color: #F1F1F1; color: #1c1917; overflow: hidden; box-sizing: border-box;">
            
            <div style="position: relative; z-index: 10; max-width: 1050px; margin: 0 auto; text-align: center;">
                
                <!-- Eyebrow Tag -->
                <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem;">
                    <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                    <span style="color: #4A2A18; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">WELCOME TO THE FRANCISCAN SOCIETY</span>
                </div>

                <!-- Section Heading in Phudu 600 -->
                <h2 class="gsap-reveal-h2" style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.4rem, 4vw, 3.6rem) !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.8rem;">
                    WALKING TOGETHER IN FAITH, PENANCE, AND SERVICE
                </h2>

                <!-- Welcome Message Text in Instrument Sans 600 -->
                <p class="gsap-reveal-p" style="font-family: 'Instrument Sans', sans-serif !important; font-size: 1.1rem !important; font-weight: 500 !important; color: #44403c !important; line-height: 1.8 !important; max-width: 880px; margin: 0 auto 2.8rem auto;">
                    We warmly welcome you to the official digital portal of the Franciscan Society, Third Order Regular (TOR), Province of St. Francis, Ranchi. Rooted in the spirit of St. Francis of Assisi, our brotherhood is devoted to living the Gospel through prayer, contemplation, fraternity, and dedicated service across Jharkhand, India, and global missions.
                </p>

            </div>

            <!-- Panoramic Bottom Church Sketch Line-Art (Matching Reference Screenshot) -->
            <img src="assets/images/sketch-bg.png" alt="Church Line Art Panorama" style="position: absolute; bottom: 0; left: 0; width: 100%; height: auto; max-height: 220px; object-fit: contain; object-position: bottom center; filter: opacity(0.3) drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.8)) contrast(110%); pointer-events: none; z-index: 1;">
        </section>

        <!-- 3. About Us Section (Exact Match to Reference Screenshot) -->
        <section id="about-section" style="position: relative; padding: 5.5rem 0 0 0; background-color: #FFFFFF; color: #1c1917; overflow: hidden;">
            <div class="responsive-grid-about" style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); display: grid; gap: 4.5rem; align-items: center;">
                
                <!-- Left Column: Main Image with Working Video Card Overlay -->
                <div style="position: relative; border-radius: 24px;">
                    <div class="about-img-container" style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);">
                        <img src="https://images.unsplash.com/photo-1476873282730-9018f17bdf4e?w=1200&q=80&auto=format&fit=crop" style="width: 100%; height: 460px; object-fit: cover; border-radius: 24px; display: block;" alt="Franciscan Rosary & Prayer">
                    </div>
                    
                    <!-- Inset Video Overlay Card (Positioned inside bottom-right corner) -->
                    <div class="about-video-card" style="position: absolute; bottom: 20px; right: 20px; background: #ffffff; padding: 10px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); width: 185px; text-align: center; z-index: 10;">
                        <div style="position: relative; border-radius: 12px; overflow: hidden; height: 95px; background-color: #1c1917;">
                            <img src="https://images.unsplash.com/photo-1519817650390-64a93db51149?w=400&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover;" alt="Video Thumbnail">
                            <a href="about.html" style="position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; text-decoration: none;">
                                <span style="width: 36px; height: 36px; background: #c8102e; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(200,16,46,0.4);">▶</span>
                            </a>
                        </div>
                        <span style="display: block; margin-top: 8px; font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #1c1917; font-family: 'Instrument Sans', sans-serif;">WATCH OUR VIDEO</span>
                    </div>
                </div>

                <!-- Right Column: Text Content & Mission/Vision Grid -->
                <div>
                    <!-- Eyebrow Tag -->
                    <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
                        <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                        <span style="color: #4A2A18; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">ABOUT US</span>
                    </div>

                    <!-- Main Section Title in Phudu 600 -->
                    <h2 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.2rem, 3.2vw, 2.9rem) !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1.4rem;">
                        OUR STORY FAITH MISSION AND VISION TOGETHER
                    </h2>

                    <!-- Body Description in Instrument Sans -->
                    <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.95rem; color: #57534e; line-height: 1.65; margin-bottom: 2rem;">
                        The Third Order Regular (TOR) of St. Francis traces its origins to the ancient Order of Penance from the 4th century. Established in Ranchi in 1996 and elevated to a full Province on 20 March 2006.
                    </p>

                    <!-- Mission & Vision 2-Column Grid -->
                    <div class="responsive-grid-2" style="display: grid; gap: 1.8rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 2rem; margin-bottom: 2rem;">
                        <div style="display: flex; gap: 1rem; align-items: flex-start;">
                            <div style="width: 38px; height: 38px; background: #4A2A18; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; box-shadow: 0 4px 10px rgba(74,42,24,0.3);">+</div>
                            <div>
                                <h4 style="font-family: 'Phudu', sans-serif !important; font-size: 0.92rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.3rem; color: #1c1917;">OUR MISSION</h4>
                                <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.8rem; color: #78716c; line-height: 1.45; margin: 0;">Serving 15 parishes &amp; 22 schools across Ranchi and global mission fields.</p>
                            </div>
                        </div>
                        <div style="display: flex; gap: 1rem; align-items: flex-start;">
                            <div style="width: 38px; height: 38px; background: #4A2A18; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 4px 10px rgba(74,42,24,0.3);">&#10013;</div>
                            <div>
                                <h4 style="font-family: 'Phudu', sans-serif !important; font-size: 0.92rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.3rem; color: #1c1917;">OUR VISION</h4>
                                <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.8rem; color: #78716c; line-height: 1.45; margin: 0;">Promoting peace, joy, and dignity under "Peace and Joy to the World".</p>
                            </div>
                        </div>
                    </div>

                    <!-- Action Button & Minister Provincial Avatar Row -->
                    <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
                        <a href="about.html" class="btn-fill-animation">
                            <span>LEARN MORE ABOUT</span> <span class="btn-arrow">&#8599;</span>
                        </a>

                        <div style="display: flex; align-items: center; gap: 0.85rem;">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&q=80&auto=format&fit=crop" style="width: 44px; height: 44px; border-radius: 50%; object-fit: cover;" alt="Fr. Manoj Vengathanam, TOR">
                            <div>
                                <div style="font-family: 'Phudu', sans-serif !important; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: #1c1917;">FR. MANOJ VENGATHANAM, TOR</div>
                                <div style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.75rem; color: #78716c;">Minister Provincial</div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <!-- Large Watermark Medium Speed Marquee Text -->
            <style>
                @keyframes marquee-scroll {
                    0% { transform: translateX(0); }
                    100% { transform: translateX(-50%); }
                }
                .marquee-track-scroll {
                    display: flex !important;
                    width: max-content !important;
                    white-space: nowrap !important;
                    animation: marquee-scroll 22s linear infinite !important;
                    will-change: transform;
                }
            </style>
            <div style="width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: hidden !important; white-space: nowrap !important; padding: 3rem 0 1rem 0 !important; margin-top: 2rem !important; pointer-events: none !important; user-select: none !important; position: relative !important;">
                <div class="marquee-track-scroll">
                    <span style="font-family: 'Phudu', sans-serif !important; font-size: clamp(3.5rem, 6vw, 5.5rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: transparent !important; -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.15) !important; letter-spacing: 0.04em !important; white-space: nowrap !important; padding-right: 4rem !important; display: inline-block !important;">
                        &#10013; PEACE AND JOY TO THE WORLD &#10013; CONVERSION, CONTEMPLATION, POVERTY &amp; HUMILITY &#10013; THE LORD IS MY SHEPHERD &#10013; ST. FRANCIS OF ASSISI &#10013; PROVINCE OF ST. FRANCIS RANCHI &nbsp;
                    </span>
                    <span style="font-family: 'Phudu', sans-serif !important; font-size: clamp(3.5rem, 6vw, 5.5rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: transparent !important; -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.15) !important; letter-spacing: 0.04em !important; white-space: nowrap !important; padding-right: 4rem !important; display: inline-block !important;">
                        &#10013; PEACE AND JOY TO THE WORLD &#10013; CONVERSION, CONTEMPLATION, POVERTY &amp; HUMILITY &#10013; THE LORD IS MY SHEPHERD &#10013; ST. FRANCIS OF ASSISI &#10013; PROVINCE OF ST. FRANCIS RANCHI &nbsp;
                    </span>

                </div>
                <!-- View All Gallery Button -->
        </section>

        <!-- Our Mission Section -->
        <section id="mission-section" style="padding: 6.5rem 0; background-color: #ffffff; color: #1c1917; box-sizing: border-box; overflow: hidden;">
            <div class="responsive-grid-2" style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); display: grid; gap: 5rem; align-items: center;">
                
                <!-- Left Content -->
                <div class="gsap-fade-up">
                    <div style="display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem;">
                        <span style="width: 8px; height: 8px; background-color: #c8102e; border-radius: 50%; display: inline-block;"></span>
                        <span style="color: #1c1917; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Instrument Sans', sans-serif;">Our Values</span>
                    </div>

                    <h2 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.5rem, 4vw, 3.8rem) !important; font-weight: 700 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1.5rem;">
                        OUR CHRISTIAN VALUES THAT LEAD OUR MINISTRY
                    </h2>

                    <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.15rem; color: #57534e; line-height: 1.6; margin-bottom: 3rem; max-width: 90%;">
                        Our Christian values are the foundation of everything we do as a church. Guided by faith, love, compassion, and integrity, we are committed to serving God.
                    </p>

                    <!-- Split Info Box -->
                    <div style="background: #ffffff; border-radius: 16px; padding: 2.5rem; display: flex; gap: 2rem; position: relative; margin-bottom: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,0.02);">
                        <!-- Red Left Border Accent -->
                        <div style="position: absolute; left: 0; top: 15%; bottom: 15%; width: 4px; background-color: #c8102e; border-radius: 0 4px 4px 0;"></div>
                        
                        <div style="flex: 1; padding-left: 1rem;">
                            <h4 style="font-family: 'Phudu', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.8rem; color: #1c1917;">PRAYER SUPPORT</h4>
                            <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #78716c; line-height: 1.5; margin: 0;">Our Prayer Support you in faith during every life.</p>
                        </div>
                        <div style="width: 1px; background-color: #e7e5e4;"></div>
                        <div style="flex: 1;">
                            <h4 style="font-family: 'Phudu', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.8rem; color: #1c1917;">FELLOWSHIP GROUPS</h4>
                            <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #78716c; line-height: 1.5; margin: 0;">Our Prayer Support you in faith during every life.</p>
                        </div>
                    </div>

                    <!-- Call to Action Row -->
                    <div style="display: flex; align-items: center; gap: 2.5rem;">
                        <div style="display: flex; align-items: center; gap: 1rem;">
                            <div style="width: 54px; height: 54px; background-color: #1c1917; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.3rem;">
                                &#128222;
                            </div>
                            <div>
                                <div style="font-family: 'Phudu', sans-serif; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; color: #1c1917; margin-bottom: 0.2rem;">CALL US!</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #78716c;">(+123) 456 789</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Images -->
                <div class="gsap-fade-left hover-trigger" style="position: relative; height: 650px;">
                    <!-- Left Church Image -->
                    <div class="about-img-container" style="position: absolute; left: 0; top: 0; width: 58%; height: 90%; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);">
                        <img src="assets/images/church-bg.jpg" alt="Church Interior" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <!-- Right Father Image -->
                    <div style="position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; display: flex; align-items: flex-end; justify-content: center;">
                        <img class="priest-zoom" src="assets/images/mission-father.png" alt="Priest" style="width: 100%; height: auto; object-fit: contain; object-position: bottom center; max-height: 110%;">
                    </div>
                </div>

            </div>
        </section>

        <!-- 4. News & Events Section (Exact Reference Center-Aligned Header & Scroll Track) -->
        
          <!-- 3.5 Bible Quote Section -->
          <section id="bible-quote-section" style="padding: clamp(3rem, 8vw, 6.5rem) 0; background-color: #0a0a0a; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 12px); background-image: url('assets/images/sketch-bg.png'), repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 12px); background-size: cover, auto; background-position: center, center; background-blend-mode: overlay, normal; color: #ffffff; text-align: center; border-radius: 32px; margin: 0 3rem 4rem 3rem; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.2);">
              <div style="position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 0 2rem;">
                  <div style="display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 2.5rem;">
                      <span style="width: 6px; height: 6px; background-color: #c8102e; border-radius: 50%; display: inline-block;"></span>
                      <span style="color: #ffffff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Instrument Sans', sans-serif;">WORD OF GOD</span>
                  </div>
                  
                  <h2 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.8rem, 6vw, 4.5rem) !important; font-weight: 700 !important; color: #ffffff !important; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem;">
                      &ldquo;BE STILL AND<br><span style="color: #4A2A18 !important; -webkit-text-fill-color: #4A2A18 !important; -webkit-text-stroke: 1.5px #ffffff !important; display: inline-block;">KNOW</span> THAT I AM GOD.&rdquo;
                  </h2>
                  
                  <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.15rem; color: #a8a29e; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;">
                      <span style="display: inline-block; width: 35px; height: 1px; background-color: #a8a29e;"></span> Book of Psalms
                  </p>
              </div>
          </section>

          <section id="news-section" style="padding: clamp(3rem, 8vw, 6.5rem) 0; background-color: #FFFFFF; color: #1c1917; box-sizing: border-box; overflow: hidden;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem);">
                
                <!-- Section Header (100% Center-Aligned Eyebrow, 2-Line Title & Scroll Navigation Arrows) -->
                <div style="text-align: center; max-width: 900px; margin: 0 auto 3.8rem auto;">
                    
                    <!-- Eyebrow Tag -->
                    <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem;">
                        <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                        <span style="color: #4A2A18; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">NEWS &amp; EVENTS</span>
                    </div>

                    <!-- Main Section Title in Phudu 600 (Centered 2 Lines) -->
                    <h2 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 2rem 0; text-align: center;">
                        INSIGHTS AND INSPIRATION FROM<br>OUR LATEST NEWS
                    </h2>

                    <!-- Centered Scroll Navigation Arrow Buttons -->
                    <div style="display: flex; gap: 0.85rem; align-items: center; justify-content: center;">
                        <button onclick="document.getElementById('news-scroll-track').scrollBy({left: -380, behavior: 'smooth'})" aria-label="Scroll Left" style="width: 48px; height: 48px; border-radius: 50%; background: #ffffff; border: 1.5px solid #4A2A18; color: #4A2A18; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.06);" onmouseover="this.style.background='#4A2A18'; this.style.color='#ffffff';" onmouseout="this.style.background='#ffffff'; this.style.color='#4A2A18';">
                            &#8592;
                        </button>
                        <button onclick="document.getElementById('news-scroll-track').scrollBy({left: 380, behavior: 'smooth'})" aria-label="Scroll Right" style="width: 48px; height: 48px; border-radius: 50%; background: #4A2A18; border: 1.5px solid #4A2A18; color: #ffffff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(74,42,24,0.3);" onmouseover="this.style.background='#e6c888'; this.style.borderColor='#e6c888'; this.style.color='#2a160b';" onmouseout="this.style.background='#4A2A18'; this.style.borderColor='#4A2A18'; this.style.color='#ffffff';">
                            &#8594;
                        </button>
                    </div>

                </div>

                <div id="news-scroll-track" style="display: flex; gap: 2.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.5rem; scrollbar-width: none; -ms-overflow-style: none;">
                    
                    <!-- Item 1 -->
                    <div class="blog-card" style="flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: transparent;">
                        <div style="border-radius: 20px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1438232992991-995b7058bbb3?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Daily Prayer Life" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.35; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1.5rem;">
                            STRENGTHENING YOUR FAITH THROUGH CONSISTENT DAILY PRAYER LIFE
                        </h3>
                        <div>
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Item 2 -->
                    <div class="blog-card" style="flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: transparent;">
                        <div style="border-radius: 20px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1519817650390-64a93db51149?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Trusting God" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.35; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1.5rem;">
                            TRUSTING GOD FULLY DURING LIFE’S DIFFICULT AND UNCERTAIN TIMES
                        </h3>
                        <div>
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Item 3 -->
                    <div class="blog-card" style="flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: transparent;">
                        <div style="border-radius: 20px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1476873282730-9018f17bdf4e?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Spiritually Strong" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.35; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1.5rem;">
                            STAYING SPIRITUALLY STRONG THROUGH FAITH AND DAILY PRAYER
                        </h3>
                        <div>
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Item 4 -->
                    <div class="blog-card" style="flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: transparent;">
                        <div style="border-radius: 20px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1543791187-df796fa11835?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Franciscan Mission" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.35; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1.5rem;">
                            EXPANDING FRANCISCAN EDUCATIONAL &amp; SOCIAL MISSIONS IN RANCHI
                        </h3>
                        <div>
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Item 5 -->
                    <div class="blog-card" style="flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: transparent;">
                        <div style="border-radius: 20px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1509021436665-8f07dbf5bf1d?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Youth Ministry" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.35; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1.5rem;">
                            YOUTH SPIRITUAL RETREAT &amp; COMMUNITY FELLOWSHIP GATHERING
                        </h3>
                        <div>
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Item 6 -->
                    <div class="blog-card" style="flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; background: transparent;">
                        <div style="border-radius: 20px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Parish Feast" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.2rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.35; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1.5rem;">
                            CELEBRATING THE ANNUAL ST. FRANCIS PROVINCIA FEAST DAY
                        </h3>
                        <div>
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                </div>

                <!-- View All News & Events Button -->
                <div class="gsap-fade-up" style="text-align: center; margin-top: 3rem;">
                    <a href="news.html" class="btn-view-all" style="display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 99px; text-decoration: none; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em;">
                        <span>VIEW ALL NEWS & EVENTS</span> <span class="btn-arrow" style="margin-left: 0.5rem;">&#8599;</span>
                    </a>
                </div>

            </div>
        </section>


        <!-- 4.5 Inquiry Form Section (Fixed Background + Praying Woman Image + Glassmorphic Form) -->
        
        <!-- 4.5 Inquiry Form Section (Exact Reference Screenshot Inset Rounded Card Container) -->
        <section id="inquiry-section" style="padding: clamp(3rem, 8vw, 6.5rem) 0; background-color: #FFFFFF; color: #ffffff; box-sizing: border-box;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem);">
                
                <!-- Main Inset Card Container with 32px Rounded Corners & Background Image -->
                <div style="position: relative; border-radius: 32px; overflow: hidden; background: url('assets/images/church-bg.jpg') no-repeat center center / cover fixed !important; background-attachment: fixed !important; box-shadow: 0 20px 50px rgba(0,0,0,0.15); min-height: 520px;">
                    
                    <!-- Dark Vignette Overlay -->
                    <div style="position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,10,6,0.75) 0%, rgba(15,10,6,0.85) 60%, rgba(15,10,6,0.92) 100%); z-index: 1;"></div>

                    <!-- Layout Grid: Left Image & Right Form -->
                    <div class="responsive-grid-contact" style="position: relative; z-index: 2; display: grid; gap: 3rem; align-items: stretch; min-height: 520px; padding: 0 1.5rem;">
                        
                        <!-- Left Side: Praying Woman PNG Image (Pinned directly to bottom edge) -->
                        <div style="position: relative; display: flex; align-items: flex-end; justify-content: flex-start; min-height: 480px;">
                            <img src="assets/images/praying-woman.png" alt="Praying Sister" style="position: absolute; bottom: 0; left: 0; height: 100%; max-height: 500px; width: auto; object-fit: contain; object-position: bottom left; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8)); display: block; pointer-events: none;">
                        </div>

                        <!-- Right Side: Inquiry Form Content -->
                        <div style="padding: 3.5rem 0; display: flex; flex-direction: column; justify-content: center;">
                            
                            <!-- Eyebrow Tag -->
                            <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem;">
                                <span style="width: 6px; height: 6px; background-color: #e6c888; border-radius: 50%; display: inline-block;"></span>
                                <span style="color: #e6c888; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">SUBMIT AN INQUIRY</span>
                            </div>

                            <!-- Heading in Phudu 600 -->
                            <h2 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2rem, 3vw, 2.5rem) !important; font-weight: 600 !important; color: #ffffff !important; text-transform: uppercase; line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 1.8rem;">
                                HAVE A QUESTION OR NEED PRAYER? REACH OUT TO US
                            </h2>

                            <!-- Inquiry Form -->
                            <form onsubmit="event.preventDefault(); alert('Thank you! Your inquiry has been submitted successfully.');" style="display: flex; flex-direction: column; gap: 1.1rem;">
                                
                                <div class="responsive-grid-2" style="display: grid; gap: 1rem;">
                                    <input type="text" placeholder="Your Full Name *" required style="width: 100%; padding: 1rem 1.3rem; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: #ffffff; font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; outline: none;" onfocus="this.style.borderColor='#e6c888'" onblur="this.style.borderColor='rgba(255, 255, 255, 0.18)'">
                                    <input type="email" placeholder="Your Email Address *" required style="width: 100%; padding: 1rem 1.3rem; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: #ffffff; font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; outline: none;" onfocus="this.style.borderColor='#e6c888'" onblur="this.style.borderColor='rgba(255, 255, 255, 0.18)'">
                                </div>

                                <select style="width: 100%; padding: 1rem 1.3rem; background: rgba(28, 25, 23, 0.95); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: #ffffff; font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; outline: none; cursor: pointer;" onfocus="this.style.borderColor='#e6c888'" onblur="this.style.borderColor='rgba(255, 255, 255, 0.18)'">
                                    <option value="general">General Inquiry</option>
                                    <option value="prayer">Prayer Request &amp; Intentions</option>
                                    <option value="vocations">Vocational &amp; Priesthood Guidance</option>
                                </select>

                                <textarea rows="3" placeholder="Write your message or prayer request here... *" required style="width: 100%; padding: 1rem 1.3rem; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: #ffffff; font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; outline: none; resize: none;" onfocus="this.style.borderColor='#e6c888'" onblur="this.style.borderColor='rgba(255, 255, 255, 0.18)'"></textarea>

                                <div style="margin-top: 0.4rem;">
                                    <button type="submit" class="btn-fill-animation" style="width: 100%; justify-content: center; background: #4A2A18; border: 1.5px solid #4A2A18; color: #ffffff;">
                                        <span>SUBMIT INQUIRY</span> <span class="btn-arrow">&#8599;</span>
                                    </button>
                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>
        </section>


        <!-- 5. Our Ministries Section (Exact Match to Reference Screenshots) -->
        
        <!-- 5. Blogs Section (White Container Cards with Generous Inner Padding) -->
        
<style>
.blog-padded-card:hover .news-text-link .btn-arrow {
    transform: rotate(45deg) !important;
}
</style>
<section id="blogs-section" style="padding: clamp(3rem, 8vw, 6.5rem) 0; background-color: #FFFFFF; color: #1c1917; box-sizing: border-box; overflow: hidden;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem);">
                
                <!-- Section Header (Centered Eyebrow & 2-Line Title, No Pill) -->
                <div style="text-align: center; max-width: 900px; margin: 0 auto 4rem auto;">
                    
                    <!-- Eyebrow Tag (No Pill) -->
                    <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem;">
                        <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                        <span style="color: #4A2A18; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">OUR BLOGS</span>
                    </div>

                    <!-- Main Section Title in Phudu 600 -->
                    <h2 style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-align: center;">
                        OUR MINISTRIES FOR WORSHIP<br>GROWTH AND SERVICE
                    </h2>
                </div>

                <!-- 3 Blogs White Cards Grid with Generous Inner Padding -->
                <div class="responsive-grid-3" style="display: grid; gap: 2.2rem; margin-bottom: 4rem;">
                    
                    <!-- Card 1: Children's Ministry -->
                    <div class="blog-padded-card" style="background: #ffffff; border-radius: 24px; padding: 1.8rem; box-shadow: 0 15px 35px rgba(0,0,0,0.06); display: flex; flex-direction: column; transition: transform 0.4s ease, box-shadow 0.4s ease;">
                        <div style="border-radius: 16px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1543791187-df796fa11835?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Children's Ministry" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.25rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.01em; line-height: 1.3;">
                            CHILDREN’S MINISTRY
                        </h3>
                        <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.88rem; color: #57534e; line-height: 1.6; margin-bottom: 1.6rem;">
                            CHILDREN’S MINISTRY HOME MEETING<br>TIMES Tuesdays, 12:30pm [...]
                        </p>
                        <div style="margin-top: auto;">
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Card 2: Youth Ministry -->
                    <div class="blog-padded-card" style="background: #ffffff; border-radius: 24px; padding: 1.8rem; box-shadow: 0 15px 35px rgba(0,0,0,0.06); display: flex; flex-direction: column; transition: transform 0.4s ease, box-shadow 0.4s ease;">
                        <div style="border-radius: 16px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1509021436665-8f07dbf5bf1d?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Youth Ministry" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.25rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.01em; line-height: 1.3;">
                            YOUTH MINISTRY
                        </h3>
                        <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.88rem; color: #57534e; line-height: 1.6; margin-bottom: 1.6rem;">
                            YOUTH MINISTRY HOME MEETING<br>TIMES Tuesdays, 12:30pm [...]
                        </p>
                        <div style="margin-top: auto;">
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                    <!-- Card 3: Women's Ministry -->
                    <div class="blog-padded-card" style="background: #ffffff; border-radius: 24px; padding: 1.8rem; box-shadow: 0 15px 35px rgba(0,0,0,0.06); display: flex; flex-direction: column; transition: transform 0.4s ease, box-shadow 0.4s ease;">
                        <div style="border-radius: 16px; overflow: hidden; height: 260px; margin-bottom: 1.6rem; background-color: #d6ccc2;">
                            <img src="https://images.unsplash.com/photo-1519817650390-64a93db51149?w=800&q=80&auto=format&fit=crop" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;" alt="Women's Ministry" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        <h3 style="font-family: 'Phudu', sans-serif !important; font-size: 1.25rem !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.01em; line-height: 1.3;">
                            WOMEN’S MINISTRY
                        </h3>
                        <p style="font-family: 'Instrument Sans', sans-serif !important; font-size: 0.88rem; color: #57534e; line-height: 1.6; margin-bottom: 1.6rem;">
                            WOMEN’S MINISTRY HOME MEETING<br>TIMES Tuesdays, 12:30pm [...]
                        </p>
                        <div style="margin-top: auto;">
                            <a href="news.html" class="news-text-link" style="font-family: 'Instrument Sans', sans-serif !important; font-weight: 800 !important; font-size: 0.88rem !important; color: #1c1917 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; transition: color 0.3s ease !important;">
                                <span>READ MORE</span> <span class="btn-arrow" style="font-size: 1rem; transition: transform 0.3s ease;">&#8599;</span>
                            </a>
                        </div>
                    </div>

                </div>

                <!-- View All Blogs Button -->
                <div class="gsap-fade-up" style="text-align: center; margin-top: 3rem;">
                    <a href="news.html" class="btn-view-all" style="display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 99px; text-decoration: none; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em;">
                        <span>VIEW ALL BLOGS</span> <span class="btn-arrow" style="margin-left: 0.5rem;">&#8599;</span>
                    </a>
                </div>

            </div>
        </section>


    
        <!-- 6. Gallery Section -->
        <section id="gallery-grid" style="padding: 1rem 0 clamp(3rem, 8vw, 6.5rem) 0; background-color: #FFFFFF; box-sizing: border-box;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem);">
                
                <!-- Section Header -->
                <div style="text-align: center; max-width: 900px; margin: 0 auto 4rem auto;">
                    <div class="js-reveal-text" style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem;">
                        <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                        <span style="color: #4A2A18; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">IMAGE GALLERY</span>
                    </div>
                    <h2 class="js-reveal-text" style="font-family: 'Phudu', sans-serif !important; font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important; font-weight: 600 !important; color: #1c1917 !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-align: center;">
                        EXPLORE OUR BEAUTIFUL CHURCH
                    </h2>
                </div>

                <div class="gallery-grid-layout responsive-grid-3" style="display: grid; gap: 2.2rem; margin-bottom: 3rem;">
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                <img src="assets/images/gallery_1_1785739465440.png" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                <img src="assets/images/gallery_2_1785739478020.png" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                <img src="assets/images/gallery_3_1785739488033.png" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                <img src="assets/images/gallery_4_1785739507745.png" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                <img src="assets/images/gallery_5_1785739518760.png" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>
                    <div style="overflow: hidden; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.4s ease;">
                <img src="assets/images/gallery_6_1785739530049.png" alt="Church Gallery Image" style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>

                </div>
                <!-- View All Gallery Button -->
                <div class="gsap-fade-up" style="text-align: center; margin-top: 1rem;">
                    <a href="gallery.html" class="btn-view-all" style="display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 99px; text-decoration: none; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em;">
                        <span>VIEW ALL PHOTOS</span> <span class="btn-arrow" style="margin-left: 0.5rem;">&#8599;</span>
                    </a>
                </div>
            </div>
        </section>
</main>

<script>
document.addEventListener("DOMContentLoaded", function() {
    if (window.innerWidth > 768) {
        let dot = document.createElement("div");
        dot.className = "custom-cursor-dot";
        let follower = document.createElement("div");
        follower.className = "custom-cursor-follower";
        document.body.appendChild(dot);
        document.body.appendChild(follower);

        let mouseX = -100, mouseY = -100;
        let followerX = -100, followerY = -100;

        document.addEventListener("mousemove", function(e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
            dot.style.left = mouseX + "px";
            dot.style.top = mouseY + "px";
        });

        // Add interactive hover state for clickable elements
        const interactiveElements = document.querySelectorAll('a, button, input, select, textarea, .hover-target, .card-link');
        interactiveElements.forEach(el => {
            el.addEventListener('mouseenter', () => {
                follower.classList.add('cursor-hovering');
                dot.classList.add('cursor-hovering');
            });
            el.addEventListener('mouseleave', () => {
                follower.classList.remove('cursor-hovering');
                dot.classList.remove('cursor-hovering');
            });
        });

        function animateFollower() {
            followerX += (mouseX - followerX) * 0.15;
            followerY += (mouseY - followerY) * 0.15;
            follower.style.left = followerX + "px";
            follower.style.top = followerY + "px";
            requestAnimationFrame(animateFollower);
        }
        animateFollower();
    }
});
</script>

</div>

<!-- Floating Contact Dock (Chat / Call / Email) -->
<div class="cta-dock" data-cta-dock>

    <ul class="cta-dock__menu" id="cta-dock-menu">
        <li class="cta-dock__item">
            <!-- TODO: replace with the real contact email -->
            <a class="cta-dock__link" href="mailto:info@example.org?subject=Enquiry%20%E2%80%93%20The%20Franciscan%20Society">
                <span class="cta-dock__item-icon">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
                        <rect x="3.5" y="5.5" width="17" height="13" rx="2" stroke="currentColor" stroke-width="1.6"/>
                        <path d="M4.5 7l7.5 6 7.5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                <span class="cta-dock__item-label">Email Us</span>
            </a>
        </li>
        <li class="cta-dock__item">
            <!-- TODO: replace with the real phone number -->
            <a class="cta-dock__link" href="tel:+911234567890">
                <span class="cta-dock__item-icon">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
                        <path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.2 2.2Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
                    </svg>
                </span>
                <span class="cta-dock__item-label">Call Us</span>
            </a>
        </li>
        <li class="cta-dock__item">
            <!-- TODO: replace with the real WhatsApp number (digits only, with country code) -->
            <a class="cta-dock__link" href="https://wa.me/911234567890?text=Hello%2C%20I'd%20like%20to%20know%20more%20about%20the%20Franciscan%20Society." target="_blank" rel="noopener">
                <span class="cta-dock__item-icon">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
                        <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7A2.5 2.5 0 0 1 17.5 16H9.8L5.6 19.2a.6.6 0 0 1-.96-.48V16h-.14A2.5 2.5 0 0 1 4 13.5v-7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                        <circle cx="8.5" cy="10" r="0.9" fill="currentColor" stroke="none"/>
                        <circle cx="12" cy="10" r="0.9" fill="currentColor" stroke="none"/>
                        <circle cx="15.5" cy="10" r="0.9" fill="currentColor" stroke="none"/>
                    </svg>
                </span>
                <span class="cta-dock__item-label">Chat on WhatsApp</span>
            </a>
        </li>
    </ul>

    <button type="button" class="cta-dock__trigger" id="cta-dock-trigger" aria-expanded="false" aria-controls="cta-dock-menu" aria-label="Contact us">
        
        <span class="cta-dock__glyph cta-dock__glyph--tau" aria-hidden="true">
            <img src="assets/images/christian-cross.png" alt="Christian Cross" style="width: 48px; height: 48px; object-fit: contain; filter: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(2311%) hue-rotate(341deg) brightness(95%) contrast(86%);" />
        </span>
        <span class="cta-dock__glyph cta-dock__glyph--close" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" focusable="false">
                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
            </svg>
        </span>
    </button>
</div>

<script>
(function () {
    const dock = document.querySelector('[data-cta-dock]');
    if (!dock) return;
    const trigger = document.getElementById('cta-dock-trigger');
    const menu = document.getElementById('cta-dock-menu');

    function openDock() {
        dock.classList.add('is-open');
        trigger.setAttribute('aria-expanded', 'true');
        trigger.setAttribute('aria-label', 'Close contact options');
        menu.setAttribute('aria-hidden', 'false');
    }

    function closeDock(focusTrigger) {
        dock.classList.remove('is-open');
        trigger.setAttribute('aria-expanded', 'false');
        trigger.setAttribute('aria-label', 'Contact us');
        menu.setAttribute('aria-hidden', 'true');
        if (focusTrigger) trigger.focus();
    }

    trigger.addEventListener('click', () => {
        dock.classList.contains('is-open') ? closeDock(false) : openDock();
    });

    document.addEventListener('click', (e) => {
        if (dock.classList.contains('is-open') && !dock.contains(e.target)) {
            closeDock(false);
        }
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && dock.classList.contains('is-open')) {
            closeDock(true);
        }
    });

    menu.querySelectorAll('a').forEach((link) => {
        link.addEventListener('click', () => closeDock(false));
    });
})();
</script>

<!-- Master GSAP + ScrollTrigger Animation Engine -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    gsap.registerPlugin(ScrollTrigger);

    // 1. Navbar Slide Down Reveal
    gsap.from(".header", {
        y: -80,
        opacity: 0,
        duration: 1.2,
        ease: "power3.out"
    });

    // 2. Hero Content Reveal
    gsap.from(".hero-section h1", {
        y: 40,
        opacity: 0,
        duration: 1.2,
        delay: 0.4,
        ease: "power3.out"
    });

    gsap.from(".hero-section p", {
        y: 30,
        opacity: 0,
        duration: 1.1,
        delay: 0.6,
        ease: "power3.out"
    });

    gsap.from(".hero-buttons-row a", {
        scale: 0.9,
        opacity: 0,
        duration: 0.9,
        stagger: 0.2,
        delay: 0.8,
        ease: "back.out(1.7)"
    });

    // 3. Section Titles (H2) Staggered Reveal
    gsap.utils.toArray("h2").forEach(h2 => {
        gsap.from(h2, {
            scrollTrigger: {
                trigger: h2,
                start: "top 85%",
                toggleActions: "play none none none"
            },
            y: 35,
            opacity: 0,
            duration: 1,
            ease: "power3.out"
        });
    });

    // 4. Paragraphs Fade Up Animation
    gsap.utils.toArray("p").forEach(p => {
        gsap.from(p, {
            scrollTrigger: {
                trigger: p,
                start: "top 88%",
                toggleActions: "play none none none"
            },
            y: 25,
            opacity: 0,
            duration: 0.9,
            ease: "power2.out"
        });
    });

    // Parallax Background Video
    gsap.to("#hero-bg-video", {
        scrollTrigger: {
            trigger: ".hero-section",
            start: "top top",
            end: "bottom top",
            scrub: true
        },
        yPercent: 20,
        ease: "none"
    });

    // 5. Images Fade + Scale Reveal
    gsap.utils.toArray(".about-img-container, .about-video-card").forEach(img => {
        gsap.from(img, {
            scrollTrigger: {
                trigger: img,
                start: "top 85%",
                toggleActions: "play none none none"
            },
            scale: 0.94,
            opacity: 0,
            duration: 1.1,
            ease: "power3.out"
        });
    });

    // 6. Floating Icon Animation
    gsap.to(".about-video-card span, .about-section div[style*='background: #c8102e']", {
        y: -6,
        repeat: -1,
        yoyo: true,
        duration: 2.2,
        ease: "power1.inOut"
    });

    // 7. Statistics Count-Up Animation
    const statElements = document.querySelectorAll(".hero-grid div[style*='font-size: 2.2rem']");
    statElements.forEach(el => {
        let text = el.innerText;
        let num = parseInt(text.replace(/[^0-9]/g, ""));
        if (!isNaN(num)) {
            ScrollTrigger.create({
                trigger: el,
                start: "top 90%",
                onEnter: () => {
                    let obj = { val: 0 };
                    gsap.to(obj, {
                        val: num,
                        duration: 2,
                        ease: "power2.out",
                        onUpdate: () => {
                            el.innerText = Math.floor(obj.val) + "+";
                        }
                    });
                }
            });
        }
    });

});
</script>


<!-- GSAP Word-by-Word Heading Split Animation Engine -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    gsap.registerPlugin(ScrollTrigger);

    // GSAP ScrollTrigger: Bible PNG flies to left side behind Welcome section title on scroll
    const heroBibleEl = document.querySelector(".hero-bible-img");
    const welcomeHeading = document.querySelector("#welcome-section h2");

    // Function to split headings (H1, H2, H3) into word spans for word-by-word stagger
    function splitHeadingsWordByWord() {
        const headings = document.querySelectorAll("h1, h2, h3");
        
        headings.forEach(heading => {
            // Avoid double splitting
            if (heading.dataset.wordSplit === "true") return;
            heading.dataset.wordSplit = "true";

            // Process inner HTML to preserve <br> tags while splitting text nodes into words
            const childNodes = Array.from(heading.childNodes);
            heading.innerHTML = ""; // Clear existing content

            childNodes.forEach(node => {
                if (node.nodeType === Node.TEXT_NODE) {
                    const words = node.textContent.trim().split(/\s+/);
                    words.forEach((word, index) => {
                        if (word.length > 0) {
                            const wordSpan = document.createElement("span");
                            wordSpan.className = "gsap-heading-word";
                            wordSpan.style.display = "inline-block";
                            wordSpan.style.whiteSpace = "pre";
                            wordSpan.style.opacity = "0";
                            wordSpan.style.transform = "translateY(25px)";
                            wordSpan.style.filter = "none";
                            wordSpan.style.willChange = "transform, opacity, filter";
                            wordSpan.textContent = word + (index < words.length - 1 ? " " : "");
                            heading.appendChild(wordSpan);
                        }
                    });
                } else if (node.nodeType === Node.ELEMENT_NODE) {
                    if (node.tagName.toLowerCase() === "br") {
                        heading.appendChild(document.createElement("br"));
                    } else {
                        // For nested elements (like <span>), split their inner text
                        const wordSpan = document.createElement("span");
                        wordSpan.className = "gsap-heading-word";
                        wordSpan.style.display = "inline-block";
                        wordSpan.style.whiteSpace = "pre";
                        wordSpan.style.opacity = "0";
                        wordSpan.style.transform = "translateY(25px)";
                        wordSpan.style.filter = "none";
                        wordSpan.style.willChange = "transform, opacity, filter";
                        // Preserve inline styles and classes
                        if (node.style.cssText) wordSpan.style.cssText += node.style.cssText;
                        if (node.className) wordSpan.classList.add(...node.className.split(' '));
                        wordSpan.textContent = node.textContent + " ";
                        heading.appendChild(wordSpan);
                    }
                }
            });

            // Animate word spans using GSAP ScrollTrigger with exact specifications
            const words = heading.querySelectorAll(".gsap-heading-word");
            if (words.length > 0) {
                if (heading.classList.contains("hero-title")) return; // handled by preloader
                gsap.to(words, {
                    scrollTrigger: {
                        trigger: heading,
                        start: "top 88%",
                        toggleActions: "play none none none"
                    },
                    opacity: 1,
                    y: 0,
                    
                    stagger: 0.08,
                    duration: 0.7,
                    ease: "power4.out"
                });
            }
        });
    }

    // Execute split and animation engine
    splitHeadingsWordByWord();
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const preloader = document.getElementById("cinematic-preloader");
    const preloaderCircle = document.getElementById("preloader-circle");
    const preloaderLogo = document.getElementById("preloader-logo");
    const heroBible = document.querySelector(".hero-bible-img");
    const navLogoText = document.querySelector(".header__logo span");

    // Make sure hero components are visible (they might have been hidden by the old preloader logic if reused elsewhere)
    if (heroBible) heroBible.style.opacity = "1";
    if (navLogoText) navLogoText.style.opacity = "1";

    // Small pop in animation for the circle
    gsap.from(preloaderCircle, {
        scale: 0,
        opacity: 0,
        duration: 1,
        ease: "back.out(1.5)"
    });

    // Once the window is fully loaded, expand the circle
    window.addEventListener("load", function() {
        const timeline = gsap.timeline({
            onComplete: function() {
                preloader.style.display = "none";
            }
        });
        
        preloader.style.pointerEvents = "none";

        timeline.to(preloaderLogo, {
            opacity: 0,
            duration: 0.4,
            ease: "power2.inOut"
        }, "+=0.3")
        
        // Trigger hero title animation right as circle expands
        const heroWords = document.querySelectorAll(".hero-title .gsap-heading-word");
        if (heroWords.length > 0) {
            timeline.fromTo(heroWords, {
                opacity: 0,
                y: 25
            }, {
                opacity: 1,
                y: 0,
                stagger: 0.08,
                duration: 0.7,
                ease: "power4.out"
            }, "-=0.1"); // Start at the same time as the circle expands
        } timeline.to(preloaderCircle, {
            scale: 50,
            duration: 1.2,
            ease: "power3.inOut"
        }, "-=0.1")
        .to(preloader, {
            opacity: 0,
            duration: 0.6,
            ease: "power2.inOut"
        }, "-=0.6");
    });
    
    // Fallback if window load never fires
    setTimeout(() => {
        if(preloader.style.display !== "none") {
            gsap.to(preloader, { opacity: 0, duration: 1, onComplete: () => { preloader.style.display = "none"; }});
        }
    }, 4000);
});
</script>