<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>

---

<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>

---

<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>

---

<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>