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


<!-- Expanding Circle Preloader Animation Engine -->
<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>


<!-- GSAP Divine Golden Meteor & Celestial Sparkle Engine -->
<script>
document.addEventListener("DOMContentLoaded", function() {

    // 1. Bible Gentle Floating & Rotation Motion (3-5px float, +-2deg rotation)
    const heroBible = document.querySelector(".hero-bible-img");
    if (heroBible) {
        gsap.to(heroBible, {
            y: -5,
            rotation: 2,
            duration: 3.5,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        });
    }

    // 2. Subtle Golden Aura Glow Pulse (Every 4-6 seconds)
    const auraGlow = document.getElementById("divine-aura-glow");
    if (auraGlow) {
        gsap.to(auraGlow, {
            scale: 1.35,
            opacity: 0.85,
            duration: 2.8,
            repeat: -1,
            yoyo: true,
            ease: "sine.inOut"
        });
    }

    // 3. Golden Meteor Streaks Generator (12-15 diagonal flying streaks)
    const streakContainer = document.getElementById("meteor-streaks-layer");
    if (streakContainer) {
        const colors = ["#FFD86B", "#FFC94A", "#FFE8A3", "#FFFFFF"];
        const streakCount = 14;

        for (let i = 0; i < streakCount; i++) {
            createMeteorStreak();
        }

        function createMeteorStreak() {
            const streak = document.createElement("div");
            streak.className = "meteor-streak";
            
            const isFront = Math.random() > 0.45; // 55% in front, 45% behind
            const length = gsap.utils.random(70, 150);
            const color = colors[Math.floor(Math.random() * colors.length)];
            const angle = gsap.utils.random(-38, -48); // Diagonal downward trajectory

            streak.style.cssText = `
                position: absolute;
                width: ${length}px;
                height: 2px;
                background: linear-gradient(90deg, ${color} 0%, rgba(255,201,74,0.5) 40%, rgba(255,216,107,0) 100%);
                border-radius: 50px;
                transform: rotate(${angle}deg);
                opacity: 0;
                pointer-events: none;
                z-index: 1;
                filter: drop-shadow(0 0 6px ${color});
            `;

            // Glowing Meteor Head
            const head = document.createElement("div");
            head.style.cssText = `
                position: absolute;
                left: 0;
                top: -1px;
                width: 4px;
                height: 4px;
                background: #ffffff;
                border-radius: 50%;
                box-shadow: 0 0 10px #FFFFFF, 0 0 15px ${color};
            `;
            streak.appendChild(head);
            streakContainer.appendChild(streak);

            // Randomize spawn position around Bible
            const startX = gsap.utils.random(-40, 180);
            const startY = gsap.utils.random(-50, 80);
            const moveX = gsap.utils.random(120, 220);
            const moveY = gsap.utils.random(120, 220);
            const duration = gsap.utils.random(1.4, 2.6);
            const delay = gsap.utils.random(0.1, 4.5);

            gsap.set(streak, { x: startX, y: startY, opacity: 0 });

            gsap.to(streak, {
                x: startX + moveX,
                y: startY + moveY,
                opacity: gsap.utils.random(0.65, 0.95),
                duration: duration,
                delay: delay,
                ease: "power1.in",
                onComplete: () => {
                    streak.remove();
                    createMeteorStreak(); // Continuous loop with randomized parameters
                }
            });
        }
    }

    // 4. Floating Gold Dust & Twinkling 4-Point Star Sparkles
    const sparklesLayer = document.getElementById("sparkles-layer");
    if (sparklesLayer) {
        const sparkleCount = 16;
        for (let j = 0; j < sparkleCount; j++) {
            createSparkle();
        }

        function createSparkle() {
            const isStar = Math.random() > 0.6; // 40% 4-point stars, 60% gold dust
            const sparkle = document.createElement("div");
            const x = gsap.utils.random(-20, 220);
            const y = gsap.utils.random(-30, 220);

            if (isStar) {
                sparkle.innerHTML = "✦";
                sparkle.style.cssText = `
                    position: absolute;
                    left: ${x}px;
                    top: ${y}px;
                    color: #FFE8A3;
                    font-size: ${gsap.utils.random(8, 14)}px;
                    opacity: 0;
                    pointer-events: none;
                    z-index: 1;
                    text-shadow: 0 0 8px #FFC94A;
                `;
            } else {
                const size = gsap.utils.random(2, 4);
                sparkle.style.cssText = `
                    position: absolute;
                    left: ${x}px;
                    top: ${y}px;
                    width: ${size}px;
                    height: ${size}px;
                    background: #FFD86B;
                    border-radius: 50%;
                    opacity: 0;
                    pointer-events: none;
                    z-index: 1;
                    box-shadow: 0 0 6px #FFE8A3;
                `;
            }

            sparklesLayer.appendChild(sparkle);

            const duration = gsap.utils.random(1.8, 3.5);
            const delay = gsap.utils.random(0.2, 5.0);

            gsap.timeline({
                delay: delay,
                onComplete: () => {
                    sparkle.remove();
                    createSparkle(); // Continuous loop
                }
            })
            .to(sparkle, { opacity: gsap.utils.random(0.5, 0.9), y: "-=12", duration: duration * 0.5, ease: "sine.in" })
            .to(sparkle, { opacity: 0, y: "-=12", duration: duration * 0.5, ease: "sine.out" });
        }
    }

});
</script>


