{"id":2667,"date":"2026-05-09T12:15:20","date_gmt":"2026-05-09T12:15:20","guid":{"rendered":"https:\/\/hodide.org\/?page_id=2667"},"modified":"2026-05-30T11:57:08","modified_gmt":"2026-05-30T11:57:08","slug":"contact","status":"publish","type":"page","link":"https:\/\/hodide.org\/?page_id=2667","title":{"rendered":"Contact"},"content":{"rendered":"\n<style>\n    \/* Main Container: Forces the 3 items onto one line *\/\n    .hodide-info-bar {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: nowrap; \/* Prevents wrapping *\/\n        gap: 20px;\n        justify-content: space-between;\n        padding: 20px;\n        background: #ffffff;\n        border: 1px solid #f0f0f0;\n        border-radius: 15px;\n        font-family: 'Segoe UI', Roboto, Arial, sans-serif;\n        width: 100%;\n        box-sizing: border-box;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.03);\n    }\n\n    \/* Individual Info Card *\/\n    .info-item {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        flex: 1; \/* Equal width for all three *\/\n        min-width: 0; \/* Allows shrinking to fit *\/\n        padding: 12px 18px;\n        border-radius: 10px;\n        background: #fcfcfc;\n        border: 1px solid #eee;\n        transition: all 0.3s ease;\n    }\n\n    \/* Interactive Hover Design *\/\n    .info-item:hover {\n        border-color: #ad002e; \/* Wine Red Border *\/\n        transform: translateY(-3px);\n        box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    }\n\n    \/* Icon Box *\/\n    .info-icon {\n        width: 40px;\n        height: 40px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n\n    \/* Color Logic *\/\n    .blue-theme { background-color: #eef2ff; color: #11369b; } \/* Royal Blue *\/\n    .red-theme { background-color: #fff1f3; color: #ad002e; }  \/* Wine Red *\/\n\n    \/* Text Logic *\/\n    .info-text {\n        overflow: hidden;\n    }\n\n    .info-text h4 {\n        margin: 0;\n        font-size: 11px;\n        text-transform: uppercase;\n        color: #888;\n        letter-spacing: 0.5px;\n    }\n\n    .info-text p {\n        margin: 2px 0 0;\n        font-size: 13px;\n        font-weight: 700;\n        color: #1a2a44;\n        white-space: nowrap; \/* Keep content on one line *\/\n        overflow: hidden;\n        text-overflow: ellipsis; \/* Adds dots if screen is too small *\/\n    }\n\n    \/* Mobile handling: Stacks only on very small screens *\/\n    @media (max-width: 768px) {\n        .hodide-info-bar {\n            flex-wrap: wrap;\n            gap: 10px;\n        }\n        .info-item {\n            flex: 1 1 100%;\n        }\n    }\n<\/style>\n\n<div class=\"hodide-info-bar\">\n    \n    <div class=\"info-item\">\n        <div class=\"info-icon blue-theme\">\n            <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n        <\/div>\n        <div class=\"info-text\">\n            <h4>Address<\/h4>\n            <p>Bujumbura-Hoima<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"info-item\">\n        <div class=\"info-icon red-theme\">\n            <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 18.92z\"><\/path><\/svg>\n        <\/div>\n        <div class=\"info-text\">\n            <h4>Call Us<\/h4>\n            <p>+256 760 496 123<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"info-item\">\n        <div class=\"info-icon blue-theme\">\n            <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\n        <\/div>\n        <div class=\"info-text\">\n            <h4>Mail Us<\/h4>\n            <p>info@hodide.org<\/p>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<style>\n    :root {\n        --primary-blue: #002347;\n        --accent-red: #d90429;\n        --overlay-gradient: linear-gradient(135deg, #f0f7ff 0%, #e9eff5 100%);\n        --white: #ffffff;\n        --text-dark: #2d3436;\n    }\n\n    body { margin: 0; font-family: 'Inter', sans-serif; background-color: var(--white); }\n\n    \/* --- Combined Section with Faint Blue Overlay --- *\/\n    .interaction-wrapper {\n        padding: 80px 10%;\n        background: var(--overlay-gradient);\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 40px;\n    }\n\n    \/* --- Real Submission Form --- *\/\n    .form-card {\n        background: var(--white);\n        padding: 50px;\n        border-radius: 30px;\n        box-shadow: 0 20px 40px rgba(0, 35, 71, 0.05);\n    }\n\n    .form-card h3 {\n        color: var(--primary-blue);\n        font-size: 1.8rem;\n        margin-bottom: 30px;\n        border-left: 5px solid var(--accent-red);\n        padding-left: 15px;\n    }\n\n    .input-field {\n        margin-bottom: 25px;\n    }\n\n    .input-field label {\n        display: block;\n        font-weight: 700;\n        color: var(--primary-blue);\n        margin-bottom: 8px;\n        font-size: 0.85rem;\n        text-transform: uppercase;\n    }\n\n    .input-field input, .input-field textarea {\n        width: 100%;\n        padding: 15px;\n        border: 2px solid #edf2f7;\n        border-radius: 12px;\n        outline: none;\n        transition: 0.3s;\n        box-sizing: border-box;\n    }\n\n    .input-field input:focus, .input-field textarea:focus {\n        border-color: var(--accent-red);\n        background: #fffcfc;\n    }\n\n    .submit-btn {\n        width: 100%;\n        padding: 18px;\n        background: var(--primary-blue);\n        color: white;\n        border: none;\n        border-radius: 12px;\n        font-weight: 700;\n        cursor: pointer;\n        transition: 0.4s;\n    }\n\n    .submit-btn:hover {\n        background: var(--accent-red);\n        transform: translateY(-2px);\n        box-shadow: 0 10px 20px rgba(217, 4, 41, 0.2);\n    }\n\n    \/* --- Modern Google Map Section --- *\/\n    .map-container {\n        border-radius: 30px;\n        overflow: hidden;\n        box-shadow: 0 20px 40px rgba(0, 35, 71, 0.05);\n        height: 100%;\n        min-height: 450px;\n        border: 1px solid rgba(0, 35, 71, 0.1);\n    }\n\n    .map-container iframe {\n        width: 100%;\n        height: 100%;\n        border: none;\n        \/* Modern filter to match classic visual style *\/\n        filter: grayscale(100%) invert(90%) contrast(90%);\n    }\n\n<\/style>\n<\/head>\n<body>\n\n    <section class=\"interaction-wrapper\">\n        \n        <!-- REAL FUNCTIONAL FORM -->\n        <div class=\"form-card\">\n            <h3>Send a Message<\/h3>\n            \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2964-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"2964\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F2667#wpcf7-f2964-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2964\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2964-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><label> Your name<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span> <\/label>\n<\/p>\n<p><label> Your email<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span> <\/label>\n<\/p>\n<p><label> Subject<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span> <\/label>\n<\/p>\n<p><label> Your message (optional)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span> <\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Submit\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n                \n            <\/form>\n        <\/div>\n\n        <!-- GOOGLE MAPS SECTION -->\n        <div class=\"map-container\">\n            <!-- Map centered on Kampala, Uganda area -->\n            <iframe loading=\"lazy\" src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m14!1m8!1m3!1d15954.184697858333!2d31.3554095!3d1.4469085!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x628c0bd06df14d3!2sHoima%20Diocese%20Department%20of%20Education%20Headquarters!5e0!3m2!1sen!2sug!4v1579954514859!5m2!1sen!2sug\" width=\"800\" height=\"450\" frameborder=\"0\" style=\"border:0;\" allowfullscreen=\"\"><\/iframe>\n        <\/div>\n\n    <\/section>\n\n<\/body>\n<\/html>\n\n\n\n<!-- START OF CONTINUOUS FADE-LOOP BACKGROUND LAYER -->\r\n<div class=\"bg-loop-blend-container\">\r\n    <style>\r\n        \/* Scoped wrapper targeting only the background layer elements *\/\r\n        .bg-loop-blend-container {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100vw;\r\n            height: 100vh;\r\n            background: #ffffff; \/* Clean white base canvas *\/\r\n            z-index: -9999; \/* Keeps it completely behind your website content *\/\r\n            pointer-events: none; \/* Allows users to click and select text through it *\/\r\n            overflow: hidden;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .bg-loop-blend-container *, \r\n        .bg-loop-blend-container *::before, \r\n        .bg-loop-blend-container *::after {\r\n            box-sizing: border-box !important;\r\n        }\r\n\r\n        \/* --- GRAPHICS LAYER: Continuous Reappearing & Blue-Dominant Blends --- *\/\r\n        .bg-loop-particles {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            \r\n            \/* Global continuous fade-in, fade-out breathing animation loop *\/\r\n            animation: bgGlobalFadeLoop 14s ease-in-out infinite;\r\n        }\r\n\r\n        .bg-loop-orb {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            filter: blur(70px); \r\n            \/* Continuous floating motion loop running alongside the fade loop *\/\r\n            animation: bgLoopFloat 30s infinite ease-in-out;\r\n        }\r\n\r\n        \/* DOMINANT BLUE BLEND: Larger size, higher visibility, placed closer to center *\/\r\n        .bg-loop-orb.blue-dominant-spread { \r\n            width: 900px; height: 900px; \r\n            left: 5%; top: -15%; \r\n            \/* Enhanced to a richer 24% opacity for strong blue presence *\/\r\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%);\r\n            animation-duration: 26s; \r\n        }\r\n\r\n        \/* SUBDUED RED BLEND: Scaled down smaller and kept faint as a secondary accent *\/\r\n        .bg-loop-orb.red-subdued-spread { \r\n            width: 600px; height: 600px; \r\n            right: 15%; bottom: -10%; \r\n            \/* Maintained at a soft 12% opacity so it does not overpower the blue *\/\r\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%);\r\n            animation-duration: 34s; animation-delay: -6s; \r\n        }\r\n\r\n        \/* 1. Continuous Reappearing Loop (Fade In -> Hold -> Fade Out -> Repeat) *\/\r\n        @keyframes bgGlobalFadeLoop {\r\n            0% {\r\n                opacity: 0;\r\n                transform: scale(0.96);\r\n            }\r\n            25% {\r\n                opacity: 1; \/* Fully visible by 3.5 seconds (25% of 14s) *\/\r\n                transform: scale(1);\r\n            }\r\n            60% {\r\n                opacity: 1; \/* Holds visibility through the midway point *\/\r\n                transform: scale(1.02);\r\n            }\r\n            100% {\r\n                opacity: 0; \/* Smoothly fades back to clean white before restarting *\/\r\n                transform: scale(0.96);\r\n            }\r\n        }\r\n\r\n        \/* 2. Gentle organic floating movement loop *\/\r\n        @keyframes bgLoopFloat {\r\n            0% { transform: translateY(0) scale(1) translate3d(0, 0, 0); }\r\n            50% { transform: translateY(-25px) scale(1.03) translate3d(15px, 10px, 0); }\r\n            100% { transform: translateY(0) scale(1) translate3d(0, 0, 0); }\r\n        }\r\n\r\n        \/* Scaling optimizations for smaller mobile displays *\/\r\n        @media (max-width: 768px) {\r\n            .bg-loop-orb.blue-dominant-spread { width: 550px; height: 550px; }\r\n            .bg-loop-orb.red-subdued-spread { width: 380px; height: 380px; }\r\n            .bg-loop-orb { filter: blur(45px); }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- The animated wrapper layer executing the continuous fade loop -->\r\n    <div class=\"bg-loop-particles\">\r\n        <div class=\"bg-loop-orb blue-dominant-spread\"><\/div>\r\n        <div class=\"bg-loop-orb red-subdued-spread\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n<!-- END OF CONTINUOUS FADE-LOOP BACKGROUND LAYER -->\n","protected":false},"excerpt":{"rendered":"<p>Address Bujumbura-Hoima Call Us +256 760 496 123 Mail Us info@hodide.org Send a Message<\/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-2667","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages\/2667","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=2667"}],"version-history":[{"count":18,"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages\/2667\/revisions"}],"predecessor-version":[{"id":3524,"href":"https:\/\/hodide.org\/index.php?rest_route=\/wp\/v2\/pages\/2667\/revisions\/3524"}],"wp:attachment":[{"href":"https:\/\/hodide.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}