{"id":484,"date":"2025-10-02T15:19:47","date_gmt":"2025-10-02T15:19:47","guid":{"rendered":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/?page_id=484"},"modified":"2026-07-14T16:49:28","modified_gmt":"2026-07-14T16:49:28","slug":"gallery","status":"publish","type":"page","link":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"484\" class=\"elementor elementor-484\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ebeebd e-con-full e-flex e-con e-parent\" data-id=\"1ebeebd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae30659 elementor-widget elementor-widget-image\" data-id=\"ae30659\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"122\" height=\"122\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2025\/09\/Group-2.png\" class=\"attachment-full size-full wp-image-12\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a0938a elementor-widget elementor-widget-heading\" data-id=\"0a0938a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gallery<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b93227 e-con-full e-flex e-con e-parent\" data-id=\"6b93227\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-5fbc88f e-con-full e-flex e-con e-child\" data-id=\"5fbc88f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58428cd elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading\" data-id=\"58428cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">View all <br>\nGallery <br> Images<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-031344b elementor-widget elementor-widget-goarch_vertical_menu\" data-id=\"031344b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"goarch_vertical_menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav class=\"goarch-vertical-menu icon-before\"><ul class=\"goarch-v-menu-list\"><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Home<\/span><\/a><\/li><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/blogs\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Blogs<\/span><\/a><\/li><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/project\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Projects<\/span><\/a><\/li><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/gallery\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Gallery<\/span><\/a><\/li><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/service\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Service<\/span><\/a><\/li><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/team\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Team<\/span><\/a><\/li><li class=\"goarch-v-menu-item depth-0\"><a href=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/contact\/\"><span class=\"goarch-menu-icon\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/span><span class=\"goarch-menu-label\">Contact<\/span><\/a><\/li><\/ul><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4241d14 e-con-full e-flex e-con e-child\" data-id=\"4241d14\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-048f7f5 elementor-widget elementor-widget-goarch_empty_space\" data-id=\"048f7f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"goarch_empty_space.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"goarch-empty-space\" aria-hidden=\"true\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98e36ae elementor-widget elementor-widget-goarch_gallery\" data-id=\"98e36ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"goarch_gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <style>\r\n    .gallery-demo2 {\r\n        display: grid;\r\n        gap: 1rem;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .grid-cols-2 {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .grid-cols-3 {\r\n        grid-template-columns: repeat(3, 1fr);\r\n    }\r\n\r\n    .grid-cols-4 {\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .gallery-item {\r\n        position: relative;\r\n        border-radius: 0px;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        height: 280px;\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n\r\n    .gallery-item:hover {\r\n        transform: scale(1.01);\r\n        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .gallery-image {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        display: block;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .gallery-item:hover .gallery-image {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* Lightbox Styles *\/\r\n    .lightbox-overlay-demo2 {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0, 0, 0, 0.95);\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 9999;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    .lightbox-overlay-demo2.active {\r\n        display: flex;\r\n        opacity: 1;\r\n    }\r\n\r\n    .lightbox-content {\r\n        position: relative;\r\n        max-width: 90%;\r\n        max-height: 90%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n\r\n    .lightbox-image {\r\n        max-width: 100%;\r\n        max-height: 90vh;\r\n        object-fit: contain;\r\n        border-radius: 8px;\r\n    }\r\n\r\n    .lightbox-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border: none;\r\n        color: white;\r\n        width: 50px;\r\n        height: 50px;\r\n        border-radius: 50%;\r\n        font-size: 24px;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: background 0.3s ease;\r\n        backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .lightbox-nav:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .lightbox-prev {\r\n        left: 20px;\r\n    }\r\n\r\n    .lightbox-next {\r\n        right: 20px;\r\n    }\r\n\r\n    .lightbox-close {\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 20px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border: none;\r\n        color: white;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        font-size: 20px;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: background 0.3s ease;\r\n        backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .lightbox-close:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .lightbox-counter {\r\n        position: absolute;\r\n        bottom: 20px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        color: white;\r\n        font-size: 16px;\r\n        background: rgba(0, 0, 0, 0.5);\r\n        padding: 5px 15px;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 1024px) {\r\n        .grid-cols-4 {\r\n            grid-template-columns: repeat(3, 1fr);\r\n        }\r\n        \r\n        .gallery-item {\r\n            height: 252px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .grid-cols-3,\r\n        .grid-cols-4 {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n        \r\n        .gallery-item {\r\n            height: 224px;\r\n        }\r\n        \r\n        .lightbox-nav {\r\n            width: 40px;\r\n            height: 40px;\r\n            font-size: 20px;\r\n        }\r\n        \r\n        .lightbox-prev {\r\n            left: 10px;\r\n        }\r\n        \r\n        .lightbox-next {\r\n            right: 10px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .grid-cols-2,\r\n        .grid-cols-3,\r\n        .grid-cols-4 {\r\n            grid-template-columns: 1fr;\r\n        }\r\n        \r\n        .gallery-item {\r\n            height: 196px;\r\n        }\r\n    }\r\n    <\/style>\r\n\r\n    <div class=\"gallery-demo2 grid-cols-3\">\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"0\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Modern-community-library-set-within-a-converted-1920s-power-plant.-Main-reading-hall.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Modern-community-library-set-within-a-converted-1920s-power-plant.-Main-reading-hall.jpg\" \r\n                     alt=\"Modern Communtiy Library\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"1\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Asymmetric-modern-residential-facade-with-highly-textural-rammed-earth-primary-.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Asymmetric-modern-residential-facade-with-highly-textural-rammed-earth-primary-.jpg\" \r\n                     alt=\"Modern Residential Facade\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"2\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/lucid-origin_A_renovated_micro-apartment_in_a_converted_industrial_loft._The_image_captures_t-0.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/lucid-origin_A_renovated_micro-apartment_in_a_converted_industrial_loft._The_image_captures_t-0.jpg\" \r\n                     alt=\"Micro Apartment Converted Industrial Loft\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"3\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/lucid-origin_A_vibrant_office_atrium._A_mature_twenty-foot_olive_tree_grows_upwards_from_a_su-0.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/lucid-origin_A_vibrant_office_atrium._A_mature_twenty-foot_olive_tree_grows_upwards_from_a_su-0.jpg\" \r\n                     alt=\"A Vibrant Office\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"4\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Industrial-Spaces-into-Offices.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Industrial-Spaces-into-Offices.jpg\" \r\n                     alt=\"Industrial Spaces into Offices\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"5\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Home-Exteriors.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Home-Exteriors.jpg\" \r\n                     alt=\"Home Exteriors\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"6\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Master-Bedroom-Suite.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Master-Bedroom-Suite.jpg\" \r\n                     alt=\"Master Bedroom Suite\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"7\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Designing-Clutter.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Designing-Clutter.jpg\" \r\n                     alt=\"Designing Clutter\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"8\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Focus-with-Paint.jpg\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/Focus-with-Paint.jpg\" \r\n                     alt=\"Focus with Paint\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n            <\/div>\r\n\r\n    <!-- Lightbox -->\r\n    <div class=\"lightbox-overlay-demo2\">\r\n        <button class=\"lightbox-close\">&times;<\/button>\r\n        <button class=\"lightbox-nav lightbox-prev\">&#10094;<\/button>\r\n        <div class=\"lightbox-content\">\r\n            <img decoding=\"async\" src=\"\" alt=\"\" class=\"lightbox-image\">\r\n            <div class=\"lightbox-counter\"><\/div>\r\n        <\/div>\r\n        <button class=\"lightbox-nav lightbox-next\">&#10095;<\/button>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        const galleryItems = document.querySelectorAll('.gallery-demo2 .gallery-item');\r\n        const lightbox = document.querySelector('.lightbox-overlay-demo2');\r\n        const lightboxImage = lightbox.querySelector('.lightbox-image');\r\n        const lightboxClose = lightbox.querySelector('.lightbox-close');\r\n        const lightboxPrev = lightbox.querySelector('.lightbox-prev');\r\n        const lightboxNext = lightbox.querySelector('.lightbox-next');\r\n        const lightboxCounter = lightbox.querySelector('.lightbox-counter');\r\n        \r\n        let currentIndex = 0;\r\n        const totalImages = galleryItems.length;\r\n        \r\n        \/\/ Open lightbox\r\n        galleryItems.forEach((item, index) => {\r\n            item.addEventListener('click', function() {\r\n                currentIndex = parseInt(this.getAttribute('data-index'));\r\n                openLightbox(currentIndex);\r\n            });\r\n        });\r\n        \r\n        function openLightbox(index) {\r\n            const imageSrc = galleryItems[index].getAttribute('data-src');\r\n            lightboxImage.src = imageSrc;\r\n            updateCounter();\r\n            lightbox.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n        }\r\n        \r\n        function closeLightbox() {\r\n            lightbox.classList.remove('active');\r\n            document.body.style.overflow = '';\r\n            setTimeout(() => {\r\n                lightboxImage.src = '';\r\n            }, 300);\r\n        }\r\n        \r\n        function navigate(direction) {\r\n            if (direction === 'next') {\r\n                currentIndex = (currentIndex + 1) % totalImages;\r\n            } else {\r\n                currentIndex = (currentIndex - 1 + totalImages) % totalImages;\r\n            }\r\n            openLightbox(currentIndex);\r\n        }\r\n        \r\n        function updateCounter() {\r\n            lightboxCounter.textContent = `${currentIndex + 1} \/ ${totalImages}`;\r\n        }\r\n        \r\n        \/\/ Event listeners\r\n        lightboxClose.addEventListener('click', closeLightbox);\r\n        lightboxPrev.addEventListener('click', () => navigate('prev'));\r\n        lightboxNext.addEventListener('click', () => navigate('next'));\r\n        \r\n        \/\/ Keyboard navigation\r\n        document.addEventListener('keydown', function(e) {\r\n            if (!lightbox.classList.contains('active')) return;\r\n            \r\n            switch(e.key) {\r\n                case 'Escape':\r\n                    closeLightbox();\r\n                    break;\r\n                case 'ArrowLeft':\r\n                    navigate('prev');\r\n                    break;\r\n                case 'ArrowRight':\r\n                    navigate('next');\r\n                    break;\r\n            }\r\n        });\r\n        \r\n        \/\/ Close lightbox when clicking on overlay (but not on content)\r\n        lightbox.addEventListener('click', function(e) {\r\n            if (e.target === lightbox) {\r\n                closeLightbox();\r\n            }\r\n        });\r\n        \r\n        \/\/ Preload adjacent images for smoother navigation\r\n        function preloadAdjacentImages() {\r\n            const prevIndex = (currentIndex - 1 + totalImages) % totalImages;\r\n            const nextIndex = (currentIndex + 1) % totalImages;\r\n            \r\n            const preloadPrev = new Image();\r\n            preloadPrev.src = galleryItems[prevIndex].getAttribute('data-src');\r\n            \r\n            const preloadNext = new Image();\r\n            preloadNext.src = galleryItems[nextIndex].getAttribute('data-src');\r\n        }\r\n        \r\n        \/\/ Update preload when lightbox opens\r\n        lightbox.addEventListener('transitionend', function() {\r\n            if (lightbox.classList.contains('active')) {\r\n                preloadAdjacentImages();\r\n            }\r\n        });\r\n    });\r\n    <\/script>\r\n    \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bae777 e-con-full e-flex e-con e-parent\" data-id=\"6bae777\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-81fcc85 e-con-full e-flex e-con e-child\" data-id=\"81fcc85\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-957d54f elementor-widget elementor-widget-heading\" data-id=\"957d54f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">View all <br>\nGallery <br> Videos<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2085aaa e-con-full e-flex e-con e-child\" data-id=\"2085aaa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8bfadd elementor-widget elementor-widget-goarch_empty_space\" data-id=\"d8bfadd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"goarch_empty_space.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"goarch-empty-space\" aria-hidden=\"true\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29ccad2 elementor-widget elementor-widget-video_grid\" data-id=\"29ccad2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"video_grid.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"video-grid columns-3\">\r\n                            <div class=\"video-grid-item\" data-type=\"media\" data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/07\/Luminaria-Modelo-Aurora.mp4\">\r\n                    <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/05\/Victorian-Sovereign-Manor.jpg\" alt=\"video thumbnail\">\r\n                                            <span class=\"video-play-icon\">\r\n                            <i class=\"fas fa-play-circle\"><\/i>\r\n                        <\/span>\r\n                                    <\/div>\r\n                            <div class=\"video-grid-item\" data-type=\"media\" data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/07\/videoplayback.mp4\">\r\n                    <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/05\/Lumina-Corporate-HQ.jpg\" alt=\"video thumbnail\">\r\n                                            <span class=\"video-play-icon\">\r\n                            <i class=\"fas fa-play-circle\"><\/i>\r\n                        <\/span>\r\n                                    <\/div>\r\n                            <div class=\"video-grid-item\" data-type=\"media\" data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/06\/hailuo-2_3_sculptural_clay_art_An_ornate_Victorian_manor_house_wrap-around_porch_steep_gabl-0.mp4\">\r\n                    <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/05\/Canopy-Residences.jpg\" alt=\"video thumbnail\">\r\n                                            <span class=\"video-play-icon\">\r\n                            <i class=\"fas fa-play-circle\"><\/i>\r\n                        <\/span>\r\n                                    <\/div>\r\n                            <div class=\"video-grid-item\" data-type=\"media\" data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/07\/videoplayback.mp4\">\r\n                    <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/05\/The-Corinthian-Heritage.jpg\" alt=\"video thumbnail\">\r\n                                            <span class=\"video-play-icon\">\r\n                            <i class=\"fas fa-play-circle\"><\/i>\r\n                        <\/span>\r\n                                    <\/div>\r\n                            <div class=\"video-grid-item\" data-type=\"media\" data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/07\/Luminaria-Modelo-Aurora.mp4\">\r\n                    <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2025\/12\/Villa-de-Lumiere-2.jpg\" alt=\"video thumbnail\">\r\n                                            <span class=\"video-play-icon\">\r\n                            <i class=\"fas fa-play-circle\"><\/i>\r\n                        <\/span>\r\n                                    <\/div>\r\n                            <div class=\"video-grid-item\" data-type=\"youtube\" data-src=\"https:\/\/www.youtube.com\/embed\/u31qwQUeGuM\">\r\n                    <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-content\/uploads\/2026\/05\/Commercial-Space.jpg\" alt=\"video thumbnail\">\r\n                                            <span class=\"video-play-icon\">\r\n                            <i class=\"fas fa-play-circle\"><\/i>\r\n                        <\/span>\r\n                                    <\/div>\r\n                    <\/div>\r\n\r\n        <!-- Video Lightbox -->\r\n        <div class=\"video-lightbox-overlay\">\r\n            <button type=\"button\" class=\"video-lightbox-close\" aria-label=\"Close\">&times;<\/button>\r\n            <button type=\"button\" class=\"video-lightbox-nav video-lightbox-prev\" aria-label=\"Previous\">&#10094;<\/button>\r\n            <div class=\"video-lightbox-content\">\r\n                <div class=\"video-lightbox-frame\"><\/div>\r\n                <div class=\"video-lightbox-counter\"><\/div>\r\n            <\/div>\r\n            <button type=\"button\" class=\"video-lightbox-nav video-lightbox-next\" aria-label=\"Next\">&#10095;<\/button>\r\n        <\/div>\r\n\r\n        <style>\r\n            .video-grid {\r\n                display: grid;\r\n                gap: 20px; \/* overridden by Elementor control *\/\r\n            }\r\n            .video-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }\r\n            .video-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }\r\n            .video-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }\r\n\r\n            .video-grid-item {\r\n                position: relative;\r\n                overflow: hidden;\r\n                cursor: pointer;\r\n            }\r\n            .video-grid-item img {\r\n                width: 100%;\r\n                display: block;\r\n            }\r\n            .video-play-icon {\r\n                position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%, -50%);\r\n                font-size: 40px;\r\n                color: #fff;\r\n                background: rgba(0,0,0,0.5);\r\n                border-radius: 50%;\r\n                padding: 15px;\r\n                --icon-translate-y: -50%; \/* used by Elementor Y control *\/\r\n                transition: all 0.3s ease;\r\n            }\r\n\r\n            \/* Video Lightbox \u2014 matches the Goarch Gallery Demo 2 lightbox styling *\/\r\n            .video-lightbox-overlay {\r\n                display: none;\r\n                position: fixed;\r\n                top: 0;\r\n                left: 0;\r\n                width: 100%;\r\n                height: 100%;\r\n                background: rgba(0, 0, 0, 0.95);\r\n                justify-content: center;\r\n                align-items: center;\r\n                z-index: 9999;\r\n                opacity: 0;\r\n                transition: opacity 0.3s ease;\r\n            }\r\n\r\n            .video-lightbox-overlay.active {\r\n                display: flex;\r\n                opacity: 1;\r\n            }\r\n\r\n            .video-lightbox-content {\r\n                position: relative;\r\n                width: 90%;\r\n                max-width: 1100px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n            }\r\n\r\n            .video-lightbox-frame {\r\n                width: 100%;\r\n                aspect-ratio: 16 \/ 9;\r\n            }\r\n\r\n            .video-lightbox-frame iframe,\r\n            .video-lightbox-frame video {\r\n                width: 100%;\r\n                height: 100%;\r\n                max-height: 90vh;\r\n                border: 0;\r\n                border-radius: 8px;\r\n                display: block;\r\n                background: #000;\r\n            }\r\n\r\n            .video-lightbox-nav {\r\n                position: absolute;\r\n                top: 50%;\r\n                transform: translateY(-50%);\r\n                background: rgba(255, 255, 255, 0.1);\r\n                border: none;\r\n                color: white;\r\n                width: 50px;\r\n                height: 50px;\r\n                border-radius: 50%;\r\n                font-size: 24px;\r\n                cursor: pointer;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                transition: background 0.3s ease;\r\n                backdrop-filter: blur(10px);\r\n            }\r\n\r\n            .video-lightbox-nav:hover {\r\n                background: rgba(255, 255, 255, 0.2);\r\n            }\r\n\r\n            .video-lightbox-prev {\r\n                left: 20px;\r\n            }\r\n\r\n            .video-lightbox-next {\r\n                right: 20px;\r\n            }\r\n\r\n            .video-lightbox-close {\r\n                position: absolute;\r\n                top: 20px;\r\n                right: 20px;\r\n                background: rgba(255, 255, 255, 0.1);\r\n                border: none;\r\n                color: white;\r\n                width: 40px;\r\n                height: 40px;\r\n                border-radius: 50%;\r\n                font-size: 20px;\r\n                cursor: pointer;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                transition: background 0.3s ease;\r\n                backdrop-filter: blur(10px);\r\n                z-index: 1;\r\n            }\r\n\r\n            .video-lightbox-close:hover {\r\n                background: rgba(255, 255, 255, 0.2);\r\n            }\r\n\r\n            .video-lightbox-counter {\r\n                position: absolute;\r\n                bottom: -36px;\r\n                left: 50%;\r\n                transform: translateX(-50%);\r\n                color: white;\r\n                font-size: 16px;\r\n                background: rgba(0, 0, 0, 0.5);\r\n                padding: 5px 15px;\r\n                border-radius: 20px;\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                .video-lightbox-nav {\r\n                    width: 40px;\r\n                    height: 40px;\r\n                    font-size: 20px;\r\n                }\r\n\r\n                .video-lightbox-prev {\r\n                    left: 10px;\r\n                }\r\n\r\n                .video-lightbox-next {\r\n                    right: 10px;\r\n                }\r\n            }\r\n        <\/style>\r\n\r\n        <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            var items = document.querySelectorAll('.video-grid-item[data-src]');\r\n            var overlay = document.querySelector('.video-lightbox-overlay');\r\n            if ( ! items.length || ! overlay ) return;\r\n\r\n            var frame    = overlay.querySelector('.video-lightbox-frame');\r\n            var closeBtn = overlay.querySelector('.video-lightbox-close');\r\n            var prevBtn  = overlay.querySelector('.video-lightbox-prev');\r\n            var nextBtn  = overlay.querySelector('.video-lightbox-next');\r\n            var counter  = overlay.querySelector('.video-lightbox-counter');\r\n            var total    = items.length;\r\n            var currentIndex = 0;\r\n\r\n            function renderMedia( index ) {\r\n                var item = items[ index ];\r\n                var type = item.getAttribute('data-type');\r\n                var src  = item.getAttribute('data-src');\r\n\r\n                frame.innerHTML = '';\r\n\r\n                if ( type === 'youtube' ) {\r\n                    var iframe = document.createElement('iframe');\r\n                    iframe.src = src + ( src.indexOf('?') > -1 ? '&' : '?' ) + 'autoplay=1&rel=0';\r\n                    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');\r\n                    iframe.setAttribute('allowfullscreen', '');\r\n                    frame.appendChild( iframe );\r\n                } else {\r\n                    var video = document.createElement('video');\r\n                    video.src = src;\r\n                    video.controls = true;\r\n                    video.autoplay = true;\r\n                    video.setAttribute('playsinline', '');\r\n                    frame.appendChild( video );\r\n                }\r\n            }\r\n\r\n            function updateCounter() {\r\n                if ( total > 1 ) {\r\n                    counter.textContent = ( currentIndex + 1 ) + ' \/ ' + total;\r\n                    counter.style.display = '';\r\n                    prevBtn.style.display = '';\r\n                    nextBtn.style.display = '';\r\n                } else {\r\n                    counter.style.display = 'none';\r\n                    prevBtn.style.display = 'none';\r\n                    nextBtn.style.display = 'none';\r\n                }\r\n            }\r\n\r\n            function openLightbox( index ) {\r\n                currentIndex = index;\r\n                renderMedia( currentIndex );\r\n                updateCounter();\r\n                overlay.classList.add('active');\r\n                document.body.style.overflow = 'hidden';\r\n            }\r\n\r\n            function closeLightbox() {\r\n                overlay.classList.remove('active');\r\n                document.body.style.overflow = '';\r\n                frame.innerHTML = ''; \/\/ stop playback\r\n            }\r\n\r\n            function navigate( direction ) {\r\n                currentIndex = direction === 'next'\r\n                    ? ( currentIndex + 1 ) % total\r\n                    : ( currentIndex - 1 + total ) % total;\r\n                openLightbox( currentIndex );\r\n            }\r\n\r\n            items.forEach(function( item, index ) {\r\n                item.addEventListener('click', function() {\r\n                    openLightbox( index );\r\n                });\r\n            });\r\n\r\n            closeBtn.addEventListener('click', closeLightbox);\r\n            prevBtn.addEventListener('click', function() { navigate('prev'); });\r\n            nextBtn.addEventListener('click', function() { navigate('next'); });\r\n\r\n            overlay.addEventListener('click', function( e ) {\r\n                if ( e.target === overlay ) closeLightbox();\r\n            });\r\n\r\n            document.addEventListener('keydown', function( e ) {\r\n                if ( ! overlay.classList.contains('active') ) return;\r\n                if ( e.key === 'Escape' ) closeLightbox();\r\n                if ( e.key === 'ArrowLeft' ) navigate('prev');\r\n                if ( e.key === 'ArrowRight' ) navigate('next');\r\n            });\r\n        });\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gallery View all Gallery Images Home Blogs Projects Gallery Service Team Contact &times; &#10094; &#10095; View all Gallery Videos &times; &#10094; &#10095;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-484","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/pages\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":94,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/pages\/484\/revisions"}],"predecessor-version":[{"id":1778,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/pages\/484\/revisions\/1778"}],"wp:attachment":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-2\/wp-json\/wp\/v2\/media?parent=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}