{"id":20,"date":"2026-03-13T07:29:50","date_gmt":"2026-03-13T07:29:50","guid":{"rendered":"https:\/\/Demo5.yinwoodweb.com\/agro\/?page_id=20"},"modified":"2026-07-22T02:46:26","modified_gmt":"2026-07-22T02:46:26","slug":"home","status":"publish","type":"page","link":"https:\/\/Demo5.yinwoodweb.com\/agro\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-f5b66991 alignfull uagb-is-root-container\">\n<!-- Fonts -->\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=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600&#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\n<!-- Material Symbols -->\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  :root {\n    --gold: #EFD34A;\n    --gold-dark: #d4b830;\n    --gold-light: #f7e88a;\n    --olive: #4B4E3A;\n    --olive-dark: #363829;\n    --olive-deep: #2a2c1f;\n    --olive-light: #636650;\n    --cream: #FAF6E9;\n    --cream-dark: #f0e8d0;\n    --warm-white: #FFFDF5;\n    --text-dark: #1a1b14;\n    --text-body: #3d3f30;\n    --text-muted: #7a7c6e;\n\n    --bg-hero: #1e2017;\n    --bg-marquee-1: #363829;\n    --bg-about: #FFFDF5;\n    --bg-pullquote: #4B4E3A;\n    --bg-schedule: #2a2c1f;\n    --bg-marquee-2: #EFD34A;\n    --bg-gallery: #f0e8d0;\n    --bg-blockquote: #FAF6E9;\n    --bg-ministries: #f5f1e4;\n    --bg-events: #313327;\n    --bg-contact: #efe8d5;\n\n    --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.08);\n    --shadow-medium: 0 8px 40px rgba(0, 0, 0, 0.12);\n    --shadow-gold: 0 4px 25px rgba(239, 211, 74, 0.2);\n    --radius-sm: 8px;\n    --radius-md: 14px;\n    --radius-lg: 22px;\n    --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  }\n\n  \/* ===== RESET (scoped to .sr-main-wrap) ===== *\/\n  .sr-main-wrap *,\n  .sr-main-wrap *::before,\n  .sr-main-wrap *::after {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  .sr-main-wrap {\n    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;\n    font-weight: 400;\n    color: var(--text-body);\n    background: var(--bg-hero);\n    line-height: 1.7;\n    font-size: 17px;\n    overflow-x: hidden;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    width: 100%;\n    max-width: 100%;\n    position: relative;\n  }\n\n  .sr-main-wrap img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  .sr-main-wrap a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  \/* ===== SECTION BASE ===== *\/\n  .sr-section {\n    width: 100%;\n    position: relative;\n    padding: 80px 0;\n  }\n\n  .sr-container {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* ===== HEADING STYLES ===== *\/\n  .sr-heading-xl {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-weight: 900;\n    font-size: clamp(2.8rem, 7vw, 5.5rem);\n    line-height: 1.08;\n    background: linear-gradient(135deg, var(--gold) 0%, #fff5b8 35%, var(--gold) 65%, var(--gold-dark) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    letter-spacing: -0.02em;\n    margin-bottom: 20px;\n  }\n\n  .sr-heading-lg {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-weight: 800;\n    font-size: clamp(2rem, 4.5vw, 3.5rem);\n    line-height: 1.15;\n    background: linear-gradient(135deg, var(--olive-dark) 0%, var(--olive) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    letter-spacing: -0.015em;\n    margin-bottom: 16px;\n  }\n\n  .sr-heading-lg--light {\n    background: linear-gradient(135deg, var(--gold) 0%, #fff5b8 50%, var(--gold) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  .sr-heading-md {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-weight: 700;\n    font-size: clamp(1.4rem, 3vw, 2.2rem);\n    line-height: 1.25;\n    color: var(--olive-dark);\n    margin-bottom: 12px;\n  }\n\n  .sr-subheading {\n    font-family: 'Source Serif 4', serif;\n    font-weight: 400;\n    font-size: clamp(1rem, 2vw, 1.25rem);\n    line-height: 1.65;\n    max-width: 640px;\n    opacity: 0.85;\n  }\n\n  .sr-label {\n    font-family: 'Source Serif 4', serif;\n    font-weight: 600;\n    font-size: 0.8rem;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: var(--gold);\n    margin-bottom: 12px;\n    display: inline-block;\n  }\n\n  \/* ===== BUTTONS ===== *\/\n  .sr-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    padding: 16px 36px;\n    font-family: 'Source Serif 4', serif;\n    font-weight: 700;\n    font-size: 1rem;\n    letter-spacing: 0.06em;\n    border: none;\n    border-radius: 50px;\n    cursor: pointer;\n    transition: var(--transition);\n    position: relative;\n    overflow: hidden;\n    text-decoration: none !important;\n  }\n\n  .sr-btn:hover,\n  .sr-btn:focus,\n  .sr-btn:active,\n  .sr-btn:visited {\n    text-decoration: none !important;\n  }\n\n  .sr-btn--gold {\n    background: var(--gold);\n    color: var(--olive-dark);\n    box-shadow: 0 4px 30px rgba(239, 211, 74, 0.35), 0 0 60px rgba(239, 211, 74, 0.1);\n  }\n\n  .sr-btn--gold:hover {\n    background: var(--gold-light);\n    color: var(--olive-dark);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 45px rgba(239, 211, 74, 0.5), 0 0 80px rgba(239, 211, 74, 0.15);\n    letter-spacing: 0.1em;\n    text-decoration: none !important;\n  }\n\n  .sr-btn--outline {\n    background: var(--cream);\n    color: var(--olive-dark);\n    border: none;\n    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);\n  }\n\n  .sr-btn--outline:hover {\n    background: var(--gold-light);\n    color: var(--olive-dark);\n    transform: translateY(-2px);\n    letter-spacing: 0.1em;\n    box-shadow: 0 8px 40px rgba(239, 211, 74, 0.25);\n    text-decoration: none !important;\n  }\n\n  .sr-btn .material-symbols-outlined {\n    font-size: 20px;\n    transition: transform 0.3s ease;\n  }\n\n  .sr-btn:hover .material-symbols-outlined {\n    transform: translateX(3px);\n  }\n\n  \/* ===== GRAIN OVERLAY ===== *\/\n  .sr-main-wrap::after {\n    content: '';\n    position: fixed;\n    inset: 0;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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\");\n    opacity: 0.03;\n    pointer-events: none;\n    z-index: 9999;\n  }\n\n  \/* ============================================================\n     SECTION: HERO\n  ============================================================ *\/\n  .sr-hero {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--bg-hero);\n    position: relative;\n    overflow: hidden;\n    padding: 100px 0 80px;\n  }\n\n  .sr-hero__bg {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  .sr-hero__bg img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    opacity: 0.35;\n  }\n\n  .sr-hero__overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, rgba(30,32,23,0.55) 0%, rgba(30,32,23,0.35) 40%, rgba(30,32,23,0.75) 100%);\n    z-index: 2;\n  }\n\n  .sr-hero__mesh {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    opacity: 0.4;\n    background:\n      radial-gradient(ellipse 600px 400px at 15% 20%, rgba(239,211,74,0.15) 0%, transparent 70%),\n      radial-gradient(ellipse 500px 500px at 85% 80%, rgba(239,211,74,0.08) 0%, transparent 70%);\n  }\n\n  .sr-hero__content {\n    position: relative;\n    z-index: 4;\n    text-align: center;\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 0 24px;\n    padding-top: 100px;\n  }\n\n  .sr-hero__cross {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 60px;\n    height: 60px;\n    margin-bottom: 32px;\n    animation: fadeInDown 1s ease forwards;\n  }\n\n  .sr-hero__cross .material-symbols-outlined {\n    font-size: 48px;\n    color: var(--gold);\n    font-variation-settings: 'FILL' 1;\n  }\n\n  .sr-hero__pretitle {\n    font-family: 'Source Serif 4', serif;\n    font-weight: 500;\n    font-size: 0.85rem;\n    letter-spacing: 0.3em;\n    text-transform: uppercase;\n    color: var(--gold);\n    margin-bottom: 20px;\n    opacity: 0;\n    animation: fadeInUp 0.8s ease 0.2s forwards;\n  }\n\n  .sr-hero__title { opacity: 0; animation: fadeInUp 0.8s ease 0.4s forwards; }\n\n  .sr-hero__subtitle {\n    font-family: 'Source Serif 4', serif;\n    font-weight: 300;\n    font-size: clamp(1.05rem, 2.5vw, 1.35rem);\n    color: var(--cream-dark);\n    line-height: 1.7;\n    margin-bottom: 16px;\n    opacity: 0;\n    animation: fadeInUp 0.8s ease 0.6s forwards;\n  }\n\n  .sr-hero__location {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: 'Source Serif 4', serif;\n    font-size: 0.9rem;\n    color: var(--gold);\n    margin-bottom: 40px;\n    opacity: 0;\n    animation: fadeInUp 0.8s ease 0.7s forwards;\n  }\n\n  .sr-hero__location .material-symbols-outlined { font-size: 18px; }\n\n  .sr-hero__actions {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    flex-wrap: wrap;\n    opacity: 0;\n    animation: fadeInUp 0.8s ease 0.9s forwards;\n  }\n\n  .sr-hero__scroll {\n    position: absolute;\n    bottom: 40px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    color: var(--gold);\n    opacity: 0.6;\n    animation: bounceDown 2s ease infinite 2s;\n  }\n\n  .sr-hero__scroll .material-symbols-outlined { font-size: 28px; }\n  .sr-hero__scroll span:last-child {\n    font-family: 'Source Serif 4', serif;\n    font-size: 0.7rem;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n  }\n\n  \/* ============================================================\n     SCROLLING MARQUEE\n  ============================================================ *\/\n  .sr-marquee {\n    width: 100%;\n    overflow: hidden;\n    padding: 18px 0;\n    position: relative;\n  }\n\n  .sr-marquee::before,\n  .sr-marquee::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 100px;\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .sr-marquee__track {\n    display: flex;\n    width: max-content;\n    animation: marqueeScroll 35s linear infinite;\n  }\n\n  .sr-marquee__track:hover { animation-play-state: paused; }\n\n  .sr-marquee__item {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 0 24px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .sr-marquee__text {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: clamp(1rem, 2vw, 1.4rem);\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n  }\n\n  .sr-marquee__dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    opacity: 0.5;\n    flex-shrink: 0;\n  }\n\n  @keyframes marqueeScroll {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n  }\n\n  .sr-marquee--dark {\n    background: var(--bg-marquee-1);\n  }\n\n  .sr-marquee--dark::before { background: linear-gradient(90deg, var(--bg-marquee-1), transparent); }\n  .sr-marquee--dark::after { background: linear-gradient(-90deg, var(--bg-marquee-1), transparent); }\n\n  .sr-marquee--dark .sr-marquee__text { color: var(--gold); }\n  .sr-marquee--dark .sr-marquee__dot { background: var(--gold); }\n  .sr-marquee--dark .sr-marquee__icon .material-symbols-outlined {\n    font-size: 20px;\n    color: var(--gold);\n    opacity: 0.6;\n    font-variation-settings: 'FILL' 1;\n  }\n\n  .sr-marquee--gold {\n    background: var(--bg-marquee-2);\n  }\n\n  .sr-marquee--gold::before { background: linear-gradient(90deg, var(--bg-marquee-2), transparent); }\n  .sr-marquee--gold::after { background: linear-gradient(-90deg, var(--bg-marquee-2), transparent); }\n\n  .sr-marquee--gold .sr-marquee__track {\n    animation-direction: reverse;\n    animation-duration: 40s;\n  }\n\n  .sr-marquee--gold .sr-marquee__text {\n    color: var(--olive-dark);\n    font-size: clamp(0.85rem, 1.5vw, 1.1rem);\n    font-weight: 600;\n  }\n\n  .sr-marquee--gold .sr-marquee__dot { background: var(--olive-dark); opacity: 0.3; }\n  .sr-marquee--gold .sr-marquee__icon .material-symbols-outlined {\n    font-size: 20px;\n    color: var(--olive-dark);\n    opacity: 0.4;\n  }\n\n  \/* ============================================================\n     SECTION: ABOUT\n  ============================================================ *\/\n  .sr-about {\n    background: var(--bg-about);\n    padding: 100px 0;\n    position: relative;\n  }\n\n  .sr-about::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n  }\n\n  .sr-about__grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 60px;\n    align-items: center;\n  }\n\n  .sr-about__image-wrap {\n    position: relative;\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    box-shadow: var(--shadow-medium);\n  }\n\n  .sr-about__image-wrap img {\n    width: 100%;\n    height: 480px;\n    object-fit: cover;\n    object-position: center;\n    transition: transform 0.6s ease;\n  }\n\n  .sr-about__image-wrap:hover img { transform: scale(1.03); }\n\n  .sr-about__image-wrap::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border: 1px solid rgba(239,211,74,0.2);\n    border-radius: var(--radius-lg);\n    pointer-events: none;\n  }\n\n  .sr-about__image-accent {\n    position: absolute;\n    top: -14px;\n    left: -14px;\n    width: 80px;\n    height: 80px;\n    border-top: 3px solid var(--gold);\n    border-left: 3px solid var(--gold);\n    border-radius: 4px 0 0 0;\n    z-index: 2;\n  }\n\n  .sr-about__text p { margin-bottom: 20px; color: var(--text-body); }\n\n  .sr-about__stats {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    margin-top: 36px;\n    padding-top: 36px;\n    border-top: 1px solid rgba(75,78,58,0.12);\n  }\n\n  .sr-about__stat-number {\n    font-family: 'Playfair Display', serif;\n    font-weight: 800;\n    font-size: 2.2rem;\n    color: var(--gold-dark);\n    line-height: 1;\n    margin-bottom: 6px;\n  }\n\n  .sr-about__stat-label {\n    font-size: 0.82rem;\n    color: var(--text-muted);\n    letter-spacing: 0.04em;\n  }\n\n  \/* ============================================================\n     SECTION: PULLQUOTE\n  ============================================================ *\/\n  .sr-pullquote {\n    background: var(--bg-pullquote);\n    padding: 100px 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .sr-pullquote__mesh {\n    position: absolute;\n    inset: 0;\n    opacity: 0.25;\n    background:\n      radial-gradient(ellipse 600px 400px at 20% 50%, rgba(239,211,74,0.12) 0%, transparent 70%),\n      radial-gradient(ellipse 500px 400px at 80% 50%, rgba(239,211,74,0.06) 0%, transparent 70%);\n    pointer-events: none;\n  }\n\n  .sr-pullquote .sr-container { position: relative; z-index: 2; }\n\n  .sr-pullquote__inner {\n    max-width: 860px;\n    margin: 0 auto;\n    text-align: center;\n  }\n\n  .sr-pullquote__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 72px;\n    height: 72px;\n    margin: 0 auto 36px;\n    background: rgba(239,211,74,0.1);\n    border-radius: 50%;\n    border: 1px solid rgba(239,211,74,0.2);\n  }\n\n  .sr-pullquote__icon .material-symbols-outlined {\n    font-size: 34px;\n    color: var(--gold);\n    font-variation-settings: 'FILL' 1;\n  }\n\n  .sr-pullquote__quote {\n    font-family: 'Playfair Display', serif;\n    font-weight: 400;\n    font-style: italic;\n    font-size: clamp(1.4rem, 3.5vw, 2.4rem);\n    line-height: 1.5;\n    color: var(--cream);\n    margin-bottom: 36px;\n    position: relative;\n  }\n\n  .sr-pullquote__quote::before {\n    content: '\\201C';\n    position: absolute;\n    top: -30px;\n    left: -10px;\n    font-family: 'Playfair Display', serif;\n    font-size: 7rem;\n    color: var(--gold);\n    opacity: 0.15;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  .sr-pullquote__divider {\n    width: 60px;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n    margin: 0 auto 24px;\n  }\n\n  .sr-pullquote__cite {\n    font-family: 'Source Serif 4', serif;\n    font-weight: 600;\n    font-size: 1rem;\n    color: var(--gold);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  .sr-pullquote__cite span {\n    display: block;\n    font-weight: 400;\n    font-size: 0.85rem;\n    color: var(--cream-dark);\n    opacity: 0.6;\n    letter-spacing: 0.06em;\n    text-transform: none;\n    margin-top: 6px;\n  }\n\n  \/* ============================================================\n     SECTION: MASS SCHEDULE\n  ============================================================ *\/\n  .sr-schedule {\n    background: var(--bg-schedule);\n    padding: 100px 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .sr-schedule__mesh {\n    position: absolute;\n    inset: 0;\n    opacity: 0.3;\n    background:\n      radial-gradient(ellipse 500px 400px at 80% 20%, rgba(239,211,74,0.1) 0%, transparent 70%),\n      radial-gradient(ellipse 400px 400px at 10% 80%, rgba(239,211,74,0.06) 0%, transparent 70%);\n    pointer-events: none;\n  }\n\n  .sr-schedule .sr-container { position: relative; z-index: 2; }\n\n  .sr-schedule__header {\n    text-align: center;\n    margin-bottom: 60px;\n  }\n\n  .sr-schedule__header .sr-subheading { color: var(--cream-dark); margin: 0 auto; }\n\n  .sr-schedule__grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 24px;\n  }\n\n  .sr-schedule__card {\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(239,211,74,0.12);\n    border-radius: var(--radius-md);\n    padding: 40px 34px;\n    backdrop-filter: blur(10px);\n    transition:\n      background 0.5s cubic-bezier(0.25,0.46,0.45,0.94),\n      border-color 0.5s ease,\n      transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),\n      box-shadow 0.5s ease;\n    position: relative;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .sr-schedule__card::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);\n    opacity: 0;\n    z-index: -1;\n    transition: opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94);\n    border-radius: var(--radius-md);\n  }\n\n  .sr-schedule__card::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, var(--gold), var(--gold-dark));\n    transform: scaleX(0);\n    transform-origin: left;\n    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);\n    z-index: 2;\n  }\n\n  .sr-schedule__card:hover {\n    background: transparent;\n    border-color: var(--gold);\n    transform: translateY(-8px);\n    box-shadow: 0 20px 60px rgba(239,211,74,0.25), 0 0 0 1px var(--gold);\n  }\n\n  .sr-schedule__card:hover::before { opacity: 1; }\n  .sr-schedule__card:hover::after { transform: scaleX(1); }\n\n  .sr-schedule__card-icon {\n    width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(239,211,74,0.12);\n    border-radius: 14px;\n    margin-bottom: 22px;\n    transition: background 0.4s ease, transform 0.4s ease;\n  }\n\n  .sr-schedule__card:hover .sr-schedule__card-icon {\n    background: rgba(54,56,41,0.2);\n    transform: scale(1.05);\n  }\n\n  .sr-schedule__card-icon .material-symbols-outlined {\n    font-size: 28px;\n    color: var(--gold);\n    font-variation-settings: 'FILL' 1;\n    transition: color 0.4s ease;\n  }\n\n  .sr-schedule__card:hover .sr-schedule__card-icon .material-symbols-outlined {\n    color: var(--olive-dark);\n  }\n\n  .sr-schedule__card h3 {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 1.4rem;\n    color: var(--cream);\n    margin-bottom: 18px;\n    transition: color 0.4s ease;\n  }\n\n  .sr-schedule__card:hover h3 { color: var(--olive-dark); }\n\n  .sr-schedule__list { list-style: none; }\n\n  .sr-schedule__list li {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 13px 0;\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n    color: var(--cream-dark);\n    font-size: 0.95rem;\n    transition: color 0.4s ease, border-color 0.4s ease;\n  }\n\n  .sr-schedule__card:hover .sr-schedule__list li {\n    border-color: rgba(54,56,41,0.15);\n    color: var(--olive-deep);\n  }\n\n  .sr-schedule__list li:last-child { border-bottom: none; }\n\n  .sr-schedule__list li .time {\n    font-weight: 600;\n    color: var(--gold);\n    font-size: 0.9rem;\n    transition: color 0.4s ease;\n  }\n\n  .sr-schedule__card:hover .sr-schedule__list li .time { color: var(--olive-dark); }\n\n  \/* ============================================================\n     SECTION: GALLERY\n  ============================================================ *\/\n  .sr-showcase {\n    background: var(--bg-gallery);\n    padding: 100px 0;\n  }\n\n  .sr-showcase__header { text-align: center; margin-bottom: 60px; }\n\n  .sr-showcase__grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-template-rows: auto auto;\n    gap: 20px;\n  }\n\n  .sr-showcase__item {\n    border-radius: var(--radius-md);\n    overflow: hidden;\n    position: relative;\n    box-shadow: var(--shadow-soft);\n    cursor: pointer;\n  }\n\n  .sr-showcase__item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    transition: transform 0.6s ease;\n  }\n\n  .sr-showcase__item:hover img { transform: scale(1.05); }\n\n  .sr-showcase__item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, transparent 50%, rgba(42,44,31,0.6) 100%);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n\n  .sr-showcase__item:hover::after { opacity: 1; }\n\n  .sr-showcase__item-label {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    right: 20px;\n    z-index: 2;\n    font-family: 'Playfair Display', serif;\n    font-weight: 600;\n    font-size: 1.1rem;\n    color: var(--cream);\n    opacity: 0;\n    transform: translateY(10px);\n    transition: all 0.4s ease;\n  }\n\n  .sr-showcase__item:hover .sr-showcase__item-label {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .sr-showcase__item--tall { grid-row: span 2; }\n  .sr-showcase__item--tall img { height: 100%; min-height: 400px; }\n  .sr-showcase__item--normal img { height: 240px; }\n\n  \/* ============================================================\n     SECTION: BLOCKQUOTE\n  ============================================================ *\/\n  .sr-blockquote-section {\n    background: var(--bg-blockquote);\n    padding: 100px 0;\n    position: relative;\n  }\n\n  .sr-blockquote-section::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n  }\n\n  .sr-blockquote-card {\n    max-width: 900px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 6px 1fr;\n    gap: 0;\n    background: rgba(255,253,245,0.7);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    box-shadow: var(--shadow-soft);\n    padding: 48px 52px;\n    position: relative;\n  }\n\n  .sr-blockquote-card__bar {\n    background: linear-gradient(180deg, var(--gold), var(--gold-dark));\n    border-radius: 3px;\n  }\n\n  .sr-blockquote-card__content { padding-left: 36px; }\n\n  .sr-blockquote-card__content blockquote {\n    font-family: 'Playfair Display', serif;\n    font-style: italic;\n    font-size: clamp(1.15rem, 2.5vw, 1.5rem);\n    line-height: 1.65;\n    color: var(--olive-dark);\n    margin-bottom: 24px;\n  }\n\n  .sr-blockquote-card__content blockquote::before {\n    content: '\\201C';\n    font-family: 'Playfair Display', serif;\n    font-size: 4rem;\n    color: var(--gold);\n    opacity: 0.4;\n    line-height: 0;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n  .sr-blockquote-card__footer {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .sr-blockquote-card__avatar {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    overflow: hidden;\n    flex-shrink: 0;\n    border: 2px solid var(--gold);\n  }\n\n  .sr-blockquote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n  .sr-blockquote-card__meta cite {\n    font-family: 'Source Serif 4', serif;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 0.95rem;\n    color: var(--olive-dark);\n    display: block;\n  }\n\n  .sr-blockquote-card__meta span { font-size: 0.82rem; color: var(--text-muted); }\n\n  \/* ============================================================\n     SECTION: MINISTRIES\n  ============================================================ *\/\n  .sr-ministries {\n    background: var(--bg-ministries);\n    padding: 100px 0;\n    position: relative;\n  }\n\n  .sr-ministries::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n  }\n\n  .sr-ministries__header { text-align: center; margin-bottom: 60px; }\n  .sr-ministries__header .sr-subheading { margin: 0 auto; }\n\n  .sr-ministries__grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n    gap: 28px;\n  }\n\n  .sr-ministry-card {\n    background: var(--cream);\n    border: 1px solid rgba(75,78,58,0.1);\n    border-radius: var(--radius-md);\n    padding: 40px 30px;\n    text-align: center;\n    transition: var(--transition);\n    position: relative;\n  }\n\n  .sr-ministry-card:hover {\n    transform: translateY(-6px);\n    box-shadow: var(--shadow-medium);\n    border-color: var(--gold);\n  }\n\n  .sr-ministry-card__icon {\n    width: 68px;\n    height: 68px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 24px;\n    background: linear-gradient(135deg, var(--olive-dark), var(--olive));\n    border-radius: 50%;\n    position: relative;\n  }\n\n  .sr-ministry-card__icon::after {\n    content: '';\n    position: absolute;\n    inset: -4px;\n    border-radius: 50%;\n    border: 1px dashed var(--gold);\n    opacity: 0.3;\n  }\n\n  .sr-ministry-card__icon .material-symbols-outlined {\n    font-size: 30px;\n    color: var(--gold);\n    font-variation-settings: 'FILL' 1;\n  }\n\n  .sr-ministry-card h3 {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 1.25rem;\n    color: var(--olive-dark);\n    margin-bottom: 12px;\n  }\n\n  .sr-ministry-card p {\n    font-size: 0.92rem;\n    color: var(--text-muted);\n    line-height: 1.65;\n    margin-bottom: 20px;\n  }\n\n  .sr-ministry-card__link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: 'Source Serif 4', serif;\n    font-weight: 600;\n    font-size: 0.85rem;\n    color: var(--gold-dark);\n    letter-spacing: 0.04em;\n    transition: var(--transition);\n    text-decoration: none !important;\n  }\n\n  .sr-ministry-card__link:hover {\n    color: var(--olive-dark);\n    gap: 10px;\n    text-decoration: none !important;\n  }\n\n  .sr-ministry-card__link:focus,\n  .sr-ministry-card__link:active,\n  .sr-ministry-card__link:visited {\n    text-decoration: none !important;\n  }\n\n  .sr-ministry-card__link .material-symbols-outlined { font-size: 18px; }\n\n  \/* ============================================================\n     SECTION: EVENTS\n  ============================================================ *\/\n  .sr-events {\n    background: var(--bg-events);\n    padding: 100px 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .sr-events__mesh {\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(ellipse 600px 300px at 50% 0%, rgba(239,211,74,0.08) 0%, transparent 70%);\n    pointer-events: none;\n  }\n\n  .sr-events .sr-container { position: relative; z-index: 2; }\n\n  .sr-events__header { text-align: center; margin-bottom: 60px; }\n  .sr-events__header .sr-subheading { color: var(--cream-dark); margin: 0 auto; }\n\n  .sr-events__list {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    max-width: 800px;\n    margin: 0 auto;\n  }\n\n  .sr-event-item {\n    display: flex;\n    align-items: center;\n    gap: 28px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(239,211,74,0.1);\n    border-radius: var(--radius-md);\n    padding: 28px 32px;\n    transition: var(--transition);\n  }\n\n  .sr-event-item:hover {\n    background: rgba(255,255,255,0.07);\n    border-color: rgba(239,211,74,0.25);\n    transform: translateX(6px);\n  }\n\n  .sr-event-item__date {\n    flex-shrink: 0;\n    width: 72px;\n    height: 72px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--gold);\n    border-radius: var(--radius-sm);\n    color: var(--olive-dark);\n  }\n\n  .sr-event-item__date-month {\n    font-family: 'Source Serif 4', serif;\n    font-weight: 600;\n    font-size: 0.65rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    line-height: 1;\n  }\n\n  .sr-event-item__date-day {\n    font-family: 'Playfair Display', serif;\n    font-weight: 800;\n    font-size: 1.7rem;\n    line-height: 1.1;\n  }\n\n  .sr-event-item__info h3 {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 1.2rem;\n    color: var(--cream);\n    margin-bottom: 6px;\n  }\n\n  .sr-event-item__info p { font-size: 0.88rem; color: var(--cream-dark); opacity: 0.7; }\n  .sr-event-item__info .material-symbols-outlined {\n    font-size: 16px;\n    vertical-align: middle;\n    margin-right: 4px;\n    color: var(--gold);\n  }\n\n  \/* ============================================================\n     SECTION: CTA\n  ============================================================ *\/\n  .sr-cta {\n    padding: 100px 0;\n    position: relative;\n    overflow: hidden;\n    background: var(--olive-deep);\n  }\n\n  .sr-cta__bg { position: absolute; inset: 0; }\n  .sr-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }\n\n  .sr-cta__overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg, rgba(42,44,31,0.92) 0%, rgba(75,78,58,0.88) 100%);\n  }\n\n  .sr-cta .sr-container { position: relative; z-index: 2; }\n\n  .sr-cta__content {\n    text-align: center;\n    max-width: 700px;\n    margin: 0 auto;\n    opacity: 0;\n    animation: ctaFadeIn 0.9s ease 0.2s forwards;\n  }\n\n  @keyframes ctaFadeIn {\n    from { opacity: 0; transform: translateY(30px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n\n  .sr-cta__content .sr-heading-lg--light { margin-bottom: 20px; }\n  .sr-cta__content p { color: var(--cream-dark); font-size: 1.1rem; margin-bottom: 36px; line-height: 1.7; }\n\n  .sr-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n\n  .sr-cta .sr-btn--gold {\n    box-shadow: 0 4px 30px rgba(239, 211, 74, 0.35), 0 0 60px rgba(239, 211, 74, 0.1);\n  }\n\n  .sr-cta .sr-btn--gold:hover {\n    box-shadow: 0 8px 45px rgba(239, 211, 74, 0.5), 0 0 80px rgba(239, 211, 74, 0.15);\n  }\n\n  \/* ============================================================\n     SECTION: CONTACT\n  ============================================================ *\/\n  .sr-contact {\n    background: var(--bg-contact);\n    padding: 100px 0;\n    position: relative;\n  }\n\n  .sr-contact::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n  }\n\n  .sr-contact__header { text-align: center; margin-bottom: 60px; }\n  .sr-contact__header .sr-subheading { margin: 0 auto; }\n\n  .sr-contact__grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 48px;\n    align-items: start;\n  }\n\n  .sr-contact__map {\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    box-shadow: var(--shadow-medium);\n    height: 100%;\n    min-height: 400px;\n  }\n\n  .sr-contact__map img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; }\n\n  .sr-contact__info { display: flex; flex-direction: column; gap: 28px; }\n\n  .sr-contact__item {\n    display: flex;\n    gap: 20px;\n    align-items: flex-start;\n    padding: 24px;\n    background: rgba(255,253,245,0.6);\n    border-radius: var(--radius-md);\n    border: 1px solid rgba(75,78,58,0.08);\n    transition: var(--transition);\n  }\n\n  .sr-contact__item:hover {\n    border-color: var(--gold);\n    box-shadow: var(--shadow-gold);\n    transform: translateY(-2px);\n  }\n\n  .sr-contact__item-icon {\n    flex-shrink: 0;\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--olive-dark);\n    border-radius: 12px;\n  }\n\n  .sr-contact__item-icon .material-symbols-outlined { font-size: 24px; color: var(--gold); }\n\n  .sr-contact__item-text h4 {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: var(--olive-dark);\n    margin-bottom: 4px;\n  }\n\n  .sr-contact__item-text p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }\n\n  .sr-contact__item-text a { color: var(--gold-dark); font-weight: 500; transition: color 0.2s ease; }\n  .sr-contact__item-text a:hover { color: var(--olive-dark); }\n\n  \/* ===== ANIMATIONS ===== *\/\n  @keyframes fadeInUp {\n    from { opacity: 0; transform: translateY(30px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes fadeInDown {\n    from { opacity: 0; transform: translateY(-20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes bounceDown {\n    0%, 100% { transform: translate(-50%, 0); }\n    50% { transform: translate(-50%, 10px); }\n  }\n\n  \/* Scroll reveal *\/\n  .sr-reveal {\n    opacity: 0;\n    transform: translateY(40px);\n    transition: opacity 0.7s ease, transform 0.7s ease;\n  }\n\n  .sr-reveal.is-visible { opacity: 1; transform: translateY(0); }\n  .sr-reveal--delay-1 { transition-delay: 0.1s; }\n  .sr-reveal--delay-2 { transition-delay: 0.2s; }\n  .sr-reveal--delay-3 { transition-delay: 0.3s; }\n  .sr-reveal--delay-4 { transition-delay: 0.4s; }\n\n  \/* ===== RESPONSIVE ===== *\/\n  @media (max-width: 1024px) {\n    .sr-about__grid { gap: 40px; }\n    .sr-contact__grid { grid-template-columns: 1fr; gap: 32px; }\n    .sr-showcase__grid { grid-template-columns: repeat(2, 1fr); }\n    .sr-showcase__item--tall { grid-row: span 1; }\n    .sr-showcase__item--tall img { min-height: 280px; }\n    .sr-blockquote-card { padding: 36px 32px; }\n  }\n\n  @media (max-width: 768px) {\n    .sr-section { padding: 60px 0; }\n    .sr-hero { padding: 80px 0 60px; min-height: 90vh; }\n    .sr-about__grid { grid-template-columns: 1fr; gap: 36px; }\n    .sr-about__image-wrap img { height: 320px; }\n    .sr-about__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }\n    .sr-schedule__grid { grid-template-columns: 1fr; }\n    .sr-ministries__grid { grid-template-columns: 1fr 1fr; gap: 20px; }\n    .sr-showcase__grid { grid-template-columns: 1fr 1fr; gap: 12px; }\n    .sr-showcase__item--tall img { min-height: 240px; }\n    .sr-event-item { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }\n    .sr-cta__actions { flex-direction: column; align-items: center; }\n    .sr-btn { width: 100%; max-width: 300px; justify-content: center; }\n    .sr-blockquote-card { grid-template-columns: 1fr; padding: 32px 24px; }\n    .sr-blockquote-card__bar { height: 4px; width: 100%; border-radius: 3px; margin-bottom: 24px; }\n    .sr-blockquote-card__content { padding-left: 0; }\n  }\n\n  @media (max-width: 480px) {\n    .sr-main-wrap { font-size: 16px; }\n    .sr-container { padding: 0 18px; }\n    .sr-section { padding: 50px 0; }\n    .sr-hero { padding: 70px 0 50px; min-height: 85vh; }\n    .sr-hero__actions { flex-direction: column; align-items: center; }\n    .sr-about__stats { grid-template-columns: 1fr; text-align: center; }\n    .sr-about__stat-number { font-size: 1.8rem; }\n    .sr-ministries__grid { grid-template-columns: 1fr; }\n    .sr-showcase__grid { grid-template-columns: 1fr; }\n    .sr-showcase__item--tall img,\n    .sr-showcase__item--normal img { min-height: 220px; height: 220px; }\n    .sr-schedule__card { padding: 28px 24px; }\n    .sr-contact__item { padding: 20px; gap: 16px; }\n  }\n<\/style>\n\n<!-- ==================== MAIN WRAPPER ==================== -->\n<div class=\"sr-main-wrap\">\n\n  <!-- HERO -->\n  <section class=\"sr-hero sr-section\" id=\"home\">\n    <div class=\"sr-hero__bg\">\n      <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/516395843_711090325032810_1387084905495995987_n-1.jpg\" alt=\"San Roque Mission Center Church\">\n    <\/div>\n    <div class=\"sr-hero__overlay\"><\/div>\n    <div class=\"sr-hero__mesh\"><\/div>\n\n    <div class=\"sr-hero__content\">\n      <div class=\"sr-hero__cross\">\n        <span class=\"material-symbols-outlined\">church<\/span>\n      <\/div>\n      <p class=\"sr-hero__pretitle\">Welcome to<\/p>\n      <h1 class=\"sr-heading-xl sr-hero__title\">San Roque<br>Mission Center<\/h1>\n      <p class=\"sr-hero__subtitle\">A place of faith, community, and spiritual growth \u2014<br>serving the faithful in the heart of Quezon Province.<\/p>\n      <p class=\"sr-hero__location\">\n        <span class=\"material-symbols-outlined\">location_on<\/span>\n        Agro, Catanauan, Quezon Province\n      <\/p>\n      <div class=\"sr-hero__actions\">\n        <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/schedules\" class=\"sr-btn sr-btn--gold\">\n          Mass Schedule\n          <span class=\"material-symbols-outlined\">arrow_forward<\/span>\n        <\/a>\n        <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/contact-us\" class=\"sr-btn sr-btn--outline\">\n          Visit Us\n          <span class=\"material-symbols-outlined\">directions<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n  <\/section>\n\n  <!-- MARQUEE 1 -->\n  <div class=\"sr-marquee sr-marquee--dark\">\n    <div class=\"sr-marquee__track\">\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Faith<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">church<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Hope<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">favorite<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Love<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">auto_awesome<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Community<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">groups<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Service<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">volunteer_activism<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Prayer<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">diversity_3<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Faith<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">church<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Hope<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">favorite<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Love<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">auto_awesome<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Community<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">groups<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Service<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">volunteer_activism<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Prayer<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">diversity_3<\/span><\/span><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ABOUT -->\n  <section class=\"sr-about sr-section\" id=\"about\">\n    <div class=\"sr-container\">\n      <div class=\"sr-about__grid\">\n        <div class=\"sr-about__image-wrap sr-reveal\">\n          <div class=\"sr-about__image-accent\"><\/div>\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/669586525_929884123153428_8576901366994686408_n.jpg\" alt=\"San Roque Mission Center Community\">\n        <\/div>\n        <div class=\"sr-about__text sr-reveal sr-reveal--delay-1\">\n          <span class=\"sr-label\">Our Mission<\/span>\n          <h2 class=\"sr-heading-lg\">Rooted in Faith,<br>Growing in Love<\/h2>\n          <p>San Roque Mission Center has been a beacon of hope and spiritual nourishment for the community of Agro, Catanauan. Guided by the teachings of Christ and the intercession of our patron saint, we strive to build a community of love, service, and unwavering faith.<\/p>\n          <p>Our mission center serves as a gathering place for worship, catechesis, and community outreach \u2014 bringing the Gospel to life in the hearts of every parishioner.<\/p>\n          <div class=\"sr-about__stats\">\n            <div>\n              <div class=\"sr-about__stat-number\">35+<\/div>\n              <div class=\"sr-about__stat-label\">Years of Service<\/div>\n            <\/div>\n            <div>\n              <div class=\"sr-about__stat-number\">500+<\/div>\n              <div class=\"sr-about__stat-label\">Parishioners<\/div>\n            <\/div>\n            <div>\n              <div class=\"sr-about__stat-number\">12<\/div>\n              <div class=\"sr-about__stat-label\">Ministries<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- PULLQUOTE -->\n  <section class=\"sr-pullquote sr-section\">\n    <div class=\"sr-pullquote__mesh\"><\/div>\n    <div class=\"sr-container\">\n      <div class=\"sr-pullquote__inner sr-reveal\">\n        <div class=\"sr-pullquote__icon\">\n          <span class=\"material-symbols-outlined\">format_quote<\/span>\n        <\/div>\n        <p class=\"sr-pullquote__quote\">\n          For where two or three gather in my name, there am I with them.\n        <\/p>\n        <div class=\"sr-pullquote__divider\"><\/div>\n        <cite class=\"sr-pullquote__cite\">\n          Matthew 18:20\n          <span>Holy Bible<\/span>\n        <\/cite>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- MASS SCHEDULE -->\n  <section class=\"sr-schedule sr-section\" id=\"schedule\">\n    <div class=\"sr-schedule__mesh\"><\/div>\n    <div class=\"sr-container\">\n      <div class=\"sr-schedule__header sr-reveal\">\n        <span class=\"sr-label\">Worship With Us<\/span>\n        <h2 class=\"sr-heading-lg sr-heading-lg--light\">Mass Schedule<\/h2>\n        <p class=\"sr-subheading\">Join us in celebrating the Holy Eucharist and grow deeper in your relationship with God.<\/p>\n      <\/div>\n\n      <div class=\"sr-schedule__grid\">\n        <div class=\"sr-schedule__card sr-reveal sr-reveal--delay-1\">\n          <div class=\"sr-schedule__card-icon\">\n            <span class=\"material-symbols-outlined\">wb_sunny<\/span>\n          <\/div>\n          <h3>Sunday Mass<\/h3>\n          <ul class=\"sr-schedule__list\">\n            <li><span>First Mass<\/span><span class=\"time\">6:00 AM<\/span><\/li>\n            <li><span>Second Mass<\/span><span class=\"time\">8:00 AM<\/span><\/li>\n            <li><span>Third Mass<\/span><span class=\"time\">10:00 AM<\/span><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"sr-schedule__card sr-reveal sr-reveal--delay-2\">\n          <div class=\"sr-schedule__card-icon\">\n            <span class=\"material-symbols-outlined\">calendar_month<\/span>\n          <\/div>\n          <h3>Weekday Mass<\/h3>\n          <ul class=\"sr-schedule__list\">\n            <li><span>Monday \u2014 Friday<\/span><span class=\"time\">6:00 AM<\/span><\/li>\n            <li><span>Saturday<\/span><span class=\"time\">7:00 AM<\/span><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"sr-schedule__card sr-reveal sr-reveal--delay-3\">\n          <div class=\"sr-schedule__card-icon\">\n            <span class=\"material-symbols-outlined\">auto_awesome<\/span>\n          <\/div>\n          <h3>Special Devotions<\/h3>\n          <ul class=\"sr-schedule__list\">\n            <li><span>Holy Rosary<\/span><span class=\"time\">Before Mass<\/span><\/li>\n            <li><span>First Friday Adoration<\/span><span class=\"time\">5:00 PM<\/span><\/li>\n            <li><span>Confession<\/span><span class=\"time\">Sat 4:00 PM<\/span><\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- MARQUEE 2 -->\n  <div class=\"sr-marquee sr-marquee--gold\">\n    <div class=\"sr-marquee__track\">\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">San Roque Mission Center<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">cross<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Agro, Catanauan<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">location_on<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Quezon Province<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">public<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">One Faith, One Family<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">handshake<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">San Roque Mission Center<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">cross<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Agro, Catanauan<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">location_on<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">Quezon Province<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">public<\/span><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__text\">One Faith, One Family<\/span><span class=\"sr-marquee__dot\"><\/span><\/div>\n      <div class=\"sr-marquee__item\"><span class=\"sr-marquee__icon\"><span class=\"material-symbols-outlined\">handshake<\/span><\/span><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- GALLERY -->\n  <section class=\"sr-showcase sr-section\" id=\"gallery\">\n    <div class=\"sr-container\">\n      <div class=\"sr-showcase__header sr-reveal\">\n        <span class=\"sr-label\">Gallery<\/span>\n        <h2 class=\"sr-heading-lg\">Moments of Grace<\/h2>\n        <p class=\"sr-subheading\" style=\"margin: 0 auto;\">Glimpses of our community&#8217;s life in faith, worship, and fellowship.<\/p>\n      <\/div>\n\n      <div class=\"sr-showcase__grid\">\n        <div class=\"sr-showcase__item sr-showcase__item--tall sr-reveal\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/533963586_743804441761398_6466860949269312440_n.jpg\" alt=\"Church Interior\">\n          <span class=\"sr-showcase__item-label\">Our Sacred Space<\/span>\n        <\/div>\n        <div class=\"sr-showcase__item sr-showcase__item--normal sr-reveal sr-reveal--delay-1\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/683627613_947404178068089_1248569424609744407_n.jpg\" alt=\"Community Prayer\">\n          <span class=\"sr-showcase__item-label\">Community Prayer<\/span>\n        <\/div>\n        <div class=\"sr-showcase__item sr-showcase__item--normal sr-reveal sr-reveal--delay-2\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/685856679_948440661297774_861034215692253874_n.jpg\" alt=\"Fellowship Event\">\n          <span class=\"sr-showcase__item-label\">Fellowship Events<\/span>\n        <\/div>\n        <div class=\"sr-showcase__item sr-showcase__item--normal sr-reveal sr-reveal--delay-1\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/535055619_744333168375192_5847725268510711937_n.jpg\" alt=\"Feast Day Celebration\">\n          <span class=\"sr-showcase__item-label\">Feast Day Celebration<\/span>\n        <\/div>\n        <div class=\"sr-showcase__item sr-showcase__item--normal sr-reveal sr-reveal--delay-2\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/687018608_948441247964382_1833750321265930294_n.jpg\" alt=\"Youth Ministry\">\n          <span class=\"sr-showcase__item-label\">Youth Ministry<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- BLOCKQUOTE -->\n  <section class=\"sr-blockquote-section sr-section\">\n    <div class=\"sr-container\">\n      <div class=\"sr-blockquote-card sr-reveal\">\n        <div class=\"sr-blockquote-card__bar\"><\/div>\n        <div class=\"sr-blockquote-card__content\">\n          <blockquote>\n            The Church is not a museum of saints, but a hospital for sinners. We welcome all who seek God&#8217;s mercy and love \u2014 no matter where they are in their journey of faith.\n          <\/blockquote>\n          <div class=\"sr-blockquote-card__footer\">\n            <div class=\"sr-blockquote-card__avatar\">\n              <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/ChatGPT-Image-Jun-11-2026-08_51_32-AM.png\" alt=\"Parish Priest\">\n            <\/div>\n            <div class=\"sr-blockquote-card__meta\">\n              <cite>Rev. Fr. Renato C. Baldovino Jr.<\/cite>\n              <span>Parish Priest, San Roque Mission Center<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- MINISTRIES -->\n  <section class=\"sr-ministries sr-section\" id=\"ministries\">\n    <div class=\"sr-container\">\n      <div class=\"sr-ministries__header sr-reveal\">\n        <span class=\"sr-label\">Serve the Lord<\/span>\n        <h2 class=\"sr-heading-lg\">Our Ministries<\/h2>\n        <p class=\"sr-subheading\">Discover the many ways you can use your gifts to serve God and our community.<\/p>\n      <\/div>\n\n      <div class=\"sr-ministries__grid\">\n        <div class=\"sr-ministry-card sr-reveal sr-reveal--delay-1\">\n          <div class=\"sr-ministry-card__icon\"><span class=\"material-symbols-outlined\">groups<\/span><\/div>\n          <h3>Lectors &#038; Commentators<\/h3>\n          <p>Proclaim the Word of God with clarity and devotion during liturgical celebrations.<\/p>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/about-us\" class=\"sr-ministry-card__link\">Learn More <span class=\"material-symbols-outlined\">arrow_forward<\/span><\/a>\n        <\/div>\n        <div class=\"sr-ministry-card sr-reveal sr-reveal--delay-2\">\n          <div class=\"sr-ministry-card__icon\"><span class=\"material-symbols-outlined\">music_note<\/span><\/div>\n          <h3>Music Ministry<\/h3>\n          <p>Lead the congregation in praise and worship through sacred music and hymns.<\/p>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/about-us\" class=\"sr-ministry-card__link\">Learn More <span class=\"material-symbols-outlined\">arrow_forward<\/span><\/a>\n        <\/div>\n        <div class=\"sr-ministry-card sr-reveal sr-reveal--delay-3\">\n          <div class=\"sr-ministry-card__icon\"><span class=\"material-symbols-outlined\">volunteer_activism<\/span><\/div>\n          <h3>Social Services<\/h3>\n          <p>Extend Christ&#8217;s love through outreach programs, feeding missions, and community aid.<\/p>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/about-us\" class=\"sr-ministry-card__link\">Learn More <span class=\"material-symbols-outlined\">arrow_forward<\/span><\/a>\n        <\/div>\n        <div class=\"sr-ministry-card sr-reveal sr-reveal--delay-4\">\n          <div class=\"sr-ministry-card__icon\"><span class=\"material-symbols-outlined\">diversity_3<\/span><\/div>\n          <h3>Youth Ministry<\/h3>\n          <p>Nurture the faith of the young through catechesis, retreats, and youth fellowships.<\/p>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/about-us\" class=\"sr-ministry-card__link\">Learn More <span class=\"material-symbols-outlined\">arrow_forward<\/span><\/a>\n        <\/div>\n        <div class=\"sr-ministry-card sr-reveal sr-reveal--delay-1\">\n          <div class=\"sr-ministry-card__icon\"><span class=\"material-symbols-outlined\">favorite<\/span><\/div>\n          <h3>Altar Servers<\/h3>\n          <p>Assist the priest during Holy Mass and liturgical celebrations with reverence and care.<\/p>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/about-us\" class=\"sr-ministry-card__link\">Learn More <span class=\"material-symbols-outlined\">arrow_forward<\/span><\/a>\n        <\/div>\n        <div class=\"sr-ministry-card sr-reveal sr-reveal--delay-2\">\n          <div class=\"sr-ministry-card__icon\"><span class=\"material-symbols-outlined\">local_florist<\/span><\/div>\n          <h3>Women&#8217;s League<\/h3>\n          <p>Empower women of faith through prayer, formation, and community-building activities.<\/p>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/about-us\" class=\"sr-ministry-card__link\">Learn More <span class=\"material-symbols-outlined\">arrow_forward<\/span><\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- EVENTS -->\n  <section class=\"sr-events sr-section\" id=\"events\">\n    <div class=\"sr-events__mesh\"><\/div>\n    <div class=\"sr-container\">\n      <div class=\"sr-events__header sr-reveal\">\n        <span class=\"sr-label\">Upcoming<\/span>\n        <h2 class=\"sr-heading-lg sr-heading-lg--light\">Parish Events<\/h2>\n        <p class=\"sr-subheading\">Mark your calendars and be part of these blessed gatherings.<\/p>\n      <\/div>\n\n      <div class=\"sr-events__list\">\n        <div class=\"sr-event-item sr-reveal sr-reveal--delay-1\">\n          <div class=\"sr-event-item__date\">\n            <span class=\"sr-event-item__date-month\">Aug<\/span>\n            <span class=\"sr-event-item__date-day\">16<\/span>\n          <\/div>\n          <div class=\"sr-event-item__info\">\n            <h3>Feast of San Roque<\/h3>\n            <p><span class=\"material-symbols-outlined\">schedule<\/span> 6:00 AM \u2014 Grand Fiesta Mass &amp; Procession<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"sr-event-item sr-reveal sr-reveal--delay-2\">\n          <div class=\"sr-event-item__date\">\n            <span class=\"sr-event-item__date-month\">Sep<\/span>\n            <span class=\"sr-event-item__date-day\">08<\/span>\n          <\/div>\n          <div class=\"sr-event-item__info\">\n            <h3>Parish Recollection<\/h3>\n            <p><span class=\"material-symbols-outlined\">schedule<\/span> 8:00 AM \u2014 4:00 PM at the Mission Center Hall<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"sr-event-item sr-reveal sr-reveal--delay-3\">\n          <div class=\"sr-event-item__date\">\n            <span class=\"sr-event-item__date-month\">Oct<\/span>\n            <span class=\"sr-event-item__date-day\">04<\/span>\n          <\/div>\n          <div class=\"sr-event-item__info\">\n            <h3>Rosary Month Celebration<\/h3>\n            <p><span class=\"material-symbols-outlined\">schedule<\/span> Daily 5:30 PM \u2014 Living Rosary &amp; Marian Procession<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"sr-event-item sr-reveal sr-reveal--delay-4\">\n          <div class=\"sr-event-item__date\">\n            <span class=\"sr-event-item__date-month\">Dec<\/span>\n            <span class=\"sr-event-item__date-day\">16<\/span>\n          <\/div>\n          <div class=\"sr-event-item__info\">\n            <h3>Simbang Gabi (Misa de Gallo)<\/h3>\n            <p><span class=\"material-symbols-outlined\">schedule<\/span> 4:00 AM \u2014 Nine-day Novena Mass before Christmas<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CTA -->\n  <section class=\"sr-cta sr-section\">\n    <div class=\"sr-cta__bg\">\n      <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/632326496_887532984055209_5925497084482206078_n.jpg\" alt=\"Church Community\">\n    <\/div>\n    <div class=\"sr-cta__overlay\"><\/div>\n    <div class=\"sr-container\">\n      <div class=\"sr-cta__content\">\n        <span class=\"sr-label\">Be Part of Our Family<\/span>\n        <h2 class=\"sr-heading-lg sr-heading-lg--light\">Come and Experience<br>God&#8217;s Love<\/h2>\n        <p>Whether you are a lifelong parishioner or visiting for the first time, there is a place for you at San Roque Mission Center. Join our growing family and deepen your faith journey.<\/p>\n        <div class=\"sr-cta__actions\">\n          <a href=\"#contact\" class=\"sr-btn sr-btn--gold\">\n            Get in Touch\n            <span class=\"material-symbols-outlined\">mail<\/span>\n          <\/a>\n          <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\/\" class=\"sr-btn sr-btn--outline\">\n            Join a Ministry\n            <span class=\"material-symbols-outlined\">handshake<\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CONTACT -->\n  <section class=\"sr-contact sr-section\" id=\"contact\">\n    <div class=\"sr-container\">\n      <div class=\"sr-contact__header sr-reveal\">\n        <span class=\"sr-label\">Reach Out<\/span>\n        <h2 class=\"sr-heading-lg\">Visit &amp; Contact Us<\/h2>\n        <p class=\"sr-subheading\">We would love to hear from you. Come visit or reach out through any of the channels below.<\/p>\n      <\/div>\n\n      <div class=\"sr-contact__grid\">\n        <div class=\"sr-contact__map sr-reveal\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/516395843_711090325032810_1387084905495995987_n.jpg\" alt=\"San Roque Mission Center Location Map\">\n        <\/div>\n\n        <div class=\"sr-contact__info\">\n          <div class=\"sr-contact__item sr-reveal sr-reveal--delay-1\">\n            <div class=\"sr-contact__item-icon\"><span class=\"material-symbols-outlined\">location_on<\/span><\/div>\n            <div class=\"sr-contact__item-text\">\n              <h4>Address<\/h4>\n              <p>San Roque Mission Center<br>Agro, Catanauan, Quezon Province<br>Philippines<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"sr-contact__item sr-reveal sr-reveal--delay-2\">\n            <div class=\"sr-contact__item-icon\"><span class=\"material-symbols-outlined\">call<\/span><\/div>\n            <div class=\"sr-contact__item-text\">\n              <h4>Phone<\/h4>\n              <p><a href=\"tel:+639123456789\">+63 912 345 6789<\/a><\/p>\n            <\/div>\n          <\/div>\n          <div class=\"sr-contact__item sr-reveal sr-reveal--delay-3\">\n            <div class=\"sr-contact__item-icon\"><span class=\"material-symbols-outlined\">mail<\/span><\/div>\n            <div class=\"sr-contact__item-text\">\n              <h4>Email<\/h4>\n              <p><a href=\"mailto:agrosanroque@gmail.com\">agrosanroque@gmail.com<\/a><\/p>\n            <\/div>\n          <\/div>\n          <div class=\"sr-contact__item sr-reveal sr-reveal--delay-4\">\n            <div class=\"sr-contact__item-icon\"><span class=\"material-symbols-outlined\">schedule<\/span><\/div>\n            <div class=\"sr-contact__item-text\">\n              <h4>Office Hours<\/h4>\n              <p>Monday \u2014 Saturday<br>8:00 AM \u2014 5:00 PM<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* ---- Scroll Reveal ---- *\/\n  function revealOnScroll() {\n    var reveals = document.querySelectorAll('.sr-reveal');\n    var windowHeight = window.innerHeight;\n    for (var i = 0; i < reveals.length; i++) {\n      var elementTop = reveals[i].getBoundingClientRect().top;\n      if (elementTop < windowHeight - 100) {\n        reveals[i].classList.add('is-visible');\n      }\n    }\n  }\n\n  \/* ---- Smooth anchor scrolling (scoped) ---- *\/\n  document.querySelectorAll('.sr-main-wrap a[href^=\"#\"]').forEach(function (anchor) {\n    anchor.addEventListener('click', function (e) {\n      var targetId = this.getAttribute('href');\n      if (targetId === '#') return;\n      var target = document.querySelector(targetId);\n      if (target) {\n        e.preventDefault();\n        window.scrollTo({\n          top: target.getBoundingClientRect().top + window.pageYOffset,\n          behavior: 'smooth'\n        });\n      }\n    });\n  });\n\n  \/* ---- Parallax hero ---- *\/\n  function parallaxHero() {\n    var hero = document.querySelector('.sr-hero__bg img');\n    if (!hero) return;\n    var scrolled = window.pageYOffset;\n    var heroSection = document.querySelector('.sr-hero');\n    if (!heroSection) return;\n    if (scrolled < heroSection.offsetHeight) {\n      hero.style.transform = 'translateY(' + (scrolled * 0.25) + 'px) scale(1.05)';\n    }\n  }\n\n  window.addEventListener('scroll', function () {\n    revealOnScroll();\n    parallaxHero();\n  }, { passive: true });\n\n  window.addEventListener('resize', revealOnScroll, { passive: true });\n\n  revealOnScroll();\n  parallaxHero();\n})();\n<\/script>\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-f40d36b0 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\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,400;0,500;0,600;0,700;1,400;1,500&#038;family=DM+Sans:wght@400;500;600;700&#038;family=Playfair+Display:wght@700;800;900&#038;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0\" \/>\n\n<style>\n  \/* ========================================\n     CSS CUSTOM PROPERTIES (shared system)\n  ======================================== *\/\n  :root {\n    --gold: #EFD34A;\n    --gold-light: #f5e27a;\n    --gold-dark: #c9a820;\n    --gold-soft: #f8edbe;\n    --olive: #4B4E3A;\n    --olive-light: #6b6f54;\n    --olive-dark: #2e3024;\n    --olive-deeper: #1a1c14;\n    --bg-cream: #faf8f0;\n    --bg-warm: #f5f2e6;\n    --bg-card: #ffffff;\n    --text-body: #3a3c30;\n    --text-muted: #7a7c6e;\n    --shadow-soft: 0 4px 20px rgba(75, 78, 58, 0.08);\n    --shadow-medium: 0 8px 40px rgba(75, 78, 58, 0.12);\n    --shadow-strong: 0 16px 60px rgba(75, 78, 58, 0.18);\n    --radius-sm: 8px;\n    --radius-md: 14px;\n    --radius-lg: 22px;\n    --radius-xl: 32px;\n    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  \/* ========================================\n     RESET & BASE\n  ======================================== *\/\n  .srmc-updates-section *,\n  .srmc-updates-section *::before,\n  .srmc-updates-section *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .srmc-updates-section {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 16px;\n    line-height: 1.7;\n    color: var(--text-body);\n    background: var(--bg-warm);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    width: 100%;\n    overflow-x: hidden;\n    padding: 80px 0 72px;\n    position: relative;\n  }\n\n  .srmc-updates-section a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .srmc-updates-inner {\n    width: 100%;\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* ========================================\n     SECTION HEADER\n  ======================================== *\/\n  .srmc-updates-header {\n    text-align: center;\n    margin-bottom: 48px;\n  }\n\n  .srmc-updates-eyebrow {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 5px;\n    color: var(--gold-dark);\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n  }\n\n  .srmc-updates-eyebrow::before,\n  .srmc-updates-eyebrow::after {\n    content: '';\n    display: block;\n    width: 32px;\n    height: 1.5px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n  }\n\n  .srmc-updates-title {\n    font-family: 'Playfair Display', serif;\n    font-weight: 900;\n    font-size: clamp(28px, 5vw, 48px);\n    line-height: 1.1;\n    color: var(--olive-dark);\n    margin-bottom: 16px;\n  }\n\n  .srmc-updates-title em {\n    font-style: italic;\n    background: linear-gradient(135deg, var(--gold-dark), var(--gold));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  .srmc-updates-desc {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 18px;\n    font-style: italic;\n    color: var(--text-muted);\n    line-height: 1.7;\n    max-width: 560px;\n    margin: 0 auto;\n  }\n\n  \/* ========================================\n     FILTER TABS\n  ======================================== *\/\n  .srmc-updates-tabs-wrap {\n    display: flex;\n    justify-content: center;\n    margin-bottom: 40px;\n  }\n\n  .srmc-updates-tabs {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    justify-content: center;\n  }\n\n  .srmc-updates-tab {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    padding: 10px 24px;\n    border-radius: 100px;\n    cursor: pointer;\n    border: 2px solid rgba(75, 78, 58, 0.12);\n    background: var(--bg-card);\n    color: var(--text-muted);\n    transition: all var(--transition-smooth);\n    white-space: nowrap;\n  }\n\n  .srmc-updates-tab:hover {\n    border-color: var(--gold);\n    color: var(--olive-dark);\n    background: rgba(239, 211, 74, 0.06);\n    transform: translateY(-2px);\n  }\n\n  .srmc-updates-tab.active {\n    background: var(--olive);\n    color: var(--gold-soft);\n    border-color: var(--olive);\n    box-shadow: 0 4px 20px rgba(75, 78, 58, 0.25);\n    transform: translateY(-1px);\n  }\n\n  .srmc-updates-tab.active:hover {\n    background: var(--olive-dark);\n    border-color: var(--olive-dark);\n  }\n\n  .srmc-updates-tab .material-symbols-rounded {\n    font-size: 17px;\n  }\n\n  \/* ========================================\n     CARDS GRID\n  ======================================== *\/\n  .srmc-updates-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 22px;\n    min-height: 200px;\n  }\n\n  .srmc-update-card {\n    background: var(--bg-card);\n    border: 1px solid rgba(75, 78, 58, 0.06);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    box-shadow: var(--shadow-soft);\n    transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);\n    position: relative;\n    opacity: 0;\n  }\n\n  .srmc-update-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 5px;\n    height: 0;\n    background: linear-gradient(180deg, var(--gold), var(--gold-light));\n    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    z-index: 2;\n    border-radius: 5px 0 0 5px;\n  }\n\n  .srmc-update-card:hover::before {\n    height: 100%;\n  }\n\n  .srmc-update-card:hover {\n    box-shadow: var(--shadow-medium);\n    transform: translateY(-4px);\n  }\n\n  .srmc-update-card a {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  \/* Card Image *\/\n  .srmc-update-card-img {\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    background: linear-gradient(135deg, rgba(239, 211, 74, 0.06), rgba(75, 78, 58, 0.04));\n    border-bottom: 1px solid rgba(75, 78, 58, 0.06);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .srmc-update-card-img img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  .srmc-update-card:hover .srmc-update-card-img img {\n    transform: scale(1.06);\n  }\n\n  .srmc-update-card-img .material-symbols-rounded {\n    font-size: 36px;\n    color: rgba(239, 211, 74, 0.2);\n  }\n\n  .srmc-update-card-cat {\n    position: absolute;\n    top: 14px;\n    left: 14px;\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    background: rgba(250, 248, 240, 0.95);\n    color: var(--gold-dark);\n    border: 1px solid rgba(239, 211, 74, 0.25);\n    padding: 5px 12px;\n    border-radius: 100px;\n    font-family: 'DM Sans', sans-serif;\n    backdrop-filter: blur(8px);\n  }\n\n  \/* Card Body *\/\n  .srmc-update-card-body {\n    padding: 24px 28px;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .srmc-update-card-date {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n  }\n\n  .srmc-update-card-date .material-symbols-rounded {\n    font-size: 16px;\n    color: var(--gold);\n  }\n\n  .srmc-update-card-title {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 18px;\n    color: var(--olive-dark);\n    line-height: 1.35;\n    margin-bottom: 10px;\n    flex: 1;\n    transition: color var(--transition-fast);\n  }\n\n  .srmc-update-card:hover .srmc-update-card-title {\n    color: var(--gold-dark);\n  }\n\n  .srmc-update-card-excerpt {\n    font-size: 14px;\n    color: var(--text-muted);\n    line-height: 1.7;\n  }\n\n  \/* ========================================\n     PAGINATION\n  ======================================== *\/\n  .srmc-updates-pagination {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    margin-top: 44px;\n    flex-wrap: wrap;\n  }\n\n  .srmc-page-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 42px;\n    height: 42px;\n    padding: 0 14px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-muted);\n    background: var(--bg-card);\n    border: 1.5px solid rgba(75, 78, 58, 0.1);\n    border-radius: 100px;\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n  }\n\n  .srmc-page-btn:hover:not(.disabled):not(.active) {\n    color: var(--gold-dark);\n    border-color: var(--gold);\n    background: rgba(239, 211, 74, 0.06);\n    transform: translateY(-2px);\n  }\n\n  .srmc-page-btn.active {\n    color: var(--olive-dark);\n    background: var(--gold);\n    border-color: var(--gold);\n    box-shadow: 0 4px 16px rgba(239, 211, 74, 0.35);\n    cursor: default;\n    font-weight: 700;\n  }\n\n  .srmc-page-btn.disabled {\n    opacity: 0.3;\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .srmc-page-btn .material-symbols-rounded {\n    font-size: 20px;\n  }\n\n  \/* ========================================\n     FOOTER BAR\n  ======================================== *\/\n  .srmc-updates-footer {\n    margin-top: 24px;\n    background: var(--bg-card);\n    border: 1px solid rgba(75, 78, 58, 0.06);\n    border-radius: var(--radius-md);\n    padding: 18px 28px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    box-shadow: var(--shadow-soft);\n  }\n\n  .srmc-updates-count {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-muted);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .srmc-updates-count .material-symbols-rounded {\n    font-size: 18px;\n    color: var(--gold);\n  }\n\n  .srmc-updates-all-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--gold-dark);\n    border-bottom: 1.5px solid rgba(239, 211, 74, 0.35);\n    padding-bottom: 3px;\n    font-family: 'DM Sans', sans-serif;\n    transition: all var(--transition-smooth);\n  }\n\n  .srmc-updates-all-link:hover {\n    color: var(--olive-dark);\n    border-color: var(--olive-dark);\n  }\n\n  .srmc-updates-all-link .material-symbols-rounded {\n    font-size: 18px;\n    transition: transform var(--transition-bounce);\n  }\n\n  .srmc-updates-all-link:hover .material-symbols-rounded {\n    transform: translateX(3px);\n  }\n\n  \/* ========================================\n     LOADING \/ EMPTY STATES\n  ======================================== *\/\n  .srmc-updates-loading {\n    grid-column: 1 \/ -1;\n    padding: 60px 20px;\n    text-align: center;\n    color: var(--text-muted);\n    font-size: 14px;\n    font-weight: 500;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .srmc-updates-loading .material-symbols-rounded {\n    font-size: 32px;\n    color: var(--gold);\n    animation: srmc-spin 1.2s linear infinite;\n  }\n\n  @keyframes srmc-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  .srmc-updates-grid.is-loading {\n    opacity: 0.35;\n    pointer-events: none;\n    transition: opacity 0.25s;\n  }\n\n  \/* ========================================\n     SCROLL REVEAL\n  ======================================== *\/\n  .srmc-upd-reveal {\n    opacity: 0;\n    transform: translateY(28px);\n    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .srmc-upd-reveal.srmc-upd-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* ========================================\n     RESPONSIVE\n  ======================================== *\/\n  @media (max-width: 900px) {\n    .srmc-updates-section { padding: 56px 0; }\n    .srmc-updates-inner { padding: 0 20px; }\n    .srmc-updates-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }\n  }\n\n  @media (max-width: 540px) {\n    .srmc-updates-section { padding: 44px 0; }\n    .srmc-updates-grid { grid-template-columns: 1fr; gap: 16px; }\n    .srmc-updates-tabs { gap: 8px; }\n    .srmc-updates-tab { font-size: 12px; padding: 9px 18px; }\n    .srmc-updates-desc { font-size: 16px; }\n    .srmc-updates-footer { flex-direction: column; gap: 12px; text-align: center; }\n    .srmc-page-btn { min-width: 38px; height: 38px; font-size: 13px; }\n    .srmc-update-card-body { padding: 20px 22px; }\n  }\n<\/style>\n\n<section class=\"srmc-updates-section\">\n  <div class=\"srmc-updates-inner\">\n\n    <div class=\"srmc-updates-header srmc-upd-reveal\">\n      <p class=\"srmc-updates-eyebrow\">Parish News &amp; Announcements<\/p>\n      <h2 class=\"srmc-updates-title\">Hondagua Parish <em>Latest Updates<\/em><\/h2>\n      <p class=\"srmc-updates-desc\">Stay connected with the latest news, upcoming events, spiritual reflections, and important announcements from our beloved parish community.<\/p>\n    <\/div>\n\n    <div class=\"srmc-updates-tabs-wrap srmc-upd-reveal\">\n      <div class=\"srmc-updates-tabs\" id=\"srmcUpdatesTabs\"><\/div>\n    <\/div>\n\n    <div class=\"srmc-updates-grid srmc-upd-reveal\" id=\"srmcUpdatesGrid\">\n      <div class=\"srmc-updates-loading\">\n        <span class=\"material-symbols-rounded\">progress_activity<\/span>\n        Loading posts...\n      <\/div>\n    <\/div>\n\n    <div class=\"srmc-updates-pagination srmc-upd-reveal\" id=\"srmcUpdatesPagination\"><\/div>\n\n    <div class=\"srmc-updates-footer srmc-upd-reveal\">\n      <span class=\"srmc-updates-count\" id=\"srmcUpdatesCount\">\n        <span class=\"material-symbols-rounded\">article<\/span>\n      <\/span>\n      <a class=\"srmc-updates-all-link\" id=\"srmcUpdatesAllLink\" href=\"https:\/\/demo5.yinwoodweb.com\/agro\/updates\/\">\n        View All Posts\n        <span class=\"material-symbols-rounded\">arrow_forward<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function() {\n  'use strict';\n\n  var SITE_URL = 'https:\/\/demo5.yinwoodweb.com\/agro';\n  var API_URL  = SITE_URL + '\/wp-json\/wp\/v2';\n  var BLOG_URL = 'https:\/\/demo5.yinwoodweb.com\/agro\/updates\/';\n  var PER_PAGE = 6;\n\n  var grid    = document.getElementById('srmcUpdatesGrid');\n  var tabsEl  = document.getElementById('srmcUpdatesTabs');\n  var countEl = document.getElementById('srmcUpdatesCount');\n  var paginEl = document.getElementById('srmcUpdatesPagination');\n\n  var currentPage    = 1;\n  var totalPages     = 1;\n  var currentCatId   = '';\n  var currentCatSlug = '';\n\n  \/* Category icons mapping *\/\n  var catIcons = {\n    'All':             'home',\n    'Announcements':   'campaign',\n    'Events':          'event',\n    'News':            'newspaper',\n    'Spirituality':    'church',\n    'Community':       'groups',\n    'Youth':           'diversity_3',\n    'default':         'label'\n  };\n\n  function formatDate(str) {\n    return new Date(str).toLocaleDateString('en-PH', {\n      year: 'numeric', month: 'short', day: 'numeric'\n    });\n  }\n\n  function stripHtml(html) {\n    var div = document.createElement('div');\n    div.innerHTML = html;\n    return (div.textContent || div.innerText || '').trim();\n  }\n\n  function getCategory(embedded) {\n    var cat = 'General';\n    if (!embedded || !embedded['wp:term']) return cat;\n    var found = false;\n    embedded['wp:term'].forEach(function(group) {\n      if (found) return;\n      group.forEach(function(term) {\n        if (!found && term.taxonomy === 'category' && term.name) {\n          cat = term.name;\n          found = true;\n        }\n      });\n    });\n    return cat;\n  }\n\n  function getThumb(embedded, title) {\n    if (\n      embedded &&\n      embedded['wp:featuredmedia'] &&\n      embedded['wp:featuredmedia'][0] &&\n      embedded['wp:featuredmedia'][0].source_url\n    ) {\n      return '<img decoding=\"async\" src=\"' + embedded['wp:featuredmedia'][0].source_url + '\" alt=\"' + title + '\" loading=\"lazy\">';\n    }\n    return '<span class=\"material-symbols-rounded\">image<\/span>';\n  }\n\n  function getCatIcon(name) {\n    return catIcons[name] || catIcons['default'];\n  }\n\n  function render(posts) {\n    grid.innerHTML = '';\n    if (!posts || !posts.length) {\n      grid.innerHTML =\n        '<div class=\"srmc-updates-loading\">' +\n          '<span class=\"material-symbols-rounded\">inbox<\/span>' +\n          'No posts found.' +\n        '<\/div>';\n      countEl.innerHTML = '<span class=\"material-symbols-rounded\">article<\/span> 0 posts';\n      paginEl.innerHTML = '';\n      return;\n    }\n\n    posts.forEach(function(p, idx) {\n      var cat     = getCategory(p._embedded);\n      var thumb   = getThumb(p._embedded, p.title.rendered);\n      var excerpt = stripHtml(p.excerpt.rendered)\n                      .replace(\/(&hellip;|[\\u2026])\/g, '')\n                      .trim();\n      if (excerpt.length > 110) excerpt = excerpt.substring(0, 110) + '\\u2026';\n\n      var card = document.createElement('div');\n      card.className = 'srmc-update-card';\n      card.innerHTML =\n        '<a href=\"' + BLOG_URL + '\">' +\n          '<div class=\"srmc-update-card-img\">' +\n            thumb +\n            '<span class=\"srmc-update-card-cat\">' + cat + '<\/span>' +\n          '<\/div>' +\n          '<div class=\"srmc-update-card-body\">' +\n            '<div class=\"srmc-update-card-date\">' +\n              '<span class=\"material-symbols-rounded\">calendar_today<\/span>' +\n              formatDate(p.date) +\n            '<\/div>' +\n            '<h3 class=\"srmc-update-card-title\">' + p.title.rendered + '<\/h3>' +\n            '<p class=\"srmc-update-card-excerpt\">' + excerpt + '<\/p>' +\n          '<\/div>' +\n        '<\/a>';\n      grid.appendChild(card);\n\n      setTimeout(function() {\n        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n        card.style.opacity = '1';\n        card.style.transform = 'translateY(0)';\n      }, 60 + idx * 80);\n    });\n\n    countEl.innerHTML =\n      '<span class=\"material-symbols-rounded\">article<\/span> ' +\n      'Page ' + currentPage + ' of ' + totalPages +\n      ' \\u00B7 ' + posts.length + ' post' + (posts.length !== 1 ? 's' : '');\n  }\n\n  function renderPagination() {\n    paginEl.innerHTML = '';\n    if (totalPages <= 1) return;\n\n    \/* Prev *\/\n    var prevBtn = document.createElement('button');\n    prevBtn.className = 'srmc-page-btn' + (currentPage <= 1 ? ' disabled' : '');\n    prevBtn.innerHTML = '<span class=\"material-symbols-rounded\">chevron_left<\/span>';\n    prevBtn.title = 'Previous page';\n    if (currentPage > 1) {\n      prevBtn.onclick = function() { goToPage(currentPage - 1); };\n    }\n    paginEl.appendChild(prevBtn);\n\n    \/* Page numbers *\/\n    var pages = getPagesToShow(currentPage, totalPages);\n    pages.forEach(function(p) {\n      if (p === '...') {\n        var dots = document.createElement('span');\n        dots.className = 'srmc-page-btn disabled';\n        dots.textContent = '\\u2026';\n        dots.style.border = 'none';\n        dots.style.background = 'transparent';\n        paginEl.appendChild(dots);\n      } else {\n        var btn = document.createElement('button');\n        btn.className = 'srmc-page-btn' + (p === currentPage ? ' active' : '');\n        btn.textContent = p;\n        if (p !== currentPage) {\n          btn.onclick = (function(pg) {\n            return function() { goToPage(pg); };\n          })(p);\n        }\n        paginEl.appendChild(btn);\n      }\n    });\n\n    \/* Next *\/\n    var nextBtn = document.createElement('button');\n    nextBtn.className = 'srmc-page-btn' + (currentPage >= totalPages ? ' disabled' : '');\n    nextBtn.innerHTML = '<span class=\"material-symbols-rounded\">chevron_right<\/span>';\n    nextBtn.title = 'Next page';\n    if (currentPage < totalPages) {\n      nextBtn.onclick = function() { goToPage(currentPage + 1); };\n    }\n    paginEl.appendChild(nextBtn);\n  }\n\n  function getPagesToShow(current, total) {\n    var pages = [];\n    if (total <= 7) {\n      for (var i = 1; i <= total; i++) pages.push(i);\n      return pages;\n    }\n    pages.push(1);\n    if (current > 3) pages.push('...');\n    var start = Math.max(2, current - 1);\n    var end   = Math.min(total - 1, current + 1);\n    for (var j = start; j <= end; j++) pages.push(j);\n    if (current < total - 2) pages.push('...');\n    pages.push(total);\n    return pages;\n  }\n\n  function goToPage(page) {\n    if (page < 1 || page > totalPages || page === currentPage) return;\n    currentPage = page;\n    fetchPosts(currentCatId, currentCatSlug);\n    var section = document.querySelector('.srmc-updates-section');\n    if (section) {\n      var y = section.getBoundingClientRect().top + window.pageYOffset - 20;\n      window.scrollTo({ top: y, behavior: 'smooth' });\n    }\n  }\n\n  function setActiveTab(btn) {\n    tabsEl.querySelectorAll('.srmc-updates-tab').forEach(function(t) {\n      t.classList.remove('active');\n    });\n    btn.classList.add('active');\n  }\n\n  function fetchPosts(catId, catSlug) {\n    grid.classList.add('is-loading');\n    grid.innerHTML =\n      '<div class=\"srmc-updates-loading\">' +\n        '<span class=\"material-symbols-rounded\">progress_activity<\/span>' +\n        'Loading...' +\n      '<\/div>';\n    paginEl.innerHTML = '';\n\n    currentCatId   = catId || '';\n    currentCatSlug = catSlug || '';\n\n    var url = API_URL + '\/posts?per_page=' + PER_PAGE + '&page=' + currentPage + '&_embed=1&orderby=date&order=desc';\n    if (catId) { url += '&categories=' + catId; }\n\n    fetch(url)\n      .then(function(r) {\n        totalPages = parseInt(r.headers.get('X-WP-TotalPages')) || 1;\n        if (currentPage > totalPages && totalPages > 0) {\n          currentPage = totalPages;\n          return fetchPosts(currentCatId, currentCatSlug);\n        }\n        return r.json().then(function(posts) {\n          grid.classList.remove('is-loading');\n          render(posts);\n          renderPagination();\n        });\n      })\n      .catch(function() {\n        grid.classList.remove('is-loading');\n        grid.innerHTML =\n          '<div class=\"srmc-updates-loading\">' +\n            '<span class=\"material-symbols-rounded\">cloud_off<\/span>' +\n            'Could not load posts.' +\n          '<\/div>';\n      });\n  }\n\n  function buildTabs(categories) {\n    tabsEl.innerHTML = '';\n\n    \/* All tab *\/\n    var allBtn = document.createElement('button');\n    allBtn.className = 'srmc-updates-tab active';\n    allBtn.innerHTML =\n      '<span class=\"material-symbols-rounded\">' + catIcons['All'] + '<\/span>' +\n      'All';\n    allBtn.onclick = function() {\n      setActiveTab(allBtn);\n      currentPage = 1;\n      fetchPosts('', '');\n    };\n    tabsEl.appendChild(allBtn);\n\n    \/* Category tabs *\/\n    categories\n      .filter(function(c) { return c.slug !== 'uncategorized' && c.count > 0; })\n      .forEach(function(c) {\n        var btn = document.createElement('button');\n        btn.className = 'srmc-updates-tab';\n        btn.innerHTML =\n          '<span class=\"material-symbols-rounded\">' + getCatIcon(c.name) + '<\/span>' +\n          c.name;\n        btn.onclick = function() {\n          setActiveTab(btn);\n          currentPage = 1;\n          fetchPosts(c.id, c.slug);\n        };\n        tabsEl.appendChild(btn);\n      });\n  }\n\n  \/* Init *\/\n  fetch(API_URL + '\/categories?per_page=100&orderby=name&order=asc')\n    .then(function(r) { return r.json(); })\n    .then(function(cats) {\n      buildTabs(cats);\n      fetchPosts('', '');\n    })\n    .catch(function() {\n      tabsEl.innerHTML = '';\n      var allBtn = document.createElement('button');\n      allBtn.className = 'srmc-updates-tab active';\n      allBtn.innerHTML = '<span class=\"material-symbols-rounded\">home<\/span>All';\n      allBtn.onclick = function() { currentPage = 1; fetchPosts('', ''); };\n      tabsEl.appendChild(allBtn);\n      fetchPosts('', '');\n    });\n\n  \/* Scroll reveal *\/\n  function initReveal() {\n    var els = document.querySelectorAll('.srmc-upd-reveal');\n    if ('IntersectionObserver' in window) {\n      var observer = new IntersectionObserver(function(entries) {\n        entries.forEach(function(entry) {\n          if (entry.isIntersecting) {\n            entry.target.classList.add('srmc-upd-visible');\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { threshold: 0.06, rootMargin: '0px 0px -30px 0px' });\n      els.forEach(function(el) { observer.observe(el); });\n    } else {\n      els.forEach(function(el) { el.classList.add('srmc-upd-visible'); });\n    }\n  }\n\n  document.addEventListener('DOMContentLoaded', initReveal);\n})();\n<\/script><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>church Welcome to San RoqueMission Center A place of faith, community, and spiritual growth \u2014serving the faithful in the heart [&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":"@media only screen and (max-width: 767px) {\n.uagb-slider-container .swiper-button-prev, .uagb-slider-container .swiper-button-next, .uagb-slick-carousel button.slick-arrow {\n    display: none;\n}\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":"San Roque Mission Center - Agro, Catanauan, Quezon","description":"San Roque Mission Center is a mission priest located in Barangay Agro, Catanauan, Quezon Province.","facebook_image":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/san-roque-mission-center.png","twitter_image":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/YIN-WOOD-EVEREST-WEB-DEVELOPMENT.png"},"footnotes":""},"class_list":["post-20","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\/agro\/blog\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"church Welcome to San RoqueMission Center A place of faith, community, and spiritual growth \u2014serving the faithful in the heart [&hellip;]","_links":{"self":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":61,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages\/20\/revisions\/1510"}],"wp:attachment":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}