{"id":2162,"date":"2025-05-31T12:34:57","date_gmt":"2025-05-31T12:34:57","guid":{"rendered":"https:\/\/dev-elite-innovation-company.pantheonsite.io\/?page_id=2162"},"modified":"2025-06-07T18:27:39","modified_gmt":"2025-06-07T15:27:39","slug":"pictures-of-modern-facade-systems","status":"publish","type":"page","link":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/pictures-of-modern-facade-systems\/","title":{"rendered":"Pictures of modern facade systems"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2162\" class=\"elementor elementor-2162\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ed2877 e-con-full e-flex e-con e-parent\" data-id=\"3ed2877\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91950cf animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"91950cf\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInLeft&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pictures of modern facade systems<\/h2>\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-42ba1d3 e-flex e-con-boxed e-con e-parent\" data-id=\"42ba1d3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3f7bf3 elementor-widget elementor-widget-html\" data-id=\"d3f7bf3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\r\n    <style>\r\n        :root {\r\n            --primary-color: #007bff;\r\n            --primary-hover-color: #0056b3;\r\n            --light-bg-color: #f8f9fa;\r\n            --content-bg-color: #ffffff;\r\n            --text-color: #333;\r\n            --border-color: #e0e0e0;\r\n            --shadow-color-light: rgba(0, 0, 0, 0.08);\r\n            --shadow-color-medium: rgba(0, 0, 0, 0.12);\r\n            --shadow-color-dark: rgba(0, 0, 0, 0.20); \r\n            \r\n            --soft-light-blue-core: rgba(150, 200, 255, 0.45);\r\n            --soft-light-blue-mid: rgba(150, 200, 255, 0.25);\r\n            --soft-light-blue-outer: rgba(150, 200, 255, 0.1);\r\n            --soft-light-blue-fade: rgba(150, 200, 255, 0);\r\n\r\n            --transition-speed: 0.5s;\r\n            --transition-timing: ease-out; \r\n            --light-animation-speed: calc(var(--transition-speed) * 1.8); \r\n        }\r\n\r\n        body {\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n            margin: 0;\r\n            padding: 0; \r\n            background-color: var(--light-bg-color);\r\n            color: var(--text-color);\r\n            line-height: 1.6;\r\n            overflow-x: hidden; \r\n        }\r\n\r\n        .main-container {\r\n            width: 100%;\r\n            max-width: 1200px; \r\n            margin: 20px auto;\r\n            background-color: var(--content-bg-color);\r\n            border-radius: 12px;\r\n            box-shadow: 0 5px 20px var(--shadow-color-light);\r\n            padding: 25px;\r\n            box-sizing: border-box;\r\n            transition: max-width 0.3s ease-in-out;\r\n        }\r\n\r\n        .section-navigation {\r\n            display: flex;\r\n            justify-content: center; \/* Center links if they don't overflow *\/\r\n            flex-wrap: nowrap; \r\n            overflow-x: auto;  \r\n            -webkit-overflow-scrolling: touch; \r\n            padding: 5px 0 15px 0; \r\n            margin-bottom: 25px; \r\n            border-bottom: 1px solid var(--border-color);\r\n            scrollbar-width: thin; \r\n            scrollbar-color: var(--primary-color) var(--light-bg-color); \r\n        }\r\n        .section-navigation::-webkit-scrollbar {\r\n            height: 5px; \r\n        }\r\n        .section-navigation::-webkit-scrollbar-track {\r\n            background: var(--light-bg-color);\r\n            border-radius: 3px;\r\n        }\r\n        .section-navigation::-webkit-scrollbar-thumb {\r\n            background-color: var(--primary-color);\r\n            border-radius: 3px;\r\n        }\r\n\r\n        .section-link {\r\n            background-color: transparent;\r\n            color: var(--primary-color);\r\n            border: 2px solid var(--primary-color);\r\n            padding: 8px 18px; \r\n            margin: 5px 8px;   \r\n            border-radius: 50px;\r\n            cursor: pointer;\r\n            font-size: 15px; \r\n            font-weight: 500;\r\n            transition: background-color 0.3s, color 0.3s;\r\n            white-space: nowrap; \r\n            flex-shrink: 0; \r\n        }\r\n\r\n        .section-link:hover, .section-link.active {\r\n            background-color: var(--primary-color);\r\n            color: white;\r\n        }\r\n\r\n        .gallery-content-wrapper { display: none; }\r\n        .gallery-content-wrapper.active { display: block; }\r\n\r\n        .coverflow-area {\r\n            padding: 10px 0 20px 0; \r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n        \r\n        .coverflow-container {\r\n            width: 100%;\r\n            height: 320px; \r\n            position: relative;\r\n            perspective: 1300px; \r\n            overflow: hidden; \r\n            user-select: none; \r\n            -webkit-user-select: none; -ms-user-select: none;\r\n            margin-top: 10px; \r\n            cursor: grab; \r\n        }\r\n        .coverflow-container:active { cursor: grabbing; }\r\n\r\n        .coverflow-item {\r\n            position: absolute;\r\n            width: 220px;  \r\n            height: 260px; \r\n            top: calc(50% - 130px); \r\n            left: calc(50% - 110px);\r\n            background-size: cover;\r\n            background-position: center;\r\n            border-radius: 10px; \r\n            box-shadow: 0 5px 15px var(--shadow-color-medium); \r\n            transform-style: preserve-3d; \r\n            transition: transform var(--transition-speed) var(--transition-timing),\r\n                        opacity var(--transition-speed) ease,\r\n                        box-shadow var(--transition-speed) ease,\r\n                        z-index 0s linear var(--transition-speed); \r\n            opacity: 0.4; \r\n            transform: translateX(0) translateZ(-450px) rotateY(0deg) scale(0.65); \r\n            z-index: 1;\r\n        }\r\n\r\n        .coverflow-item.is-center {\r\n            opacity: 1;\r\n            transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.15); \r\n            z-index: 10;\r\n            box-shadow: 0 10px 35px var(--shadow-color-dark); \r\n        }\r\n\r\n        .coverflow-item.is-center::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 50%; left: 50%;\r\n            width: 180%; \r\n            height: 180%;\r\n            background: radial-gradient(ellipse at center, \r\n                                         var(--soft-light-blue-core) 0%, \r\n                                         var(--soft-light-blue-mid) 20%, \r\n                                         var(--soft-light-blue-outer) 45%,\r\n                                         var(--soft-light-blue-fade) 70%  \r\n                                        );\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%); \r\n            z-index: -1; \r\n            opacity: 0; \r\n            animation: fadeInSoftLight var(--light-animation-speed) ease-out forwards;\r\n        }\r\n\r\n        @keyframes fadeInSoftLight {\r\n            0% { opacity: 0.1; transform: translate(-50%, -50%) scale(0.6); }\r\n            100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); } \r\n        }\r\n\r\n        .coverflow-item.is-left-1 {\r\n            opacity: 0.75;\r\n            transform: translateX(-150px) translateZ(-100px) rotateY(45deg) scale(0.9);\r\n            z-index: 8;\r\n        }\r\n        .coverflow-item.is-right-1 {\r\n            opacity: 0.75;\r\n            transform: translateX(150px) translateZ(-100px) rotateY(-45deg) scale(0.9);\r\n            z-index: 8;\r\n        }\r\n        .coverflow-item.is-left-2 {\r\n            opacity: 0.6; \r\n            transform: translateX(-300px) translateZ(-250px) rotateY(55deg) scale(0.75);\r\n            z-index: 6;\r\n        }\r\n        .coverflow-item.is-right-2 {\r\n            opacity: 0.6;\r\n            transform: translateX(300px) translateZ(-250px) rotateY(-55deg) scale(0.75);\r\n            z-index: 6;\r\n        }\r\n        .coverflow-item.is-left-3 {\r\n            opacity: 0.45;\r\n            transform: translateX(-450px) translateZ(-400px) rotateY(65deg) scale(0.6);\r\n            z-index: 4;\r\n        }\r\n        .coverflow-item.is-right-3 {\r\n            opacity: 0.45;\r\n            transform: translateX(450px) translateZ(-400px) rotateY(-65deg) scale(0.6);\r\n            z-index: 4;\r\n        }\r\n        .coverflow-item.is-hidden { \r\n            opacity: 0;\r\n            transform: translateX(0px) translateZ(-800px) rotateY(0deg) scale(0.2); \r\n            z-index: 0;\r\n            pointer-events: none; \r\n        }\r\n\r\n        .image-popup-modal {\r\n            display: none; position: fixed; z-index: 1000; left: 0; top: 0;\r\n            width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85);\r\n            justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;\r\n        }\r\n        .popup-content {\r\n            position: relative; background-color: var(--content-bg-color); padding: 15px;\r\n            border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);\r\n            width: auto; max-width: 90%; max-height: 90%;\r\n        }\r\n        .popup-frame {\r\n            border: 6px solid var(--primary-color); padding: 4px; background-color: white;\r\n            display: inline-block; border-radius: 4px;\r\n        }\r\n        .popup-image {\r\n            display: block; max-width: calc(90vw - 60px); max-height: calc(90vh - 80px);\r\n            border-radius: 2px; object-fit: contain;\r\n        }\r\n        .popup-close-button {\r\n            position: absolute; top: -18px; right: -18px; color: white; background-color: var(--primary-color);\r\n            font-size: 26px; font-weight: bold; width: 40px; height: 40px; line-height: 38px;\r\n            text-align: center; border-radius: 50%; cursor: pointer; border: 2px solid white;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: background-color 0.3s, transform 0.2s;\r\n        }\r\n        .popup-close-button:hover { background-color: var(--primary-hover-color); transform: scale(1.1); }\r\n\r\n        @media (min-width: 1600px) {\r\n            .main-container { max-width: 1800px; }\r\n            .coverflow-container { height: 450px; perspective: 2000px; }\r\n            .coverflow-item {\r\n                width: 320px; height: 375px; \r\n                top: calc(50% - 187.5px); left: calc(50% - 160px);\r\n            }\r\n            .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.22); } \r\n            .coverflow-item.is-center::after { width: 240%; height: 240%; } \r\n            .coverflow-item.is-left-1 { transform: translateX(-220px) translateZ(-180px) rotateY(40deg) scale(0.95); }\r\n            .coverflow-item.is-right-1 { transform: translateX(220px) translateZ(-180px) rotateY(-40deg) scale(0.95); }\r\n            .coverflow-item.is-left-2 { transform: translateX(-440px) translateZ(-400px) rotateY(50deg) scale(0.82); }\r\n            .coverflow-item.is-right-2 { transform: translateX(440px) translateZ(-400px) rotateY(-50deg) scale(0.82); }\r\n            .coverflow-item.is-left-3 { transform: translateX(-660px) translateZ(-600px) rotateY(60deg) scale(0.7); opacity: 0.5; }\r\n            .coverflow-item.is-right-3 { transform: translateX(660px) translateZ(-600px) rotateY(-60deg) scale(0.7); opacity: 0.5; }\r\n        }\r\n\r\n        @media (min-width: 1200px) and (max-width: 1599px) {\r\n            .main-container { max-width: 1400px; } \r\n            .coverflow-container { height: 400px; perspective: 1600px; }\r\n            .coverflow-item {\r\n                    width: 280px;\r\n                    height: 330px;\r\n                    top: calc(50% - 165px);\r\n                    left: calc(50% - 140px);\r\n            }\r\n            .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.2); } \r\n            .coverflow-item.is-center::after { width: 220%; height: 220%; } \r\n            .coverflow-item.is-left-1 { transform: translateX(-200px) translateZ(-150px) rotateY(40deg) scale(0.92); }\r\n            .coverflow-item.is-right-1 { transform: translateX(200px) translateZ(-150px) rotateY(-40deg) scale(0.92); }\r\n            .coverflow-item.is-left-2 { transform: translateX(-400px) translateZ(-350px) rotateY(50deg) scale(0.8); opacity: 0.7; }\r\n            .coverflow-item.is-right-2 { transform: translateX(400px) translateZ(-350px) rotateY(-50deg) scale(0.8); opacity: 0.7; }\r\n            .coverflow-item.is-left-3 { transform: translateX(-600px) translateZ(-550px) rotateY(60deg) scale(0.65); opacity: 0.55; }\r\n            .coverflow-item.is-right-3 { transform: translateX(600px) translateZ(-550px) rotateY(-60deg) scale(0.65); opacity: 0.55; }\r\n        }\r\n\r\n        @media (max-width: 768px) { \/* Base styles effectively target 769px-1199px *\/\r\n            .coverflow-container { height: 260px; perspective: 1000px; }\r\n            .coverflow-item {\r\n                width: 180px; height: 210px; \r\n                top: calc(50% - 105px); left: calc(50% - 90px);\r\n            }\r\n            .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.12); } \r\n            .coverflow-item.is-center::after { width: 170%; height: 170%; } \r\n            .coverflow-item.is-left-1 { transform: translateX(-115px) translateZ(-80px) rotateY(38deg) scale(0.85); }\r\n            .coverflow-item.is-right-1 { transform: translateX(115px) translateZ(-80px) rotateY(-38deg) scale(0.85); }\r\n            .coverflow-item.is-left-2 { transform: translateX(-230px) translateZ(-200px) rotateY(48deg) scale(0.68); opacity: 0.6; }\r\n            .coverflow-item.is-right-2 { transform: translateX(230px) translateZ(-200px) rotateY(-48deg) scale(0.68); opacity: 0.6; }\r\n            .coverflow-item.is-left-3, .coverflow-item.is-right-3 { opacity: 0; pointer-events: none; } \r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n             .main-container { padding: 15px; }\r\n             .section-navigation{display: flex; flex-wrap: wrap;}\r\n             .section-link { font-size: 16px; padding: 6px 12px; margin: 5px; }\r\n             .coverflow-container { height: 267px; }\r\n            .coverflow-item {\r\n                width: 200px;\r\n                height: 230px;\r\n                top: calc(50% - 115px);\r\n                left: calc(50% - 100px);\r\n            }\r\n             .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.1); }\r\n            .coverflow-item.is-center::after {\r\n                width: 160%; height: 160%; \r\n                background: radial-gradient(ellipse at center, \r\n                                         var(--soft-light-blue-core) 0%, \r\n                                         var(--soft-light-blue-mid) 15%, \r\n                                         var(--soft-light-blue-outer) 35%,\r\n                                         var(--soft-light-blue-fade) 60% \r\n                                        );\r\n            }\r\n            .coverflow-item.is-left-1 { transform: translateX(-90px) translateZ(-70px) rotateY(35deg) scale(0.82); }\r\n            .coverflow-item.is-right-1 { transform: translateX(90px) translateZ(-70px) rotateY(-35deg) scale(0.82); }\r\n            .coverflow-item.is-left-2, .coverflow-item.is-right-2,\r\n            .coverflow-item.is-left-3, .coverflow-item.is-right-3 { \r\n                opacity: 0; pointer-events: none; \r\n                transform: translateX(0px) translateZ(-300px) rotateY(0deg) scale(0.2); \r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"main-container\">\r\n        <nav class=\"section-navigation\">\r\n            <button class=\"section-link active\" data-section=\"sectionCoverflow1\">Modern facade systems<\/button>\r\n        <\/nav>\r\n        <div class=\"galleries-container\">\r\n            <div id=\"sectionCoverflow1\" class=\"gallery-content-wrapper active\">\r\n                <div class=\"coverflow-area\">\r\n                    <div class=\"coverflow-container\" data-current-center-index=\"0\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div id=\"sectionCoverflow2\" class=\"gallery-content-wrapper\">\r\n                <div class=\"coverflow-area\">\r\n                    <div class=\"coverflow-container\" data-current-center-index=\"0\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div id=\"sectionCoverflow3\" class=\"gallery-content-wrapper\">\r\n                 <div class=\"coverflow-area\">\r\n                    <div class=\"coverflow-container\" data-current-center-index=\"0\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"imagePopup\" class=\"image-popup-modal\">\r\n        <div class=\"popup-content\">\r\n            <span class=\"popup-close-button\" title=\"Close\">&times;<\/span>\r\n            <div class=\"popup-frame\">\r\n                <img decoding=\"async\" id=\"popupImageElement\" src=\"\" alt=\"Popup Image\" class=\"popup-image\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    const sectionLinks = document.querySelectorAll('.section-link');\r\n    const galleryWrappers = document.querySelectorAll('.gallery-content-wrapper');\r\n    const imagePopupModal = document.getElementById('imagePopup');\r\n    const popupImageElement = document.getElementById('popupImageElement');\r\n    const popupCloseButton = document.querySelector('.popup-close-button');\r\n\r\n    const galleriesData = { \r\n        sectionCoverflow1: [ \/\/ Corresponds to your first section\/category button\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3d837d02-9e27-4bfd-8c0c-137aab733ecc.jpg', alt: 'A descriptive caption for photo 1' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/5fc4560d-825f-43c2-a44d-7dc952b1e23c.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/8cbfa21c-80af-43f3-af82-9064f826ed0c.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/32e94ce4-73be-4254-b6a8-a8280241beb6.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/283b94da-e53b-487f-a6f9-c1267d7f596e.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/9714b8c4-b92c-4412-82f4-1847397f9401.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/65747477-2408-49da-8a89-24c6c0fe12ca.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b0ae479f-f94f-4427-a2ea-84753a64502a.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b242f575-8b5f-4fdd-8d77-792074c8b022.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/de33583e-0fad-420b-8471-ff275ec54ce9.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/f750a804-2db0-4568-9b21-bedab6d3487f.jpg', alt: 'Beautiful scenery from my trip' },\r\n            { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/f3199745-9e70-4f73-9528-86a6e559f512.jpg', alt: 'Beautiful scenery from my trip' },\r\n        ],\r\n        };\r\n\r\n    const positionClasses = ['is-center', 'is-left-1', 'is-right-1', 'is-left-2', 'is-right-2', 'is-left-3', 'is-right-3', 'is-hidden'];\r\n\r\n    function openImagePopup(src, alt) { \r\n        popupImageElement.src = src;\r\n        popupImageElement.alt = alt;\r\n        imagePopupModal.style.display = 'flex';\r\n        document.body.style.overflow = 'hidden';\r\n    }\r\n    function closeImagePopup() { \r\n        imagePopupModal.style.display = 'none';\r\n        popupImageElement.src = '';\r\n        popupImageElement.alt = '';\r\n        document.body.style.overflow = '';\r\n    }\r\n    popupCloseButton.addEventListener('click', closeImagePopup);\r\n    imagePopupModal.addEventListener('click', (e) => { if (e.target === imagePopupModal) closeImagePopup(); });\r\n    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && imagePopupModal.style.display === 'flex') closeImagePopup(); });\r\n\r\n    function populateCoverflow(coverflowContainer, imagesDataArray) {\r\n        coverflowContainer.innerHTML = ''; \r\n        imagesDataArray.forEach((data, index) => {\r\n            const item = document.createElement('div');\r\n            item.classList.add('coverflow-item');\r\n            item.style.backgroundImage = `url(${data.src})`;\r\n            item.dataset.index = index;\r\n            item.dataset.src = data.src; \r\n            item.dataset.alt = data.alt; \r\n            item.setAttribute('role', 'button');\r\n            item.setAttribute('tabindex', '-1'); \r\n            item.setAttribute('aria-label', `View ${data.alt}`);\r\n            coverflowContainer.appendChild(item);\r\n        });\r\n    }\r\n    \r\n    function updateCoverflowLayout(coverflowContainer, centerIndex) {\r\n        const items = Array.from(coverflowContainer.children);\r\n        const numItems = items.length;\r\n        if (numItems === 0) return;\r\n\r\n        centerIndex = (centerIndex % numItems + numItems) % numItems; \r\n        coverflowContainer.dataset.currentCenterIndex = centerIndex;\r\n\r\n        items.forEach((item, i) => {\r\n            positionClasses.forEach(cls => item.classList.remove(cls));\r\n            item.setAttribute('tabindex', '-1'); \r\n\r\n            const diff = i - centerIndex;\r\n            let targetClass = 'is-hidden'; \r\n\r\n            if (diff === 0) targetClass = 'is-center';\r\n            else if (diff === 1) targetClass = 'is-right-1';\r\n            else if (diff === -1) targetClass = 'is-left-1';\r\n            else if (diff === 2) targetClass = 'is-right-2';\r\n            else if (diff === -2) targetClass = 'is-left-2';\r\n            else if (diff === 3) targetClass = 'is-right-3';\r\n            else if (diff === -3) targetClass = 'is-left-3';\r\n            \r\n            item.classList.add(targetClass);\r\n            if (targetClass === 'is-center') {\r\n                item.setAttribute('tabindex', '0'); \r\n            }\r\n        });\r\n    }\r\n\r\n    function switchSection(sectionId) {\r\n        galleryWrappers.forEach(wrapper => {\r\n            const isActive = wrapper.id === sectionId;\r\n            wrapper.classList.toggle('active', isActive);\r\n            if (isActive) {\r\n                const coverflowContainer = wrapper.querySelector('.coverflow-container');\r\n                const imageList = galleriesData[sectionId] || [];\r\n                \r\n                if (!coverflowContainer.dataset.initialized || coverflowContainer.children.length !== imageList.length) {\r\n                    populateCoverflow(coverflowContainer, imageList);\r\n                    coverflowContainer.dataset.initialized = \"true\";\r\n                }\r\n                \r\n                let currentCenter = parseInt(coverflowContainer.dataset.currentCenterIndex) || 0;\r\n                if (currentCenter >= imageList.length || isNaN(currentCenter) || currentCenter < 0) currentCenter = 0;\r\n                 coverflowContainer.dataset.currentCenterIndex = currentCenter;\r\n                \r\n                requestAnimationFrame(() => {\r\n                    updateCoverflowLayout(coverflowContainer, currentCenter);\r\n                });\r\n            }\r\n        });\r\n        sectionLinks.forEach(link => {\r\n            link.classList.toggle('active', link.dataset.section === sectionId);\r\n        });\r\n    }\r\n\r\n    sectionLinks.forEach(link => {\r\n        link.addEventListener('click', () => switchSection(link.dataset.section));\r\n    });\r\n\r\n    galleryWrappers.forEach(wrapper => {\r\n        const coverflowContainer = wrapper.querySelector('.coverflow-container');\r\n        const sectionId = wrapper.id;\r\n\r\n        function navigateCoverflow(direction) {\r\n            const imageList = galleriesData[sectionId] || [];\r\n            if (imageList.length === 0) return;\r\n            let currentIndex = parseInt(coverflowContainer.dataset.currentCenterIndex);\r\n            currentIndex = (currentIndex + direction + imageList.length) % imageList.length;\r\n            updateCoverflowLayout(coverflowContainer, currentIndex);\r\n        }\r\n\r\n        let startX = 0;\r\n        let currentX = 0; \/\/ Tracks current X during move, primarily for delta calculation\r\n        let isPointerDown = false;\r\n        \/\/ No more isSwipeAction flag here, logic simplified in pointerUpHandler\r\n        const swipeThreshold = 30; \/\/ Pixels to be considered a swipe\r\n\r\n        function pointerDownHandler(e) {\r\n            isPointerDown = true;\r\n            startX = e.screenX || e.changedTouches[0].screenX;\r\n            currentX = startX; \/\/ Initialize currentX at the start of interaction\r\n            coverflowContainer.style.cursor = 'grabbing';\r\n            if (e.type === 'mousedown') {\r\n                e.preventDefault(); \r\n            }\r\n        }\r\n\r\n        function pointerMoveHandler(e) {\r\n            if (!isPointerDown) return;\r\n            currentX = e.screenX || e.changedTouches[0].screenX; \/\/ Update currentX\r\n            if (isPointerDown && e.type === 'mousemove') { \r\n                e.preventDefault(); \/\/ Prevent text selection during mouse drag\r\n            }\r\n        }\r\n\r\n        function pointerUpHandler(e) {\r\n            if (!isPointerDown) return;\r\n            isPointerDown = false;\r\n            coverflowContainer.style.cursor = 'grab';\r\n            \r\n            \/\/ Use currentX for delta, as endX from e.changedTouches[0] might not exist on mouseup\r\n            const deltaX = currentX - startX; \r\n\r\n            if (Math.abs(deltaX) > swipeThreshold) { \/\/ Swipe\r\n                if (deltaX < 0) { \r\n                    navigateCoverflow(1); \r\n                } else { \r\n                    navigateCoverflow(-1); \r\n                }\r\n            } else { \/\/ Tap (deltaX is small enough not to be a swipe)\r\n                let clickedItem = e.target.closest('.coverflow-item');\r\n                const isPrimaryMouseClick = (e.type === 'mouseup' && e.button === 0);\r\n                const isTouchTap = (e.type === 'touchend');\r\n\r\n                if (clickedItem && !clickedItem.classList.contains('is-hidden') && (isPrimaryMouseClick || isTouchTap) ) {\r\n                    \/\/ Open the clicked item directly, regardless of whether it's center or side\r\n                    openImagePopup(clickedItem.dataset.src, clickedItem.dataset.alt);\r\n                }\r\n            }\r\n            startX = 0; \r\n            currentX = 0; \r\n        }\r\n\r\n        coverflowContainer.addEventListener('touchstart', pointerDownHandler, { passive: true });\r\n        coverflowContainer.addEventListener('touchmove', pointerMoveHandler, { passive: true }); \r\n        coverflowContainer.addEventListener('touchend', pointerUpHandler);\r\n        coverflowContainer.addEventListener('touchcancel', pointerUpHandler);\r\n\r\n        coverflowContainer.addEventListener('mousedown', pointerDownHandler);\r\n        document.addEventListener('mousemove', (e) => { \r\n            if(isPointerDown) { \r\n                if (e.buttons !== 1 && isPointerDown) {\r\n                     pointerUpHandler(e); \r\n                     return;\r\n                }\r\n                pointerMoveHandler(e); \r\n            }\r\n        });\r\n        document.addEventListener('mouseup', (e) => { \r\n            if(isPointerDown) { \r\n                pointerUpHandler(e); \r\n            }\r\n        });     \r\n    });\r\n\r\n    if (sectionLinks.length > 0) {\r\n        switchSection(sectionLinks[0].dataset.section);\r\n    }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0635\u0648\u0631 \u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 &times;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2162","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages\/2162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/comments?post=2162"}],"version-history":[{"count":26,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages\/2162\/revisions"}],"predecessor-version":[{"id":2671,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages\/2162\/revisions\/2671"}],"wp:attachment":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/media?parent=2162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}