{"id":2734,"date":"2026-05-09T14:45:51","date_gmt":"2026-05-09T14:45:51","guid":{"rendered":"https:\/\/hodide.org\/?page_id=2734"},"modified":"2026-05-30T12:43:49","modified_gmt":"2026-05-30T12:43:49","slug":"home-pages-create","status":"publish","type":"page","link":"https:\/\/hodide.org\/","title":{"rendered":"Home page"},"content":{"rendered":"\n<style>\n    \/* 1. AGGRESSIVE GAP REMOVAL & REDUCED HEIGHT *\/\n    .pill-button-slider {\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        \n        \/* Pulls slider up to meet the navigation *\/\n        margin-top: -80px !important; \n        \n        width: 100vw;\n        height: 550px; \/* Reduced height for a sleeker look *\/\n        background: #000;\n        overflow: hidden;\n        font-family: 'Times New Roman', Times, serif; \n    }\n\n    .pill-button-slider-container {\n        padding-top: 0 !important;\n        margin-top: 0 !important;\n    }\n\n    .slide-wrapper {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        transition: opacity 1.5s ease-in-out;\n        z-index: 1;\n    }\n\n    .slide-wrapper.active {\n        opacity: 1;\n        z-index: 2;\n    }\n\n    \/* 2. FACE PROTECTION FOR SHORTER HEIGHT *\/\n    .slide-img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        \/* Focused higher (5%) to keep faces visible in the shorter frame *\/\n        object-position: center 5%; \n        display: block;\n        pointer-events: none; \n    }\n\n    \/* Bottom Shadow for Text Legibility *\/\n    .bottom-shadow {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 70%; \/* Slightly taller gradient to cover the smaller area *\/\n        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);\n        z-index: 3;\n        pointer-events: none;\n    }\n\n    \/* Centered & Lowered Text *\/\n    .caption-content {\n        position: absolute;\n        bottom: 40px; \/* Adjusted bottom spacing for reduced height *\/\n        left: 50%;\n        transform: translateX(-50%);\n        width: 90%;\n        max-width: 850px;\n        text-align: center;\n        z-index: 10;\n        color: #ffffff;\n    }\n\n    .caption-content h2 {\n        font-size: 2.4rem; \/* Slightly smaller for the shorter height *\/\n        text-transform: uppercase;\n        letter-spacing: 4px;\n        margin-bottom: 8px;\n        text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9);\n    }\n\n    .caption-content p {\n        font-family: 'Arial', sans-serif; \n        font-size: 1rem;\n        line-height: 1.4;\n        margin-bottom: 20px;\n        text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);\n    }\n\n    \/* 3. BLUE PILL BUTTON *\/\n    .pill-btn {\n        display: inline-block;\n        background-color: #1a3a8a; \/* Diocesan Blue *\/\n        color: #ffffff;\n        padding: 12px 45px;\n        text-decoration: none;\n        font-family: 'Arial', sans-serif;\n        font-size: 0.95rem;\n        font-weight: 600;\n        border-radius: 100px;\n        border: 2px solid #a51c30; \/* Diocesan Red Border *\/\n        transition: all 0.4s ease;\n        cursor: pointer;\n    }\n\n    .pill-btn:hover {\n        background-color: #a51c30; \/* Switch to Red on hover *\/\n        border-color: #ffffff;\n    }\n<\/style>\n\n\n\n<div class=\"pill-button-slider-container\">\n    <section class=\"pill-button-slider\">\n        <!-- Slide 1 -->\n        <div class=\"slide-wrapper active\">\n            <div class=\"bottom-shadow\"><\/div>\n            <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/Hod-crop.png\">\n            <div class=\"caption-content\"><br>\n              \n                <p>Education Stakeholders Association of Heads of Catholic Education Institutions Conference of 2025<\/p>\n                <!--<a href=\"https:\/\/hodide.org\/?p=3062\" class=\"pill-btn\">Discover More<\/a>-->\n            <\/div>\n        <\/div>\n\n        <!-- Slide 2 -->\n        <div class=\"slide-wrapper\">\n            <div class=\"bottom-shadow\"><\/div>\n            <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/T_MS0185-scaled.jpg\" class=\"slide-img\">\n            <div class=\"caption-content\">\n             \n                <p>Rt. Rev. Vincent Kirabo Commissioning The Association Of Heads Of Catholic Education Institutions (Acei) <\/p>\n                <!--<a href=\"#\" class=\"pill-btn\">Learn More<\/a>-->\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<script>\n    (function() {\n        let index = 0;\n        const slides = document.querySelectorAll('.slide-wrapper');\n        function nextSlide() {\n            slides[index].classList.remove('active');\n            index = (index + 1) % slides.length;\n            slides[index].classList.add('active');\n        }\n        setInterval(nextSlide, 9000); \n    })();\n<\/script>\n\n\n\n<style>\n    :root {\n        --diocesan-blue: #1a3a8a;\n        --diocesan-red: #a51c30;\n        --hover-blue: #2b59c3;\n        --text-color: #444444;\n        --page-side-margin: 5%; \/* Tight margins for maximum balance *\/\n    }\n\n    body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #ffffff; }\n\n    \/* --- BALANCED WRAPPER --- *\/\n    .secretary-section {\n        display: flex;\n        align-items: center; \/* This pulls the photo down to be perfectly in line with content *\/\n        justify-content: center;\n        gap: 60px;\n        padding: 80px var(--page-side-margin);\n        min-height: 60vh; \/* Ensures vertical prominence *\/\n    }\n\n    \/* --- IMAGE & IDENTITY SIDE --- *\/\n    .profile-column {\n        flex: 1;\n        text-align: center;\n        max-width: 450px;\n    }\n\n    .image-holder {\n        position: relative;\n        margin-bottom: 25px;\n    }\n\n    \/* Modern Blurred Red Accent behind image *\/\n    .image-holder::before {\n        content: \"\";\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        right: -10px;\n        bottom: -10px;\n        border: 2px solid var(--diocesan-red);\n        filter: blur(8px);\n        opacity: 0.3;\n        z-index: -1;\n    }\n\n    .profile-column img {\n        width: 100%;\n        display: block;\n        box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n        border-radius: 4px;\n    }\n\n    .profile-column h3 {\n        color: var(--diocesan-blue);\n        font-size: 1.5rem;\n        margin: 15px 0 5px 0;\n        font-weight: 700;\n    }\n\n    .profile-column p {\n        color: var(--diocesan-red);\n        text-transform: uppercase;\n        font-weight: 800;\n        font-size: 0.85rem;\n        letter-spacing: 1.5px;\n        margin: 0;\n    }\n\n    \/* --- CONTENT SIDE --- *\/\n    .content-column {\n        flex: 1.4;\n    }\n\n    .content-column h2 {\n        color: var(--diocesan-blue);\n        text-transform: uppercase;\n        font-size: 2rem;\n        margin-bottom: 25px;\n        border-bottom: 3px solid var(--diocesan-blue);\n        display: inline-block;\n        padding-bottom: 10px;\n    }\n\n    .justified-text {\n        text-align: justify; \/* Requested justified alignment *\/\n        line-height: 1.8;\n        color: var(--text-color);\n        font-size: 1.1rem;\n        margin-bottom: 40px;\n    }\n\n    \/* --- RED BUTTON WITH BLUE HOVER --- *\/\n    .btn-wrap {\n        display: flex;\n        justify-content: flex-start;\n    }\n\n    .action-button {\n        display: inline-block;\n        background-color: var(--diocesan-red);\n        color: #ffffff;\n        padding: 15px 40px;\n        text-decoration: none;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        border-radius: 4px;\n        transition: all 0.3s ease-in-out;\n        box-shadow: 0 5px 15px rgba(165, 28, 48, 0.2);\n    }\n\n    .action-button:hover {\n        background-color: var(--hover-blue);\n        transform: translateY(-3px);\n        box-shadow: 0 8px 20px rgba(43, 89, 195, 0.3);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 900px) {\n        .secretary-section { flex-direction: column; text-align: center; }\n        .btn-wrap { justify-content: center; }\n        .content-column h2 { border-bottom: none; }\n    }\n<\/style>\n\n\n\n    <section class=\"secretary-section\">\n        \n        <!-- LEFT: Portrait and Name Center-Aligned with Text -->\n        <div class=\"profile-column\">\n            <div class=\"image-holder\">\n                <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/T_MS1992-1.jpg\" alt=\"Rev. Fr. Mugisa Patrick\">\n            <\/div>\n            <h3>Rev. Fr. Mugisa Patrick<\/h3>\n            <p>Diocesan Education Secretary<\/p>\n        <\/div>\n\n        <!-- RIGHT: Message Body and Linked Button -->\n        <div class=\"content-column\">\n            <h2>Message From The Education Secretary<\/h2>\n            \n            <div class=\"justified-text\">\n                Greetings, We are thrilled to introduce the Department of Education (HODIDE), a vital part of Hoima Diocese, actively dedicated to providing education services in Mid-Western Uganda. Covering an expansive area of 17,200 Sq. Kilometres and serving a population of 2,037,325 people, Hoima Diocese comprises eight (8) districts, One (1) city, and one (1) Municipality, encompassing 47 Catholic Parishes from a Pastoral perspective. At the heart of our mission, the Diocese of Hoima plays a pivotal role in managing various educational institutions.\n            <\/div>\n\n            <div class=\"btn-wrap\">\n                <!-- Linked button with # as requested -->\n                <a href=\"https:\/\/hodide.org\/?page_id=2656\" class=\"action-button\">Read More<\/a>\n            <\/div>\n        <\/div>\n\n    <\/section>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<style>\n    :root {\n        --diocesan-blue: #1a3a8a;\n        --diocesan-red: #a51c30;\n        --hover-blue: #2b59c3;\n        --light-bg: #fdfdfd;\n        --section-margin: 5%; \/* Tight margins for layout balance *\/\n    }\n\n    .support-section {\n        padding: 80px var(--section-margin);\n        background-color: var(--light-bg);\n        text-align: center;\n        position: relative;\n    }\n\n    \/* --- THE RED LINE WITH CENTERED HEADING --- *\/\n    .heading-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 40px;\n    }\n\n    .heading-wrapper::before,\n    .heading-wrapper::after {\n        content: \"\";\n        flex: 1;\n        height: 2px;\n        background: var(--diocesan-red);\n    }\n\n    .support-heading {\n        padding: 0 30px;\n        color: var(--diocesan-blue);\n        font-size: 2.2rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        margin: 0;\n    }\n\n    \/* --- BALANCED CONTENT --- *\/\n    .support-content {\n        max-width: 900px;\n        margin: 0 auto 50px auto;\n        text-align: justify; \/* Justified for professional balance *\/\n        line-height: 1.8;\n        color: #444;\n        font-size: 1.15rem;\n    }\n\n    \/* --- RED BUTTON WITH BLUE HOVER --- *\/\n    .btn-container {\n        display: flex;\n        justify-content: center;\n    }\n\n    .support-button {\n        display: inline-block;\n        background-color: var(--diocesan-red);\n        color: #ffffff;\n        padding: 16px 50px;\n        text-decoration: none;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        border-radius: 4px;\n        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n        box-shadow: 0 4px 12px rgba(165, 28, 48, 0.2);\n    }\n\n    .support-button:hover {\n        background-color: var(--hover-blue);\n        transform: translateY(-3px);\n        box-shadow: 0 8px 20px rgba(43, 89, 195, 0.3);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 768px) {\n        .support-heading { font-size: 1.6rem; padding: 0 15px; }\n        .support-section { padding: 60px 8%; }\n    }\n<\/style>\n<\/head>\n<body>\n\n    <section class=\"support-section\">\n        \n        <!-- HEADER INTEGRATED INTO RED LINE -->\n        <div class=\"heading-wrapper\">\n            <h2 class=\"support-heading\">Support Us<\/h2>\n        <\/div>\n\n        <!-- BALANCED TEXT CONTENT -->\n        <div class=\"support-content\">\n            Your generous contributions play a vital role in enabling the Hoima Diocesan Department of Education (HODIDE) to continue its mission of delivering quality education across the region. By supporting our initiatives, you directly invest in the infrastructure, learning materials, and pastoral care that shape the future of over two million people in our community. Together, we can ensure that every institution under our management remains a beacon of excellence and hope for generations to come.\n        <\/div>\n\n        <!-- RED TO BLUE HOVER BUTTON -->\n        <div class=\"btn-container\">\n            <a href=\"https:\/\/hodide.org\/?page_id=3221\" class=\"support-button\">Donate<\/a>\n        <\/div>\n\n    <\/section>\n\n<\/body>\n<\/html>\n\n\n\n<style>\n    :root {\n        --diocesan-blue: #1a3a8a;\n        --diocesan-red: #a51c30;\n        --page-side-margin: 5%;\n        \/* ITEM WIDTH (280px) + MARGIN (40px) = 320px total per logo space *\/\n        --logo-step: 320px; \n    }\n\n    .partners-wrapper {\n        padding: 80px var(--page-side-margin);\n        background-color: #ffffff;\n        overflow: hidden;\n    }\n\n    .heading-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 60px;\n    }\n\n    .heading-container::before,\n    .heading-container::after {\n        content: \"\";\n        flex: 1;\n        height: 2px;\n        background: var(--diocesan-red);\n    }\n\n    .heading-container h2 {\n        padding: 0 30px;\n        color: var(--diocesan-blue);\n        font-size: 2.2rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        margin: 0;\n    }\n\n    \/* --- ENHANCED VIEWPORT (Removed heavy blurs to fix clarity) --- *\/\n    .logo-viewport {\n        position: relative;\n        width: 100%;\n        padding: 30px 0;\n        background: #fcfcfc;\n        border-top: 1px solid #eee;\n        border-bottom: 1px solid #eee;\n    }\n\n    .marquee-track {\n        display: flex;\n        \/* Width is auto-calculated based on content *\/\n        width: max-content; \n        \/* Number of unique logos (6) * Step (320px) = -1920px *\/\n        animation: seamlessScroll 25s linear infinite;\n        align-items: center;\n    }\n\n    .logo-viewport:hover .marquee-track {\n        animation-play-state: paused;\n    }\n\n    .logo-card {\n        width: 280px;\n        height: 140px;\n        margin: 0 20px; \/* This 20px on each side creates the 40px gap *\/\n        background: #ffffff;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 15px;\n        border: 1px solid #f0f0f0;\n        transition: transform 0.3s ease;\n    }\n\n    .logo-card img {\n        max-width: 210px;\n        max-height: 100px;\n        object-fit: contain;\n        display: block;\n    }\n\n    .logo-card:hover {\n        transform: translateY(-5px);\n        border-color: var(--diocesan-red);\n    }\n\n    \/* --- FIXED ANIMATION LOGIC --- \n       We translate exactly the width of the first set of logos \n       so the second set snaps perfectly into the starting position. \n    *\/\n    @keyframes seamlessScroll {\n        0% { transform: translateX(0); }\n        100% { transform: translateX(calc(var(--logo-step) * -6)); }\n    }\n\n    @media (max-width: 768px) {\n        .heading-container h2 { font-size: 1.6rem; }\n        .logo-card { width: 200px; height: 100px; }\n        @keyframes seamlessScroll {\n            100% { transform: translateX(calc(-240px * 6)); } \/* Adjust for mobile step *\/\n        }\n    }\n<\/style>\n\n\n\n    <section class=\"partners-wrapper\">\n        \n        <div class=\"heading-container\">\n            <h2>Our Partners<\/h2>\n        <\/div>\n\n        <div class=\"logo-viewport\">\n            <div class=\"marquee-track\">\n                \n                <!-- UNIQUE SET (6 Logos) -->\n               <div class=\"logo-card\">\n    <a href=\"https:\/\/www.manosunidas.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/manos.png\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/www.wvi.org\/uganda\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/worldvision-703x422-1.jpg\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/www.education.go.ug\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/MOOS.png\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/kcsonug.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/kcsoug_logo-1.jpg\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/www.unicef.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/download.png\" alt=\"Partner\">\n    <\/a><\/div>\n               \n                \n\n                <!-- IDENTICAL CLONE SET (Ensures no blank space during loop) -->\n                         <div class=\"logo-card\">\n    <a href=\"https:\/\/www.manosunidas.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/manos.png\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/www.wvi.org\/uganda\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/worldvision-703x422-1.jpg\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/www.education.go.ug\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/MOOS.png\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/kcsonug.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/kcsoug_logo-1.jpg\" alt=\"Partner\">\n    <\/a><\/div>\n<div class=\"logo-card\">\n    <a href=\"https:\/\/www.unicef.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/download.png\" alt=\"Partner\">\n    <\/a><\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/section>\n\n\n\n<div id=\"hodide-orbit-preloader\" style=\"\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    background: #ffffff;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 100000;\n    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.0s;\n\">\n    <style>\n        @keyframes orbitClockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n        @keyframes orbitCounter { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }\n    <\/style>\n\n    <div style=\"display: flex; flex-direction: column; align-items: center; font-family: 'Inter', 'Segoe UI', sans-serif;\">\n        <div style=\"position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px;\">\n            \n            <div style=\"\n                position: absolute;\n                width: 180px; height: 180px;\n                border: 3px solid transparent;\n                border-top-color: #11369b;\n                border-bottom-color: #11369b;\n                border-radius: 50%;\n                animation: orbitClockwise 2.5s linear infinite;\n            \"><\/div>\n\n            <div style=\"\n                position: absolute;\n                width: 155px; height: 155px;\n                border: 2px solid transparent;\n                border-left-color: #ad002e;\n                border-right-color: #ad002e;\n                border-radius: 50%;\n                animation: orbitCounter 1.8s linear infinite;\n            \"><\/div>\n\n            <div style=\"width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; z-index: 2;\">\n                <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/trans-hodide-logo.png\" alt=\"Logo\" style=\"max-width: 100%; height: auto; mix-blend-mode: multiply;\">\n            <\/div>\n        <\/div>\n\n        <div style=\"text-align: center;\">\n            <p style=\"margin: 0; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: 4px; font-weight: 600;\">\n                Welcome\n            <\/p>\n            <h2 style=\"margin: 5px 0 0 0; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #11369b;\">\n                <b>HOIMA DIOCESE<\/B> <span style=\"color:#ad002e;\">DEPARTMENT OF EDUCATION<\/span>\n            <\/h2>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const preloader = document.getElementById('hodide-orbit-preloader');\n        document.body.style.overflow = 'hidden';\n\n        setTimeout(() => {\n            preloader.style.opacity = '0';\n            preloader.style.visibility = 'hidden';\n            document.body.style.overflow = '';\n        }, 2200); \/\/ Fixed timed fade to allow loading animation optimization\n    });\n<\/script>\n\n\n\n<!-- TOP ALERT SYSTEM -->\n<!--<div class=\"classic-top-update\">\n    <div class=\"update-content-wrapper\">\n        <span class=\"update-badge\">UPDATE<\/span>\n        <p class=\"update-message\">As We begin Term Two, We welcome you all, May God guide and bless your efforts<\/p>\n        <!--<a href=\"#\" class=\"update-cta-button\">View More &rarr;<\/a>-->\n    <\/div>\n<\/div>\n\n\n\n<!-- Modern-Classic Left Dock -->\n<div id=\"modern-classic-dock\" class=\"mc-dock-container\" onmouseenter=\"pauseMCTimer()\" onmouseleave=\"startMCTimer()\" style=\"display: none;\"> <!-- Hidden by default for preloader -->\n    <div class=\"mc-dock-inner\">\n        <div class=\"mc-icon-box\">\n    <!-- Replace 'logo.png' with your actual logo file path -->\n    <img decoding=\"async\" src=\"https:\/\/hodide.org\/wp-content\/uploads\/2026\/05\/trans-hodide-logo.png\" alt=\"Logo\" class=\"mc-logo-img\">\n<\/div>\n        <div class=\"mc-text-zone\">\n            <h5 class=\"mc-label\">OFFICIAL<\/h5>\n            <p class=\"mc-description\">As we begin term two, we welcome you all; may God guide and bless all your efforts throughout the term. <\/p>\n            <div class=\"mc-actions\">\n                <!--<a href=\"#\" class=\"mc-btn-primary\">View Calendar<\/a>-->\n                <button class=\"mc-btn-close\" onclick=\"closeMCDock()\">Dismiss<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    let mcTimer;\n    const mcDuration = 11000; \/\/ 11 seconds convenience timer\n\n    function closeMCDock() {\n        const dock = document.getElementById('modern-classic-dock');\n        if (dock) {\n            dock.style.opacity = '0';\n            dock.style.transform = 'translateX(-120%)';\n            setTimeout(() => { dock.style.display = 'none'; }, 600);\n        }\n    }\n\n    function startMCTimer() {\n        clearTimeout(mcTimer);\n        mcTimer = setTimeout(closeMCDock, mcDuration);\n    }\n\n    function pauseMCTimer() {\n        clearTimeout(mcTimer);\n    }\n\n    \/\/ Logic to prevent appearing on preloader\n    window.addEventListener('load', () => {\n        const dock = document.getElementById('modern-classic-dock');\n        \n        \/\/ Short delay to ensure preloader has faded out (adjust 1000ms if needed)\n        setTimeout(() => {\n            dock.style.display = 'flex';\n            startMCTimer();\n        }, 1500); \n    });\n<\/script>\n\n\n\n<!-- START OF CONTINUOUS FADE-LOOP BACKGROUND LAYER -->\n<div class=\"bg-loop-blend-container\">\n    <style>\n        \/* Scoped wrapper targeting only the background layer elements *\/\n        .bg-loop-blend-container {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 100vh;\n            background: #ffffff; \/* Clean white base canvas *\/\n            z-index: -9999; \/* Keeps it completely behind your website content *\/\n            pointer-events: none; \/* Allows users to click and select text through it *\/\n            overflow: hidden;\n            box-sizing: border-box;\n        }\n\n        .bg-loop-blend-container *, \n        .bg-loop-blend-container *::before, \n        .bg-loop-blend-container *::after {\n            box-sizing: border-box !important;\n        }\n\n        \/* --- GRAPHICS LAYER: Continuous Reappearing & Blue-Dominant Blends --- *\/\n        .bg-loop-particles {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            \n            \/* Global continuous fade-in, fade-out breathing animation loop *\/\n            animation: bgGlobalFadeLoop 14s ease-in-out infinite;\n        }\n\n        .bg-loop-orb {\n            position: absolute;\n            border-radius: 50%;\n            filter: blur(70px); \n            \/* Continuous floating motion loop running alongside the fade loop *\/\n            animation: bgLoopFloat 30s infinite ease-in-out;\n        }\n\n        \/* DOMINANT BLUE BLEND: Larger size, higher visibility, placed closer to center *\/\n        .bg-loop-orb.blue-dominant-spread { \n            width: 900px; height: 900px; \n            left: 5%; top: -15%; \n            \/* Enhanced to a richer 24% opacity for strong blue presence *\/\n            background: radial-gradient(circle, rgba(26, 68, 108, 0.24) 0%, rgba(26, 68, 108, 0.08) 50%, rgba(255, 255, 255, 0) 75%);\n            animation-duration: 26s; \n        }\n\n        \/* SUBDUED RED BLEND: Scaled down smaller and kept faint as a secondary accent *\/\n        .bg-loop-orb.red-subdued-spread { \n            width: 600px; height: 600px; \n            right: 15%; bottom: -10%; \n            \/* Maintained at a soft 12% opacity so it does not overpower the blue *\/\n            background: radial-gradient(circle, rgba(163, 29, 51, 0.12) 0%, rgba(163, 29, 51, 0.04) 50%, rgba(255, 255, 255, 0) 75%);\n            animation-duration: 34s; animation-delay: -6s; \n        }\n\n        \/* 1. Continuous Reappearing Loop (Fade In -> Hold -> Fade Out -> Repeat) *\/\n        @keyframes bgGlobalFadeLoop {\n            0% {\n                opacity: 0;\n                transform: scale(0.96);\n            }\n            25% {\n                opacity: 1; \/* Fully visible by 3.5 seconds (25% of 14s) *\/\n                transform: scale(1);\n            }\n            60% {\n                opacity: 1; \/* Holds visibility through the midway point *\/\n                transform: scale(1.02);\n            }\n            100% {\n                opacity: 0; \/* Smoothly fades back to clean white before restarting *\/\n                transform: scale(0.96);\n            }\n        }\n\n        \/* 2. Gentle organic floating movement loop *\/\n        @keyframes bgLoopFloat {\n            0% { transform: translateY(0) scale(1) translate3d(0, 0, 0); }\n            50% { transform: translateY(-25px) scale(1.03) translate3d(15px, 10px, 0); }\n            100% { transform: translateY(0) scale(1) translate3d(0, 0, 0); }\n        }\n\n        \/* Scaling optimizations for smaller mobile displays *\/\n        @media (max-width: 768px) {\n            .bg-loop-orb.blue-dominant-spread { width: 550px; height: 550px; }\n            .bg-loop-orb.red-subdued-spread { width: 380px; height: 380px; }\n            .bg-loop-orb { filter: blur(45px); }\n        }\n    <\/style>\n\n    <!-- The animated wrapper layer executing the continuous fade loop -->\n    <div class=\"bg-loop-particles\">\n        <div class=\"bg-loop-orb blue-dominant-spread\"><\/div>\n        <div class=\"bg-loop-orb red-subdued-spread\"><\/div>\n    <\/div>\n<\/div>\n<!-- END OF CONTINUOUS FADE-LOOP BACKGROUND LAYER -->\n\n\n","protected":false},"excerpt":{"rendered":"<p>Education Stakeholders Association of Heads of Catholic Education Institutions Conference of 2025 Rt. Rev. Vincent Kirabo Commissioning The Association Of Heads Of Catholic Education Institutions (Acei) Rev. Fr. Mugisa Patrick&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2734","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages\/2734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hodide.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2734"}],"version-history":[{"count":143,"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages\/2734\/revisions"}],"predecessor-version":[{"id":3533,"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages\/2734\/revisions\/3533"}],"wp:attachment":[{"href":"https:\/\/hodide.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}