{"id":1979,"date":"2026-05-05T15:39:04","date_gmt":"2026-05-05T07:09:04","guid":{"rendered":"https:\/\/depedilocosnorte.com\/sdoin\/?page_id=1979"},"modified":"2026-08-12T08:40:47","modified_gmt":"2026-08-12T00:10:47","slug":"welcome","status":"publish","type":"page","link":"https:\/\/depedilocosnorte.com\/sdoin\/","title":{"rendered":""},"content":{"rendered":"\n<style>\n\/* =========================================\n   WELCOME SECTION\n   ========================================= *\/\n\n.welcome-section {\n    width: 100%;\n    padding: 40px 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    background: transparent;\n}\n\n\n\/* =========================================\n   WELCOME CARD\n   ========================================= *\/\n\n.welcome-card {\n    position: relative;\n    width: 100%;\n    max-width: 1100px;\n    min-height: 360px;\n    background: #ffffff;\n    border-radius: 24px;\n    overflow: hidden;\n    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n}\n\n\n\/* =========================================\n   CONTENT\n   ========================================= *\/\n\n.welcome-content {\n    position: relative;\n    z-index: 5;\n    width: 100%;\n    padding: 60px 70px;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n}\n\n\n\/* =========================================\n   TEXT\n   ========================================= *\/\n\n.welcome-text {\n    max-width: 700px;\n    position: relative;\n    z-index: 10;\n}\n\n.welcome-small {\n    margin: 0 0 10px;\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 15px;\n    font-weight: 700;\n    letter-spacing: 4px;\n    color: #d71920;\n}\n\n\n\/* =========================================\n   TITLE\n   ========================================= *\/\n\n.welcome-text h1 {\n    margin: 0;\n    padding: 0;\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 52px;\n    line-height: 1.08;\n    font-weight: 800;\n    color: #0038a8;\n}\n\n.welcome-text h1 span {\n    color: #d71920;\n}\n\n\n\/* =========================================\n   DESCRIPTION\n   ========================================= *\/\n\n.welcome-description {\n    margin: 20px 0 0;\n    max-width: 600px;\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 17px;\n    line-height: 1.7;\n    color: #555;\n}\n\n\n\/* =========================================\n   BLUE DECORATIVE SHAPE\n   ========================================= *\/\n\n.shape-blue {\n    position: absolute;\n    width: 350px;\n    height: 350px;\n    right: -150px;\n    top: -170px;\n    background: #0038a8;\n    border-radius: 50%;\n    z-index: 1;\n}\n\n\n\/* =========================================\n   RED DECORATIVE SHAPE\n   ========================================= *\/\n\n.shape-red {\n    position: absolute;\n    width: 220px;\n    height: 220px;\n    right: -80px;\n    bottom: -120px;\n    background: #d71920;\n    border-radius: 50%;\n    z-index: 1;\n}\n\n\n\/* =========================================\n   BOTTOM ACCENT\n   ========================================= *\/\n\n.bottom-accent {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 7px;\n    background: linear-gradient(\n        to right,\n        #0038a8 0%,\n        #0038a8 50%,\n        #d71920 50%,\n        #d71920 100%\n    );\n    z-index: 10;\n}\n\n\n\/* =========================================\n   TABLET\n   ========================================= *\/\n\n@media (max-width: 800px) {\n\n    .welcome-section {\n        padding: 30px 15px;\n    }\n\n    .welcome-content {\n        padding: 50px 40px;\n    }\n\n    .welcome-text h1 {\n        font-size: 42px;\n    }\n\n    .welcome-description {\n        font-size: 15px;\n    }\n}\n\n\n\/* =========================================\n   MOBILE\n   ========================================= *\/\n\n@media (max-width: 600px) {\n\n    .welcome-section {\n        width: 100%;\n        padding: 20px 12px;\n        box-sizing: border-box;\n        background: transparent;\n    }\n\n    .welcome-card {\n        width: 100%;\n        max-width: 100%;\n        min-height: 350px;\n        border-radius: 18px;\n        box-sizing: border-box;\n    }\n\n    .welcome-content {\n        width: 100%;\n        padding: 55px 20px 45px;\n        text-align: center;\n        justify-content: center;\n        align-items: center;\n        box-sizing: border-box;\n    }\n\n    .welcome-text {\n        width: 100%;\n        max-width: 100%;\n        box-sizing: border-box;\n    }\n\n    .welcome-small {\n        margin-bottom: 12px;\n        font-size: 11px;\n        letter-spacing: 2.5px;\n        line-height: 1.4;\n    }\n\n    .welcome-text h1 {\n        margin: 0;\n        font-size: 30px;\n        line-height: 1.15;\n        word-wrap: break-word;\n        overflow-wrap: break-word;\n    }\n\n    .welcome-description {\n        width: 100%;\n        max-width: 100%;\n        margin: 18px auto 0;\n        font-size: 14px;\n        line-height: 1.6;\n        box-sizing: border-box;\n    }\n\n    .shape-blue {\n        width: 200px;\n        height: 200px;\n        right: -110px;\n        top: -110px;\n    }\n\n    .shape-red {\n        width: 140px;\n        height: 140px;\n        right: -65px;\n        bottom: -75px;\n    }\n\n    .bottom-accent {\n        height: 6px;\n    }\n}\n\n\n\/* =========================================\n   VERY SMALL PHONES\n   ========================================= *\/\n\n@media (max-width: 380px) {\n\n    .welcome-section {\n        padding: 15px 10px;\n        background: transparent;\n    }\n\n    .welcome-content {\n        padding: 50px 15px 40px;\n    }\n\n    .welcome-small {\n        font-size: 10px;\n        letter-spacing: 2px;\n    }\n\n    .welcome-text h1 {\n        font-size: 27px;\n    }\n\n    .welcome-description {\n        font-size: 13px;\n    }\n}\n<\/style>\n\n\n<div class=\"welcome-section\">\n\n    <div class=\"welcome-card\">\n\n        <!-- Decorative Shapes -->\n        <div class=\"shape shape-blue\"><\/div>\n        <div class=\"shape shape-red\"><\/div>\n\n        <div class=\"welcome-content\">\n\n            <div class=\"welcome-text\">\n\n                <p class=\"welcome-small\">\n                    WELCOME TO\n                <\/p>\n\n                <h1>\n                    School Division of<br>\n                    <span>Ilocos Norte<\/span>\n                <\/h1>\n\n                <p class=\"welcome-description\">\n                    Empowering learners, inspiring educators, and\n                    building a brighter future through quality education.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Bottom Accent -->\n        <div class=\"bottom-accent\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n\n\n<!-- ============================================\n     SDOIN MODERN TOURED \/ INHERITED CAROUSEL\n     ============================================ -->\n\n<div class=\"sdoin-modern-carousel\">\n\n    <!-- CAROUSEL VIEWPORT -->\n    <div class=\"sdoin-carousel-window\">\n\n        <div class=\"sdoin-carousel-track\">\n\n            <!-- ================= SLIDE 1 ================= -->\n            <div class=\"sdoin-modern-slide\">\n\n                <img decoding=\"async\"\n                    src=\"http:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/2-1024x724-3.jpg\"\n                    alt=\"Schools Division of Ilocos Norte - TourEd InheritEd\"\n                >\n\n                <!-- BLUE GRADIENT OVERLAY -->\n                <div class=\"sdoin-gradient\"><\/div>\n\n                <!-- SLIDE CONTENT -->\n                <div class=\"sdoin-slide-content\">\n\n                    <div class=\"sdoin-mini-label\">\n                        SCHOOLS DIVISION OF ILOCOS NORTE\n                    <\/div>\n\n                    <h2>\n                        TourEd <span>\u2022<\/span> InheritEd\n                    <\/h2>\n\n                    <p>\n                        Exploring Ilocos Norte. Exploring Education.\n                    <\/p>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- ================= SLIDE 2 ================= -->\n            <div class=\"sdoin-modern-slide\">\n\n                <img decoding=\"async\"\n                    src=\"http:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/1-1024x724-4.png\"\n                    alt=\"TourEd and InheritEd - Ilocos Norte\"\n                >\n\n                <!-- BLUE GRADIENT OVERLAY -->\n                <div class=\"sdoin-gradient\"><\/div>\n\n                <!-- SLIDE CONTENT -->\n                <div class=\"sdoin-slide-content\">\n\n                    <div class=\"sdoin-mini-label\">\n                        QUALITY \u2022 RELEVANT \u2022 LIBERATING EDUCATION\n                    <\/div>\n\n                    <h2>\n                        TourEd <span>\u2022<\/span> InheritEd\n                    <\/h2>\n\n                    <p>\n                        Building resilient learners through education.\n                    <\/p>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- ================= PREVIOUS BUTTON ================= -->\n\n    <button\n        class=\"sdoin-arrow sdoin-prev\"\n        aria-label=\"Previous slide\"\n        type=\"button\">\n\n        <span>\u2039<\/span>\n\n    <\/button>\n\n\n    <!-- ================= NEXT BUTTON ================= -->\n\n    <button\n        class=\"sdoin-arrow sdoin-next\"\n        aria-label=\"Next slide\"\n        type=\"button\">\n\n        <span>\u203a<\/span>\n\n    <\/button>\n\n\n    <!-- ================= SLIDE INDICATORS ================= -->\n\n    <div class=\"sdoin-indicators\">\n\n        <button\n            class=\"sdoin-indicator active\"\n            type=\"button\"\n            aria-label=\"Go to slide 1\">\n        <\/button>\n\n        <button\n            class=\"sdoin-indicator\"\n            type=\"button\"\n            aria-label=\"Go to slide 2\">\n        <\/button>\n\n    <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* ==================================================\n   SDOIN MODERN CAROUSEL\n   ================================================== *\/\n\n.sdoin-modern-carousel {\n\n    position: relative;\n\n    width: 100%;\n    max-width: 1250px;\n\n    margin: 30px auto;\n\n    background: #063b5c;\n\n    border-radius: 20px;\n\n    overflow: hidden;\n\n    box-shadow:\n        0 15px 45px rgba(0, 40, 70, 0.25);\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n}\n\n\n\/* ==================================================\n   VIEWPORT\n   ================================================== *\/\n\n.sdoin-carousel-window {\n\n    position: relative;\n\n    width: 100%;\n\n    overflow: hidden;\n\n    background: #ffffff;\n\n}\n\n\n\/* ==================================================\n   SLIDING TRACK\n   ================================================== *\/\n\n.sdoin-carousel-track {\n\n    display: flex;\n\n    width: 200%;\n\n    transform: translateX(0);\n\n    transition:\n        transform 0.8s cubic-bezier(\n            0.77,\n            0,\n            0.175,\n            1\n        );\n\n}\n\n\n\/* ==================================================\n   EACH SLIDE\n   ================================================== *\/\n\n.sdoin-modern-slide {\n\n    position: relative;\n\n    width: 50%;\n\n    flex: 0 0 50%;\n\n    overflow: hidden;\n\n    background: #ffffff;\n\n}\n\n\n\/* ==================================================\n   IMAGE\n   ================================================== *\/\n\n.sdoin-modern-slide img {\n\n    display: block;\n\n    width: 100%;\n\n    height: auto;\n\n    max-height: 720px;\n\n    object-fit: contain;\n\n    margin: 0 auto;\n\n    transition:\n        transform 1.2s ease;\n\n}\n\n\n\/* ==================================================\n   IMAGE HOVER\n   ================================================== *\/\n\n.sdoin-modern-carousel:hover\n.sdoin-modern-slide img {\n\n    transform: scale(1.015);\n\n}\n\n\n\/* ==================================================\n   BLUE GRADIENT OVERLAY\n   ================================================== *\/\n\n.sdoin-gradient {\n\n    position: absolute;\n\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    height: 45%;\n\n    background:\n        linear-gradient(\n            to top,\n            rgba(3, 45, 72, 0.95) 0%,\n            rgba(3, 61, 92, 0.75) 35%,\n            rgba(3, 61, 92, 0.25) 70%,\n            rgba(3, 61, 92, 0) 100%\n        );\n\n    pointer-events: none;\n\n}\n\n\n\/* ==================================================\n   SLIDE CONTENT\n   ================================================== *\/\n\n.sdoin-slide-content {\n\n    position: absolute;\n\n    left: 45px;\n    bottom: 40px;\n\n    z-index: 3;\n\n    color: #ffffff;\n\n    max-width: 600px;\n\n    text-shadow:\n        0 2px 5px rgba(0,0,0,0.3);\n\n}\n\n\n\/* ==================================================\n   SMALL LABEL\n   ================================================== *\/\n\n.sdoin-mini-label {\n\n    display: inline-block;\n\n    margin-bottom: 10px;\n\n    padding: 6px 12px;\n\n    border-radius: 20px;\n\n    background:\n        rgba(255,255,255,0.15);\n\n    border:\n        1px solid rgba(255,255,255,0.35);\n\n    backdrop-filter:\n        blur(8px);\n\n    -webkit-backdrop-filter:\n        blur(8px);\n\n    font-size: 11px;\n\n    font-weight: 700;\n\n    letter-spacing: 1.5px;\n\n}\n\n\n\/* ==================================================\n   TITLE\n   ================================================== *\/\n\n.sdoin-slide-content h2 {\n\n    margin: 0;\n\n    font-size: 38px;\n\n    line-height: 1.1;\n\n    font-weight: 800;\n\n    letter-spacing: 0.5px;\n\n}\n\n\n\/* GOLD DOT\n   ================================================== *\/\n\n.sdoin-slide-content h2 span {\n\n    color: #e8b84b;\n\n    padding: 0 6px;\n\n}\n\n\n\/* ==================================================\n   DESCRIPTION\n   ================================================== *\/\n\n.sdoin-slide-content p {\n\n    margin: 8px 0 0;\n\n    font-size: 16px;\n\n    line-height: 1.5;\n\n    color:\n        rgba(255,255,255,0.92);\n\n}\n\n\n\/* ==================================================\n   ROUND ARROWS\n   ================================================== *\/\n\n.sdoin-arrow {\n\n    position: absolute;\n\n    top: 50%;\n\n    transform:\n        translateY(-50%);\n\n    z-index: 10;\n\n    width: 52px;\n    height: 52px;\n\n    border:\n        1px solid rgba(255,255,255,0.45);\n\n    border-radius: 50%;\n\n    background:\n        rgba(3,55,85,0.65);\n\n    color: #ffffff;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    cursor: pointer;\n\n    backdrop-filter:\n        blur(10px);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    box-shadow:\n        0 5px 18px rgba(0,0,0,0.2);\n\n    transition:\n        all 0.3s ease;\n\n}\n\n\n\/* ==================================================\n   ARROW ICON\n   ================================================== *\/\n\n.sdoin-arrow span {\n\n    font-size: 38px;\n\n    line-height: 1;\n\n    font-weight: 300;\n\n    margin-top: -4px;\n\n}\n\n\n\/* LEFT ARROW *\/\n\n.sdoin-prev {\n\n    left: 22px;\n\n}\n\n\n\/* RIGHT ARROW *\/\n\n.sdoin-next {\n\n    right: 22px;\n\n}\n\n\n\/* ==================================================\n   ARROW HOVER\n   ================================================== *\/\n\n.sdoin-arrow:hover {\n\n    background: #ffffff;\n\n    color: #063b5c;\n\n    border-color: #ffffff;\n\n    transform:\n        translateY(-50%)\n        scale(1.08);\n\n}\n\n\n\/* ==================================================\n   SLIDE INDICATORS\n   ================================================== *\/\n\n.sdoin-indicators {\n\n    position: absolute;\n\n    left: 50%;\n\n    bottom: 18px;\n\n    transform:\n        translateX(-50%);\n\n    z-index: 10;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 8px;\n\n}\n\n\n\/* INDIVIDUAL DOT *\/\n\n.sdoin-indicator {\n\n    width: 9px;\n\n    height: 9px;\n\n    padding: 0;\n\n    border: none;\n\n    border-radius: 20px;\n\n    background:\n        rgba(255,255,255,0.55);\n\n    cursor: pointer;\n\n    transition:\n        width 0.35s ease,\n        background 0.35s ease;\n\n}\n\n\n\/* ACTIVE DOT *\/\n\n.sdoin-indicator.active {\n\n    width: 30px;\n\n    background: #e8b84b;\n\n}\n\n\n\/* ==================================================\n   TABLET\n   ================================================== *\/\n\n@media (max-width: 768px) {\n\n    .sdoin-modern-carousel {\n\n        margin: 20px auto;\n\n        border-radius: 14px;\n\n    }\n\n\n    .sdoin-slide-content {\n\n        left: 25px;\n\n        bottom: 25px;\n\n        max-width: 75%;\n\n    }\n\n\n    .sdoin-slide-content h2 {\n\n        font-size: 27px;\n\n    }\n\n\n    .sdoin-slide-content p {\n\n        font-size: 13px;\n\n    }\n\n\n    .sdoin-mini-label {\n\n        font-size: 9px;\n\n        padding: 5px 9px;\n\n    }\n\n\n    .sdoin-arrow {\n\n        width: 42px;\n\n        height: 42px;\n\n    }\n\n\n    .sdoin-arrow span {\n\n        font-size: 30px;\n\n    }\n\n\n    .sdoin-prev {\n\n        left: 12px;\n\n    }\n\n\n    .sdoin-next {\n\n        right: 12px;\n\n    }\n\n\n    .sdoin-indicators {\n\n        bottom: 12px;\n\n    }\n\n}\n\n\n\/* ==================================================\n   MOBILE\n   ================================================== *\/\n\n@media (max-width: 480px) {\n\n    .sdoin-modern-carousel {\n\n        border-radius: 10px;\n\n    }\n\n\n    .sdoin-slide-content {\n\n        left: 18px;\n\n        bottom: 18px;\n\n        max-width: 70%;\n\n    }\n\n\n    .sdoin-slide-content h2 {\n\n        font-size: 20px;\n\n    }\n\n\n    .sdoin-slide-content p {\n\n        display: none;\n\n    }\n\n\n    .sdoin-mini-label {\n\n        font-size: 7px;\n\n        letter-spacing: 1px;\n\n        padding: 4px 7px;\n\n    }\n\n\n    .sdoin-arrow {\n\n        width: 35px;\n\n        height: 35px;\n\n    }\n\n\n    .sdoin-arrow span {\n\n        font-size: 25px;\n\n    }\n\n\n    .sdoin-prev {\n\n        left: 8px;\n\n    }\n\n\n    .sdoin-next {\n\n        right: 8px;\n\n    }\n\n\n    .sdoin-indicators {\n\n        bottom: 8px;\n\n        gap: 5px;\n\n    }\n\n\n    .sdoin-indicator {\n\n        width: 7px;\n\n        height: 7px;\n\n    }\n\n\n    .sdoin-indicator.active {\n\n        width: 22px;\n\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n    const carousel =\n        document.querySelector(\n            \".sdoin-modern-carousel\"\n        );\n\n\n    if (!carousel) return;\n\n\n    const track =\n        carousel.querySelector(\n            \".sdoin-carousel-track\"\n        );\n\n\n    const slides =\n        carousel.querySelectorAll(\n            \".sdoin-modern-slide\"\n        );\n\n\n    const indicators =\n        carousel.querySelectorAll(\n            \".sdoin-indicator\"\n        );\n\n\n    const prev =\n        carousel.querySelector(\n            \".sdoin-prev\"\n        );\n\n\n    const next =\n        carousel.querySelector(\n            \".sdoin-next\"\n        );\n\n\n    let currentSlide = 0;\n\n    let autoPlay;\n\n\n    \/* ==================================================\n       MOVE TO SLIDE\n       ================================================== *\/\n\n    function goToSlide(index) {\n\n        if (index >= slides.length) {\n\n            currentSlide = 0;\n\n        }\n\n        else if (index < 0) {\n\n            currentSlide =\n                slides.length - 1;\n\n        }\n\n        else {\n\n            currentSlide = index;\n\n        }\n\n\n        track.style.transform =\n            \"translateX(-\" +\n            (currentSlide * 50) +\n            \"%)\";\n\n\n        indicators.forEach(\n            function (indicator, i) {\n\n                indicator.classList.toggle(\n                    \"active\",\n                    i === currentSlide\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* ==================================================\n       NEXT SLIDE\n       ================================================== *\/\n\n    function nextSlide() {\n\n        goToSlide(\n            currentSlide + 1\n        );\n\n    }\n\n\n    \/* ==================================================\n       PREVIOUS SLIDE\n       ================================================== *\/\n\n    function previousSlide() {\n\n        goToSlide(\n            currentSlide - 1\n        );\n\n    }\n\n\n    \/* ==================================================\n       NEXT BUTTON\n       ================================================== *\/\n\n    next.addEventListener(\n        \"click\",\n        function () {\n\n            nextSlide();\n\n            restartAutoPlay();\n\n        }\n    );\n\n\n    \/* ==================================================\n       PREVIOUS BUTTON\n       ================================================== *\/\n\n    prev.addEventListener(\n        \"click\",\n        function () {\n\n            previousSlide();\n\n            restartAutoPlay();\n\n        }\n    );\n\n\n    \/* ==================================================\n       INDICATORS\n       ================================================== *\/\n\n    indicators.forEach(\n        function (indicator, index) {\n\n            indicator.addEventListener(\n                \"click\",\n                function () {\n\n                    goToSlide(index);\n\n                    restartAutoPlay();\n\n                }\n            );\n\n        }\n    );\n\n\n    \/* ==================================================\n       AUTO PLAY\n       ================================================== *\/\n\n    function startAutoPlay() {\n\n        autoPlay =\n            setInterval(\n                function () {\n\n                    nextSlide();\n\n                },\n                5000\n            );\n\n    }\n\n\n    \/* ==================================================\n       RESTART AUTO PLAY\n       ================================================== *\/\n\n    function restartAutoPlay() {\n\n        clearInterval(autoPlay);\n\n        startAutoPlay();\n\n    }\n\n\n    \/* ==================================================\n       PAUSE ON HOVER\n       ================================================== *\/\n\n    carousel.addEventListener(\n        \"mouseenter\",\n        function () {\n\n            clearInterval(autoPlay);\n\n        }\n    );\n\n\n    carousel.addEventListener(\n        \"mouseleave\",\n        function () {\n\n            startAutoPlay();\n\n        }\n    );\n\n\n    \/* ==================================================\n       TOUCH \/ SWIPE SUPPORT\n       ================================================== *\/\n\n    let touchStartX = 0;\n\n    let touchEndX = 0;\n\n\n    carousel.addEventListener(\n        \"touchstart\",\n        function (event) {\n\n            touchStartX =\n                event.changedTouches[0].screenX;\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    carousel.addEventListener(\n        \"touchend\",\n        function (event) {\n\n            touchEndX =\n                event.changedTouches[0].screenX;\n\n            handleSwipe();\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    function handleSwipe() {\n\n        const difference =\n            touchStartX - touchEndX;\n\n\n        if (\n            Math.abs(difference) < 50\n        ) {\n\n            return;\n\n        }\n\n\n        if (difference > 0) {\n\n            nextSlide();\n\n        }\n\n        else {\n\n            previousSlide();\n\n        }\n\n\n        restartAutoPlay();\n\n    }\n\n\n    \/* ==================================================\n       INITIALIZE\n       ================================================== *\/\n\n    goToSlide(0);\n\n    startAutoPlay();\n\n})();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>WELCOME TO School Division of Ilocos Norte Empowering learners, inspiring educators, and building a brighter future through quality education. SCHOOLS &hellip; <\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1979","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages\/1979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/comments?post=1979"}],"version-history":[{"count":30,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages\/1979\/revisions"}],"predecessor-version":[{"id":3067,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages\/1979\/revisions\/3067"}],"wp:attachment":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/media?parent=1979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}