{"id":1672,"date":"2025-03-03T20:31:39","date_gmt":"2025-03-03T20:31:39","guid":{"rendered":"https:\/\/almnsoura.com\/home-2\/"},"modified":"2026-01-20T08:20:03","modified_gmt":"2026-01-20T08:20:03","slug":"home-2","status":"publish","type":"page","link":"https:\/\/almnsoura.com\/","title":{"rendered":"Home"},"content":{"rendered":"\r\n<style>\r\n.hero_img_9fa64102-0841-4560-be9f-018193d91a63 {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    background: #edebeb;\r\n}\r\n\r\n.hero_img_9fa64102-0841-4560-be9f-018193d91a63 img {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: auto;\r\n    height: auto;\r\n    max-width: none;\r\n    max-height: none;\r\n    image-rendering: auto;\r\n    pointer-events: none;\r\n}\r\n<\/style>\r\n\r\n<section class=\"hero_img_9fa64102-0841-4560-be9f-018193d91a63\">\r\n    <img \r\n        src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/ZLEO1q1.webp\"\r\n        fetchpriority=\"high\"\r\n        decoding=\"async\"\r\n        alt=\"Hero Image\">\r\n<\/section>\r\n\r\n<br><br>\r\n    <style>\r\n    .vp_b68b2de1-4690-4a84-b451-e294f0e609d4 {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 80vh;\r\n        overflow: hidden;\r\n        border-radius: 0px;\r\n    }\r\n\r\n    .vp_b68b2de1-4690-4a84-b451-e294f0e609d4 video {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transform: scale(0.9);\r\n        will-change: transform;\r\n        position: absolute;\r\n        inset: 0;\r\n        display: block;\r\n    }\r\n\r\n    @media (max-width:768px) {\r\n        .vp_b68b2de1-4690-4a84-b451-e294f0e609d4 {\r\n            height: 35vh;\r\n            border-radius: 0;\r\n        }\r\n    }\r\n    <\/style>\r\n\r\n    <div class=\"vp_b68b2de1-4690-4a84-b451-e294f0e609d4\" data-min=\"0.9\" data-max=\"1.15\">\r\n        <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"none\"\r\n                            poster=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/08\/video-poster.jpg\"\r\n                    >\r\n            <source data-src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/08\/08181-1-1-1.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n    <\/div>\r\n\r\n    <script>\r\n    (function(){\r\n        const container = document.querySelector('.vp_b68b2de1-4690-4a84-b451-e294f0e609d4');\r\n        if (!container) return;\r\n\r\n        const video = container.querySelector('video');\r\n        const source = video.querySelector('source');\r\n        const minScale = parseFloat(container.dataset.min);\r\n        const maxScale = parseFloat(container.dataset.max);\r\n        let active = false;\r\n\r\n        \/\/ 1\ufe0f\u20e3 Lazy load + play video\r\n        const io = new IntersectionObserver(entries => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting && !active) {\r\n                    source.src = source.dataset.src;\r\n                    video.load();\r\n                    video.play().catch(()=>{});\r\n                    active = true;\r\n                }\r\n            });\r\n        }, { rootMargin: '200px' });\r\n\r\n        io.observe(container);\r\n\r\n        \/\/ 2\ufe0f\u20e3 Parallax scaling (only when active)\r\n        function update() {\r\n            if (!active) return;\r\n\r\n            const r = container.getBoundingClientRect();\r\n            const vh = window.innerHeight;\r\n            const center = r.top + r.height \/ 2;\r\n            const distance = Math.abs(center - vh \/ 2);\r\n            const progress = Math.max(0, 1 - distance \/ (vh \/ 2));\r\n\r\n            const scale = minScale + (maxScale - minScale) * progress;\r\n            video.style.transform = `scale(${scale})`;\r\n        }\r\n\r\n        let ticking = false;\r\n        window.addEventListener('scroll', () => {\r\n            if (!ticking) {\r\n                requestAnimationFrame(() => {\r\n                    update();\r\n                    ticking = false;\r\n                });\r\n                ticking = true;\r\n            }\r\n        }, { passive: true });\r\n\r\n        window.addEventListener('resize', update, { passive: true });\r\n    })();\r\n    <\/script>\r\n\r\n    \r\n    <style>\r\n        \/* \u0645\u0646\u0639 \u0627\u0644\u062a\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0638\u0644\u0627\u0644 \u0627\u0644\u0632\u0631\u0642\u0627\u0621 \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 *\/\r\n        #hera_69e1c0181263b_wrapper, \r\n        .slider-container-hera_69e1c0181263b,\r\n        .card-hera_69e1c0181263b,\r\n        #hera_69e1c0181263b_lightbox {\r\n            -webkit-tap-highlight-color: transparent; \/* \u0645\u0646\u0639 \u0627\u0644\u0648\u0645\u064a\u0636 \u0627\u0644\u0623\u0632\u0631\u0642 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n            -webkit-user-select: none;\r\n            -moz-user-select: none;\r\n            -ms-user-select: none;\r\n            user-select: none;\r\n        }\r\n\r\n        #hera_69e1c0181263b_wrapper {\r\n            position: relative; width: 100%; background: #fff; overflow: hidden;\r\n            padding: 60px 0; display: flex; justify-content: center; align-items: center;\r\n            outline: none;\r\n        }\r\n\r\n        .slider-container-hera_69e1c0181263b {\r\n            position: relative; width: 100%; height: 500px;\r\n            perspective: 1200px; cursor: pointer; will-change: transform;\r\n        }\r\n\r\n        .slider-track-hera_69e1c0181263b {\r\n            position: relative; width: 100%; height: 100%; transform-style: preserve-3d;\r\n        }\r\n\r\n        .card-hera_69e1c0181263b {\r\n            position: absolute; top: 50%; left: 50%;\r\n            width: 280px; height: 380px; margin-left: -140px; margin-top: -190px;\r\n            border-radius: 15px; overflow: hidden;\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.1);\r\n            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            will-change: transform; backface-visibility: hidden;\r\n        }\r\n\r\n        .card-hera_69e1c0181263b img { \r\n            width: 100%; height: 100%; object-fit: cover; \r\n            pointer-events: none; \/* \u064a\u0645\u0646\u0639 \u0633\u062d\u0628 \u0627\u0644\u0635\u0648\u0631\u0629 \u0628\u0627\u0644\u0645\u0627\u0648\u0633 *\/\r\n        }\r\n\r\n        \/* Lightbox Structure *\/\r\n        #hera_69e1c0181263b_lightbox {\r\n            position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n            background: rgba(0,0,0,0.92); backdrop-filter: blur(8px);\r\n            display: none; justify-content: center; align-items: center; z-index: 99999;\r\n            opacity: 0; transition: opacity 0.4s ease;\r\n        }\r\n        #hera_69e1c0181263b_lightbox.active { display: flex; opacity: 1; }\r\n\r\n        .lightbox-content-wrapper {\r\n            position: relative; width: 70%; height: 70%;\r\n            display: flex; justify-content: center; align-items: center;\r\n        }\r\n\r\n        #hera_69e1c0181263b_lightbox img {\r\n            max-width: 100%; max-height: 100%; object-fit: contain;\r\n            border-radius: 10px; transition: transform 0.4s ease, opacity 0.3s ease;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Lightbox Navigation Arrows *\/\r\n        .lb-nav {\r\n            position: absolute; top: 50%; transform: translateY(-50%);\r\n            width: 50px; height: 50px; background: #4a77ab; color: white;\r\n            border-radius: 50%; display: flex; justify-content: center; align-items: center;\r\n            cursor: pointer; font-size: 20px; z-index: 100001; transition: 0.3s;\r\n            border: 2px solid white;\r\n        }\r\n        .lb-nav:hover { background: #365b86; transform: translateY(-50%) scale(1.1); }\r\n        .lb-prev { left: -70px; }\r\n        .lb-next { right: -70px; }\r\n\r\n        .lb-close {\r\n            position: absolute; top: -50px; right: -20px;\r\n            color: white; font-size: 35px; cursor: pointer; z-index: 100001;\r\n        }\r\n\r\n        .hera-nav {\r\n            position: absolute; top: 50%; transform: translateY(-50%);\r\n            width: 45px; height: 45px; background: #fff; color: #4a77ab;\r\n            border-radius: 50%; display: flex; justify-content: center; align-items: center;\r\n            box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100;\r\n            border: 2px solid #4a77ab; font-weight: bold; pointer-events: none;\r\n        }\r\n        .nav-prev { left: 30px; } .nav-next { right: 30px; }\r\n\r\n        @media (max-width: 1024px) {\r\n            .lb-prev { left: 10px; } .lb-next { right: 10px; }\r\n            .lightbox-content-wrapper { width: 90%; height: 60%; }\r\n        }\r\n    <\/style>\r\n\r\n    <div id=\"hera_69e1c0181263b_wrapper\" tabindex=\"0\">\r\n        <div class=\"slider-container-hera_69e1c0181263b\" id=\"hera_69e1c0181263b_slider\">\r\n            <div class=\"slider-track-hera_69e1c0181263b\" id=\"hera_69e1c0181263b_track\">\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-2-1.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-2-1.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/ah1-ezgif.com-jpg-to-webp-converter.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/ah1-ezgif.com-jpg-to-webp-converter.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-1.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-1.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-1.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-1.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/10\/BE-CREATIVE-1.jpg\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/10\/BE-CREATIVE-1.jpg\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-5-2.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-5-2.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-4-2-ezgif.com-jpg-to-webp-converter.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-4-2-ezgif.com-jpg-to-webp-converter.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-2-1.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-copy-2-1.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                                    <div class=\"card-hera_69e1c0181263b\" data-full=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-1.webp\">\r\n                        <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Artboard-1-1.webp\" alt=\"Product\">\r\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n        <div class=\"hera-nav nav-prev\">\u276e<\/div>\r\n        <div class=\"hera-nav nav-next\">\u276f<\/div>\r\n    <\/div>\r\n\r\n    <div id=\"hera_69e1c0181263b_lightbox\">\r\n        <div class=\"lightbox-content-wrapper\">\r\n            <span class=\"lb-close\">&times;<\/span>\r\n            <div class=\"lb-nav lb-prev\">\u276e<\/div>\r\n            <img decoding=\"async\" id=\"hera_69e1c0181263b_lb_img\" src=\"\" alt=\"Zoom\" oncontextmenu=\"return false;\">\r\n            <div class=\"lb-nav lb-next\">\u276f<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    (function() {\r\n        const uid = \"hera_69e1c0181263b\";\r\n        const container = document.getElementById(uid + '_slider');\r\n        const track = document.getElementById(uid + '_track');\r\n        const cards = Array.from(track.getElementsByClassName('card-' + uid));\r\n        const lightbox = document.getElementById(uid + '_lightbox');\r\n        const lightboxImg = document.getElementById(uid + '_lb_img');\r\n\r\n        let currentIndex = 4;\r\n\r\n        function updateSlider() {\r\n            cards.forEach((card, i) => {\r\n                let offset = i - currentIndex;\r\n                if (offset > cards.length \/ 2) offset -= cards.length;\r\n                if (offset < -cards.length \/ 2) offset += cards.length;\r\n\r\n                const absOffset = Math.abs(offset);\r\n                const x = offset * 230;\r\n                const z = absOffset * -155;\r\n                const rY = offset * -15;\r\n                const sc = offset === 0 ? 1.1 : 0.85;\r\n\r\n                card.style.transform = `translate3d(${x}px, 0, ${z}px) rotateY(${rY}deg) scale(${sc})`;\r\n                card.style.zIndex = 100 - absOffset;\r\n                card.style.filter = offset === 0 ? 'brightness(1)' : 'brightness(0.8)';\r\n            });\r\n            \r\n            if (lightbox.classList.contains('active')) {\r\n                lightboxImg.style.opacity = '0';\r\n                setTimeout(() => {\r\n                    lightboxImg.src = cards[currentIndex].getAttribute('data-full');\r\n                    lightboxImg.style.opacity = '1';\r\n                }, 150);\r\n            }\r\n        }\r\n\r\n        const move = (dir) => {\r\n            currentIndex = (currentIndex + dir + cards.length) % cards.length;\r\n            updateSlider();\r\n        };\r\n\r\n        container.onclick = (e) => {\r\n            const rect = container.getBoundingClientRect();\r\n            const clickX = e.clientX - rect.left;\r\n            \r\n            if (clickX > rect.width * 0.35 && clickX < rect.width * 0.65) {\r\n                lightboxImg.src = cards[currentIndex].getAttribute('data-full');\r\n                lightbox.style.display = 'flex';\r\n                setTimeout(() => lightbox.classList.add('active'), 10);\r\n            } \r\n            else if (clickX >= rect.width * 0.65) move(1);\r\n            else move(-1);\r\n        };\r\n\r\n        lightbox.querySelector('.lb-next').onclick = (e) => { e.stopPropagation(); move(1); };\r\n        lightbox.querySelector('.lb-prev').onclick = (e) => { e.stopPropagation(); move(-1); };\r\n        \r\n        lightbox.onclick = () => {\r\n            lightbox.classList.remove('active');\r\n            setTimeout(() => { lightbox.style.display = 'none'; }, 400);\r\n        };\r\n\r\n        window.addEventListener('keydown', (e) => {\r\n            if (e.key === \"ArrowRight\") move(1);\r\n            if (e.key === \"ArrowLeft\") move(-1);\r\n            if (e.key === \"Escape\") lightbox.click();\r\n        });\r\n\r\n        \/\/ \u0645\u0646\u0639 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u064a\u0645\u064a\u0646 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a) \u0644\u0645\u0646\u0639 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0635\u0648\u0631\r\n        container.oncontextmenu = () => false;\r\n\r\n        updateSlider();\r\n    })();\r\n    <\/script>\r\n    <div class=\"wp-block-uagb-container uagb-block-5fcee4f8 alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\"><div class=\"wp-block-uagb-advanced-heading uagb-block-2b5f3149\"><h2 class=\"uagb-heading-text\">Companies<\/h2><div class=\"uagb-separator\"><\/div><\/div>\n\n    \r\n    <div class=\"three-logos-section grid-container\">\r\n\r\n        <!-- Almnsoura -->\r\n        <a href=\"https:\/\/almnsoura.com\/\" class=\"company-box grid-item\" target=\"_blank\">\r\n            <div class=\"hover-image-wrapper\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/05\/almnsoura2.jpg\" class=\"main-img\" alt=\"Almnsoura\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/05\/almnsoura1.jpg\" class=\"hover-img\" alt=\"Almnsoura Hover\">\r\n            <\/div>\r\n            <h4 class=\"grid-title\">Almnsoura<\/h4>\r\n            <p>for building solution<\/p>\r\n        <\/a>\r\n\r\n        <!-- Green Building -->\r\n        <a href=\"https:\/\/greenbuilding.almnsoura.com\/\" class=\"company-box grid-item\" target=\"_blank\">\r\n            <div class=\"hover-image-wrapper\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/05\/green2.jpg\" class=\"main-img\" alt=\"Green building\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/05\/green1.jpg\" class=\"hover-img\" alt=\"Green building Hover\">\r\n            <\/div>\r\n            <h4 class=\"grid-title\">Green building<\/h4>\r\n            <p>for construction<\/p>\r\n        <\/a>\r\n\r\n        <!-- Alraida -->\r\n        <a href=\"https:\/\/alraida.ly\/\" class=\"company-box grid-item\" target=\"_blank\">\r\n            <div class=\"hover-image-wrapper\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/05\/Alraida2.jpg\" class=\"main-img\" alt=\"Alraida\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/05\/Alraida1.jpg\" class=\"hover-img\" alt=\"Alraida Hover\">\r\n            <\/div>\r\n            <h4 class=\"grid-title\">Alraida<\/h4>\r\n            <p>for manufacturing<\/p>\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n    <style>\r\n    .three-logos-section.grid-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    gap: 60px;\r\n    flex-wrap: wrap;\r\n    padding: 40px 20px;\r\n    text-align: center;\r\n    max-width: 1000px;\r\n    margin: 0 auto;\r\n   }\r\n    \r\n\r\n    .company-box.grid-item {\r\n      width: 250px;\r\n    background-color: #fff;\r\n    border: 1px solid #ddd;\r\n    border-radius: 20px;\r\n    padding: 20px 10px;\r\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);\r\n    transition: transform 0.2s ease;\r\n    }\r\n\r\n    .hover-image-wrapper {\r\n        position: relative;\r\n        height: 190px;\r\n        width: 100%;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .hover-image-wrapper img {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: opacity 4s ease;\r\n    }\r\n\r\n    .hover-img {\r\n        opacity: 0;\r\n    }\r\n\r\n    .company-box.grid-item:hover {\r\n        border: 3px solid #3e5ba7;\r\n    }\r\n\r\n    .grid-title {\r\n        padding: 10px 5px;\r\n        font-weight: bold;\r\n        font-size: 16px;\r\n        color: #333;\r\n        margin: 0;\r\n    }\r\n\r\n    .company-box p {\r\n        margin: 0;\r\n        font-size: 0.9em;\r\n        color: #666;\r\n    }\r\n\r\n    @media screen and (max-width: 768px) {\r\n        .three-logos-section.grid-container {\r\n            justify-content: space-around;\r\n            gap: 15px;\r\n            padding-top: 80px;\r\n            padding-bottom: 80px;\r\n        }\r\n\r\n        .company-box.grid-item {\r\n            width: 150px;\r\n        }\r\n\r\n        .hover-image-wrapper {\r\n            height: 150px;\r\n        }\r\n\r\n        .grid-title {\r\n            font-size: 14px;\r\n        }\r\n    }\r\n\r\n    @media screen and (max-width: 480px) {\r\n        .company-box.grid-item {\r\n            width: 120px;\r\n        }\r\n\r\n        .hover-image-wrapper {\r\n            height: 120px;\r\n        }\r\n\r\n        .grid-title {\r\n            font-size: 13px;\r\n        }\r\n    }\r\n    <\/style>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const companyBoxes = document.querySelectorAll('.company-box');\r\n        \r\n        function handleScroll() {\r\n            companyBoxes.forEach(box => {\r\n                const boxTop = box.getBoundingClientRect().top;\r\n                const boxHeight = box.getBoundingClientRect().height;\r\n                const windowHeight = window.innerHeight;\r\n                \r\n                if (boxTop < windowHeight * 0.7 && boxTop > -boxHeight * 0.3) {\r\n                    box.querySelector('.hover-img').style.opacity = '1';\r\n                    box.querySelector('.main-img').style.opacity = '0';\r\n                } else {\r\n                    box.querySelector('.hover-img').style.opacity = '0';\r\n                    box.querySelector('.main-img').style.opacity = '1';\r\n                }\r\n            });\r\n        }\r\n        \r\n        handleScroll();\r\n        window.addEventListener('scroll', handleScroll);\r\n    });\r\n    <\/script>\r\n\r\n    <\/div><\/div><div class=\"wp-block-uagb-container our_partners uagb-block-c27fab17 alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\"><div class=\"wp-block-uagb-advanced-heading uagb-block-42ec0319\"><h2 class=\"uagb-heading-text\">Products<\/h2><div class=\"uagb-separator\"><\/div><\/div>\n\n<div class=\"wp-block-cover is-light is-layout-constrained wp-block-cover-is-layout-constrained\" style=\"min-height:478px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background \" style=\"background-color:\"><\/span><video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/06183.mp4\" data-object-fit=\"cover\"><\/video><div class=\"wp-block-cover__inner-container\"><\/div><\/div>\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/almnsoura.com\/?post_type=product\">Show More<\/a><\/div><\/div><\/div><\/div><div class=\"wp-block-uagb-advanced-heading uagb-block-4d058039\"><h2 class=\"uagb-heading-text\">Projects<\/h2><div class=\"uagb-separator\"><\/div><\/div>    <style>\r\n    .snip-cards-wrapper {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 1px;\r\n        padding: 10px;\r\n    }\r\n\r\n    .snip1361 {\r\n        flex: 1 1 200px;\r\n        font-family: 'Quattrocento', Arial, sans-serif;\r\n        position: relative;\r\n        overflow: hidden;\r\n        min-width: 230px;\r\n        max-width: 100%;\r\n        width: 100%;\r\n        color: #141414;\r\n        text-align: left;\r\n        line-height: 1.4em;\r\n        font-size: 16px;\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n        transition: all 1.2s ease-out;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .snip1361.visible {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .snip1361 * {\r\n        box-sizing: border-box;\r\n        transition: all 0.35s ease;\r\n    }\r\n\r\n    .snip1361 img {\r\n        width: 100%;\r\n        height: 400px;        \r\n        object-fit: cover;    \r\n        vertical-align: top;\r\n        position: relative;\r\n        top: -20px; \r\n    }\r\n\r\n    .snip1361 figcaption {\r\n        position: absolute;\r\n        top: calc(77%);\r\n        width: 100%;\r\n        background-color: #ffffff;\r\n        padding: 15px 25px 65px;\r\n    }\r\n\r\n    .snip1361 figcaption:before {\r\n        position: absolute;\r\n        content: '';\r\n        z-index: 2;\r\n        bottom: 100%;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 80px;\r\n        background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);\r\n    }\r\n\r\n    .snip1361 h3,\r\n    .snip1361 p {\r\n        margin: 0 0 10px;\r\n    }\r\n\r\n    .snip1361 h3 {\r\n        font-weight: 300;\r\n        font-size: 1.4em;\r\n        line-height: 1.2em;\r\n        font-family: 'Oswald', Arial, sans-serif;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .snip1361 p {\r\n        font-size: 0.9em;\r\n        letter-spacing: 1px;\r\n        opacity: 0.9;\r\n    }\r\n\r\n    .snip1361 a {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        z-index: 2;\r\n    }\r\n\r\n    .snip1361:hover figcaption {\r\n        top: calc(100% - 120px);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .snip-cards-wrapper {\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Oswald\" rel=\"stylesheet\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Quattrocento\" rel=\"stylesheet\">\r\n\r\n    <div class=\"snip-cards-wrapper\">\r\n                    <figure class=\"snip1361\" style=\"transition-delay: 0ms;\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/remove_watermark_image_20250721_113807-1.webp\" alt=\"sample45\" \/>\r\n                <figcaption>\r\n                    <h3>TRIPOLI<\/h3>\r\n                    <p> Almnsoura Holding played a key role in supplying and installing high-quality gypsum boards and polystyrene materials across major infrastructure projects in Tripoli.\r\nOur work included telecom hubs, data centers, and institutional buildings like Almadar, Libyana, and the Central Bank.\r\nWe ensured modern interior finishes and durable insulation for high-performance environments.<\/p>\r\n                <\/figcaption>\r\n                <a href=\"#\"><\/a>\r\n            <\/figure>\r\n                    <figure class=\"snip1361\" style=\"transition-delay: 200ms;\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/07\/3116285759_6ab7b90dcc_b.jpg\" alt=\"sample77\" \/>\r\n                <figcaption>\r\n                    <h3>BENGHAZI<\/h3>\r\n                    <p> Almnsoura Holding supplied advanced gypsum and polystyrene solutions for university buildings and hospitality sites across key locations in Benghazi.<\/p>\r\n                <\/figcaption>\r\n                <a href=\"#\"><\/a>\r\n            <\/figure>\r\n                    <figure class=\"snip1361\" style=\"transition-delay: 400ms;\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/07\/libya-huawei-port-freepik.jpg\" alt=\"SIRTE\" \/>\r\n                <figcaption>\r\n                    <h3>SIRTE<\/h3>\r\n                    <p> Almnsoura Holding supported national infrastructure in Sirte with insulation and finishing materials for conference and energy-sector facilities.<\/p>\r\n                <\/figcaption>\r\n                <a href=\"#\"><\/a>\r\n            <\/figure>\r\n                    <figure class=\"snip1361\" style=\"transition-delay: 600ms;\">\r\n                <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/07\/\u0645\u062f\u064a\u0646\u0629_\u062f\u0631\u0646\u0629_\u0627\u0644\u0644\u064a\u0628\u064a\u0629_.jpg\" alt=\"DARNAH\" \/>\r\n                <figcaption>\r\n                    <h3>DARNAH<\/h3>\r\n                    <p> In Derna, Almnsoura Holding delivered lightweight building materials for municipal, residential, and hospitality facilities with a focus on efficiency.<\/p>\r\n                <\/figcaption>\r\n                <a href=\"#\"><\/a>\r\n            <\/figure>\r\n            <\/div>\r\n\r\n    <script>\r\n        document.querySelectorAll('.snip1361 a').forEach(link => {\r\n            link.addEventListener('click', e => e.preventDefault());\r\n        });\r\n\r\n        const observer = new IntersectionObserver(entries => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('visible');\r\n                    observer.unobserve(entry.target);\r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.3\r\n        });\r\n\r\n        document.querySelectorAll('.snip1361').forEach(el => {\r\n            observer.observe(el);\r\n        });\r\n    <\/script>\r\n    <div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex\"><\/div><div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3 wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/almnsoura.com\/?page_id=155\">Learn More About Our Projects<\/a><\/div><\/div><p><\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-023058a5\"><h2 class=\"uagb-heading-text\">11 Branches &#8211; 4 Cites<\/h2><div class=\"uagb-separator\"><\/div><\/div><div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">  <style>\r\n    .glass-shimmer {\r\n      position: relative;\r\n      background: rgba(0,0,0,0.05);\r\n      border-radius: 8px;\r\n      padding: 8px 15px;\r\n      margin-bottom: 10px;\r\n      color: #000;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      overflow: hidden;\r\n      user-select: none;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n    .glass-shimmer::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: -75%;\r\n      width: 50%;\r\n      height: 100%;\r\n      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);\r\n      transform: skewX(-20deg);\r\n      animation: shimmer 2.5s infinite;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      border-radius: 8px;\r\n    }\r\n    .glass-shimmer > * {\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n    @keyframes shimmer {\r\n      0% {\r\n        left: -75%;\r\n      }\r\n      100% {\r\n        left: 125%;\r\n      }\r\n    }\r\n    .map-container {\r\n      position: relative;\r\n      max-width: 1000px;\r\n      margin: 60px auto;\r\n    }\r\n    .map-image {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n    .marker {\r\n      position: absolute;\r\n      width: 30px;\r\n      height: 30px;\r\n      transform: translate(-50%, -50%);\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      z-index: 5;\r\n      background-color: transparent;\r\n    }\r\n     .marker::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: 50%;\r\n      background: rgba(2,238,255,0.5);\r\n      box-shadow: 0 0 12px 4px rgba(2,238,255,0.8);\r\n      animation: pulse 1.4s infinite;\r\n    }\r\n    @keyframes pulse {\r\n      0% { transform: scale(1); opacity: 1; }\r\n      70% { transform: scale(2); opacity: 0; }\r\n      100% { transform: scale(2); opacity: 0; }\r\n    }\r\n    .tooltip {\r\n      position: absolute;\r\n      background-color: #fff;\r\n      padding: 18px 22px;\r\n      border-radius: 10px;\r\n      font-size: 15px;\r\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n      font-weight: 500;\r\n      color: #000;\r\n      display: none;\r\n      max-width: 360px;\r\n      box-shadow: 0 6px 24px rgba(0,0,0,0.18);\r\n      z-index: 20;\r\n      animation: fadeIn 0.3s ease-in-out;\r\n      line-height: 1.45;\r\n      user-select: none;\r\n    }\r\n    .city-name {\r\n      font-size: 19px;\r\n      font-weight: 700;\r\n      color: #000;\r\n      margin-bottom: 12px;\r\n      user-select: none;\r\n    }\r\n    .branch-list {\r\n      margin-left: 15px;\r\n      margin-top: 6px;\r\n      margin-bottom: 16px;\r\n      padding-left: 10px;\r\n      border-left: 2px solid #ccc;\r\n      user-select: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 8px;\r\n    }\r\n    .branch-item {\r\n      opacity: 0;\r\n      transform: translateY(8px);\r\n      background: rgba(0,0,0,0.05);\r\n      border-radius: 8px;\r\n      padding: 8px 14px;\r\n      color: #000;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      position: relative;\r\n      overflow: hidden;\r\n      user-select: none;\r\n    }\r\n    .branch-item::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: -75%;\r\n      width: 50%;\r\n      height: 100%;\r\n      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);\r\n      transform: skewX(-20deg);\r\n      animation: shimmer 2.5s infinite;\r\n      pointer-events: none;\r\n      border-radius: 8px;\r\n      z-index: 1;\r\n    }\r\n    .branch-item > * {\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n    .branch-item.visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n      transition: opacity 0.4s ease, transform 0.4s ease;\r\n    }\r\n    .branch-item:hover {\r\n      background: rgba(0,0,0,0.1);\r\n    }\r\n    .close-btn {\r\n      margin-top: 15px;\r\n      display: block;\r\n      background: #222;\r\n      color: white;\r\n      border: none;\r\n      padding: 10px 20px;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-weight: 600;\r\n      letter-spacing: 0.05em;\r\n      transition: background-color 0.3s ease;\r\n      user-select: none;\r\n      width: 100%;\r\n      text-align: center;\r\n    }\r\n    .close-btn:hover {\r\n      background-color: #555;\r\n    }\r\n    .branch-details {\r\n      margin-top: 10px;\r\n      padding-top: 10px;\r\n      border-top: 1px solid #ddd;\r\n      font-size: 14px;\r\n      color: #333;\r\n      line-height: 1.4;\r\n      user-select: text;\r\n    }\r\n    .branch-details p {\r\n      margin: 4px 0;\r\n    }\r\n  .branch-details a {\r\n  color: #000;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  animation: slowFadePulse 4.1s ease-in-out infinite;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes slowFadePulse {\r\n  0% {\r\n    opacity: 0;\r\n    text-shadow: none;\r\n  }\r\n  50% {\r\n    opacity: 1;\r\n    text-shadow: 0 0 6px rgba(0, 0, 0, 0.15);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    text-shadow: none;\r\n  }\r\n}\r\n\r\n@keyframes glowPulse {\r\n  0% {\r\n    text-shadow: 0 0 0 rgba(0, 255, 255, 255);\r\n    color: #ffffff;\r\n  }\r\n  50% {\r\n    text-shadow: 0 0 8px rgba(0, 255, 255, 255);\r\n    color: #000;\r\n  }\r\n  100% {\r\n    text-shadow: 0 0 0 rgba(0, 255, 255, 0);\r\n    color: #ffffff;\r\n  }\r\n}\r\n    .branch-details a:hover {\r\n      text-decoration: underline;\r\n    }\r\n    .branch-details img {\r\n      max-width: 100%;\r\n      border-radius: 6px;\r\n      margin-top: 8px;\r\n      box-shadow: 0 3px 10px rgba(0,0,0,0.0);\r\n      user-select: none;\r\n    }\r\n    @keyframes slowPulse {\r\n      0%, 100% {\r\n        text-shadow: 0 0 0 rgba(0,0,0,0);\r\n      }\r\n      50% {\r\n        text-shadow: 0 0 0px rgba(0,0,0,0.0);\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"map-container\">\r\n    <img decoding=\"async\" src=\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/MAP-3.jpg\" class=\"map-image\" alt=\"Map of Libya\">\r\n    <div class=\"marker\" style=\"top:48.42%;left:22.81%\" data-tooltip='[\r\n  {\"city\":\"Tripoli\", \"category\":\"Headquarters\", \"info\":\"Salah Aldeen CO \/ Near Faculty of Dentistry of Tripoli University\", \"phone\":\"00218915051200\", \"map\":\"https:\/\/maps.app.goo.gl\/cZci6pHLkoD7BLHv9\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/Untitled-3.webp\"},\r\n  {\"city\":\"Tripoli\", \"category\":\"Point of Sale\", \"info\":\"Tajora \/ Beffe - point of sale\", \"phone\":\"00218919990269\", \"map\":\"https:\/\/maps.app.goo.gl\/cJp4TXMKiYDA5Aik8\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/BeffePOS.jpg\"},\r\n  {\"city\":\"Tripoli\", \"category\":\"Point of Sale\", \"info\":\"Soqe Aljmoa  \/ Tarsana near traffic light\", \"phone\":\"00218919990270\", \"map\":\"https:\/\/maps.app.goo.gl\/yVBNMQRozraFj1bRA\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/TrasanaPOS.jpg\"},\r\n  {\"city\":\"Tripoli\", \"category\":\"Showroom\", \"info\":\"Soqe Aljmoa \/ Tarsana near traffic light\", \"phone\":\"00218919990267\", \"map\":\"https:\/\/maps.app.goo.gl\/qhqBY9igQSxzZCJXA\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/showroomMaps.jpg\"},\r\n  {\"city\":\"Tripoli\", \"category\":\"EPS Plant\", \"info\":\"Wadi Alrabe \/ Next to AlNahr senae co - EPS Plant\", \"phone\":\"00218915051200\", \"map\":\"https:\/\/maps.app.goo.gl\/rdACtcEmjqc3BeVt8\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/wadialrbi.png\"},\r\n  {\"city\":\"Tripoli\", \"category\":\"EPS Plant\", \"info\":\"Swani \/ Next to Airport bridge - EPS Plant\", \"phone\":\"00218915051200\", \"map\":\"https:\/\/maps.app.goo.gl\/nDzy8Ghq5g7zm9RF8\", \"img\":\"https:\/\/via.placeholder.com\/300x200?text=swani\"},\r\n  {\"city\":\"Tripoli\", \"category\":\"Point of Sale\", \"info\":\"AlSarraj \/ T cross - point of sale\", \"phone\":\"00218919990268\", \"map\":\"https:\/\/maps.app.goo.gl\/1agMyFSz8HQAqBYF9\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/SirajPOS.jpg\"}\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \r\n]'><\/div>\r\n\r\n\r\n    <div class=\"marker\" style=\"top:59.94%;left:50.03%\" data-tooltip='[\r\n      {\"city\":\"Sirte\", \"category\":\"Point of Sale\", \"info\":\"District Number 2 \/ Next to Sirt Mall - Point of sale\", \"phone\":\"00218919990264\", \"map\":\"https:\/\/maps.app.goo.gl\/qGSaMWk6iFKfUZx28\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/10\/IMG_52411-scaled.jpg\"}\r\n    ]'><\/div>\r\n\r\n    <div class=\"marker\" style=\"top:65.56%;left:22.70%\" data-tooltip='[\r\n      {\"city\":\"Jabal Al Gharbi \", \"category\":\"District\", \"info\":\"Gharyan Jado Road \/ Next to Wadi Al-Gorab\", \"phone\":\"00218915051200\", \"map\":\"https:\/\/maps.app.goo.gl\/eY3mWu4n1AMmXj5g6\", \"img\":\"https:\/\/via.placeholder.com\/300x200?text=Jabal\"}\r\n    ]'><\/div>\r\n\r\n    <div class=\"marker\" style=\"top:37.48%;left:64.24%\" data-tooltip='[\r\n      {\"city\":\"Benghazi\", \"category\":\"Office\", \"info\":\"Nahr St Architect Office \/ next to Canadian College\", \"phone\":\"00218927775653\", \"map\":\"https:\/\/maps.app.goo.gl\/TkRFHcBowyX3w2wu9\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/BEngOffice.jpg\"},\r\n      {\"city\":\"Benghazi\", \"category\":\"Point of Sale\", \"info\":\"Nahr St POS \/ next to Canadian College POS\", \"phone\":\"00218927775651\", \"map\":\"https:\/\/maps.app.goo.gl\/TkRFHcBowyX3w2wu9\", \"img\":\"https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/06\/bengPOS.jpg\"}\r\n    ]'><\/div>\r\n\r\n    <div class=\"tooltip\" id=\"tooltip\"><\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      const tooltip = document.getElementById('tooltip');\r\n\r\n      function createElement(tag, className = '', text = '') {\r\n        const el = document.createElement(tag);\r\n        if (className) el.className = className;\r\n        if (text) el.textContent = text;\r\n        return el;\r\n      }\r\n\r\n      function hideBranchDetails() {\r\n        const details = tooltip.querySelectorAll('.branch-details');\r\n        details.forEach(d => d.remove());\r\n      }\r\n\r\n      function showBranchDetails(branchBtn, entry) {\r\n        hideBranchDetails();\r\n        const details = createElement('div', 'branch-details');\r\n\r\n        details.innerHTML = `\r\n          <p><strong>${entry.info.split('\/')[0].trim()}<\/strong><\/p>\r\n          <p>${entry.info.split('\/')[1]?.trim() || ''}<\/p>\r\n          <p>\ud83d\udcde ${entry.phone}<\/p>\r\n          <p>\ud83d\udccd <a href=\"${entry.map}\" target=\"_blank\" rel=\"noopener noreferrer\">Show in Google Maps<\/a><\/p>\r\n          <img decoding=\"async\" src=\"${entry.img}\" alt=\"${entry.info.split('\/')[0].trim()}\">\r\n        `;\r\n        branchBtn.insertAdjacentElement('afterend', details);\r\n      }\r\n\r\n      function showBranchesSequentially(branchList, branches) {\r\n        branchList.innerHTML = '';\r\n        branches.forEach((branch, i) => {\r\n          const branchEl = createElement('div', 'branch-item glass-shimmer', branch.info.split('\/')[0].trim());\r\n\r\n          branchEl.addEventListener('click', () => {\r\n            const existingDetails = tooltip.querySelector('.branch-details');\r\n            if (existingDetails && existingDetails.previousSibling === branchEl) {\r\n              existingDetails.remove();\r\n              return;\r\n            }\r\n            showBranchDetails(branchEl, branch);\r\n          });\r\n\r\n          branchList.appendChild(branchEl);\r\n\r\n          setTimeout(() => {\r\n            branchEl.classList.add('visible');\r\n          }, i * 250);\r\n        });\r\n      }\r\n\r\n      document.querySelectorAll('.marker').forEach(marker => {\r\n        marker.addEventListener('click', () => {\r\n          const raw = marker.dataset.tooltip;\r\n          let data;\r\n          try {\r\n            data = JSON.parse(raw);\r\n          } catch (e) {\r\n            return alert(\"Invalid JSON format in marker\");\r\n          }\r\n\r\n          const cityName = data[0]?.city || '';\r\n          tooltip.innerHTML = '';\r\n\r\n          if(cityName) {\r\n            const cityEl = createElement('div', 'city-name', cityName);\r\n            tooltip.appendChild(cityEl);\r\n          }\r\n\r\n          const categories = {};\r\n          data.forEach(entry => {\r\n            if (!categories[entry.category]) categories[entry.category] = [];\r\n            categories[entry.category].push(entry);\r\n          });\r\n\r\n          for (const cat in categories) {\r\n            const catEl = createElement('div', 'glass-shimmer', cat);\r\n            tooltip.appendChild(catEl);\r\n\r\n            catEl.addEventListener('click', () => {\r\n              const oldList = tooltip.querySelector('.branch-list');\r\n              if (oldList) oldList.remove();\r\n\r\n              const branchList = createElement('div', 'branch-list');\r\n              tooltip.appendChild(branchList);\r\n\r\n              showBranchesSequentially(branchList, categories[cat]);\r\n            });\r\n          }\r\n\r\n          const closeBtn = createElement('button', 'close-btn', 'Close');\r\n          closeBtn.addEventListener('click', () => {\r\n            tooltip.style.display = 'none';\r\n            tooltip.innerHTML = '';\r\n          });\r\n          tooltip.appendChild(closeBtn);\r\n\r\n          tooltip.style.top = (marker.offsetTop + 40) + 'px';\r\n          tooltip.style.left = (marker.offsetLeft + 40) + 'px';\r\n          tooltip.style.display = 'block';\r\n        });\r\n      });\r\n\r\n      document.addEventListener('click', e => {\r\n        if (!tooltip.contains(e.target) && !e.target.closest('.marker')) {\r\n          tooltip.style.display = 'none';\r\n          tooltip.innerHTML = '';\r\n        }\r\n      });\r\n    });\r\n  <\/script>\r\n<\/div><div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-4 wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/almnsoura.com\/?page_id=2739\">Visit Where To Buy<\/a><\/div><\/div><div class=\"wp-block-uagb-advanced-heading uagb-block-ed2a2e92\"><h2 class=\"uagb-heading-text\">Partners<\/h2><div class=\"uagb-separator\"><\/div><\/div>    <!-- \u062a\u062d\u0645\u064a\u0644 \u062e\u0637 Montserrat \u0627\u0644\u0645\u062c\u0627\u0646\u064a \u0645\u0646 Google -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n    \/* \u062a\u0637\u0628\u064a\u0642 \u062e\u0637 Quicksand \u0639\u0644\u0649 \u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 *\/\r\n    .cas-slider-container,\r\n    .cas-slide,\r\n    .cas-slide-content,\r\n    .cas-car-brand,\r\n    .cas-car-name,\r\n    .cas-car-subtitle,\r\n    .cas-car-specs,\r\n    .cas-spec-row,\r\n    .cas-spec-label,\r\n    .cas-spec-value,\r\n    .cas-badge,\r\n    .cas-badge span,\r\n    .cas-now-showing,\r\n    .cas-navigation-arrows {\r\n        font-family: 'Lato', sans-serif !important;\r\n    }\r\n\t<\/style>\r\n\r\n    <div class=\"cas-slider-container\">\r\n\r\n        <div class=\"cas-accordion-slider\">\r\n            <!-- Slide 1 - KNAUF -->\r\n            <div class=\"cas-slide\" style=\"background-image: url('https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/knauf-1-1-ezgif.com-jpg-to-webp-converter.webp')\">\r\n                <div class=\"cas-slide-content\">\r\n                    <div class=\"cas-car-name\">Innovative Building Solutions<\/div>\r\n                    <div class=\"cas-car-subtitle\">Global Leader in Gypsum & Drywall Systems<\/div>\r\n                    <div class=\"cas-car-specs\">\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Year Established:<\/span>\r\n                            <span class=\"cas-spec-value\">1932<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Country of Origin:<\/span>\r\n                            <span class=\"cas-spec-value\">Germany<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Specialization:<\/span>\r\n                            <span class=\"cas-spec-value\">Global leader in dry construction systems and materials, gypsum plasterboards, insulation, and dry mortar<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cas-performrance-badges\">\r\n                        <div class=\"cas-bardge\">\r\n                            <div class=\"cas-bradge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-bardge\">\r\n                            <div class=\"cas-badrge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-badrge\">\r\n                            <div class=\"cas-brdge-icon\"><\/div>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cas-add-button\"><\/div>\r\n            <\/div>\r\n\r\n            <!-- Slide 2 - Bugatti -->\r\n            <div class=\"cas-slide\" style=\"background-image: url('https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/07\/semin-1-1.jpg')\">\r\n                <div class=\"cas-slide-content\">\r\n\t\t\t\t\t<div class=\"cas-car-name\">Delivering Sustainable & High-Quality Coatings<\/div>\r\n\t\t\t\t  <div class=\"cas-car-subtitle\">Excellence in Finishing Materials<\/div>\r\n                    <div class=\"cas-car-specs\">\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Year Established:<\/span>\r\n                            <span class=\"cas-spec-value\">1838<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Country of Origin:<\/span>\r\n                            <span class=\"cas-spec-value\">France<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Specialization:<\/span>\r\n                            <span class=\"cas-spec-value\">Final finishing materials, paints, adhesives, fillers, and sustainable building solutions<\/span>\r\n                        <\/div>\r\n                      \r\n                    <\/div>\r\n                    <div class=\"cas-perfrormance-badges\">\r\n                        <div class=\"cas-rbadge\">\r\n                            <div class=\"cas-rbadge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-bardge\">\r\n                            <div class=\"cas-bradge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-rbadge\">\r\n                            <div class=\"cas-rbadge-icon\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cas-add-button\"><\/div>\r\n            <\/div>\r\n\t\t\t\r\n  <!-- Slide 2 - Bugatti -->\r\n            <div class=\"cas-slide\" style=\"background-image: url('https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/11\/FIscher-1.jpg')\">\r\n                <div class=\"cas-slide-content\">\r\n\t\t\t\t\t<div class=\"cas-car-name\">Reliable Fixing Systems<\/div>\r\n\t\t\t\t  <div class=\"cas-car-subtitle\">German-engineered anchors and fastening solutions built for safety and performance<\/div>\r\n                    <div class=\"cas-car-specs\">\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Year Established:<\/span>\r\n                            <span class=\"cas-spec-value\">1948<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Country of Origin:<\/span>\r\n                            <span class=\"cas-spec-value\">Germany<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Specialization:<\/span>\r\n                            <span class=\"cas-spec-value\">Fixings, anchors, and fastening systems for construction and engineering<\/span>\r\n                        <\/div>\r\n                      \r\n                    <\/div>\r\n                    <div class=\"cas-perfrormance-badges\">\r\n                        <div class=\"cas-rbadge\">\r\n                            <div class=\"cas-rbadge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-bardge\">\r\n                            <div class=\"cas-bradge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-rbadge\">\r\n                            <div class=\"cas-rbadge-icon\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cas-add-button\"><\/div>\r\n            <\/div>\r\n            <!-- Slide 3 - Chevrolet -->\r\n            <div class=\"cas-slide\" style=\"background-image: url('https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/07\/akifix-1.jpg')\">\r\n                <div class=\"cas-slide-content\">\r\n                    <div class=\"cas-car-name\">Precision Tools & Fasteners<\/div>\r\n                    <div class=\"cas-car-subtitle\">Your Partner for Drywall Installation Excellence<\/div>\r\n                    <div class=\"cas-car-specs\">\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Year Established:<\/span>\r\n                            <span class=\"cas-spec-value\">1992<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Country of Origin:<\/span>\r\n                            <span class=\"cas-spec-value\">Italy<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Specialization:<\/span>\r\n                            <span class=\"cas-spec-value\">Specialized fastening tools, drywall installation tools, and accessories<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cas-perforrmance-badges\">\r\n                        <div class=\"cas-bradge\">\r\n                            <div class=\"cas-rbadge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-badrge\">\r\n                            <div class=\"cas-rbadge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-bradge\">\r\n                            <div class=\"casr-badge-icon\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cas-add-button\"><\/div>\r\n            <\/div>\r\n\r\n            <!-- Slide 4 - Range Rover -->\r\n            <div class=\"cas-slide\" style=\"background-image: url('https:\/\/almnsoura.com\/wp-content\/uploads\/2025\/12\/adfors-1-1-ezgif.com-jpg-to-webp-converter.webp')\">\r\n                <div class=\"cas-slide-content\">\r\n                    <div class=\"cas-car-name\">Advanced Textile Solutions<\/div>\r\n                    <div class=\"cas-car-subtitle\">Driving Innovation in Technical Fabrics for Construction<\/div>\r\n                    <div class=\"cas-car-specs\">\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Year Established:<\/span>\r\n                            <span class=\"cas-spec-value\">1940<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Country of Origin:<\/span>\r\n                            <span class=\"cas-spec-value\">France<\/span>\r\n                        <\/div>\r\n                        <div class=\"cas-spec-row\">\r\n                            <span class=\"cas-spec-label\">Specialization:<\/span>\r\n                            <span class=\"cas-spec-value\">Innovative technical textiles, reinforcement meshes, drywall tapes, fa\u00e7ade fabrics, insect screens<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"cas-performarnce-badges\">\r\n                        <div class=\"cas-baedge\">\r\n                            <div class=\"cas-badgre-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-badgee\">\r\n                            <div class=\"cas-bradge-icon\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"cas-baredge\">\r\n                            <div class=\"cas-baredge-icon\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"cas-add-button\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button class=\"cas-navigation-arrows cas-nav-prev\">\u2039<\/button>\r\n        <button class=\"cas-navigation-arrows cas-nav-next\">\u203a<\/button>\r\n    <\/div>\r\n\r\n    <style>\r\n\t\t\/* \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0646\u0639\u0648\u0645\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 *\/\r\nbody {\r\n    -webkit-font-smoothing: antialiased;\r\n    text-rendering: optimizeLegibility;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u0634\u0643\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 *\/\r\n.cas-navigation-arrows {\r\n    font-weight: 600;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\/* \u0638\u0644 \u0646\u0635 \u0644\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0642\u0631\u0627\u0621\u0629 *\/\r\n.cas-slide-content {\r\n    text-shadow: 0 1px 3px rgba(0,0,0,0.2);\r\n}\r\n\r\n    .cas-slider-container {\r\n        width: 100%;\r\n\t\tisolation: isolate\r\n        max-width: 1200px;\r\n        height: 100vh;\r\n        position: relative;\r\n        overflow: hidden;\r\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n        margin: 0 auto;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n        transition: opacity 1s ease, transform 1s ease;\r\n\t\t will-change: transform;\r\n    contain: strict;\r\n    backface-visibility: hidden;\r\n    }\r\n\r\n    .cas-accordion-slider {\r\n        height: 100vh;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .cas-slider-container.animated {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .cas-now-showing {\r\n        position: absolute;\r\n        top: 20px;\r\n        left: 20px;\r\n        color: #9fff6b;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        z-index: 10;\r\n        opacity: 0;\r\n        transform: translateY(-20px);\r\n        transition: all 0.6s ease 0.3s;\r\n    }\r\n\r\n    .cas-slider-container.animated .cas-now-showing {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .cas-now-showing::before {\r\n        content: \"\";\r\n        width: 6px;\r\n        height: 6px;\r\n        background: #9fff6b;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .cas-accordion-slider {\r\n        display: flex;\r\n        height: 100%;\r\n        position: relative;\r\n        overflow: hidden;\r\n\t\t    transform: translateZ(0);\r\n    }\r\n\r\n .cas-slide {\r\n    min-height: 400px;\r\n    height: 100%;\r\ntouch-action: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n    overflow-y: auto;\r\n    flex: 1;\r\n    position: relative;\r\n    cursor: pointer;\r\n    background-size: cover;\r\n    background-position: left center; \/* \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u064a\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u064a\u0633\u0627\u0631 *\/\r\n    background-repeat: no-repeat;\r\n    overflow: hidden;\r\n    transform-origin: left center;\r\n    opacity: 0;\r\n    will-change: transform;\r\n    -webkit-tap-highlight-color: transparent;\r\n    \r\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0633\u062d\u0628 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\r\n    transition: \r\n        background-position 0.8s cubic-bezier(0.33, 1, 0.68, 1),\r\n        transform 0.3s ease;\r\n}\r\n\r\n\/* \u0637\u0628\u0642\u0629 \u0627\u0644\u062a\u063a\u0637\u064a\u0629 \u0644\u0644\u062a\u0623\u062b\u064a\u0631 *\/\r\n.cas-slide::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, \r\n              rgba(0,0,0,0.1) 0%, \r\n              rgba(0,0,0,0) 20%);\r\n    z-index: 1;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* \u0637\u0628\u0642\u0629 \u0625\u0636\u0627\u0641\u064a\u0629 \u0644\u0644\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0628\u0635\u0631\u064a *\/\r\n.cas-slide::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100%;\r\n\t    transform-origin: left center; \/* \u0646\u0642\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0645\u0646 \u0627\u0644\u064a\u0633\u0627\u0631 *\/\r\n\r\n    height: 100%;\r\n    background: inherit;\r\n    background-position: inherit;\r\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    z-index: -1;\r\n}\r\n    .cas-slider-container.animated .cas-slide {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .cas-slider-container.animated .cas-slide:nth-child(1) {\r\n        transition-delay: 0.4s;\r\n    }\r\n    .cas-slider-container.animated .cas-slide:nth-child(2) {\r\n        transition-delay: 0.5s;\r\n    }\r\n    .cas-slider-container.animated .cas-slide:nth-child(3) {\r\n        transition-delay: 0.6s;\r\n    }\r\n    .cas-slider-container.animated .cas-slide:nth-child(4) {\r\n        transition-delay: 0.7s;\r\n    }\r\n\r\n    .cas-slide.active {\r\n        flex: 2.5;\r\n        background-position: center center !important;\r\n    }\r\n\r\n    .cas-slide-content {\r\n        position: absolute;\r\n        bottom: 30px;\r\n        left: 30px;\r\n\t\t    pointer-events: auto; \/* \u062a\u0645\u0643\u064a\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 *\/\r\n text-shadow: \r\n        0 1px 1px rgba(0,0,0,0.12),\r\n        0 1px 2px rgba(0,0,0,0.08);\r\n        right: 30px;\r\n        color: white;\r\n        z-index: 2;\r\n        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);\r\n    }\r\n\r\n    .cas-slide.active .cas-slide-content {\r\n        bottom: 80px;\r\n        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;\r\n    }\r\n\r\n    .cas-slide-number {\r\n        font-size: 64px;\r\n        font-weight: 300;\r\n        color: rgba(255, 255, 255, 0.6);\r\n        line-height: 1;\r\n        position: absolute;\r\n        bottom: 30px;\r\n        left: 30px;\r\n        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .cas-slide.active .cas-slide-number {\r\n        bottom: auto;\r\n        top: -50px;\r\n        font-size: 48px;\r\n        left: 0;\r\n    }\r\n\r\n    .cas-car-brand {\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        color: white;\r\n        margin-bottom: 5px;\r\n        transform: rotate(-90deg);\r\n        transform-origin: left bottom;\r\n        position: absolute;\r\n        bottom: 100px;\r\n        left: 30px;\r\n        white-space: nowrap;\r\n        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .cas-slide.active .cas-car-brand {\r\n        transform: rotate(0deg);\r\n        position: static;\r\n        transform-origin: unset;\r\n    }\r\n\r\n    .cas-car-name {\r\n        font-size: 28px;\r\n        font-weight: 700;\r\n        margin-bottom: 8px;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n        transition-delay: 0s;\r\n        color: white;\r\n    }\r\n\r\n    .cas-slide.active .cas-car-name {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        transition-delay: 0.3s;\r\n    }\r\n\r\n    .cas-car-subtitle {\r\n        font-size: 16px;\r\n        color: white;\r\n\t\t    line-height: 1.6;\r\ntext-shadow: \r\n        0 0 1px rgba(255,255,255,0.3),\r\n        0 0 2px rgba(255,255,255,0.15);\r\n        margin-bottom: 20px;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .cas-slide.active .cas-car-subtitle {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        transition-delay: 0.4s;\r\n    }\r\n\r\n    .cas-car-specs {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .cas-slide.active .cas-car-specs {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        transition-delay: 0.5s;\r\n    }\r\n\r\n    .cas-spec-row {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        margin-bottom: 6px;\r\n        font-size: 14px;\r\n        opacity: 0;\r\n        transform: translateX(-20px);\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n       .cas-slide img {\r\n        width: 100%;\r\n        aspect-ratio: 16 \/ 9;\r\n        object-fit: cover;\r\n        display: block;\r\n     }\r\n\r\n    .cas-slide.active .cas-spec-row {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .cas-slide.active .cas-spec-row:nth-child(1) {\r\n        transition-delay: 0.6s;\r\n    }\r\n    .cas-slide.active .cas-spec-row:nth-child(2) {\r\n        transition-delay: 0.65s;\r\n    }\r\n    .cas-slide.active .cas-spec-row:nth-child(3) {\r\n        transition-delay: 0.7s;\r\n    }\r\n    .cas-slide.active .cas-spec-row:nth-child(4) {\r\n        transition-delay: 0.75s;\r\n    }\r\n\r\n    .cas-spec-label {\r\n        color: rgba(255, 255, 255, 0.9);\r\n    }\r\n\r\n    .cas-spec-value {\r\n        color: white;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .cas-performance-badges {\r\n        display: flex;\r\n        gap: 12px;\r\n        margin-top: 15px;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .cas-slide.active .cas-performance-badges {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        transition-delay: 0.8s;\r\n    }\r\n\r\n    .cas-badge {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 4px 8px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border-radius: 12px;\r\n        font-size: 12px;\r\n        font-weight: 500;\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .cas-slide.active .cas-badge {\r\n        opacity: 1;\r\n        transform: scale(1);\r\n    }\r\n\r\n    .cas-slide.active .cas-badge:nth-child(1) {\r\n        transition-delay: 0.85s;\r\n    }\r\n    .cas-slide.active .cas-badge:nth-child(2) {\r\n        transition-delay: 0.9s;\r\n    }\r\n    .cas-slide.active .cas-badge:nth-child(3) {\r\n        transition-delay: 0.95s;\r\n    }\r\n\r\n    .cas-badge-icon {\r\n        width: 8px;\r\n        height: 8px;\r\n        background: #9fff6b;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .cas-add-button {\r\n        position: absolute;\r\n        bottom: 30px;\r\n        right: 30px;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: transparent;\r\n        border: 2px solid #FFF;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.4s ease;\r\n        z-index: 3;\r\n    }\r\n\r\n    .cas-add-button::before,\r\n    .cas-add-button::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        background: #fff;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .cas-add-button::before {\r\n        width: 12px;\r\n        height: 2px;\r\n    }\r\n\r\n    .cas-add-button::after {\r\n        width: 2px;\r\n        height: 12px;\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    .cas-slide.active .cas-add-button::before {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    .cas-slide.active .cas-add-button::after {\r\n        opacity: 0;\r\n        transform: scale(0);\r\n    }\r\n\r\n    .cas-navigation-arrows {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 50px;\r\n        height: 50px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border: none;\r\n        border-radius: 50%;\r\n        color: white;\r\n        cursor: pointer;\r\n        font-size: 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.3s ease;\r\n        z-index: 4;\r\n        backdrop-filter: blur(10px);\r\n        opacity: 0;\r\n        transition: opacity 0.5s ease 1s;\r\n    }\r\n\r\n    .cas-slider-container.animated .cas-navigation-arrows {\r\n        opacity: 1;\r\n    }\r\n\r\n    .cas-nav-prev {\r\n        left: 20px;\r\n    }\r\n\r\n    .cas-nav-next {\r\n        right: 20px;\r\n    }\r\n\r\n    .cas-navigation-arrows:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .cas-accordion-slider {\r\n            flex-direction: column;\r\n        }\r\n\r\n        .cas-slide {\r\n            flex: 1;\r\n            min-height: 80px;\r\n            background-position: left center !important;\r\n        }\r\n\r\n        .cas-slide.active {\r\n            flex: 2;\r\n            background-position: center center !important;\r\n        }\r\n\r\n        .cas-slide-number {\r\n            font-size: 32px;\r\n        }\r\n\r\n        .cas-car-brand {\r\n            transform: none;\r\n            position: static;\r\n        }\r\n    \r\n\r\n  .my-image-box img {\r\n    pointer-events: auto !important;\r\n  }\r\n}\r\n}\r\n@media (max-width: 768px) {\r\n  img {\r\n    pointer-events: auto !important;\r\n    z-index: 1000 !important;\r\n    position: relative !important;\r\n  }\r\n}\r\n@media (max-width: 768px) {\r\n  .cas-car-name {\r\n    font-size: 20px !important;\r\n  }\r\n\r\n  .cas-car-subtitle {\r\n    font-size: 14px !important;\r\n  }\r\n\r\n  .cas-car-brand {\r\n    font-size: 12px !important;\r\n  }\r\n\r\n  .cas-spec-row {\r\n    font-size: 12px !important;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .cas-slide-content {\r\n    left: 15px;\r\n    right: 15px;\r\n    bottom: 20px;\r\n  }\r\n\r\n  .cas-add-button {\r\n    width: 24px;\r\n    height: 24px;\r\n    bottom: 20px;\r\n    right: 20px;\r\n  }\r\n\r\n  .cas-add-button::before {\r\n    width: 8px;\r\n  }\r\n\r\n  .cas-add-button::after {\r\n    height: 8px;\r\n  }\r\n\r\n  .cas-navigation-arrows {\r\n    width: 36px;\r\n    height: 36px;\r\n    font-size: 16px;\r\n  }\r\n}\r\n@media (max-width: 768px) {\r\n    \/* \u0647\u064a\u0643\u0644 \u0623\u0633\u0627\u0633\u064a \u0644\u0644\u0633\u0644\u0627\u064a\u062f\u0631 *\/\r\n    .cas-slider-container {\r\n        height: auto !important;\r\n        min-height: 125vh !important;\r\n        overflow: visible !important;\r\n    }\r\n    \r\n    .cas-accordion-slider {\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        gap: 8px !important;\r\n        height: auto !important;\r\n    }\r\n    \r\n    .cas-slide {\r\n        min-height: 25vh !important;\r\n        height: 25vh !important;\r\n        flex: 0 0 auto !important;\r\n        margin-bottom: 5px !important;\r\n        position: relative !important;\r\n        background-position: center center !important;\r\n    }\r\n    \r\n    .cas-slide.active {\r\n        min-height: 40vh !important;\r\n        height: 40vh !important;\r\n        z-index: 5 !important;\r\n    }\r\n    \r\n    .cas-slide-content {\r\n        position: absolute !important;\r\n        bottom: 20px !important;\r\n        left: 15px !important;\r\n        right: 15px !important;\r\n        padding: 15px !important;\r\n        transform: none !important;\r\n    }\r\n    \r\n    .cas-car-brand {\r\n        position: static !important;\r\n        transform: none !important;\r\n        margin-bottom: 10px !important;\r\n        font-size: 14px !important;\r\n    }\r\n    \r\n    .cas-car-name {\r\n        font-size: 20px !important;\r\n        margin-bottom: 5px !important;\r\n    }\r\n    \r\n    .cas-car-subtitle {\r\n        font-size: 14px !important;\r\n        line-height: 1.4 !important;\r\n    }\r\n    \r\n    .cas-spec-row {\r\n        font-size: 12px !important;\r\n        flex-direction: column !important;\r\n        align-items: flex-start !important;\r\n        margin-bottom: 4px !important;\r\n    }\r\n    \r\n    \/* \u0627\u0644\u0623\u0632\u0631\u0627\u0631 *\/\r\n    .cas-add-button {\r\n        width: 24px !important;\r\n        height: 24px !important;\r\n        bottom: 20px !important;\r\n        right: 20px !important;\r\n    }\r\n    \r\n    .cas-add-button::before {\r\n        width: 8px !important;\r\n    }\r\n    \r\n    .cas-add-button::after {\r\n        height: 8px !important;\r\n    }\r\n    \r\n    .cas-navigation-arrows {\r\n        width: 36px !important;\r\n        height: 36px !important;\r\n        font-size: 16px !important;\r\n    }\r\n    \r\n    \/* \u0636\u0645\u0627\u0646 \u0638\u0647\u0648\u0631 \u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 *\/\r\n    .cas-slide:nth-child(4) {\r\n        margin-bottom: 30px !important;\r\n    }\r\n    \r\n    .cas-slider-container * {\r\n        contain: layout paint style !important;\r\n    }\r\n}\r\n\r\n.cas-slider-container {\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    height: 100vh;\r\n    position: relative;\r\n    overflow: hidden;\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n    margin: 0 auto;\r\n    opacity: 0;\r\n    transform: translateY(50px);\r\n    transition: opacity 1s ease, transform 1s ease;\r\n    will-change: transform;\r\n    contain: strict;\r\n    backface-visibility: hidden;\r\n}\r\n\r\n.cas-accordion-slider {\r\n    height: 100vh;\r\n    overflow: hidden;\r\n}\r\n\r\n.cas-slider-container.animated {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.cas-now-showing {\r\n    position: absolute;\r\n    top: 20px;\r\n    left: 20px;\r\n    color: #9fff6b;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    z-index: 10;\r\n    opacity: 0;\r\n    transform: translateY(-20px);\r\n    transition: all 0.6s ease 0.3s;\r\n}\r\n\r\n.cas-slider-container.animated .cas-now-showing {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.cas-now-showing::before {\r\n    content: \"\";\r\n    width: 6px;\r\n    height: 6px;\r\n    background: #9fff6b;\r\n    border-radius: 50%;\r\n}\r\n\r\n.cas-accordion-slider {\r\n    display: flex;\r\n    height: 100%;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transform: translateZ(0);\r\n}\r\n\r\n.cas-slide {\r\n    min-height: 400px;\r\n    height: 100%;\r\n    flex: 1;\r\n    position: relative;\r\n    cursor: pointer;\r\n    background-size: cover;\r\n    background-position: left center;\r\n    background-repeat: no-repeat;\r\n    overflow: hidden;\r\n    transform-origin: left center;\r\n    opacity: 0;\r\n    transform: translateZ(0);\r\n    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    will-change: flex;\r\n    -webkit-tap-highlight-color: transparent;\r\n    touch-action: manipulation;\r\n}\r\n\r\n.cas-slider-container.animated .cas-slide {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.cas-slider-container.animated .cas-slide:nth-child(1) {\r\n    transition-delay: 0.4s;\r\n}\r\n.cas-slider-container.animated .cas-slide:nth-child(2) {\r\n    transition-delay: 0.5s;\r\n}\r\n.cas-slider-container.animated .cas-slide:nth-child(3) {\r\n    transition-delay: 0.6s;\r\n}\r\n.cas-slider-container.animated .cas-slide:nth-child(4) {\r\n    transition-delay: 0.7s;\r\n}\r\n\r\n.cas-slide.active {\r\n    flex: 2.5;\r\n    background-position: center center !important;\r\n}\r\n\r\n.cas-slide-content {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 30px;\r\n    right: 30px;\r\n    color: white;\r\n    z-index: 2;\r\n    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.cas-slide.active .cas-slide-content {\r\n    bottom: 80px;\r\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;\r\n}\r\n\r\n.cas-slide-number {\r\n    font-size: 64px;\r\n    font-weight: 300;\r\n    color: rgba(255, 255, 255, 0.6);\r\n    line-height: 1;\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 30px;\r\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.cas-slide.active .cas-slide-number {\r\n    bottom: auto;\r\n    top: -50px;\r\n    font-size: 48px;\r\n    left: 0;\r\n}\r\n\r\n.cas-car-brand {\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    color: white;\r\n    margin-bottom: 5px;\r\n    transform: rotate(-90deg);\r\n    transform-origin: left bottom;\r\n    position: absolute;\r\n    bottom: 100px;\r\n    left: 30px;\r\n    white-space: nowrap;\r\n    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.cas-slide.active .cas-car-brand {\r\n    transform: rotate(0deg);\r\n    position: static;\r\n    transform-origin: unset;\r\n}\r\n\r\n.cas-car-name {\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    margin-bottom: 8px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    transition-delay: 0s;\r\n    color: white;\r\n}\r\n\r\n.cas-slide.active .cas-car-name {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    transition-delay: 0.3s;\r\n}\r\n\r\n.cas-car-subtitle {\r\n    font-size: 16px;\r\n    color: white;\r\n    margin-bottom: 20px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    transition-delay: 0s;\r\n}\r\n\r\n.cas-slide.active .cas-car-subtitle {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    transition-delay: 0.4s;\r\n}\r\n\r\n.cas-car-specs {\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    transition-delay: 0s;\r\n}\r\n\r\n.cas-slide.active .cas-car-specs {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    transition-delay: 0.5s;\r\n}\r\n\r\n.cas-spec-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 6px;\r\n    font-size: 14px;\r\n    opacity: 0;\r\n    transform: translateX(-20px);\r\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.cas-slide img {\r\n    width: 100%;\r\n    aspect-ratio: 16 \/ 9;\r\n    object-fit: cover;\r\n    display: block;\r\n}\r\n\r\n.cas-slide.active .cas-spec-row {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.cas-slide.active .cas-spec-row:nth-child(1) {\r\n    transition-delay: 0.6s;\r\n}\r\n.cas-slide.active .cas-spec-row:nth-child(2) {\r\n    transition-delay: 0.65s;\r\n}\r\n.cas-slide.active .cas-spec-row:nth-child(3) {\r\n    transition-delay: 0.7s;\r\n}\r\n.cas-slide.active .cas-spec-row:nth-child(4) {\r\n    transition-delay: 0.75s;\r\n}\r\n\r\n.cas-spec-label {\r\n    color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.cas-spec-value {\r\n    color: white;\r\n    font-weight: 600;\r\n}\r\n\r\n.cas-performance-badges {\r\n    display: flex;\r\n    gap: 12px;\r\n    margin-top: 15px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    transition-delay: 0s;\r\n}\r\n\r\n.cas-slide.active .cas-performance-badges {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    transition-delay: 0.8s;\r\n}\r\n\r\n.cas-badge {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 4px 8px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-radius: 12px;\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    opacity: 0;\r\n    transform: scale(0.8);\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.cas-slide.active .cas-badge {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n}\r\n\r\n.cas-slide.active .cas-badge:nth-child(1) {\r\n    transition-delay: 0.85s;\r\n}\r\n.cas-slide.active .cas-badge:nth-child(2) {\r\n    transition-delay: 0.9s;\r\n}\r\n.cas-slide.active .cas-badge:nth-child(3) {\r\n    transition-delay: 0.95s;\r\n}\r\n\r\n.cas-badge-icon {\r\n    width: 8px;\r\n    height: 8px;\r\n    background: #9fff6b;\r\n    border-radius: 50%;\r\n}\r\n\r\n.cas-add-button {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    right: 30px;\r\n    width: 32px;\r\n    height: 32px;\r\n    background: transparent;\r\n    border: 2px solid #FFF;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.4s ease;\r\n    z-index: 3;\r\n}\r\n\r\n.cas-add-button::before,\r\n.cas-add-button::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    background: #fff;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.cas-add-button::before {\r\n    width: 12px;\r\n    height: 2px;\r\n}\r\n\r\n.cas-add-button::after {\r\n    width: 2px;\r\n    height: 12px;\r\n    transform: rotate(0deg);\r\n}\r\n\r\n.cas-slide.active .cas-add-button::before {\r\n    transform: rotate(0deg);\r\n}\r\n\r\n.cas-slide.active .cas-add-button::after {\r\n    opacity: 0;\r\n    transform: scale(0);\r\n}\r\n\r\n.cas-navigation-arrows {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 50px;\r\n    height: 50px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border: none;\r\n    border-radius: 50%;\r\n    color: white;\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s ease;\r\n    z-index: 4;\r\n    backdrop-filter: blur(10px);\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease 1s;\r\n}\r\n\r\n.cas-slider-container.animated .cas-navigation-arrows {\r\n    opacity: 1;\r\n}\r\n\r\n.cas-nav-prev {\r\n    left: 20px;\r\n}\r\n\r\n.cas-nav-next {\r\n    right: 20px;\r\n}\r\n\r\n.cas-navigation-arrows:hover {\r\n    background: rgba(255, 255, 255, 0.2);\r\n}\r\n    <\/style>\r\n\r\n    <script>\r\n\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n    class AccordionSlider {\r\n        constructor() {\r\n            this.slides = document.querySelectorAll(\".cas-slide\");\r\n            this.prevBtn = document.querySelector(\".cas-nav-prev\");\r\n            this.nextBtn = document.querySelector(\".cas-nav-next\");\r\n            this.sliderContainer = document.querySelector(\".cas-slider-container\");\r\n            this.currentIndex = -1;\r\n            this.animationPlayed = false;\r\n\r\n            this.init();\r\n            this.initScrollAnimation();\r\n        }\r\n\r\n        init() {\r\n            const preventDefault = (e) => {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n            };\r\n            \r\n            this.slides.forEach((slide, index) => {\r\n                slide.addEventListener(\"click\", (e) => {\r\n                    preventDefault(e);\r\n                    this.setActiveSlide(index);\r\n                });\r\n            });\r\n\r\n            this.prevBtn.addEventListener(\"click\", (e) => {\r\n                preventDefault(e);\r\n                this.previousSlide();\r\n            });\r\n\r\n            this.nextBtn.addEventListener(\"click\", (e) => {\r\n                preventDefault(e);\r\n                this.nextSlide();\r\n            });\r\n\r\n            document.addEventListener(\"keydown\", (e) => {\r\n                if (e.key === \"ArrowLeft\") {\r\n                    preventDefault(e);\r\n                    this.previousSlide();\r\n                }\r\n                if (e.key === \"ArrowRight\") {\r\n                    preventDefault(e);\r\n                    this.nextSlide();\r\n                }\r\n            });\r\n        }\r\n\r\n        setActiveSlide(index) {\r\n            if (this.currentIndex === index) {\r\n                this.slides.forEach((slide) => {\r\n                    slide.classList.remove(\"active\");\r\n                });\r\n                this.currentIndex = -1;\r\n            } else {\r\n                this.slides.forEach((slide) => {\r\n                    slide.classList.remove(\"active\");\r\n                });\r\n                this.slides[index].classList.add(\"active\");\r\n                this.currentIndex = index;\r\n            }\r\n        }\r\n\r\n        previousSlide() {\r\n            const prevIndex =\r\n                this.currentIndex === -1\r\n                    ? this.slides.length - 1\r\n                    : (this.currentIndex - 1 + this.slides.length) % this.slides.length;\r\n            this.setActiveSlide(prevIndex);\r\n        }\r\n\r\n        nextSlide() {\r\n            const nextIndex =\r\n                this.currentIndex === -1 ? 0 : (this.currentIndex + 1) % this.slides.length;\r\n            this.setActiveSlide(nextIndex);\r\n        }\r\n\r\n        initScrollAnimation() {\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting && !this.animationPlayed) {\r\n                        this.sliderContainer.classList.add(\"animated\");\r\n                        this.animationPlayed = true;\r\n                    }\r\n                });\r\n            }, {\r\n                threshold: 0.3\r\n            });\r\n\r\n            observer.observe(this.sliderContainer);\r\n        }\r\n    }\r\n\r\n    new AccordionSlider();\r\n});\r\n\t\tslide.addEventListener(\"click\", (e) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n\r\n    const scrollY = window.scrollY;\r\n    this.setActiveSlide(index);\r\n    window.scrollTo({ top: scrollY, behavior: \"auto\" });\r\n});\r\n\t\tclass AccordionSlider {\r\n    constructor() {\r\n        this.slides = document.querySelectorAll(\".cas-slide\");\r\n        this.init();\r\n        this.lockScrollPosition();\r\n    }\r\n\r\n    lockScrollPosition() {\r\n        let scrollPosition = 0;\r\n        \r\n        document.addEventListener('scroll', () => {\r\n            scrollPosition = window.pageYOffset;\r\n        });\r\n        class AccordionSlider {\r\n    constructor() {\r\n        this.slides = document.querySelectorAll(\".cas-slide\");\r\n        this.init();\r\n        this.lockScrollPosition();\r\n    }\r\n\r\n    lockScrollPosition() {\r\n        let scrollPosition = 0;\r\n        \r\n        document.addEventListener('scroll', () => {\r\n            scrollPosition = window.pageYOffset;\r\n        });\r\n        \r\n        this.slides.forEach(slide => {\r\n            slide.addEventListener('click', () => {\r\n                requestAnimationFrame(() => {\r\n                    window.scrollTo(0, scrollPosition);\r\n                });\r\n            });\r\n        });\r\n    }\r\n}\r\n\t\t\r\n        this.slides.forEach(slide => {\r\n            slide.addEventListener('click', () => {\r\n                requestAnimationFrame(() => {\r\n                    window.scrollTo(0, scrollPosition);\r\n                });\r\n            });\r\n        });\r\n    }\r\n}\r\nwindow.addEventListener('load', function() {\r\n    document.querySelector('.cas-slider-container').style.opacity = 1;\r\n});\r\nfunction adjustMobileSlides() {\r\n    if (window.innerWidth <= 768) {\r\n        const slides = document.querySelectorAll('.cas-slide');\r\n        const viewportHeight = window.innerHeight;\r\n        \r\n        slides.forEach((slide, index) => {\r\n            let slideHeight = viewportHeight * 0.25;\r\n            \r\n            if (slide.classList.contains('active')) {\r\n                slideHeight = viewportHeight * 0.45;\r\n            }\r\n            \r\n            slide.style.height = `${slideHeight}px`;\r\n            slide.style.minHeight = `${slideHeight}px`;\r\n        });\r\n    }\r\n}\r\n\r\nwindow.addEventListener('load', adjustMobileSlides);\r\nwindow.addEventListener('resize', adjustMobileSlides);\r\n    \r\n    <\/script>\r\n    <br><br><br><div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-5 wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/almnsoura.com\/?page_id=5793\">Learn More About Our Partners<\/a><\/div><\/div><div class=\"wp-block-uagb-container our_partners uagb-block-932007b8 alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\"><div class=\"wp-block-uagb-advanced-heading uagb-block-f8dd78de\"><h2 class=\"uagb-heading-text\">QUESTIONS?<\/h2><div class=\"uagb-separator\"><\/div><\/div>\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-b89770c8\"><h2 class=\"uagb-heading-text\">We\u2019re Here To Answer Any Questions.<\/h2><\/div>\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-6 wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/almnsoura.com\/?page_id=1328\">CONTACT US<\/a><\/div><\/div><\/div><\/div><div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div><div class=\"wp-block-group alignfull is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-2 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)));padding-right:var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal));padding-bottom:calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)));padding-left:var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal))\"><div style=\"height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div style=\"height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div><\/div><div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div><div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><\/div><div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div><p><\/p>","protected":false},"excerpt":{"rendered":"<p>Companies Products Projects 11 Branches &#8211; 4 Cites Partners QUESTIONS? We\u2019re Here To Answer Any Questions.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-1672","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false,"mailpoet_newsletter_max":false},"uagb_author_info":{"display_name":"website","author_link":"https:\/\/almnsoura.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Companies Products Projects 11 Branches &#8211; 4 Cites Partners QUESTIONS? We\u2019re Here To Answer Any Questions.","_links":{"self":[{"href":"https:\/\/almnsoura.com\/index.php?rest_route=\/wp\/v2\/pages\/1672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/almnsoura.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/almnsoura.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/almnsoura.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/almnsoura.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1672"}],"version-history":[{"count":391,"href":"https:\/\/almnsoura.com\/index.php?rest_route=\/wp\/v2\/pages\/1672\/revisions"}],"predecessor-version":[{"id":5967,"href":"https:\/\/almnsoura.com\/index.php?rest_route=\/wp\/v2\/pages\/1672\/revisions\/5967"}],"wp:attachment":[{"href":"https:\/\/almnsoura.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}