<!-- 100% Bulletproof Window Scroll Flight Engine for Bible PNG -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const heroBibleRef = document.querySelector(".hero-bible-img");
    const welcomeTitleRef = document.querySelector(".gsap-reveal-h2");
    const flyingContainer = document.getElementById("welcome-scroll-bible-container");
    const flyingImg = document.getElementById("welcome-scroll-bible-img");

    if (flyingContainer && flyingImg) {
        function updateBibleFlight() {
            const scrollY = window.scrollY;
            const heroSection = document.getElementById("hero-section");
            const heroHeight = heroSection ? heroSection.offsetHeight : 650;
            
            // Activate flight when scrolling down from Hero section into Welcome section
            if (scrollY > 10) {
                flyingContainer.style.display = "block";
                
                // Fly during the first 60% of the hero height scroll
                const progress = Math.min(1, (scrollY - 10) / (heroHeight * 0.6));
                
                // Z-index: Over everything during flight, behind text once landed
                flyingContainer.style.zIndex = (progress < 0.95) ? "99999" : "2";
                
                if (heroBibleRef) heroBibleRef.style.setProperty('visibility', 'hidden', 'important');

                // Starting position (Hero Bible top-right)
                const startX = window.innerWidth * 0.82;
                const startY = 160;

                // Target position: Exactly in the center of the screen, pinned to the Welcome section title
                let targetX = window.innerWidth / 2 - 45; // 45 is half of the 90px width
                let targetY = 300;
                
                if (welcomeTitleRef) {
                    const tRect = welcomeTitleRef.getBoundingClientRect();
                    targetX = tRect.left + (tRect.width / 2) - 45;
                    targetY = tRect.top + (tRect.height / 2) - 20; // Center vertically on title
                }

                if (progress < 1) {
                    // Flying state
                    const currentX = startX + (targetX - startX) * progress;
                    const currentY = startY + (targetY - startY) * Math.pow(progress, 0.8);
                    const rotation = -35 * progress;
                    const opacity = 1 - (progress * 0.85); // Fades down to 0.15 (watermark)

                    flyingImg.style.left = currentX + "px";
                    flyingImg.style.top = currentY + "px";
                    flyingImg.style.transform = `rotate(${rotation}deg) scale(${1 + progress * 2.5})`;
                    flyingImg.style.opacity = opacity;
                } else {
                    // Landed state: pinned to the Welcome section
                    flyingImg.style.left = targetX + "px";
                    flyingImg.style.top = targetY + "px";
                    flyingImg.style.transform = `rotate(-35deg) scale(3.5)`;
                    flyingImg.style.opacity = 0.15; // Very subtle watermark behind text
                }
            } else {
                // At top in Hero
                flyingContainer.style.display = "none";
                if (heroBibleRef) heroBibleRef.style.setProperty('visibility', 'visible', 'important');
            }
        }

        window.addEventListener("scroll", updateBibleFlight);
        window.addEventListener("resize", updateBibleFlight);
        updateBibleFlight();
    }
});
</script>


        
        <!-- Mass Intention in USA Section -->
        <section style="padding: 6rem 0 3.5rem 0; background-color: #FAFAFA; box-sizing: border-box;">
            <!-- Rounded Card Container -->
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem);">
                <div style="position: relative; width: 100%; border-radius: 32px; overflow: hidden !important; box-shadow: 0 25px 60px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; box-sizing: border-box;">
                
                <!-- Fixed Photo Background with Parallax -->
                <div style="position: absolute; inset: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1438032005730-c779502df39b?w=1600&q=80&auto=format&fit=crop'); background-attachment: fixed; background-position: center; background-size: cover; z-index: 1;"></div>
                
                <!-- Dark Overlay -->
                <div style="position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2;"></div>

                <!-- Content Grid -->
                <div class="gsap-fade-up responsive-grid-2" style="position: relative; z-index: 10; width: 100%; padding: 5rem 4rem; display: grid; gap: 4rem; align-items: center; box-sizing: border-box;">
                    
                    <!-- Left Column: Title & Text -->
                    <div>
                        <!-- Eyebrow -->
                        <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem; background: rgba(255,255,255,0.1); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(5px);">
                            <span style="width: 6px; height: 6px; background-color: #dc2626; 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;">SUPPORT OUR MISSION</span>
                        </div>

                        <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: #ffffff !important; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.5rem;">
                            FOR MASS INTENSION IN USA
                        </h2>
                        
                        <p class="gsap-reveal-p" style="font-family: 'Instrument Sans', sans-serif !important; font-size: 1.1rem !important; font-weight: 500 !important; color: rgba(255,255,255,0.9) !important; line-height: 1.8 !important; max-width: 500px; margin-bottom: 2.5rem;">
                            TOR FRANCISCANS OF ST.LOUIS PROVINCE
                        </p>

                        <!-- Note Box -->
                        <div style="background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: 1.25rem 1.5rem; border-radius: 8px; display: flex; align-items: flex-start; gap: 1rem; max-width: 500px;">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e6c888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                            <div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; color: #ffffff; font-size: 0.95rem;">Important Note</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 0.25rem;">This Account is used for the purposes of Donating Mass intension in the United States of America.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column: White Card (Bank Details) -->
                    <div style="background-color: #ffffff; padding: 3rem; border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); width: 100%;">
                        
                        <div style="text-align: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #1c1917;">
                            <h3 style="font-family: 'Instrument Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1c1917; margin: 0;">Bank Account Details</h3>
                        </div>

                        <div style="margin-bottom: 2rem;">
                            <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ACCOUNT HOLDER NAME</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: #1c1917; text-transform: uppercase;">TOR FRANCISCANS OF ST.LOUIS PROVINCE</div>
                        </div>

                        <!-- Grid inside White Card -->
                        <div class="responsive-grid-2" style="display: grid; gap: 1.5rem; margin-bottom: 2rem;">
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">BANK NAME</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #1c1917; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>CHASE BANK</span>
                                    <svg onclick="copyToClipboard('CHASE BANK')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink: 0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                </div>
                            </div>
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ACCOUNT NUMBER</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #1c1917; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>726682563</span>
                                    <svg onclick="copyToClipboard('726682563')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink: 0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                </div>
                            </div>
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ROUTING NUMBER</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c1917; display: flex; flex-direction: column; gap: 0.6rem;">
                                    <div style="display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                        <span>Direct: 111000614</span>
                                        <svg onclick="copyToClipboard('111000614')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink:0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                    </div>
                                    <div style="display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                        <span>Wire: 021000021</span>
                                        <svg onclick="copyToClipboard('021000021')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink:0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">ACCOUNT TYPE</div>
                                <div style="font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #1c1917; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;">
                                    <span>CHECKING</span>
                                    <svg onclick="copyToClipboard('CHECKING')" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#78716c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="cursor: pointer; flex-shrink: 0;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div style="font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #78716c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;">BRANCH</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: #1c1917; text-transform: uppercase; line-height: 1.4;">
                                2100 N DAVIS DRIVE,<br>ARLINGTON, TX - 76012
                            </div>
                        </div>

                    </div>
                </div>
                <script>
                    if (typeof copyToClipboard === 'undefined') {
                        function copyToClipboard(text) {
                            navigator.clipboard.writeText(text).then(function() {
                                alert("Copied to clipboard: " + text);
                            }).catch(function(err) {
                                console.error('Could not copy text: ', err);
                            });
                        }
                    }
                </script>
            </div>
            </div>
        </section>
         <!-- 6. Footer (Exact Reference Screenshot Inset Rounded Card with Dark Texture, Links, Socials & Map) -->
        
