{"id":4470,"date":"2026-08-25T00:43:16","date_gmt":"2026-08-25T00:43:16","guid":{"rendered":"https:\/\/hamzaislamicschool.com\/?page_id=4470"},"modified":"2026-08-27T22:55:46","modified_gmt":"2026-08-27T22:55:46","slug":"gallery","status":"publish","type":"page","link":"https:\/\/hamzaislamicschool.com\/index.php\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4470\" class=\"elementor elementor-4470\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dff2aee elementor-section-stretched elementor-section-content-middle elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"dff2aee\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-938e44d\" data-id=\"938e44d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-39ffa36 elementor-widget elementor-widget-html\" data-id=\"39ffa36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n     HAMZA ISLAMIC SCHOOL\r\n     GALLERY PAGE HERO\r\n========================================================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Marcellus&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"hamza-gallery-hero\">\r\n\r\n    <!-- =========================================\r\n         FADED PHOTO COLLAGE\r\n    ========================================== -->\r\n\r\n    <div class=\"hamza-gallery-hero-collage\" aria-hidden=\"true\">\r\n\r\n        <div class=\"gallery-hero-photo gallery-hero-photo-1\">\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/ChatGPT-Image-Aug-24-2026-05_17_31-PM.png\"\r\n                alt=\"\"\r\n            >\r\n        <\/div>\r\n\r\n        <div class=\"gallery-hero-photo gallery-hero-photo-2\">\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.39-AM-1.jpeg\"\r\n                alt=\"\"\r\n            >\r\n        <\/div>\r\n\r\n        <div class=\"gallery-hero-photo gallery-hero-photo-3\">\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.29-AM.jpeg\"\r\n                alt=\"\"\r\n            >\r\n        <\/div>\r\n\r\n        <div class=\"gallery-hero-photo gallery-hero-photo-4\">\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.19-AM.jpeg\"\r\n                alt=\"\"\r\n            >\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- DARK PURPLE VEIL -->\r\n    <div class=\"hamza-gallery-hero-veil\"><\/div>\r\n\r\n\r\n    <!-- =========================================\r\n         FLOATING ICONS\r\n    ========================================== -->\r\n\r\n    <!-- camera -->\r\n    <svg class=\"hamza-gallery-hero-art hero-camera\"\r\n         viewBox=\"0 0 90 72\"\r\n         aria-hidden=\"true\">\r\n        <rect x=\"10\" y=\"20\" width=\"70\" height=\"42\" rx=\"5\"><\/rect>\r\n        <path d=\"M28 20L34 11H56L62 20\"><\/path>\r\n        <circle cx=\"45\" cy=\"41\" r=\"12\"><\/circle>\r\n        <circle cx=\"69\" cy=\"28\" r=\"2\"><\/circle>\r\n    <\/svg>\r\n\r\n    <!-- book -->\r\n    <svg class=\"hamza-gallery-hero-art hero-book\"\r\n         viewBox=\"0 0 100 72\"\r\n         aria-hidden=\"true\">\r\n        <path d=\"M50 16C38 8 22 8 10 13V58C23 53 38 54 50 63\"><\/path>\r\n        <path d=\"M50 16C62 8 78 8 90 13V58C77 53 62 54 50 63\"><\/path>\r\n        <path d=\"M50 16V63\"><\/path>\r\n    <\/svg>\r\n\r\n    <!-- school -->\r\n    <svg class=\"hamza-gallery-hero-art hero-school\"\r\n         viewBox=\"0 0 100 82\"\r\n         aria-hidden=\"true\">\r\n        <path d=\"M12 35L50 12L88 35\"><\/path>\r\n        <path d=\"M20 34V70H80V34\"><\/path>\r\n        <path d=\"M38 70V50H62V70\"><\/path>\r\n        <path d=\"M29 43H35V50H29Z\"><\/path>\r\n        <path d=\"M65 43H71V50H65Z\"><\/path>\r\n        <path d=\"M50 12V5\"><\/path>\r\n        <path d=\"M50 5L62 10L50 15\"><\/path>\r\n    <\/svg>\r\n\r\n    <!-- stars -->\r\n    <span class=\"hamza-gallery-hero-star hero-star-1\">\u2726<\/span>\r\n    <span class=\"hamza-gallery-hero-star hero-star-2\">\u2726<\/span>\r\n    <span class=\"hamza-gallery-hero-star hero-star-3\">\u2726<\/span>\r\n\r\n\r\n    <!-- =========================================\r\n         CONTENT\r\n    ========================================== -->\r\n\r\n    <div class=\"hamza-gallery-hero-wrap\">\r\n\r\n        <div class=\"hamza-gallery-hero-content\">\r\n\r\n            <div class=\"hamza-gallery-hero-label\">\r\n                <span>\u2726<\/span>\r\n                SCHOOL LIFE\r\n            <\/div>\r\n\r\n            <h1 class=\"hamza-gallery-hero-heading\">\r\n                Moments That Become\r\n                <span>Memories<\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"hamza-gallery-hero-text\">\r\n                A glimpse into the learning, celebrations, activities,\r\n                achievements, and everyday experiences that make life\r\n                at Hamza special.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero {\r\n\r\n    --purple: #3A2E81;\r\n    --gold: #FAAF11;\r\n    --blue: #4F93EB;\r\n    --cream: #FEEFCF;\r\n    --soft-purple: #AA8BE2;\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    height: 440px;\r\n\r\n    min-height: 400px;\r\n\r\n    background: #3A2E81;\r\n\r\n    overflow: hidden;\r\n\r\n    isolation: isolate;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PHOTO COLLAGE\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-collage {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 0;\r\n\r\n    pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.gallery-hero-photo {\r\n\r\n    position: absolute;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 14px;\r\n\r\n    opacity: .22;\r\n\r\n    filter:\r\n        saturate(.82)\r\n        contrast(.95);\r\n\r\n}\r\n\r\n\r\n.gallery-hero-photo img {\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    object-fit: cover;\r\n\r\n    display: block;\r\n\r\n}\r\n\r\n\r\n\/* left photo *\/\r\n\r\n.gallery-hero-photo-1 {\r\n\r\n    width: 290px;\r\n    height: 220px;\r\n\r\n    left: -45px;\r\n    top: -30px;\r\n\r\n    transform: rotate(-5deg);\r\n\r\n}\r\n\r\n\r\n\/* lower left *\/\r\n\r\n.gallery-hero-photo-2 {\r\n\r\n    width: 225px;\r\n    height: 180px;\r\n\r\n    left: 8%;\r\n    bottom: -55px;\r\n\r\n    transform: rotate(4deg);\r\n\r\n}\r\n\r\n\r\n\/* top right *\/\r\n\r\n.gallery-hero-photo-3 {\r\n\r\n    width: 260px;\r\n    height: 195px;\r\n\r\n    right: 4%;\r\n    top: -35px;\r\n\r\n    transform: rotate(5deg);\r\n\r\n}\r\n\r\n\r\n\/* lower right *\/\r\n\r\n.gallery-hero-photo-4 {\r\n\r\n    width: 305px;\r\n    height: 225px;\r\n\r\n    right: -55px;\r\n    bottom: -60px;\r\n\r\n    transform: rotate(-4deg);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PURPLE VEIL\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-veil {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 1;\r\n\r\n    inset: 0;\r\n\r\n    background:\r\n        rgba(58,46,129,.63);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WRAPPER\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-wrap {\r\n\r\n    position: relative;\r\n\r\n    z-index: 5;\r\n\r\n    width:\r\n        min(\r\n            1100px,\r\n            calc(100% - 90px)\r\n        );\r\n\r\n    height: 100%;\r\n\r\n    margin: 0 auto;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-content {\r\n\r\n    max-width: 790px;\r\n\r\n    text-align: center;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-label {\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    margin-bottom: 16px;\r\n\r\n    font-family: \"Manrope\", sans-serif;\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.8px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    color: var(--gold);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADING\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-heading {\r\n\r\n    margin: 0;\r\n\r\n    font-family: \"Marcellus\", serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            48px,\r\n            4.4vw,\r\n            64px\r\n        );\r\n\r\n    line-height: 1.06;\r\n\r\n    font-weight: 400;\r\n\r\n    letter-spacing: -1.1px;\r\n\r\n    color: #FFFFFF;\r\n\r\n}\r\n\r\n\r\n.hamza-gallery-hero-heading span {\r\n\r\n    color: var(--gold);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-text {\r\n\r\n    max-width: 690px;\r\n\r\n    margin:\r\n        20px\r\n        auto\r\n        0;\r\n\r\n    font-family: \"Manrope\", sans-serif;\r\n\r\n    font-size: 16.5px;\r\n\r\n    line-height: 1.7;\r\n\r\n    color:\r\n        rgba(255,255,255,.86);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FLOATING OUTLINE ART\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-art {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 4;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 2.1;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n\r\n    pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.hero-camera {\r\n\r\n    width: 58px;\r\n\r\n    left: 4%;\r\n\r\n    top: 18%;\r\n\r\n    color:\r\n        rgba(250,175,17,.42);\r\n\r\n    animation:\r\n        hamzaGalleryHeroFloatA\r\n        8s\r\n        ease-in-out\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n.hero-book {\r\n\r\n    width: 63px;\r\n\r\n    right: 5%;\r\n\r\n    bottom: 14%;\r\n\r\n    color:\r\n        rgba(254,239,207,.40);\r\n\r\n    animation:\r\n        hamzaGalleryHeroFloatB\r\n        10s\r\n        ease-in-out\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n.hero-school {\r\n\r\n    width: 60px;\r\n\r\n    right: 7%;\r\n\r\n    top: 15%;\r\n\r\n    color:\r\n        rgba(170,139,226,.43);\r\n\r\n    animation:\r\n        hamzaGalleryHeroFloatA\r\n        9.5s\r\n        ease-in-out\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STARS\r\n========================================================= *\/\r\n\r\n.hamza-gallery-hero-star {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 4;\r\n\r\n    pointer-events: none;\r\n\r\n    line-height: 1;\r\n\r\n}\r\n\r\n\r\n.hero-star-1 {\r\n\r\n    left: 12%;\r\n    bottom: 17%;\r\n\r\n    font-size: 12px;\r\n\r\n    color:\r\n        rgba(250,175,17,.46);\r\n\r\n    animation:\r\n        hamzaGalleryHeroFloatB\r\n        7.5s\r\n        ease-in-out\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n.hero-star-2 {\r\n\r\n    right: 18%;\r\n    top: 16%;\r\n\r\n    font-size: 9px;\r\n\r\n    color:\r\n        rgba(79,147,235,.44);\r\n\r\n    animation:\r\n        hamzaGalleryHeroFloatA\r\n        9s\r\n        ease-in-out\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n.hero-star-3 {\r\n\r\n    right: 16%;\r\n    bottom: 15%;\r\n\r\n    font-size: 13px;\r\n\r\n    color:\r\n        rgba(250,175,17,.40);\r\n\r\n    animation:\r\n        hamzaGalleryHeroFloatB\r\n        11s\r\n        ease-in-out\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FLOAT ANIMATION\r\n========================================================= *\/\r\n\r\n@keyframes hamzaGalleryHeroFloatA {\r\n\r\n    0%,\r\n    100% {\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n        opacity: .32;\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateY(-8px);\r\n\r\n        opacity: .48;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes hamzaGalleryHeroFloatB {\r\n\r\n    0%,\r\n    100% {\r\n\r\n        transform:\r\n            translateY(-2px);\r\n\r\n        opacity: .30;\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateY(7px);\r\n\r\n        opacity: .46;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n    .hamza-gallery-hero {\r\n\r\n        height: 420px;\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-wrap {\r\n\r\n        width:\r\n            calc(100% - 60px);\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-heading {\r\n\r\n        font-size: 54px;\r\n\r\n    }\r\n\r\n\r\n    .gallery-hero-photo-1 {\r\n\r\n        width: 240px;\r\n        height: 190px;\r\n\r\n    }\r\n\r\n\r\n    .gallery-hero-photo-4 {\r\n\r\n        width: 260px;\r\n        height: 195px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .hamza-gallery-hero {\r\n\r\n        height: 420px;\r\n\r\n        min-height: 400px;\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-wrap {\r\n\r\n        width:\r\n            calc(100% - 40px);\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-label {\r\n\r\n        margin-bottom: 14px;\r\n\r\n        font-size: 11px;\r\n\r\n        letter-spacing: 1.3px;\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-heading {\r\n\r\n        font-size: 40px;\r\n\r\n        line-height: 1.08;\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-text {\r\n\r\n        margin-top: 17px;\r\n\r\n        font-size: 14.5px;\r\n\r\n        line-height: 1.65;\r\n\r\n    }\r\n\r\n\r\n    \/* collage toned down *\/\r\n\r\n    .gallery-hero-photo {\r\n\r\n        opacity: .16;\r\n\r\n    }\r\n\r\n\r\n    .gallery-hero-photo-1 {\r\n\r\n        width: 180px;\r\n        height: 150px;\r\n\r\n        left: -65px;\r\n        top: -15px;\r\n\r\n    }\r\n\r\n\r\n    .gallery-hero-photo-2 {\r\n\r\n        width: 150px;\r\n        height: 120px;\r\n\r\n        left: -25px;\r\n        bottom: -30px;\r\n\r\n    }\r\n\r\n\r\n    .gallery-hero-photo-3 {\r\n\r\n        width: 160px;\r\n        height: 125px;\r\n\r\n        right: -30px;\r\n        top: -10px;\r\n\r\n    }\r\n\r\n\r\n    .gallery-hero-photo-4 {\r\n\r\n        width: 180px;\r\n        height: 145px;\r\n\r\n        right: -55px;\r\n        bottom: -28px;\r\n\r\n    }\r\n\r\n\r\n    .hero-camera {\r\n\r\n        width: 42px;\r\n\r\n        left: 3%;\r\n\r\n        top: 12%;\r\n\r\n    }\r\n\r\n\r\n    .hero-book {\r\n\r\n        width: 45px;\r\n\r\n        right: 3%;\r\n\r\n        bottom: 10%;\r\n\r\n    }\r\n\r\n\r\n    .hero-school {\r\n\r\n        display: none;\r\n\r\n    }\r\n\r\n\r\n    .hero-star-2 {\r\n\r\n        display: none;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .hamza-gallery-hero {\r\n\r\n        height: 400px;\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-wrap {\r\n\r\n        width:\r\n            calc(100% - 30px);\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-heading {\r\n\r\n        font-size: 36px;\r\n\r\n    }\r\n\r\n\r\n    .hamza-gallery-hero-text {\r\n\r\n        font-size: 14px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .hamza-gallery-hero-art,\r\n    .hamza-gallery-hero-star {\r\n\r\n        animation: none !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-82e9bfe elementor-section-stretched elementor-section-content-middle elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"82e9bfe\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4579420\" data-id=\"4579420\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b911275 elementor-widget elementor-widget-html\" data-id=\"b911275\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n     HAMZA ISLAMIC SCHOOL\r\n     FULL GALLERY FILTER\r\n     ALL IMAGES + CATEGORY FILTER + LIGHTBOX\r\n========================================================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Marcellus&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<section class=\"his-full-gallery\" id=\"hisFullGallery\">\r\n\r\n    <div class=\"his-gallery-wrap\">\r\n\r\n\r\n        <!-- =================================================\r\n             FILTER BAR\r\n        ================================================== -->\r\n\r\n        <div class=\"his-gallery-filter\" role=\"tablist\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn active\"\r\n                data-filter=\"all\"\r\n            >\r\n                ALL\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn\"\r\n                data-filter=\"academics\"\r\n            >\r\n                ACADEMICS\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn\"\r\n                data-filter=\"activities\"\r\n            >\r\n                ACTIVITIES\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn\"\r\n                data-filter=\"events\"\r\n            >\r\n                EVENTS\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn\"\r\n                data-filter=\"trips\"\r\n            >\r\n                TRIPS\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn\"\r\n                data-filter=\"achievements\"\r\n            >\r\n                ACHIEVEMENTS\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"his-gallery-filter-btn\"\r\n                data-filter=\"campus\"\r\n            >\r\n                CAMPUS\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             IMAGE COUNT\r\n        ================================================== -->\r\n\r\n        <div class=\"his-gallery-meta\">\r\n\r\n            <span class=\"his-gallery-meta-line\"><\/span>\r\n\r\n            <div>\r\n                <span id=\"hisGalleryCount\">0<\/span>\r\n                MOMENTS FROM HAMZA\r\n            <\/div>\r\n\r\n            <span class=\"his-gallery-meta-line\"><\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             GALLERY\r\n             IMAGES ARE GENERATED THROUGH JAVASCRIPT\r\n        ================================================== -->\r\n\r\n        <div\r\n            class=\"his-gallery-grid\"\r\n            id=\"hisGalleryGrid\"\r\n        ><\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             EMPTY CATEGORY MESSAGE\r\n        ================================================== -->\r\n\r\n        <div\r\n            class=\"his-gallery-empty\"\r\n            id=\"hisGalleryEmpty\"\r\n        >\r\n            More moments from this category will be added soon.\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         LIGHTBOX\r\n    ====================================================== -->\r\n\r\n    <div\r\n        class=\"his-gallery-lightbox\"\r\n        id=\"hisGalleryLightbox\"\r\n        aria-hidden=\"true\"\r\n    >\r\n\r\n        <button\r\n            class=\"his-lightbox-close\"\r\n            id=\"hisLightboxClose\"\r\n            type=\"button\"\r\n            aria-label=\"Close gallery\"\r\n        >\r\n            \u00d7\r\n        <\/button>\r\n\r\n\r\n        <button\r\n            class=\"his-lightbox-arrow his-lightbox-prev\"\r\n            id=\"hisLightboxPrev\"\r\n            type=\"button\"\r\n            aria-label=\"Previous photograph\"\r\n        >\r\n            \u2190\r\n        <\/button>\r\n\r\n\r\n        <div class=\"his-lightbox-image-wrap\">\r\n\r\n            <img decoding=\"async\"\r\n                id=\"hisLightboxImage\"\r\n                src=\"\"\r\n                alt=\"Hamza Islamic School Gallery\"\r\n            >\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n            class=\"his-lightbox-arrow his-lightbox-next\"\r\n            id=\"hisLightboxNext\"\r\n            type=\"button\"\r\n            aria-label=\"Next photograph\"\r\n        >\r\n            \u2192\r\n        <\/button>\r\n\r\n\r\n        <div class=\"his-lightbox-counter\">\r\n            <span id=\"hisLightboxCurrent\">1<\/span>\r\n            \/\r\n            <span id=\"hisLightboxTotal\">1<\/span>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n========================================================= *\/\r\n\r\n.his-full-gallery {\r\n\r\n    --purple: #3A2E81;\r\n    --purple-soft: #575581;\r\n    --gold: #FAAF11;\r\n    --cream: #FEEFCF;\r\n    --white: #FFFFFF;\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    padding:\r\n        34px\r\n        0\r\n        105px;\r\n\r\n    background:\r\n        #FFFFFF;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WRAPPER\r\n========================================================= *\/\r\n\r\n.his-gallery-wrap {\r\n\r\n    width:\r\n        min(\r\n            1320px,\r\n            calc(100% - 80px)\r\n        );\r\n\r\n    margin:\r\n        0 auto;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTER BAR\r\n========================================================= *\/\r\n\r\n.his-gallery-filter {\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 7px;\r\n\r\n    width: 100%;\r\n\r\n    padding:\r\n        0\r\n        0\r\n        17px;\r\n\r\n    border-bottom:\r\n        1px solid\r\n        rgba(58,46,129,.10);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTER BUTTON\r\n========================================================= *\/\r\n\r\n.his-gallery-filter-btn {\r\n\r\n    position: relative;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    min-height: 42px;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    padding:\r\n        0\r\n        18px;\r\n\r\n    border: 0;\r\n\r\n    border-radius: 6px;\r\n\r\n    background:\r\n        transparent;\r\n\r\n    color:\r\n        #575581;\r\n\r\n    font-family:\r\n        \"Manrope\",\r\n        sans-serif;\r\n\r\n    font-size: 12px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: .8px;\r\n\r\n    white-space: nowrap;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        background .25s ease,\r\n        color .25s ease,\r\n        transform .25s ease;\r\n\r\n}\r\n\r\n\r\n\/* gold active underline *\/\r\n\r\n.his-gallery-filter-btn::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 50%;\r\n\r\n    bottom: -18px;\r\n\r\n    width: 0;\r\n    height: 3px;\r\n\r\n    border-radius: 5px;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n\r\n    background:\r\n        var(--gold);\r\n\r\n    transition:\r\n        width .3s ease;\r\n\r\n}\r\n\r\n\r\n\/* active *\/\r\n\r\n.his-gallery-filter-btn.active {\r\n\r\n    background:\r\n        var(--purple);\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n}\r\n\r\n\r\n.his-gallery-filter-btn.active::after {\r\n\r\n    width: 38px;\r\n\r\n}\r\n\r\n\r\n\/* hover *\/\r\n\r\n@media (hover:hover) {\r\n\r\n    .his-gallery-filter-btn:not(.active):hover {\r\n\r\n        color:\r\n            var(--purple);\r\n\r\n        background:\r\n            rgba(58,46,129,.045);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL META LINE\r\n========================================================= *\/\r\n\r\n.his-gallery-meta {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        1fr\r\n        auto\r\n        1fr;\r\n\r\n    align-items: center;\r\n\r\n    gap: 18px;\r\n\r\n    margin:\r\n        32px\r\n        0\r\n        27px;\r\n\r\n}\r\n\r\n\r\n.his-gallery-meta-line {\r\n\r\n    height: 1px;\r\n\r\n    background:\r\n        rgba(58,46,129,.09);\r\n\r\n}\r\n\r\n\r\n.his-gallery-meta div {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 7px;\r\n\r\n    font-family:\r\n        \"Manrope\",\r\n        sans-serif;\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.3px;\r\n\r\n    color:\r\n        rgba(58,46,129,.48);\r\n\r\n}\r\n\r\n\r\n.his-gallery-meta div span {\r\n\r\n    color:\r\n        var(--gold);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MASONRY GALLERY\r\n\r\n   Natural image proportions are retained.\r\n========================================================= *\/\r\n\r\n.his-gallery-grid {\r\n\r\n    column-count: 4;\r\n\r\n    column-gap: 12px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GALLERY ITEM\r\n========================================================= *\/\r\n\r\n.his-gallery-item {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    margin:\r\n        0\r\n        0\r\n        12px;\r\n\r\n    display: inline-block;\r\n\r\n    break-inside: avoid;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 12px;\r\n\r\n    background:\r\n        #F6F4FA;\r\n\r\n    cursor: pointer;\r\n\r\n    vertical-align: top;\r\n\r\n    opacity: 1;\r\n\r\n    transform:\r\n        translateY(0);\r\n\r\n    animation:\r\n        hisGalleryReveal\r\n        .45s\r\n        ease\r\n        both;\r\n\r\n}\r\n\r\n\r\n@keyframes hisGalleryReveal {\r\n\r\n    from {\r\n\r\n        opacity: 0;\r\n\r\n        transform:\r\n            translateY(8px);\r\n\r\n    }\r\n\r\n    to {\r\n\r\n        opacity: 1;\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE\r\n========================================================= *\/\r\n\r\n.his-gallery-item img {\r\n\r\n    display: block;\r\n\r\n    width: 100%;\r\n\r\n    height: auto;\r\n\r\n    min-height: 190px;\r\n\r\n    object-fit: cover;\r\n\r\n    transition:\r\n        transform\r\n        .8s\r\n        cubic-bezier(.2,.7,.2,1);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBTLE IMAGE SHADE\r\n========================================================= *\/\r\n\r\n.his-gallery-item::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    z-index: 2;\r\n\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to top,\r\n            rgba(58,46,129,.10),\r\n            transparent 40%\r\n        );\r\n\r\n    pointer-events: none;\r\n\r\n    opacity: .55;\r\n\r\n    transition:\r\n        opacity .3s ease;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL GOLD CORNER\r\n========================================================= *\/\r\n\r\n.his-gallery-item::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    z-index: 4;\r\n\r\n    top: 13px;\r\n    right: 13px;\r\n\r\n    width: 27px;\r\n    height: 27px;\r\n\r\n    border-top:\r\n        1px solid\r\n        rgba(250,175,17,.78);\r\n\r\n    border-right:\r\n        1px solid\r\n        rgba(250,175,17,.78);\r\n\r\n    opacity: 0;\r\n\r\n    pointer-events: none;\r\n\r\n    transition:\r\n        opacity .3s ease,\r\n        width .3s ease,\r\n        height .3s ease;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HOVER\r\n========================================================= *\/\r\n\r\n@media (hover:hover) {\r\n\r\n    .his-gallery-item:hover img {\r\n\r\n        transform:\r\n            scale(1.035);\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-item:hover::after {\r\n\r\n        opacity: .8;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-item:hover::before {\r\n\r\n        opacity: 1;\r\n\r\n        width: 35px;\r\n        height: 35px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HIDDEN\r\n========================================================= *\/\r\n\r\n.his-gallery-item.is-hidden {\r\n\r\n    display: none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EMPTY\r\n========================================================= *\/\r\n\r\n.his-gallery-empty {\r\n\r\n    display: none;\r\n\r\n    padding:\r\n        65px\r\n        20px;\r\n\r\n    text-align: center;\r\n\r\n    font-family:\r\n        \"Manrope\",\r\n        sans-serif;\r\n\r\n    font-size: 15px;\r\n\r\n    line-height: 1.6;\r\n\r\n    color:\r\n        rgba(58,46,129,.58);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIGHTBOX\r\n========================================================= *\/\r\n\r\n.his-gallery-lightbox {\r\n\r\n    position: fixed;\r\n\r\n    z-index: 999999;\r\n\r\n    inset: 0;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    visibility: hidden;\r\n\r\n    opacity: 0;\r\n\r\n    padding:\r\n        60px\r\n        90px;\r\n\r\n    background:\r\n        rgba(29,22,72,.94);\r\n\r\n    backdrop-filter:\r\n        blur(9px);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(9px);\r\n\r\n    transition:\r\n        opacity .3s ease,\r\n        visibility .3s ease;\r\n\r\n}\r\n\r\n\r\n.his-gallery-lightbox.open {\r\n\r\n    visibility: visible;\r\n\r\n    opacity: 1;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIGHTBOX IMAGE\r\n========================================================= *\/\r\n\r\n.his-lightbox-image-wrap {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n}\r\n\r\n\r\n.his-lightbox-image-wrap img {\r\n\r\n    display: block;\r\n\r\n    max-width: 100%;\r\n\r\n    max-height: 82vh;\r\n\r\n    width: auto;\r\n    height: auto;\r\n\r\n    object-fit: contain;\r\n\r\n    border-radius: 10px;\r\n\r\n    box-shadow:\r\n        0 30px 90px\r\n        rgba(0,0,0,.34);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLOSE\r\n========================================================= *\/\r\n\r\n.his-lightbox-close {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 5;\r\n\r\n    right: 28px;\r\n    top: 22px;\r\n\r\n    width: 45px;\r\n    height: 45px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.28);\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.05);\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 29px;\r\n\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROWS\r\n========================================================= *\/\r\n\r\n.his-lightbox-arrow {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 5;\r\n\r\n    top: 50%;\r\n\r\n    width: 50px;\r\n    height: 50px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.25);\r\n\r\n    border-radius: 50%;\r\n\r\n    transform:\r\n        translateY(-50%);\r\n\r\n    background:\r\n        rgba(255,255,255,.05);\r\n\r\n    color:\r\n        #FFFFFF;\r\n\r\n    font-size: 20px;\r\n\r\n    cursor: pointer;\r\n\r\n}\r\n\r\n\r\n.his-lightbox-prev {\r\n\r\n    left: 25px;\r\n\r\n}\r\n\r\n\r\n.his-lightbox-next {\r\n\r\n    right: 25px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COUNTER\r\n========================================================= *\/\r\n\r\n.his-lightbox-counter {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 5;\r\n\r\n    left: 50%;\r\n\r\n    bottom: 24px;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n\r\n    font-family:\r\n        \"Manrope\",\r\n        sans-serif;\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1px;\r\n\r\n    color:\r\n        rgba(255,255,255,.70);\r\n\r\n}\r\n\r\n\r\n.his-lightbox-counter\r\n#hisLightboxCurrent {\r\n\r\n    color:\r\n        var(--gold);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .his-full-gallery {\r\n\r\n        padding:\r\n            30px\r\n            0\r\n            90px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-wrap {\r\n\r\n        width:\r\n            calc(100% - 60px);\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-filter {\r\n\r\n        justify-content:\r\n            flex-start;\r\n\r\n        overflow-x:\r\n            auto;\r\n\r\n        overflow-y:\r\n            hidden;\r\n\r\n        scrollbar-width:\r\n            none;\r\n\r\n        -webkit-overflow-scrolling:\r\n            touch;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-filter::-webkit-scrollbar {\r\n\r\n        display: none;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-grid {\r\n\r\n        column-count: 3;\r\n\r\n        column-gap: 10px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-item {\r\n\r\n        margin-bottom: 10px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .his-full-gallery {\r\n\r\n        padding:\r\n            22px\r\n            0\r\n            65px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-wrap {\r\n\r\n        width: 100%;\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       FILTER \u2014 SINGLE HORIZONTAL LINE\r\n    ========================================== *\/\r\n\r\n    .his-gallery-filter {\r\n\r\n        justify-content:\r\n            flex-start;\r\n\r\n        gap: 6px;\r\n\r\n        padding:\r\n            0\r\n            18px\r\n            15px;\r\n\r\n        overflow-x:\r\n            auto;\r\n\r\n        overflow-y:\r\n            hidden;\r\n\r\n        white-space:\r\n            nowrap;\r\n\r\n        scroll-snap-type:\r\n            x proximity;\r\n\r\n        scrollbar-width:\r\n            none;\r\n\r\n        -webkit-overflow-scrolling:\r\n            touch;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-filter::-webkit-scrollbar {\r\n\r\n        display: none;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-filter-btn {\r\n\r\n        min-height: 39px;\r\n\r\n        padding:\r\n            0\r\n            15px;\r\n\r\n        font-size: 10px;\r\n\r\n        letter-spacing: .6px;\r\n\r\n        scroll-snap-align:\r\n            center;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-filter-btn::after {\r\n\r\n        bottom: -16px;\r\n\r\n    }\r\n\r\n\r\n    \/* meta *\/\r\n\r\n    .his-gallery-meta {\r\n\r\n        width:\r\n            calc(100% - 36px);\r\n\r\n        margin:\r\n            25px\r\n            auto\r\n            20px;\r\n\r\n        gap: 10px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-meta div {\r\n\r\n        font-size: 8px;\r\n\r\n        letter-spacing: .9px;\r\n\r\n    }\r\n\r\n\r\n    \/* gallery *\/\r\n\r\n    .his-gallery-grid {\r\n\r\n        width:\r\n            calc(100% - 28px);\r\n\r\n        margin:\r\n            0 auto;\r\n\r\n        column-count: 2;\r\n\r\n        column-gap: 7px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-item {\r\n\r\n        margin-bottom: 7px;\r\n\r\n        border-radius: 8px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-item img {\r\n\r\n        min-height: 130px;\r\n\r\n    }\r\n\r\n\r\n    \/* lightbox *\/\r\n\r\n    .his-gallery-lightbox {\r\n\r\n        padding:\r\n            55px\r\n            15px;\r\n\r\n    }\r\n\r\n\r\n    .his-lightbox-close {\r\n\r\n        top: 12px;\r\n        right: 13px;\r\n\r\n        width: 40px;\r\n        height: 40px;\r\n\r\n        font-size: 26px;\r\n\r\n    }\r\n\r\n\r\n    .his-lightbox-arrow {\r\n\r\n        top: auto;\r\n\r\n        bottom: 15px;\r\n\r\n        width: 42px;\r\n        height: 42px;\r\n\r\n        transform: none;\r\n\r\n    }\r\n\r\n\r\n    .his-lightbox-prev {\r\n\r\n        left: 15px;\r\n\r\n    }\r\n\r\n\r\n    .his-lightbox-next {\r\n\r\n        right: 15px;\r\n\r\n    }\r\n\r\n\r\n    .his-lightbox-counter {\r\n\r\n        bottom: 30px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n    .his-gallery-filter {\r\n\r\n        padding-left: 14px;\r\n\r\n        padding-right: 14px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-grid {\r\n\r\n        width:\r\n            calc(100% - 20px);\r\n\r\n        gap: 6px;\r\n\r\n        column-gap: 6px;\r\n\r\n    }\r\n\r\n\r\n    .his-gallery-item {\r\n\r\n        margin-bottom: 6px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .his-gallery-item,\r\n    .his-gallery-item img {\r\n\r\n        animation: none !important;\r\n\r\n        transition: none !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    \/* =====================================================\r\n       IMAGE DATABASE\r\n\r\n       NOTE:\r\n       ALL automatically displays every image below.\r\n\r\n       You can move any photograph to another category later\r\n       simply by changing its \"category\" value.\r\n\r\n       Allowed:\r\n       academics\r\n       activities\r\n       events\r\n       trips\r\n       achievements\r\n       campus\r\n    ====================================================== *\/\r\n\r\n    const galleryImages = [\r\n\r\n        \/* =================================================\r\n           ACADEMICS\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.11-AM.jpeg\",\r\n            category: \"academics\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.07-AM.jpeg\",\r\n            category: \"academics\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.08-AM.jpeg\",\r\n            category: \"academics\"\r\n        },\r\n\r\n\r\n        \/* =================================================\r\n           ACTIVITIES\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.31-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.30-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.12-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.05-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.04-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.26.46-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.26.43-AM.jpeg\",\r\n            category: \"activities\"\r\n        },\r\n\r\n\r\n        \/* =================================================\r\n           ACHIEVEMENTS\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.28-AM-1.jpeg\",\r\n            category: \"achievements\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.28-AM.jpeg\",\r\n            category: \"achievements\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.29-AM.jpeg\",\r\n            category: \"achievements\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.36-AM.jpeg\",\r\n            category: \"achievements\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.22.39-AM.jpeg\",\r\n            category: \"achievements\"\r\n        },\r\n\r\n\r\n        \/* =================================================\r\n           SCHOOL EVENTS\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.29-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.19-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.29-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.28-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.27-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.25-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.25-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.24-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.16-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.16-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.15-AM-2.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.15-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.15-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.14-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.12-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.11-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.09-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.08-AM-2.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.08-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.07-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.03-AM.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.34-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.22-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.21-AM-1-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.20-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.19-AM-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.29.15-AM-2-1.jpeg\",\r\n            category: \"events\"\r\n        },\r\n\r\n\r\n        \/* =================================================\r\n           SCHOOL TRIPS\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.23.32-AM.jpeg\",\r\n            category: \"trips\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.23.15-AM.jpeg\",\r\n            category: \"trips\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/ChatGPT-Image-Aug-24-2026-05_17_31-PM.png\",\r\n            category: \"trips\"\r\n        },\r\n\r\n\r\n        \/* =================================================\r\n           CAMPUS \/ SCHOOL ENVIRONMENT\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.13-AM.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.34-AM-e1787862628734.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.33-AM-1-e1787862643853.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.33-AM.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.32-AM-1.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.30-AM.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.29-AM-e1787862676925.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/WhatsApp-Image-2026-08-12-at-11.27.28-AM-1.jpeg\",\r\n            category: \"campus\"\r\n        },\r\n\r\n\r\n        \/* =================================================\r\n           ADDITIONAL SCHOOL MOMENTS\r\n        ================================================== *\/\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/Screenshot-2026-08-28-020448.png\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/Screenshot-2026-08-28-020458.png\",\r\n            category: \"activities\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/Screenshot-2026-08-28-020509.png\",\r\n            category: \"events\"\r\n        },\r\n\r\n        {\r\n            src: \"https:\/\/hamzaislamicschool.com\/wp-content\/uploads\/2019\/12\/Screenshot-2026-08-28-020516.png\",\r\n            category: \"events\"\r\n        }\r\n\r\n    ];\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENTS\r\n    ====================================================== *\/\r\n\r\n    const section =\r\n        document.getElementById(\r\n            \"hisFullGallery\"\r\n        );\r\n\r\n\r\n    const grid =\r\n        document.getElementById(\r\n            \"hisGalleryGrid\"\r\n        );\r\n\r\n\r\n    const filterButtons =\r\n        section.querySelectorAll(\r\n            \".his-gallery-filter-btn\"\r\n        );\r\n\r\n\r\n    const countElement =\r\n        document.getElementById(\r\n            \"hisGalleryCount\"\r\n        );\r\n\r\n\r\n    const emptyElement =\r\n        document.getElementById(\r\n            \"hisGalleryEmpty\"\r\n        );\r\n\r\n\r\n    \/* =====================================================\r\n       LIGHTBOX ELEMENTS\r\n    ====================================================== *\/\r\n\r\n    const lightbox =\r\n        document.getElementById(\r\n            \"hisGalleryLightbox\"\r\n        );\r\n\r\n\r\n    const lightboxImage =\r\n        document.getElementById(\r\n            \"hisLightboxImage\"\r\n        );\r\n\r\n\r\n    const lightboxClose =\r\n        document.getElementById(\r\n            \"hisLightboxClose\"\r\n        );\r\n\r\n\r\n    const lightboxPrev =\r\n        document.getElementById(\r\n            \"hisLightboxPrev\"\r\n        );\r\n\r\n\r\n    const lightboxNext =\r\n        document.getElementById(\r\n            \"hisLightboxNext\"\r\n        );\r\n\r\n\r\n    const lightboxCurrent =\r\n        document.getElementById(\r\n            \"hisLightboxCurrent\"\r\n        );\r\n\r\n\r\n    const lightboxTotal =\r\n        document.getElementById(\r\n            \"hisLightboxTotal\"\r\n        );\r\n\r\n\r\n    let activeFilter = \"all\";\r\n\r\n    let visibleImages = [];\r\n\r\n    let currentLightboxIndex = 0;\r\n\r\n\r\n    \/* =====================================================\r\n       BUILD GALLERY\r\n    ====================================================== *\/\r\n\r\n    function buildGallery() {\r\n\r\n        grid.innerHTML = \"\";\r\n\r\n\r\n        galleryImages.forEach(\r\n            function (image, index) {\r\n\r\n                const item =\r\n                    document.createElement(\r\n                        \"article\"\r\n                    );\r\n\r\n\r\n                item.className =\r\n                    \"his-gallery-item\";\r\n\r\n\r\n                item.dataset.category =\r\n                    image.category;\r\n\r\n\r\n                item.dataset.index =\r\n                    index;\r\n\r\n\r\n                const img =\r\n                    document.createElement(\r\n                        \"img\"\r\n                    );\r\n\r\n\r\n                img.src =\r\n                    image.src;\r\n\r\n\r\n                img.alt =\r\n                    \"Hamza Islamic School gallery photograph\";\r\n\r\n\r\n                img.loading =\r\n                    index < 8\r\n                        ? \"eager\"\r\n                        : \"lazy\";\r\n\r\n\r\n                img.decoding =\r\n                    \"async\";\r\n\r\n\r\n                item.appendChild(\r\n                    img\r\n                );\r\n\r\n\r\n                item.addEventListener(\r\n                    \"click\",\r\n                    function () {\r\n\r\n                        openLightbox(\r\n                            image.src\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                grid.appendChild(\r\n                    item\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        applyFilter(\r\n            \"all\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FILTER\r\n    ====================================================== *\/\r\n\r\n    function applyFilter(filter) {\r\n\r\n        activeFilter =\r\n            filter;\r\n\r\n\r\n        const items =\r\n            grid.querySelectorAll(\r\n                \".his-gallery-item\"\r\n            );\r\n\r\n\r\n        let visibleCount = 0;\r\n\r\n\r\n        visibleImages = [];\r\n\r\n\r\n        items.forEach(\r\n            function (item) {\r\n\r\n                const category =\r\n                    item.dataset.category;\r\n\r\n\r\n                const originalIndex =\r\n                    Number(\r\n                        item.dataset.index\r\n                    );\r\n\r\n\r\n                const shouldShow =\r\n                    filter === \"all\" ||\r\n                    category === filter;\r\n\r\n\r\n                if (shouldShow) {\r\n\r\n                    item.classList.remove(\r\n                        \"is-hidden\"\r\n                    );\r\n\r\n\r\n                    visibleCount++;\r\n\r\n\r\n                    visibleImages.push(\r\n                        galleryImages[\r\n                            originalIndex\r\n                        ].src\r\n                    );\r\n\r\n                } else {\r\n\r\n                    item.classList.add(\r\n                        \"is-hidden\"\r\n                    );\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n\r\n        countElement.textContent =\r\n            visibleCount;\r\n\r\n\r\n        emptyElement.style.display =\r\n            visibleCount === 0\r\n                ? \"block\"\r\n                : \"none\";\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FILTER BUTTON EVENTS\r\n    ====================================================== *\/\r\n\r\n    filterButtons.forEach(\r\n        function (button) {\r\n\r\n            button.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    filterButtons.forEach(\r\n                        function (btn) {\r\n\r\n                            btn.classList.remove(\r\n                                \"active\"\r\n                            );\r\n\r\n                        }\r\n                    );\r\n\r\n\r\n                    button.classList.add(\r\n                        \"active\"\r\n                    );\r\n\r\n\r\n                    const filter =\r\n                        button.dataset.filter;\r\n\r\n\r\n                    applyFilter(\r\n                        filter\r\n                    );\r\n\r\n\r\n                    \/* keep selected item visible on mobile *\/\r\n\r\n                    if (\r\n                        window.innerWidth <= 1100\r\n                    ) {\r\n\r\n                        button.scrollIntoView({\r\n\r\n                            behavior:\r\n                                \"smooth\",\r\n\r\n                            block:\r\n                                \"nearest\",\r\n\r\n                            inline:\r\n                                \"center\"\r\n\r\n                        });\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       LIGHTBOX\r\n    ====================================================== *\/\r\n\r\n    function openLightbox(src) {\r\n\r\n        currentLightboxIndex =\r\n            visibleImages.indexOf(\r\n                src\r\n            );\r\n\r\n\r\n        if (\r\n            currentLightboxIndex < 0\r\n        ) {\r\n\r\n            currentLightboxIndex = 0;\r\n\r\n        }\r\n\r\n\r\n        updateLightbox();\r\n\r\n\r\n        lightbox.classList.add(\r\n            \"open\"\r\n        );\r\n\r\n\r\n        lightbox.setAttribute(\r\n            \"aria-hidden\",\r\n            \"false\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"hidden\";\r\n\r\n    }\r\n\r\n\r\n    function closeLightbox() {\r\n\r\n        lightbox.classList.remove(\r\n            \"open\"\r\n        );\r\n\r\n\r\n        lightbox.setAttribute(\r\n            \"aria-hidden\",\r\n            \"true\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"\";\r\n\r\n    }\r\n\r\n\r\n    function updateLightbox() {\r\n\r\n        if (\r\n            visibleImages.length === 0\r\n        ) {\r\n            return;\r\n        }\r\n\r\n\r\n        lightboxImage.src =\r\n            visibleImages[\r\n                currentLightboxIndex\r\n            ];\r\n\r\n\r\n        lightboxCurrent.textContent =\r\n            currentLightboxIndex + 1;\r\n\r\n\r\n        lightboxTotal.textContent =\r\n            visibleImages.length;\r\n\r\n    }\r\n\r\n\r\n    function showNext() {\r\n\r\n        currentLightboxIndex =\r\n            (\r\n                currentLightboxIndex + 1\r\n            )\r\n            %\r\n            visibleImages.length;\r\n\r\n\r\n        updateLightbox();\r\n\r\n    }\r\n\r\n\r\n    function showPrevious() {\r\n\r\n        currentLightboxIndex =\r\n            (\r\n                currentLightboxIndex -\r\n                1 +\r\n                visibleImages.length\r\n            )\r\n            %\r\n            visibleImages.length;\r\n\r\n\r\n        updateLightbox();\r\n\r\n    }\r\n\r\n\r\n    lightboxClose.addEventListener(\r\n        \"click\",\r\n        closeLightbox\r\n    );\r\n\r\n\r\n    lightboxNext.addEventListener(\r\n        \"click\",\r\n        showNext\r\n    );\r\n\r\n\r\n    lightboxPrev.addEventListener(\r\n        \"click\",\r\n        showPrevious\r\n    );\r\n\r\n\r\n    \/* click outside image *\/\r\n\r\n    lightbox.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            if (\r\n                event.target === lightbox\r\n            ) {\r\n\r\n                closeLightbox();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* keyboard navigation *\/\r\n\r\n    document.addEventListener(\r\n        \"keydown\",\r\n        function (event) {\r\n\r\n            if (\r\n                !lightbox.classList.contains(\r\n                    \"open\"\r\n                )\r\n            ) {\r\n                return;\r\n            }\r\n\r\n\r\n            if (\r\n                event.key === \"Escape\"\r\n            ) {\r\n\r\n                closeLightbox();\r\n\r\n            }\r\n\r\n\r\n            if (\r\n                event.key === \"ArrowRight\"\r\n            ) {\r\n\r\n                showNext();\r\n\r\n            }\r\n\r\n\r\n            if (\r\n                event.key === \"ArrowLeft\"\r\n            ) {\r\n\r\n                showPrevious();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       START\r\n    ====================================================== *\/\r\n\r\n    buildGallery();\r\n\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2726 \u2726 \u2726 \u2726 SCHOOL LIFE Moments That Become Memories A glimpse into the learning, celebrations, activities, achievements, and everyday experiences that make life at Hamza special. ALL ACADEMICS ACTIVITIES EVENTS TRIPS ACHIEVEMENTS CAMPUS 0 MOMENTS FROM HAMZA More moments from this category will be added soon. \u00d7 \u2190 \u2192 1 \/ 1<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-4470","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/pages\/4470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/comments?post=4470"}],"version-history":[{"count":11,"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/pages\/4470\/revisions"}],"predecessor-version":[{"id":4686,"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/pages\/4470\/revisions\/4686"}],"wp:attachment":[{"href":"https:\/\/hamzaislamicschool.com\/index.php\/wp-json\/wp\/v2\/media?parent=4470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}