{"id":320,"date":"2026-06-16T10:19:02","date_gmt":"2026-06-16T02:19:02","guid":{"rendered":"https:\/\/demo5.yinwoodweb.com\/malaya\/?page_id=320"},"modified":"2026-07-22T14:54:44","modified_gmt":"2026-07-22T06:54:44","slug":"donate","status":"publish","type":"page","link":"https:\/\/demo5.yinwoodweb.com\/malaya\/donate\/","title":{"rendered":"Donate"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-86c3666d alignfull uagb-is-root-container\">\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Donate \u2014 St. Michael the Archangel Mission Center<\/title>\n\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&#038;family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" \/>\n\n    <style>\n        :root {\n            --crimson: #79021c;\n            --crimson-deep: #5a0115;\n            --crimson-light: #9e1b38;\n            --crimson-bright: #b91d47;\n            --crimson-glow: rgba(121, 2, 28, 0.12);\n            --crimson-subtle: rgba(121, 2, 28, 0.06);\n            --white: #ffffff;\n            --off-white: #faf8f5;\n            --cream: #f5f0ea;\n            --warm-gray: #e8e2da;\n            --text-dark: #1a1a1a;\n            --text-body: #3d3632;\n            --text-muted: #7a7168;\n            --gold: #c9a84c;\n            --gold-light: #e8d59a;\n            --gold-dark: #a68832;\n            --font-display: 'Cormorant Garamond', Georgia, serif;\n            --font-body: 'Source Serif 4', Georgia, serif;\n            --radius-sm: 4px;\n            --radius-md: 8px;\n            --radius-lg: 16px;\n            --radius-xl: 24px;\n            --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);\n            --shadow-md: 0 8px 30px rgba(0,0,0,0.08);\n            --shadow-lg: 0 16px 60px rgba(0,0,0,0.12);\n            --shadow-crimson: 0 8px 30px rgba(121, 2, 28, 0.2);\n        }\n\n        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n        html { scroll-behavior: smooth; font-size: 16px; }\n        body { font-family: var(--font-body); color: var(--text-body); background: var(--off-white); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }\n        a { text-decoration: none !important; color: inherit; }\n        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }\n\n        \/* INLINE EXPAND *\/\n        .exp-wrap { position: relative; overflow: hidden; cursor: pointer; }\n        .exp-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.4s ease; }\n        .exp-wrap:hover .exp-thumb { transform: scale(1.04); filter: brightness(0.85); }\n        .exp-hint { position: absolute; inset: 0; background: rgba(10,2,5,0.25); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; }\n        .exp-wrap:hover .exp-hint { opacity: 1; }\n        .exp-hint-icon { width: 50px; height: 50px; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }\n        .exp-wrap:hover .exp-hint-icon { transform: scale(1); }\n        .exp-hint-icon .material-symbols-outlined { font-size: 24px; color: var(--white); }\n        .exp-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(10,2,5,0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }\n        .exp-overlay.open { opacity: 1; visibility: visible; transform: scale(1); }\n        .exp-overlay-img { max-width: 95%; max-height: 85%; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 12px 60px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }\n        .exp-overlay.open .exp-overlay-img { transform: scale(1); }\n        .exp-overlay-caption { margin-top: 1rem; font-family: var(--font-display); font-size: 0.95rem; color: rgba(255,255,255,0.65); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; }\n        .exp-overlay.open .exp-overlay-caption { opacity: 1; transform: translateY(0); }\n        .exp-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 51; transition: all 0.3s ease; opacity: 0; transform: scale(0.7); }\n        .exp-overlay.open .exp-close { opacity: 1; transform: scale(1); transition-delay: 0.15s; }\n        .exp-close:hover { background: var(--crimson); border-color: var(--crimson); transform: rotate(90deg) !important; }\n        .exp-close .material-symbols-outlined { font-size: 20px; color: var(--white); }\n\n        .gradient-text { background: linear-gradient(135deg, var(--crimson-deep) 0%, var(--crimson) 25%, var(--crimson-bright) 50%, var(--crimson-light) 70%, var(--gold-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n        .gradient-text-white { background: linear-gradient(135deg, #ffffff 0%, #f0e6d8 50%, var(--gold-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n\n        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }\n        .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }\n\n        .anim { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }\n        .anim.in-view { opacity: 1; transform: translateY(0); }\n        .anim-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }\n        .anim-left.in-view { opacity: 1; transform: translateX(0); }\n        .anim-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }\n        .anim-right.in-view { opacity: 1; transform: translateX(0); }\n        .anim-pop { opacity: 0; transform: scale(0.8); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34,1.56,0.64,1); }\n        .anim-pop.in-view { opacity: 1; transform: scale(1); }\n        .anim-section { opacity: 0; transform: translateY(60px); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }\n        .anim-section.in-view { opacity: 1; transform: translateY(0); }\n        .d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }\n        .d4 { transition-delay: 0.4s; } .d5 { transition-delay: 0.5s; } .d6 { transition-delay: 0.6s; } .d7 { transition-delay: 0.7s; }\n\n        .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); position: relative; overflow: hidden; }\n        .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.5s ease; }\n        .btn:hover::before { left: 100%; }\n        .btn-crimson { background: var(--crimson); color: var(--white); border-radius: var(--radius-sm); }\n        .btn-crimson:hover { background: var(--crimson-deep); box-shadow: var(--shadow-crimson); transform: translateY(-2px); }\n        .btn-white { background: var(--white); color: var(--crimson); border-radius: var(--radius-sm); }\n        .btn-white:hover { background: var(--cream); box-shadow: var(--shadow-lg); transform: translateY(-2px); }\n        .btn-outline { background: transparent; color: var(--crimson); border: 1.5px solid var(--crimson); border-radius: var(--radius-sm); }\n        .btn-outline:hover { background: var(--crimson); color: var(--white); transform: translateY(-2px); }\n        .btn-gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: var(--white); border-radius: var(--radius-sm); }\n        .btn-gold:hover { box-shadow: 0 8px 30px rgba(201,168,76,0.35); transform: translateY(-2px); }\n        .btn .material-symbols-outlined { font-size: 1.15rem; transition: transform 0.3s ease; }\n        .btn:hover .material-symbols-outlined { transform: translateX(3px); }\n\n        .section-label { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson); margin-bottom: 1.5rem; }\n        .section-label-line { width: 40px; height: 1.5px; background: var(--crimson); }\n        .section-divider { width: 60px; height: 2px; background: linear-gradient(90deg, var(--crimson), var(--crimson-bright)); margin: 1.5rem auto; position: relative; }\n        .section-divider::before { content: ''; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; border: 2px solid var(--crimson); transform: translateX(-50%) rotate(45deg); }\n        .section-divider-gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }\n        .section-divider-gold::before { border-color: var(--gold); }\n\n        \/* PAGE HERO *\/\n        .page-hero { position: relative; min-height: 55vh; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(160deg, var(--crimson-deep) 0%, var(--crimson) 50%, var(--crimson-light) 100%); }\n        .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(0,0,0,0.2) 0%, transparent 50%); pointer-events: none; }\n        .page-hero::after { content: ''; position: absolute; inset: 0; background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'\/%3E%3C\/svg%3E\"); opacity: 0.03; pointer-events: none; mix-blend-mode: overlay; }\n        .page-hero-cross { position: absolute; top: 50%; right: 10%; width: 300px; height: 300px; transform: translateY(-50%); opacity: 0.05; pointer-events: none; }\n        .page-hero-cross::before, .page-hero-cross::after { content: ''; position: absolute; background: var(--white); }\n        .page-hero-cross::before { top: 0; left: 50%; width: 3px; height: 100%; transform: translateX(-50%); }\n        .page-hero-cross::after { top: 28%; left: 0; width: 100%; height: 3px; }\n        .page-hero-arches { position: absolute; bottom: -2px; left: 0; width: 100%; height: 50px; z-index: 3; }\n        .page-hero-arches svg { width: 100%; height: 100%; }\n        .page-hero-inner { position: relative; z-index: 2; padding: 8rem 0 4rem; width: 100%; }\n        .page-hero-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; animation: fadeInDown 0.8s ease 0.1s both; }\n        .page-hero-breadcrumb a { color: rgba(255,255,255,0.6); transition: color 0.3s ease; }\n        .page-hero-breadcrumb a:hover { color: var(--gold-light); }\n        .page-hero-breadcrumb .sep { font-size: 0.7rem; }\n        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }\n        @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }\n        .page-hero-title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 300; color: var(--white); line-height: 1; margin-bottom: 1rem; animation: fadeInUp 0.9s ease 0.3s both; }\n        .page-hero-title strong { font-weight: 700; display: block; background: linear-gradient(135deg, #ffffff 0%, var(--gold-light) 60%, var(--gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n        .page-hero-subtitle { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.3rem); font-style: italic; font-weight: 300; color: rgba(255,255,255,0.7); max-width: 580px; animation: fadeInUp 0.9s ease 0.5s both; }\n\n        \/* ============================================\n           SCRIPTURE BANNER\n           ============================================ *\/\n        .scripture-banner {\n            background: var(--white);\n            border-bottom: 1px solid var(--warm-gray);\n            padding: 3.5rem 0;\n            text-align: center;\n        }\n        .scripture-text {\n            font-family: var(--font-display);\n            font-size: clamp(1.2rem, 2.5vw, 1.7rem);\n            font-style: italic;\n            font-weight: 400;\n            color: var(--text-dark);\n            line-height: 1.6;\n            max-width: 700px;\n            margin: 0 auto;\n        }\n        .scripture-text em {\n            font-style: normal;\n            color: var(--crimson);\n            font-weight: 600;\n        }\n        .scripture-ref {\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            color: var(--gold);\n            margin-top: 1rem;\n        }\n        .scripture-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 48px; height: 48px;\n            background: var(--crimson-subtle);\n            border-radius: 50%;\n            margin-bottom: 1.25rem;\n        }\n        .scripture-icon .material-symbols-outlined {\n            font-size: 24px;\n            color: var(--crimson);\n        }\n\n        \/* ============================================\n           DONATE AMOUNT \/ FORM SECTION\n           ============================================ *\/\n        .donate-form-section {\n            padding: 8rem 0;\n            background: var(--off-white);\n        }\n        .donate-form-grid {\n            display: grid;\n            grid-template-columns: 55% 45%;\n            gap: 4rem;\n            align-items: start;\n        }\n\n        .donate-form-left {}\n        .donate-form-left .section-label { margin-bottom: 1rem; }\n        .donate-form-title {\n            font-family: var(--font-display);\n            font-size: clamp(2rem, 4vw, 2.8rem);\n            font-weight: 400;\n            color: var(--text-dark);\n            line-height: 1.15;\n            margin-bottom: 1.5rem;\n        }\n        .donate-form-title em { font-style: italic; color: var(--crimson); }\n        .donate-form-desc {\n            font-size: 1.05rem;\n            color: var(--text-muted);\n            line-height: 1.9;\n            margin-bottom: 2.5rem;\n        }\n\n        \/* Cause selector *\/\n        .cause-label {\n            font-family: var(--font-display);\n            font-size: 0.8rem;\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--text-muted);\n            margin-bottom: 0.75rem;\n        }\n        .cause-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 0.75rem;\n            margin-bottom: 2rem;\n        }\n        .cause-btn {\n            padding: 0.75rem 0.5rem;\n            background: var(--white);\n            border: 1.5px solid var(--warm-gray);\n            border-radius: var(--radius-sm);\n            text-align: center;\n            font-family: var(--font-display);\n            font-size: 0.88rem;\n            font-weight: 600;\n            color: var(--text-body);\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n        .cause-btn:hover {\n            border-color: var(--crimson-glow);\n            color: var(--crimson);\n        }\n        .cause-btn.active {\n            border-color: var(--crimson);\n            background: var(--crimson-subtle);\n            color: var(--crimson);\n        }\n        .cause-btn .material-symbols-outlined {\n            font-size: 18px;\n            display: block;\n            margin: 0 auto 0.25rem;\n            color: var(--text-muted);\n            transition: color 0.3s ease;\n        }\n        .cause-btn:hover .material-symbols-outlined,\n        .cause-btn.active .material-symbols-outlined {\n            color: var(--crimson);\n        }\n\n        \/* Amount grid *\/\n        .amount-label {\n            font-family: var(--font-display);\n            font-size: 0.8rem;\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--text-muted);\n            margin-bottom: 0.75rem;\n        }\n        .amount-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 0.75rem;\n            margin-bottom: 1.5rem;\n        }\n        .amount-btn {\n            padding: 1rem 0.5rem;\n            background: var(--white);\n            border: 1.5px solid var(--warm-gray);\n            border-radius: var(--radius-md);\n            text-align: center;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n        .amount-btn:hover {\n            border-color: var(--crimson);\n            transform: translateY(-2px);\n            box-shadow: var(--shadow-sm);\n        }\n        .amount-btn.active {\n            border-color: var(--crimson);\n            background: var(--crimson);\n            box-shadow: var(--shadow-crimson);\n        }\n        .amount-btn-value {\n            font-family: var(--font-display);\n            font-size: 1.4rem;\n            font-weight: 700;\n            color: var(--text-dark);\n            transition: color 0.3s ease;\n        }\n        .amount-btn.active .amount-btn-value { color: var(--white); }\n        .amount-btn-label {\n            font-size: 0.72rem;\n            color: var(--text-muted);\n            margin-top: 0.15rem;\n            transition: color 0.3s ease;\n        }\n        .amount-btn.active .amount-btn-label { color: rgba(255,255,255,0.7); }\n\n        \/* Custom amount *\/\n        .custom-amount-wrap {\n            position: relative;\n            margin-bottom: 2rem;\n        }\n        .custom-amount-wrap label {\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--text-muted);\n            margin-bottom: 0.5rem;\n            display: block;\n        }\n        .custom-amount-input {\n            display: flex;\n            align-items: center;\n            background: var(--white);\n            border: 1.5px solid var(--warm-gray);\n            border-radius: var(--radius-md);\n            overflow: hidden;\n            transition: border-color 0.3s ease;\n        }\n        .custom-amount-input:focus-within {\n            border-color: var(--crimson);\n        }\n        .custom-amount-prefix {\n            padding: 0.875rem 1rem;\n            font-family: var(--font-display);\n            font-size: 1.1rem;\n            font-weight: 700;\n            color: var(--text-muted);\n            background: var(--off-white);\n            border-right: 1px solid var(--warm-gray);\n        }\n        .custom-amount-input input {\n            flex: 1;\n            padding: 0.875rem 1.25rem;\n            border: none;\n            outline: none;\n            font-family: var(--font-display);\n            font-size: 1.2rem;\n            font-weight: 700;\n            color: var(--text-dark);\n            background: transparent;\n        }\n        .custom-amount-input input::placeholder {\n            color: var(--text-muted);\n            font-weight: 400;\n            font-size: 1rem;\n        }\n\n        \/* Donate submit *\/\n        .donate-submit {\n            display: flex;\n            gap: 1rem;\n            flex-wrap: wrap;\n        }\n\n        \/* Right panel \u2014 donation card *\/\n        .donate-card {\n            background: var(--white);\n            border: 1px solid var(--warm-gray);\n            border-radius: var(--radius-xl);\n            overflow: hidden;\n            position: sticky;\n            top: 2rem;\n        }\n\n        .donate-card-header {\n            background: linear-gradient(135deg, var(--crimson-deep), var(--crimson));\n            padding: 2rem;\n            text-align: center;\n            color: var(--white);\n        }\n        .donate-card-icon {\n            width: 56px; height: 56px;\n            border: 1.5px solid rgba(255,255,255,0.2);\n            border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n            margin: 0 auto 1rem;\n        }\n        .donate-card-icon .material-symbols-outlined {\n            font-size: 26px;\n            color: var(--gold-light);\n        }\n        .donate-card-header h3 {\n            font-family: var(--font-display);\n            font-size: 1.5rem;\n            font-weight: 600;\n        }\n        .donate-card-header p {\n            font-family: var(--font-display);\n            font-size: 0.9rem;\n            font-style: italic;\n            color: rgba(255,255,255,0.7);\n            margin-top: 0.3rem;\n        }\n\n        .donate-card-body {\n            padding: 2rem;\n        }\n\n        .donate-card-item {\n            display: flex;\n            align-items: flex-start;\n            gap: 1rem;\n            padding: 1rem 0;\n            border-bottom: 1px solid rgba(232,226,218,0.5);\n        }\n        .donate-card-item:last-child { border-bottom: none; }\n\n        .donate-card-item-icon {\n            flex-shrink: 0;\n            width: 40px; height: 40px;\n            background: var(--crimson-subtle);\n            border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n        }\n        .donate-card-item-icon .material-symbols-outlined {\n            font-size: 20px;\n            color: var(--crimson);\n        }\n        .donate-card-item-text h4 {\n            font-family: var(--font-display);\n            font-size: 1rem;\n            font-weight: 700;\n            color: var(--text-dark);\n            margin-bottom: 0.15rem;\n        }\n        .donate-card-item-text p {\n            font-size: 0.82rem;\n            color: var(--text-muted);\n            line-height: 1.5;\n        }\n\n        .donate-card-footer {\n            padding: 0 2rem 2rem;\n        }\n        .donate-card-footer-note {\n            font-size: 0.82rem;\n            color: var(--text-muted);\n            text-align: center;\n            line-height: 1.6;\n            font-style: italic;\n        }\n        .donate-card-footer-note .material-symbols-outlined {\n            font-size: 15px;\n            color: var(--gold);\n            vertical-align: -2px;\n        }\n\n        \/* ============================================\n           GIVING OPTIONS\n           ============================================ *\/\n        .giving { padding: 8rem 0; background: var(--white); }\n        .giving-header { text-align: center; margin-bottom: 4rem; }\n        .giving-header-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.15; }\n        .giving-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }\n\n        .giving-card {\n            background: var(--off-white);\n            border: 1px solid var(--warm-gray);\n            border-radius: var(--radius-lg);\n            padding: 2.5rem 2rem;\n            text-align: center;\n            transition: all 0.5s ease;\n            position: relative;\n            overflow: hidden;\n        }\n        .giving-card::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; right: 0;\n            height: 4px;\n            background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));\n            transform: scaleX(0);\n            transition: transform 0.4s ease;\n        }\n        .giving-card:hover::before { transform: scaleX(1); }\n        .giving-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }\n\n        .giving-card-icon {\n            width: 64px; height: 64px;\n            background: var(--crimson-subtle);\n            border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n            margin: 0 auto 1.25rem;\n            transition: all 0.4s ease;\n        }\n        .giving-card:hover .giving-card-icon { background: var(--crimson); transform: scale(1.1); }\n        .giving-card-icon .material-symbols-outlined { font-size: 28px; color: var(--crimson); transition: color 0.4s ease; }\n        .giving-card:hover .giving-card-icon .material-symbols-outlined { color: var(--white); }\n\n        .giving-card-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; }\n        .giving-card-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; }\n\n        .giving-card-details {\n            background: var(--white);\n            border: 1px solid var(--warm-gray);\n            border-radius: var(--radius-md);\n            padding: 1.25rem;\n            text-align: left;\n        }\n        .giving-detail-row {\n            display: flex;\n            align-items: flex-start;\n            gap: 0.6rem;\n            padding: 0.4rem 0;\n            font-size: 0.85rem;\n            color: var(--text-body);\n            line-height: 1.5;\n        }\n        .giving-detail-row .material-symbols-outlined {\n            font-size: 17px;\n            color: var(--crimson);\n            flex-shrink: 0;\n            margin-top: 2px;\n        }\n\n        \/* ============================================\n           CAUSES \/ FUNDS\n           ============================================ *\/\n        .causes { padding: 8rem 0; background: var(--crimson); color: var(--white); position: relative; overflow: hidden; }\n        .causes::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 10%, rgba(255,255,255,0.04) 0%, transparent 50%), radial-gradient(ellipse at 90% 90%, rgba(0,0,0,0.2) 0%, transparent 50%); pointer-events: none; }\n        .causes .section-label { color: var(--gold-light); }\n        .causes .section-label-line { background: var(--gold-light); }\n        .causes-header { text-align: center; margin-bottom: 4rem; position: relative; z-index: 1; }\n        .causes-header-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--white); line-height: 1.15; }\n        .causes-header-desc { max-width: 560px; margin: 1.5rem auto 0; font-size: 1rem; color: rgba(255,255,255,0.7); text-align: center; }\n\n        .causes-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 1.5rem;\n            position: relative;\n            z-index: 1;\n        }\n\n        .cause-card {\n            background: rgba(255,255,255,0.06);\n            backdrop-filter: blur(4px);\n            border: 1px solid rgba(255,255,255,0.08);\n            border-radius: var(--radius-lg);\n            padding: 2rem;\n            display: flex;\n            gap: 1.25rem;\n            align-items: flex-start;\n            transition: all 0.4s ease;\n        }\n        .cause-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }\n\n        .cause-card-icon {\n            flex-shrink: 0;\n            width: 52px; height: 52px;\n            border: 1.5px solid rgba(255,255,255,0.15);\n            border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n            transition: all 0.3s ease;\n        }\n        .cause-card:hover .cause-card-icon { border-color: var(--gold-light); background: rgba(201,168,76,0.1); }\n        .cause-card-icon .material-symbols-outlined { font-size: 24px; color: var(--gold-light); }\n\n        .cause-card-info { flex: 1; }\n        .cause-card-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; }\n        .cause-card-desc { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.7; }\n\n        \/* ============================================\n           IMPACT SECTION\n           ============================================ *\/\n        .impact { padding: 8rem 0; background: var(--off-white); position: relative; }\n        .impact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--warm-gray), transparent); }\n        .impact-header { text-align: center; margin-bottom: 4rem; }\n        .impact-header-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.15; }\n\n        .impact-stats {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 1.5rem;\n            margin-bottom: 4rem;\n        }\n        .impact-stat {\n            text-align: center;\n            padding: 2.5rem 1rem;\n            background: var(--white);\n            border-radius: var(--radius-md);\n            border: 1px solid var(--warm-gray);\n            transition: all 0.4s ease;\n            position: relative;\n            overflow: hidden;\n        }\n        .impact-stat::after {\n            content: ''; position: absolute; bottom: 0; left: 0; right: 0;\n            height: 3px; background: linear-gradient(90deg, var(--crimson), var(--gold));\n            transform: scaleX(0); transition: transform 0.4s ease;\n        }\n        .impact-stat:hover::after { transform: scaleX(1); }\n        .impact-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }\n        .impact-stat-number { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1; margin-bottom: 0.3rem; }\n        .impact-stat-label { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }\n\n        .impact-grid {\n            display: grid;\n            grid-template-columns: 50% 50%;\n            gap: 0;\n            align-items: stretch;\n            min-height: 450px;\n        }\n        .impact-image { position: relative; overflow: hidden; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }\n        .impact-image .exp-wrap { width: 100%; height: 100%; min-height: 450px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }\n        .impact-image .exp-thumb { position: absolute; inset: 0; }\n        .impact-image-gradient { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to left, var(--off-white) 0%, transparent 12%), linear-gradient(to top, rgba(90,1,21,0.2) 0%, transparent 40%); pointer-events: none; }\n        .impact-content { padding: 3rem 4rem; display: flex; flex-direction: column; justify-content: center; }\n        .impact-content .section-label { margin-bottom: 1rem; }\n        .impact-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 400; color: var(--text-dark); line-height: 1.15; margin-bottom: 1.5rem; }\n        .impact-title em { font-style: italic; color: var(--crimson); }\n        .impact-text { font-size: 1.05rem; color: var(--text-muted); line-height: 1.9; margin-bottom: 1.5rem; }\n\n        .impact-quote {\n            font-family: var(--font-display);\n            font-size: 1.2rem;\n            font-style: italic;\n            color: var(--text-dark);\n            line-height: 1.6;\n            padding: 1.25rem 1.5rem;\n            background: var(--white);\n            border-left: 3px solid var(--crimson);\n            border-radius: 0 var(--radius-md) var(--radius-md) 0;\n            margin-bottom: 1rem;\n        }\n        .impact-quote-name {\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--text-muted);\n            padding-left: 1.5rem;\n        }\n\n        \/* ============================================\n           TRANSPARENCY\n           ============================================ *\/\n        .transparency { padding: 8rem 0; background: var(--white); }\n        .transparency-header { text-align: center; margin-bottom: 4rem; }\n        .transparency-header-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.15; }\n        .transparency-header-desc { max-width: 550px; margin: 1.5rem auto 0; font-size: 1.05rem; color: var(--text-muted); text-align: center; line-height: 1.8; }\n\n        .transparency-bars {\n            max-width: 700px;\n            margin: 0 auto;\n        }\n        .tbar-item {\n            margin-bottom: 2rem;\n        }\n        .tbar-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 0.5rem;\n        }\n        .tbar-label {\n            font-family: var(--font-display);\n            font-size: 1rem;\n            font-weight: 600;\n            color: var(--text-dark);\n        }\n        .tbar-percent {\n            font-family: var(--font-display);\n            font-size: 1rem;\n            font-weight: 700;\n            color: var(--crimson);\n        }\n        .tbar-track {\n            width: 100%;\n            height: 10px;\n            background: var(--cream);\n            border-radius: 5px;\n            overflow: hidden;\n        }\n        .tbar-fill {\n            height: 100%;\n            border-radius: 5px;\n            background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));\n            width: 0;\n            transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n        .tbar-fill.gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }\n        .tbar-fill.in-view { \/* width set inline *\/ }\n\n        .tbar-sublabel {\n            font-size: 0.82rem;\n            color: var(--text-muted);\n            margin-top: 0.25rem;\n        }\n\n        \/* ============================================\n           CTA\n           ============================================ *\/\n        .cta { padding: 8rem 0; text-align: center; color: var(--white); position: relative; overflow: hidden; background: linear-gradient(135deg, var(--crimson-deep) 0%, var(--crimson) 60%, var(--crimson-light) 100%); }\n        .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.1) 0%, transparent 50%); pointer-events: none; }\n        .cta-cross { position: absolute; top: 50%; left: 50%; width: 250px; height: 250px; transform: translate(-50%,-50%); opacity: 0.05; pointer-events: none; }\n        .cta-cross::before, .cta-cross::after { content: ''; position: absolute; background: var(--white); }\n        .cta-cross::before { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }\n        .cta-cross::after { top: 28%; left: 0; width: 100%; height: 2px; }\n        .cta .container { position: relative; z-index: 1; }\n        .cta .section-label { color: var(--gold-light); } .cta .section-label-line { background: var(--gold-light); }\n        .cta-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 400; color: var(--white); line-height: 1.15; margin-bottom: 1.5rem; }\n        .cta-text { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; color: rgba(255,255,255,0.75); max-width: 550px; margin: 0 auto 2.5rem; line-height: 1.7; }\n        .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }\n        .cta-scripture { font-size: 0.88rem; color: rgba(255,255,255,0.45); font-style: italic; margin-top: 4rem; }\n\n        \/* RESPONSIVE *\/\n        @media (max-width: 1024px) {\n            .donate-form-grid { grid-template-columns: 1fr; gap: 3rem; }\n            .donate-card { position: static; }\n            .giving-grid { grid-template-columns: repeat(2, 1fr); }\n            .impact-grid { grid-template-columns: 1fr; }\n            .impact-image { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }\n            .impact-image .exp-wrap { min-height: 350px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }\n            .impact-image-gradient { background: linear-gradient(to top, var(--off-white) 0%, transparent 12%), linear-gradient(to top, rgba(90,1,21,0.2) 0%, transparent 40%); }\n            .impact-content { padding: 3rem 0; }\n        }\n        @media (max-width: 768px) {\n            .page-hero { min-height: 45vh; }\n            .page-hero-inner { padding: 6rem 0 3rem; }\n            .cause-grid { grid-template-columns: repeat(2, 1fr); }\n            .amount-grid { grid-template-columns: repeat(2, 1fr); }\n            .giving-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }\n            .causes-grid { grid-template-columns: 1fr; }\n            .impact-stats { grid-template-columns: repeat(2, 1fr); }\n            .cta-buttons { flex-direction: column; align-items: center; }\n        }\n        @media (max-width: 480px) {\n            html { font-size: 15px; }\n            .container, .container-wide { padding: 0 1.25rem; }\n            .page-hero { min-height: 40vh; }\n            .cause-grid { grid-template-columns: 1fr 1fr; }\n            .amount-grid { grid-template-columns: 1fr 1fr; }\n            .impact-image .exp-wrap { min-height: 280px; }\n            .impact-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- HERO -->\n    <section class=\"page-hero\">\n        <div class=\"page-hero-cross\"><\/div>\n        <div class=\"page-hero-arches\"><svg viewBox=\"0 0 1440 50\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0,50 L0,25 Q360,0 720,25 Q1080,50 1440,25 L1440,50 Z\" fill=\"#ffffff\"\/><\/svg><\/div>\n        <div class=\"page-hero-inner container\">\n            <nav class=\"page-hero-breadcrumb\"><a href=\"https:\/\/demo5.yinwoodweb.com\/malaya\/\">Home<\/a><span class=\"sep material-symbols-outlined\">chevron_right<\/span><span>Donate<\/span><\/nav>\n            <h1 class=\"page-hero-title\">Share Your<strong>Blessings<\/strong><\/h1>\n            <p class=\"page-hero-subtitle\">Your generous gift sustains our parish ministries, maintains our sacred spaces, and extends Christ&#8217;s love to those most in need.<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- SCRIPTURE BANNER -->\n    <div class=\"scripture-banner\">\n        <div class=\"container\">\n            <div class=\"anim\">\n                <div class=\"scripture-icon\"><span class=\"material-symbols-outlined\">auto_stories<\/span><\/div>\n                <p class=\"scripture-text\">&#8220;Each of you should give what you have decided in your heart to give, <em>not reluctantly or under compulsion<\/em>, for God loves a cheerful giver.&#8221;<\/p>\n                <p class=\"scripture-ref\">\u2014 2 Corinthians 9:7<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- DONATE FORM -->\n    <section class=\"donate-form-section\" id=\"donate\">\n        <div class=\"container\">\n            <div class=\"donate-form-grid\">\n                <div class=\"donate-form-left\">\n                    <div class=\"section-label anim\"><span class=\"section-label-line\"><\/span>Make a Gift<\/div>\n                    <h2 class=\"donate-form-title anim d1\">Choose Your<br><em>Donation<\/em><\/h2>\n                    <p class=\"donate-form-desc anim d2\">Select a cause close to your heart, choose an amount, and complete your offering. Every gift \u2014 regardless of size \u2014 is a blessing that furthers God&#8217;s mission through our parish.<\/p>\n\n                    <!-- Cause Selector -->\n                    <p class=\"cause-label anim d2\">Select a Cause<\/p>\n                    <div class=\"cause-grid anim d3\">\n                        <div class=\"cause-btn active\" data-cause=\"general\">\n                            <span class=\"material-symbols-outlined\">church<\/span>\n                            General Fund\n                        <\/div>\n                        <div class=\"cause-btn\" data-cause=\"building\">\n                            <span class=\"material-symbols-outlined\">construction<\/span>\n                            Building Fund\n                        <\/div>\n                        <div class=\"cause-btn\" data-cause=\"outreach\">\n                            <span class=\"material-symbols-outlined\">volunteer_activism<\/span>\n                            Outreach\n                        <\/div>\n                        <div class=\"cause-btn\" data-cause=\"youth\">\n                            <span class=\"material-symbols-outlined\">diversity_3<\/span>\n                            Youth Ministry\n                        <\/div>\n                        <div class=\"cause-btn\" data-cause=\"missions\">\n                            <span class=\"material-symbols-outlined\">public<\/span>\n                            Missions\n                        <\/div>\n                        <div class=\"cause-btn\" data-cause=\"other\">\n                            <span class=\"material-symbols-outlined\">favorite<\/span>\n                            Other\n                        <\/div>\n                    <\/div>\n\n                    <!-- Amount Selector -->\n                    <p class=\"amount-label anim d3\">Choose Amount<\/p>\n                    <div class=\"amount-grid anim d4\">\n                        <div class=\"amount-btn\" data-amt=\"500\">\n                            <p class=\"amount-btn-value\">\u20b1500<\/p>\n                            <p class=\"amount-btn-label\">Kindness<\/p>\n                        <\/div>\n                        <div class=\"amount-btn active\" data-amt=\"1000\">\n                            <p class=\"amount-btn-value\">\u20b11,000<\/p>\n                            <p class=\"amount-btn-label\">Generosity<\/p>\n                        <\/div>\n                        <div class=\"amount-btn\" data-amt=\"2500\">\n                            <p class=\"amount-btn-value\">\u20b12,500<\/p>\n                            <p class=\"amount-btn-label\">Blessing<\/p>\n                        <\/div>\n                        <div class=\"amount-btn\" data-amt=\"5000\">\n                            <p class=\"amount-btn-value\">\u20b15,000<\/p>\n                            <p class=\"amount-btn-label\">Abundance<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Custom Amount -->\n                    <div class=\"custom-amount-wrap anim d4\">\n                        <label>Or enter a custom amount<\/label>\n                        <div class=\"custom-amount-input\">\n                            <span class=\"custom-amount-prefix\">\u20b1<\/span>\n                            <input type=\"number\" placeholder=\"Enter amount\" min=\"1\">\n                        <\/div>\n                    <\/div>\n\n                    <!-- Submit -->\n                    <div class=\"donate-submit anim d5\">\n                        <a href=\"#\" class=\"btn btn-crimson\">\n                            <span class=\"material-symbols-outlined\">volunteer_activism<\/span>\n                            Donate Now\n                        <\/a>\n                        <a href=\"#giving\" class=\"btn btn-outline\">\n                            <span class=\"material-symbols-outlined\">info<\/span>\n                            Other Ways to Give\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Right Card -->\n                <div class=\"donate-card anim-right d3\">\n                    <div class=\"donate-card-header\">\n                        <div class=\"donate-card-icon\"><span class=\"material-symbols-outlined\">shield<\/span><\/div>\n                        <h3>St. Michael Parish Fund<\/h3>\n                        <p>Your gift is a prayer in action<\/p>\n                    <\/div>\n                    <div class=\"donate-card-body\">\n                        <div class=\"donate-card-item\">\n                            <div class=\"donate-card-item-icon\"><span class=\"material-symbols-outlined\">verified<\/span><\/div>\n                            <div class=\"donate-card-item-text\">\n                                <h4>100% Goes to Ministry<\/h4>\n                                <p>Every peso you give directly supports our parish programs and outreach to the poor.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"donate-card-item\">\n                            <div class=\"donate-card-item-icon\"><span class=\"material-symbols-outlined\">lock<\/span><\/div>\n                            <div class=\"donate-card-item-text\">\n                                <h4>Secure &amp; Confidential<\/h4>\n                                <p>All transactions are handled with the utmost security and discretion.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"donate-card-item\">\n                            <div class=\"donate-card-item-icon\"><span class=\"material-symbols-outlined\">receipt_long<\/span><\/div>\n                            <div class=\"donate-card-item-text\">\n                                <h4>Official Receipt<\/h4>\n                                <p>A donation receipt will be issued for your records and tax purposes.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"donate-card-item\">\n                            <div class=\"donate-card-item-icon\"><span class=\"material-symbols-outlined\">self_improvement<\/span><\/div>\n                            <div class=\"donate-card-item-text\">\n                                <h4>Prayers for You<\/h4>\n                                <p>Our community prays daily for all benefactors and supporters of the parish.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"donate-card-footer\">\n                        <p class=\"donate-card-footer-note\">\n                            <span class=\"material-symbols-outlined\">star<\/span>\n                            &#8220;May the Lord reward your generosity and fill you with His peace.&#8221;\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- GIVING OPTIONS -->\n    <section class=\"giving\" id=\"giving\">\n        <div class=\"container\">\n            <div class=\"giving-header\">\n                <div class=\"section-label anim\" style=\"justify-content:center;\"><span class=\"section-label-line\"><\/span>Other Ways<span class=\"section-label-line\"><\/span><\/div>\n                <h2 class=\"giving-header-title gradient-text anim d1\">How to Give<\/h2>\n                <div class=\"section-divider anim d1\"><\/div>\n            <\/div>\n\n            <div class=\"giving-grid\">\n                <div class=\"giving-card anim-pop d1\">\n                    <div class=\"giving-card-icon\"><span class=\"material-symbols-outlined\">account_balance<\/span><\/div>\n                    <h3 class=\"giving-card-title\">Bank Transfer<\/h3>\n                    <p class=\"giving-card-desc\">Send your donation directly to our parish bank account.<\/p>\n                    <div class=\"giving-card-details\">\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">account_balance<\/span><span><strong>Bank:<\/strong> Banco de Oro (BDO)<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">badge<\/span><span><strong>Account Name:<\/strong> Jose Jay<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">tag<\/span><span><strong>Account No.:<\/strong> 095-6261-6212 <\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">swap_horiz<\/span><span><strong>Type:<\/strong> Savings Account<\/span><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"giving-card anim-pop d2\">\n                    <div class=\"giving-card-icon\"><span class=\"material-symbols-outlined\">smartphone<\/span><\/div>\n                    <h3 class=\"giving-card-title\">GCash \/ Maya<\/h3>\n                    <p class=\"giving-card-desc\">Send your tithe or offering through mobile e-wallets.<\/p>\n                    <div class=\"giving-card-details\">\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">smartphone<\/span><span><strong>GCash:<\/strong> 0912-345-6789<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">smartphone<\/span><span><strong>Maya:<\/strong> 0912-345-6789<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">person<\/span><span><strong>Name:<\/strong> St. Michael Parish<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">info<\/span><span>Please screenshot and send receipt to the parish office for acknowledgement.<\/span><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"giving-card anim-pop d3\">\n                    <div class=\"giving-card-icon\"><span class=\"material-symbols-outlined\">location_on<\/span><\/div>\n                    <h3 class=\"giving-card-title\">In-Person<\/h3>\n                    <p class=\"giving-card-desc\">Drop your offering at the parish office or during Mass collections.<\/p>\n                    <div class=\"giving-card-details\">\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">event<\/span><span><strong>Parish Office:<\/strong> Mon\u2013Sat, 8 AM \u2013 5 PM<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">church<\/span><span><strong>During Mass:<\/strong> Offertory collections at every celebration<\/span><\/div>\n                        <div class=\"giving-detail-row\"><span class=\"material-symbols-outlined\">lock<\/span><span><strong>Drop Box:<\/strong> Available at the church entrance for envelopes<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- CAUSES -->\n    <section class=\"causes\" id=\"causes\">\n        <div class=\"container\">\n            <div class=\"causes-header\">\n                <div class=\"section-label anim\" style=\"justify-content:center;\"><span class=\"section-label-line\"><\/span>Where Your Gift Goes<span class=\"section-label-line\"><\/span><\/div>\n                <h2 class=\"causes-header-title anim d1\">Our Fund Needs<\/h2>\n                <div class=\"section-divider section-divider-gold anim d1\"><\/div>\n                <p class=\"causes-header-desc anim d2\">Your donations support these vital areas of our parish mission. Choose a specific fund or contribute to the General Fund for the parish&#8217;s greatest needs.<\/p>\n            <\/div>\n\n            <div class=\"causes-grid\">\n                <div class=\"cause-card anim d1\">\n                    <div class=\"cause-card-icon\"><span class=\"material-symbols-outlined\">church<\/span><\/div>\n                    <div class=\"cause-card-info\">\n                        <h4 class=\"cause-card-name\">General Parish Fund<\/h4>\n                        <p class=\"cause-card-desc\">Supports daily operations, utilities, liturgical supplies, priest stipends, and the overall upkeep of our parish facilities.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"cause-card anim d2\">\n                    <div class=\"cause-card-icon\"><span class=\"material-symbols-outlined\">construction<\/span><\/div>\n                    <div class=\"cause-card-info\">\n                        <h4 class=\"cause-card-name\">Building &amp; Renovation Fund<\/h4>\n                        <p class=\"cause-card-desc\">Dedicated to the maintenance, repair, and improvement of our church building, parish hall, and facilities for future generations.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"cause-card anim d3\">\n                    <div class=\"cause-card-icon\"><span class=\"material-symbols-outlined\">volunteer_activism<\/span><\/div>\n                    <div class=\"cause-card-info\">\n                        <h4 class=\"cause-card-name\">Social Outreach &amp; Charity<\/h4>\n                        <p class=\"cause-card-desc\">Funds feeding programs, medical missions, disaster relief, educational assistance, and support for families in crisis.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"cause-card anim d4\">\n                    <div class=\"cause-card-icon\"><span class=\"material-symbols-outlined\">diversity_3<\/span><\/div>\n                    <div class=\"cause-card-info\">\n                        <h4 class=\"cause-card-name\">Youth &amp; Education Fund<\/h4>\n                        <p class=\"cause-card-desc\">Supports catechetical programs, youth retreats, scholarship assistance, and leadership formation for young parishioners.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"cause-card anim d5\">\n                    <div class=\"cause-card-icon\"><span class=\"material-symbols-outlined\">public<\/span><\/div>\n                    <div class=\"cause-card-info\">\n                        <h4 class=\"cause-card-name\">Mission Fund<\/h4>\n                        <p class=\"cause-card-desc\">Supports evangelization efforts, mission areas, and the formation of future priests and religious serving the Church.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"cause-card anim d6\">\n                    <div class=\"cause-card-icon\"><span class=\"material-symbols-outlined\">self_improvement<\/span><\/div>\n                    <div class=\"cause-card-info\">\n                        <h4 class=\"cause-card-name\">Worship &amp; Liturgy Fund<\/h4>\n                        <p class=\"cause-card-desc\">Covers sacred vessels, vestments, church decorations, music ministry needs, and enhancement of our liturgical celebrations.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- IMPACT -->\n    <section class=\"impact\" id=\"impact\">\n        <div class=\"container\">\n            <div class=\"impact-header\">\n                <div class=\"section-label anim\" style=\"justify-content:center;\"><span class=\"section-label-line\"><\/span>Your Gift in Action<span class=\"section-label-line\"><\/span><\/div>\n                <h2 class=\"impact-header-title gradient-text anim d1\">The Impact of Giving<\/h2>\n                <div class=\"section-divider anim d1\"><\/div>\n            <\/div>\n\n            <div class=\"impact-stats\">\n                <div class=\"impact-stat anim-pop d1\">\n                    <p class=\"impact-stat-number gradient-text\">1,200+<\/p>\n                    <p class=\"impact-stat-label\">Families Served Yearly<\/p>\n                <\/div>\n                <div class=\"impact-stat anim-pop d2\">\n                    <p class=\"impact-stat-number gradient-text\">\u20b12.5M<\/p>\n                    <p class=\"impact-stat-label\">Charity Given Annually<\/p>\n                <\/div>\n                <div class=\"impact-stat anim-pop d3\">\n                    <p class=\"impact-stat-number gradient-text\">45<\/p>\n                    <p class=\"impact-stat-label\">Scholars Supported<\/p>\n                <\/div>\n                <div class=\"impact-stat anim-pop d4\">\n                    <p class=\"impact-stat-number gradient-text\">12<\/p>\n                    <p class=\"impact-stat-label\">Outreach Programs<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"impact-grid\">\n                <div class=\"impact-image anim-left d2\">\n                    <div class=\"exp-wrap\"\n                         data-full=\"https:\/\/images.unsplash.com\/photo-1469571486292-0ba58a3f068b?w=1200&#038;q=80\"\n                         data-caption=\"Community outreach \u2014 Feeding program for families in need\">\n                        <img decoding=\"async\" class=\"exp-thumb\"\n                             src=\"https:\/\/images.unsplash.com\/photo-1469571486292-0ba58a3f068b?w=700&#038;q=75\"\n                             alt=\"Community Outreach\"\n                             loading=\"lazy\">\n                        <div class=\"exp-hint\"><div class=\"exp-hint-icon\"><span class=\"material-symbols-outlined\">zoom_in<\/span><\/div><\/div>\n                        <div class=\"exp-overlay\"><button class=\"exp-close\"><span class=\"material-symbols-outlined\">close<\/span><\/button><img decoding=\"async\" class=\"exp-overlay-img\" src=\"\" alt=\"\"><p class=\"exp-overlay-caption\"><\/p><\/div>\n                    <\/div>\n                    <div class=\"impact-image-gradient\"><\/div>\n                <\/div>\n\n                <div class=\"impact-content\">\n                    <div class=\"section-label anim\"><span class=\"section-label-line\"><\/span>Testimonial<\/div>\n                    <h3 class=\"impact-title anim d1\">Your Generosity<br><em>Changes Lives<\/em><\/h3>\n                    <p class=\"impact-text anim d2\">Every donation, no matter how small, creates ripples of hope throughout our community. From feeding the hungry to educating young minds, your gift bears fruit in ways you may never see but God always remembers.<\/p>\n\n                    <div class=\"impact-quote anim d3\">\n                        &#8220;Because of the parish scholarship program, my daughter was able to finish her studies. I thank God and every generous heart who made it possible.&#8221;\n                    <\/div>\n                    <p class=\"impact-quote-name anim d3\">\u2014 Maria Santos, Beneficiary Parent<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- TRANSPARENCY -->\n    <section class=\"transparency\" id=\"transparency\">\n        <div class=\"container\">\n            <div class=\"transparency-header\">\n                <div class=\"section-label anim\" style=\"justify-content:center;\"><span class=\"section-label-line\"><\/span>Financial Stewardship<span class=\"section-label-line\"><\/span><\/div>\n                <h2 class=\"transparency-header-title gradient-text anim d1\">Where Every Peso Goes<\/h2>\n                <div class=\"section-divider anim d1\"><\/div>\n                <p class=\"transparency-header-desc anim d2\">We are committed to the highest standards of financial accountability. Here is a general breakdown of how donations are allocated across our parish operations and ministries.<\/p>\n            <\/div>\n\n            <div class=\"transparency-bars anim-section d3\">\n                <div class=\"tbar-item\">\n                    <div class=\"tbar-header\">\n                        <span class=\"tbar-label\">Parish Operations &amp; Maintenance<\/span>\n                        <span class=\"tbar-percent\">35%<\/span>\n                    <\/div>\n                    <div class=\"tbar-track\"><div class=\"tbar-fill\" data-width=\"35\"><\/div><\/div>\n                    <p class=\"tbar-sublabel\">Utilities, building upkeep, liturgical supplies, insurance<\/p>\n                <\/div>\n                <div class=\"tbar-item\">\n                    <div class=\"tbar-header\">\n                        <span class=\"tbar-label\">Social Outreach &amp; Charity<\/span>\n                        <span class=\"tbar-percent\">25%<\/span>\n                    <\/div>\n                    <div class=\"tbar-track\"><div class=\"tbar-fill\" data-width=\"25\"><\/div><\/div>\n                    <p class=\"tbar-sublabel\">Feeding programs, medical missions, disaster relief, aid to families<\/p>\n                <\/div>\n                <div class=\"tbar-item\">\n                    <div class=\"tbar-header\">\n                        <span class=\"tbar-label\">Faith Formation &amp; Education<\/span>\n                        <span class=\"tbar-percent\">20%<\/span>\n                    <\/div>\n                    <div class=\"tbar-track\"><div class=\"tbar-fill gold\" data-width=\"20\"><\/div><\/div>\n                    <p class=\"tbar-sublabel\">Catechesis, youth ministry, Bible studies, scholarships<\/p>\n                <\/div>\n                <div class=\"tbar-item\">\n                    <div class=\"tbar-header\">\n                        <span class=\"tbar-label\">Clergy &amp; Personnel<\/span>\n                        <span class=\"tbar-percent\">12%<\/span>\n                    <\/div>\n                    <div class=\"tbar-track\"><div class=\"tbar-fill\" data-width=\"12\"><\/div><\/div>\n                    <p class=\"tbar-sublabel\">Priest support, staff salaries, benefits<\/p>\n                <\/div>\n                <div class=\"tbar-item\">\n                    <div class=\"tbar-header\">\n                        <span class=\"tbar-label\">Mission &amp; Evangelization<\/span>\n                        <span class=\"tbar-percent\">8%<\/span>\n                    <\/div>\n                    <div class=\"tbar-track\"><div class=\"tbar-fill gold\" data-width=\"8\"><\/div><\/div>\n                    <p class=\"tbar-sublabel\">Support to mission areas, diocesan assessments, evangelization<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- CTA -->\n    <section class=\"cta\">\n        <div class=\"cta-cross\"><\/div>\n        <div class=\"container\">\n            <div class=\"section-label anim\" style=\"justify-content:center;\"><span class=\"section-label-line\"><\/span>Begin Giving Today<span class=\"section-label-line\"><\/span><\/div>\n            <h2 class=\"cta-title gradient-text-white anim d1\">Every Gift Is a<br>Prayer Answered<\/h2>\n            <div class=\"section-divider section-divider-gold anim d1\"><\/div>\n            <p class=\"cta-text anim d2\">Your generosity sustains the mission of St. Michael the Archangel Mission Center and brings the light of Christ to our community. Give with a joyful heart and trust in God&#8217;s providence.<\/p>\n            <div class=\"cta-buttons anim d3\">\n                <a href=\"#donate\" class=\"btn btn-white\"><span class=\"material-symbols-outlined\">volunteer_activism<\/span>Make a Donation<\/a>\n                <a href=\"https:\/\/demo5.yinwoodweb.com\/malaya\/contact-us\/\" class=\"btn btn-outline\" style=\"color:#fff; border-color:rgba(255,255,255,0.4);\"><span class=\"material-symbols-outlined\">call<\/span>Contact Parish Office<\/a>\n            <\/div>\n            <p class=\"cta-scripture anim d4\">&#8220;Give, and it will be given to you. A good measure, pressed down, shaken together and running over.&#8221; &mdash; Luke 6:38<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- SCRIPTS -->\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            \/* Scroll Reveal *\/\n            var targets = document.querySelectorAll('.anim, .anim-left, .anim-right, .anim-pop, .anim-section');\n            var observer = new IntersectionObserver(function (entries) {\n                entries.forEach(function (entry) {\n                    if (entry.isIntersecting) entry.target.classList.add('in-view');\n                });\n            }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });\n            targets.forEach(function (el) { observer.observe(el); });\n\n            \/* Inline Expand *\/\n            var wraps = document.querySelectorAll('.exp-wrap');\n            wraps.forEach(function (wrap) {\n                var overlay = wrap.querySelector('.exp-overlay');\n                var overlayImg = wrap.querySelector('.exp-overlay-img');\n                var caption = wrap.querySelector('.exp-overlay-caption');\n                var closeBtn = wrap.querySelector('.exp-close');\n                var fullSrc = wrap.getAttribute('data-full');\n                var captionText = wrap.getAttribute('data-caption') || '';\n                wrap.addEventListener('click', function (e) {\n                    if (overlay.classList.contains('open')) return;\n                    if (e.target.closest('.exp-close')) return;\n                    if (fullSrc) {\n                        overlayImg.src = fullSrc; overlayImg.alt = captionText;\n                        caption.textContent = captionText; overlay.classList.add('open');\n                    }\n                });\n                closeBtn.addEventListener('click', function (e) {\n                    e.stopPropagation(); overlay.classList.remove('open');\n                    setTimeout(function () { overlayImg.src = ''; }, 400);\n                });\n                document.addEventListener('keydown', function (e) {\n                    if (e.key === 'Escape' && overlay.classList.contains('open')) {\n                        overlay.classList.remove('open');\n                        setTimeout(function () { overlayImg.src = ''; }, 400);\n                    }\n                });\n            });\n\n            \/* Cause Selector *\/\n            document.querySelectorAll('.cause-btn').forEach(function (btn) {\n                btn.addEventListener('click', function () {\n                    document.querySelectorAll('.cause-btn').forEach(function (b) { b.classList.remove('active'); });\n                    btn.classList.add('active');\n                });\n            });\n\n            \/* Amount Selector *\/\n            document.querySelectorAll('.amount-btn').forEach(function (btn) {\n                btn.addEventListener('click', function () {\n                    document.querySelectorAll('.amount-btn').forEach(function (b) { b.classList.remove('active'); });\n                    btn.classList.add('active');\n                    document.querySelector('.custom-amount-input input').value = '';\n                });\n            });\n\n            \/* Custom amount clears preset buttons *\/\n            document.querySelector('.custom-amount-input input').addEventListener('input', function () {\n                document.querySelectorAll('.amount-btn').forEach(function (b) { b.classList.remove('active'); });\n            });\n\n            \/* Transparency bars animation *\/\n            var bars = document.querySelectorAll('.tbar-fill');\n            var barObserver = new IntersectionObserver(function (entries) {\n                entries.forEach(function (entry) {\n                    if (entry.isIntersecting) {\n                        var w = entry.target.getAttribute('data-width');\n                        entry.target.style.width = w + '%';\n                    }\n                });\n            }, { threshold: 0.3 });\n            bars.forEach(function (bar) { barObserver.observe(bar); });\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Donate \u2014 St. Michael the Archangel Mission Center Homechevron_rightDonate Share YourBlessings Your generous gift sustains our parish ministries, maintains our [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"h1, h2, h3, h4, h5, h6, .entry-content :where(h1,h2,h3,h4,h5,h6) {\n    color: #fff;\n}","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Donate - St. Michael the Archangel Mission Center","description":"Donate \u2014 St. Michael the Archangel Mission Center Home chevron_right Donate Share Your Blessings Your generous gift sustains our parish ministries, maintains ou"},"footnotes":""},"class_list":["post-320","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Diocese of Gumaca","author_link":"https:\/\/demo5.yinwoodweb.com\/malaya\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"Donate \u2014 St. Michael the Archangel Mission Center Homechevron_rightDonate Share YourBlessings Your generous gift sustains our parish ministries, maintains our [&hellip;]","_links":{"self":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":9,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages\/320\/revisions"}],"predecessor-version":[{"id":511,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages\/320\/revisions\/511"}],"wp:attachment":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/media?parent=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}