{"id":11481,"date":"2026-05-20T10:20:05","date_gmt":"2026-05-20T10:20:05","guid":{"rendered":"https:\/\/np.sheetheg.com\/?post_type=portfolio&#038;p=11481"},"modified":"2026-06-27T13:40:43","modified_gmt":"2026-06-27T10:40:43","slug":"1-pan-accommodation-scenario","status":"publish","type":"portfolio","link":"https:\/\/np.sheetheg.com\/ar\/portfolio\/1-pan-accommodation-scenario\/","title":{"rendered":"\u0633\u064a\u0646\u0627\u0631\u064a\u0648 \u0627\u0644\u0625\u0642\u0627\u0645\u0629 \u0641\u064a \u0628\u0627\u0646-1- NETPON"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"11481\" class=\"elementor elementor-11481\" data-elementor-post-type=\"portfolio\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3808deb e-con-full e-flex e-con e-parent\" data-id=\"3808deb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f47d697 elementor-widget elementor-widget-shortcode\" data-id=\"f47d697\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\n        \/* ==========================================================================\n           WMM Scenarios Premium CSS - V10 (Full-Width, Sliders, RTL Fixes)\n           ========================================================================== *\/\n        :root {\n            --wmm-blue: #3b82f6; \n            --wmm-blue-dark: #0f172a; \n            --wmm-gold: #faba5b;\n            --wmm-gold-light: #ffc977;\n            \n            --wmm-bg-main: transparent;\n            --wmm-bg-card: rgba(255, 255, 255, 0.03); \n            --wmm-bg-card-hover: rgba(255, 255, 255, 0.06);\n            --wmm-text-main: #f8fafc; \n            --wmm-text-muted: #cbd5e1; \n            --wmm-border-color: rgba(255, 255, 255, 0.1); \n            \n            --wmm-radius: 20px;\n            --wmm-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5); \n            --wmm-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.8);\n            --wmm-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n        }\n\n        @keyframes wmmFadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }\n        @keyframes wmmPulse { 0% { opacity: 0.7; } 50% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0.7; } }\n\n        \/* Container Full Width *\/\n        .wmm-scenario-container {\n            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n            color: var(--wmm-text-main); background-color: var(--wmm-bg-main);\n            width: 100%; max-width: 100%; margin: 0 auto; padding: 40px 5%; line-height: 1.8; box-sizing: border-box; overflow: hidden;\n        }\n        .wmm-scenario-container * { box-sizing: border-box; }\n\n        \/* 1. Video Wrapper *\/\n        .wmm-video-wrapper {\n            position: relative; width: 100%; max-width: 1200px; margin: 0 auto 70px; aspect-ratio: 16 \/ 9;\n            border-radius: var(--wmm-radius); overflow: hidden; box-shadow: var(--wmm-shadow-hover);\n            background: #000; animation: wmmFadeUp 0.8s ease forwards; border: 1px solid var(--wmm-border-color); \n        }\n        .wmm-video-wrapper iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; }\n\n        \/* 2. Intro Section & Typography *\/\n        .wmm-intro-section { display: flex; flex-wrap: wrap; gap: 60px; margin-bottom: 90px; align-items: center; animation: wmmFadeUp 0.8s ease forwards; }\n        .wmm-intro-text { flex: 1 1 450px; }\n        .wmm-main-title {\n            color: var(--wmm-text-main); font-size: 3rem; font-weight: 800;\n            margin-bottom: 30px; position: relative; padding-bottom: 20px; line-height: 1.25; letter-spacing: -0.5px; \n        }\n        .wmm-main-title::after {\n            content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 5px;\n            background: linear-gradient(90deg, var(--wmm-gold), var(--wmm-gold-light)); border-radius: 5px;\n        }\n        .wmm-intro-text p { font-size: 1.15rem; margin-bottom: 18px; color: var(--wmm-text-muted); }\n\n        \/* 3. Smart Dynamic Image Grid *\/\n        .wmm-intro-gallery { flex: 1 1 500px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }\n        .wmm-gallery-img {\n            width: 100%; height: 100%; object-fit: cover; border-radius: var(--wmm-radius);\n            box-shadow: var(--wmm-shadow-soft); border: 1px solid var(--wmm-border-color); background: var(--wmm-bg-card);\n            transition: var(--wmm-transition); aspect-ratio: 4\/3;\n        }\n        .wmm-gallery-img:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--wmm-shadow-hover); z-index: 2; border-color: var(--wmm-gold); }\n\n        \/* 4. Sections *\/\n        .wmm-section { margin-bottom: 80px; width: 100%; animation: wmmFadeUp 1s ease forwards; }\n        .wmm-section-title { text-align: center; color: var(--wmm-text-main); font-size: 2.5rem; font-weight: 800; margin-bottom: 60px; letter-spacing: -0.5px; }\n        .wmm-text-gold { color: var(--wmm-gold) !important; }\n\n        \/* 5. Horizontal Sliders for Cards (\u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 \u0627\u0644\u0623\u0641\u0642\u064a) *\/\n        .wmm-slider-container { position: relative; width: 100%; display: flex; align-items: center; }\n        .wmm-slider-arrow {\n            position: absolute; top: 50%; transform: translateY(-50%);\n            width: 45px; height: 45px; background: rgba(15, 23, 42, 0.8);\n            border: 1px solid var(--wmm-gold); color: var(--wmm-gold); border-radius: 50%;\n            z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center;\n            font-size: 1.2rem; transition: var(--wmm-transition); backdrop-filter: blur(10px);\n        }\n        .wmm-slider-arrow:hover { background: var(--wmm-gold); color: #000; box-shadow: 0 5px 15px rgba(250, 186, 91, 0.5); }\n        .wmm-prev { left: -10px; }\n        .wmm-next { right: -10px; }\n        \n        html[dir=\"rtl\"] .wmm-prev { left: auto; right: -10px; transform: translateY(-50%) rotate(180deg); }\n        html[dir=\"rtl\"] .wmm-next { right: auto; left: -10px; transform: translateY(-50%) rotate(180deg); }\n\n        .wmm-grid-cards { \n            display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;\n            scroll-snap-type: x mandatory !important; gap: 30px !important; \n            padding: 30px 10px 50px !important; scrollbar-width: thin; scrollbar-color: var(--wmm-gold) rgba(255,255,255,0.05);\n            scroll-behavior: smooth; align-items: stretch !important; cursor: grab; width: 100%;\n        }\n        .wmm-grid-cards:active { cursor: grabbing; }\n        .wmm-grid-cards::-webkit-scrollbar { height: 8px; }\n        .wmm-grid-cards::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }\n        .wmm-grid-cards::-webkit-scrollbar-thumb { background: var(--wmm-gold); border-radius: 10px; }\n\n        \/* 6. Card Design *\/\n        .wmm-card {\n            flex: 0 0 350px !important; max-width: 350px !important; scroll-snap-align: start !important;\n            background: var(--wmm-bg-card); padding: 45px 30px 35px !important; border-radius: 24px !important; \n            box-shadow: var(--wmm-shadow-soft); position: relative; border: 1px solid var(--wmm-border-color); \n            border-top: 4px solid var(--wmm-blue); transition: var(--wmm-transition); z-index: 1; backdrop-filter: blur(15px);\n            display: flex; flex-direction: column;\n        }\n        .wmm-card:hover { transform: translateY(-10px) !important; background: var(--wmm-bg-card-hover); box-shadow: var(--wmm-shadow-hover); border-top-color: var(--wmm-gold); }\n\n        .wmm-card-number {\n            position: absolute; top: -25px; left: 35px; width: 50px; height: 50px;\n            background: linear-gradient(135deg, var(--wmm-gold), #e6a32d); color: #000;\n            display: flex; align-items: center; justify-content: center; border-radius: 50%;\n            font-weight: 800; font-size: 1.3rem; border: 4px solid #1e293b; \n            box-shadow: 0 5px 15px rgba(250, 186, 91, 0.3); transition: var(--wmm-transition);\n            direction: ltr !important; unicode-bidi: isolate !important;\n        }\n        .wmm-card:hover .wmm-card-number { transform: scale(1.15); box-shadow: 0 8px 20px rgba(250, 186, 91, 0.5); border-color: #2d3748; }\n\n        .wmm-card-title { color: var(--wmm-text-main); font-size: 1.4rem; font-weight: 800; margin: 15px 0 20px; line-height: 1.4; }\n        .wmm-card-desc { color: var(--wmm-text-muted); font-size: 1.05rem; margin: 0; line-height: 1.8; }\n\n        \/* 7. Alt Card (Highlights - Glass Background) *\/\n        .wmm-bg-blue {\n            background: rgba(15, 23, 42, 0.4) !important; backdrop-filter: blur(30px) !important;\n            padding: 80px 5% !important; border-radius: 35px !important; position: relative; overflow: hidden;\n            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.5) !important; \n        }\n        .wmm-bg-blue::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(250,186,91,0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }\n        .wmm-card-alt { border-top: none !important; border-left: 5px solid var(--wmm-gold) !important; }\n        .wmm-card-alt:hover { border-left-color: var(--wmm-blue) !important; }\n        .wmm-card-border { border-top: none !important; border-left: 5px solid var(--wmm-gold) !important; }\n        .wmm-card-border:hover { border-left-color: var(--wmm-blue) !important; }\n\n        \/* 8. Topology Image & Lightbox *\/\n        .wmm-topology-wrapper { background: var(--wmm-bg-card); padding: 30px; border-radius: var(--wmm-radius); text-align: center; border: 1px solid var(--wmm-border-color); transition: var(--wmm-transition); box-shadow: var(--wmm-shadow-soft); width: 100%; max-width: 1200px; margin: 0 auto; }\n        .wmm-topology-wrapper:hover { box-shadow: var(--wmm-shadow-hover); border-color: var(--wmm-gold); transform: translateY(-4px); }\n        .wmm-topology-wrapper a { display: block; overflow: hidden; border-radius: 12px; }\n        .wmm-topology-img { max-width: 100%; height: auto; border-radius: 12px; transition: transform 0.4s ease; width: 100%; }\n        .wmm-topology-wrapper a:hover .wmm-topology-img { transform: scale(1.03); }\n        .wmm-topology-note { font-size: 1rem; color: var(--wmm-gold); margin: 20px 0 0 0; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; animation: wmmPulse 2s infinite; pointer-events: none; }\n\n        \/* ==========================================================================\n           9. RTL Fixes (\u0625\u0635\u0644\u0627\u062d\u0627\u062a \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629)\n           ========================================================================== *\/\n        html[dir=\"rtl\"] .wmm-scenario-container { direction: rtl !important; text-align: right !important; }\n        html[dir=\"rtl\"] .wmm-main-title::after { left: auto !important; right: 0 !important; }\n        html[dir=\"rtl\"] .wmm-card-number { left: auto !important; right: 35px !important; }\n        html[dir=\"rtl\"] .wmm-card-title { direction: rtl !important; }\n        html[dir=\"rtl\"] .wmm-card-alt, html[dir=\"rtl\"] .wmm-card-border { border-left: none !important; border-right: 5px solid var(--wmm-gold) !important; }\n        html[dir=\"rtl\"] .wmm-card-alt:hover, html[dir=\"rtl\"] .wmm-card-border:hover { border-right-color: var(--wmm-blue) !important; }\n\n        \/* ==========================================================================\n           10. Mobile Adjustments\n           ========================================================================== *\/\n        @media (max-width: 992px) { .wmm-intro-section { flex-direction: column; gap: 40px; } .wmm-intro-gallery { width: 100%; } .wmm-main-title { font-size: 2.4rem; } }\n        @media (max-width: 768px) {\n            .wmm-scenario-container { padding: 40px 20px !important; }\n            .wmm-main-title { font-size: 2.1rem; text-align: center !important; }\n            .wmm-main-title::after { left: 50% !important; transform: translateX(-50%) !important; right: auto !important; }\n            .wmm-intro-text p { text-align: center !important; }\n            \n            .wmm-section-title { font-size: 1.9rem; margin-bottom: 40px; text-align: center !important; }\n            .wmm-intro-gallery { display: flex; flex-direction: column; gap: 20px; } \n            \n            .wmm-slider-container { padding: 0 !important; }\n            .wmm-prev { left: 5px; } .wmm-next { right: 5px; }\n            html[dir=\"rtl\"] .wmm-prev { left: auto; right: 5px; }\n            html[dir=\"rtl\"] .wmm-next { right: auto; left: 5px; }\n\n            .wmm-grid-cards { gap: 20px !important; padding: 20px 0 40px !important; }\n            .wmm-card { flex: 0 0 85vw !important; max-width: 85vw !important; scroll-snap-align: center !important; padding: 45px 25px 30px !important; }\n            .wmm-card-title, .wmm-card-desc { text-align: center !important; }\n            \n            .wmm-card-number { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }\n            html[dir=\"rtl\"] .wmm-card-number { right: 50% !important; transform: translateX(50%) !important; }\n            .wmm-card:hover .wmm-card-number { transform: translateX(-50%) scale(1.15) !important; }\n            html[dir=\"rtl\"] .wmm-card:hover .wmm-card-number { transform: translateX(50%) scale(1.15) !important; }\n        }\n    <\/style>\n\n    <div class=\"wmm-scenario-container\">\n        \n        \n        <div class=\"wmm-intro-section\">\n            <div class=\"wmm-intro-text\">\n                <h1 class=\"wmm-main-title\">Pan Accommodation Solutions<\/h1>\n                                    <p>With the rapid growth of the housing and hospitality sectors, Pan Accommodation Solutions emerges as a specialized provider of innovative lodging solutions that meet the needs of both individuals and organizations.<\/p>\n                                    <p>The company operates with a clear vision focused on delivering comprehensive residential environments that combine comfort, quality, and operational efficiency, while keeping pace with modern standards and evolving market expectations.<\/p>\n                                    <p>By adopting advanced technologies and smart management practices, Pan Accommodation Solutions strives to redefine contemporary living and deliver real value in every project it undertakes.<\/p>\n                            <\/div>\n            <div class=\"wmm-intro-gallery\">\n                                    <img decoding=\"async\" src=\"https:\/\/np.sheetheg.com\/wp-content\/uploads\/2026\/05\/image3-netpon.webp\" class=\"wmm-gallery-img\">\n                                    <img decoding=\"async\" src=\"https:\/\/np.sheetheg.com\/wp-content\/uploads\/2026\/05\/image1-netpon.webp\" class=\"wmm-gallery-img\">\n                                    <img decoding=\"async\" src=\"https:\/\/np.sheetheg.com\/wp-content\/uploads\/2026\/05\/image4-netpon.webp\" class=\"wmm-gallery-img\">\n                            <\/div>\n        <\/div>\n\n        <div class=\"wmm-section\">\n            <h2 class=\"wmm-section-title\">Project Requirements<\/h2>\n            <div class=\"wmm-slider-container\">\n                <button class=\"wmm-slider-arrow wmm-prev\" aria-label=\"Previous\">&#10094;<\/button>\n                <div class=\"wmm-grid-cards\">\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">01.<\/div>\n                            <h3 class=\"wmm-card-title\">Ensure guest room internet experience<\/h3>\n                            <p class=\"wmm-card-desc\">Ultra fast broadband, cross store roaming, seamless Wi Fi switching.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">02.<\/div>\n                            <h3 class=\"wmm-card-title\">Brand customization service<\/h3>\n                            <p class=\"wmm-card-desc\">Deeply integrating PMS\/intelligent devices with highly customized TV UI.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">03.<\/div>\n                            <h3 class=\"wmm-card-title\">Multi business integration<\/h3>\n                            <p class=\"wmm-card-desc\">Single fiber optic cable carries TV, telephone and internet.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">04.<\/div>\n                            <h3 class=\"wmm-card-title\">Intelligent operation and maintenance<\/h3>\n                            <p class=\"wmm-card-desc\">Cloud based device management without IT personnel.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">05.<\/div>\n                            <h3 class=\"wmm-card-title\">Portal authentication<\/h3>\n                            <p class=\"wmm-card-desc\">Integrate with hotel membership system for branding.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">06.<\/div>\n                            <h3 class=\"wmm-card-title\">Private screen mirroring<\/h3>\n                            <p class=\"wmm-card-desc\">Prevent misdelivery and enhance customer experience.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card\">\n                            <div class=\"wmm-card-number\">07.<\/div>\n                            <h3 class=\"wmm-card-title\">Multi system integration<\/h3>\n                            <p class=\"wmm-card-desc\">Integration of telephone, TV, robot and washing machine systems.<\/p>\n                        <\/div>\n                                    <\/div>\n                <button class=\"wmm-slider-arrow wmm-next\" aria-label=\"Next\">&#10095;<\/button>\n            <\/div>\n        <\/div>\n\n                <div class=\"wmm-section\">\n            <h2 class=\"wmm-section-title\">Network Topology<\/h2>\n            <div class=\"wmm-topology-wrapper\">\n                <a href=\"https:\/\/np.sheetheg.com\/wp-content\/uploads\/2026\/05\/image2-netpon.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Network Topology\">\n                    <img decoding=\"async\" src=\"https:\/\/np.sheetheg.com\/wp-content\/uploads\/2026\/05\/image2-netpon.webp\" class=\"wmm-topology-img\" alt=\"Network Topology\">\n                <\/a>\n                <p class=\"wmm-topology-note\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>\n                    Click on the image to enlarge\n                <\/p>\n            <\/div>\n        <\/div>\n        \n        <div class=\"wmm-section wmm-bg-blue\">\n            <h2 class=\"wmm-section-title wmm-text-gold\">Highlights of the Solution<\/h2>\n            <div class=\"wmm-slider-container\">\n                <button class=\"wmm-slider-arrow wmm-prev\" aria-label=\"Previous\">&#10094;<\/button>\n                <div class=\"wmm-grid-cards\">\n                                            <div class=\"wmm-card wmm-card-alt\">\n                            <h3 class=\"wmm-card-title\">01. All-optical networking<\/h3>\n                            <p class=\"wmm-card-desc\">Integrated network solution saves 60% cabling cost.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-alt\">\n                            <h3 class=\"wmm-card-title\">02. High concurrency<\/h3>\n                            <p class=\"wmm-card-desc\">WiFi 6 ceiling APs support high-density usage.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-alt\">\n                            <h3 class=\"wmm-card-title\">03. One front desk is ready<\/h3>\n                            <p class=\"wmm-card-desc\">ZH-F886W WiFi 6 AP with full coverage.<\/p>\n                        <\/div>\n                                    <\/div>\n                <button class=\"wmm-slider-arrow wmm-next\" aria-label=\"Next\">&#10095;<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"wmm-section\">\n            <h2 class=\"wmm-section-title\">User Value<\/h2>\n            <div class=\"wmm-slider-container\">\n                <button class=\"wmm-slider-arrow wmm-prev\" aria-label=\"Previous\">&#10094;<\/button>\n                <div class=\"wmm-grid-cards\">\n                                            <div class=\"wmm-card wmm-card-border\">\n                            <h3 class=\"wmm-card-title\">01. IT standardization of chain hotels<\/h3>\n                            <p class=\"wmm-card-desc\">Assist hotels with PMS integration.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-border\">\n                            <h3 class=\"wmm-card-title\">02. Portal authentication<\/h3>\n                            <p class=\"wmm-card-desc\">Customized interface per hotel brand.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-border\">\n                            <h3 class=\"wmm-card-title\">03. Intelligent Operations<\/h3>\n                            <p class=\"wmm-card-desc\">One-click deployment reduces operation costs.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-border\">\n                            <h3 class=\"wmm-card-title\">04. Multi business integration<\/h3>\n                            <p class=\"wmm-card-desc\">3-in-1 networks with flexible bandwidth.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-border\">\n                            <h3 class=\"wmm-card-title\">05. High speed WiFi roaming<\/h3>\n                            <p class=\"wmm-card-desc\">Ultimate WiFi 6 user experience.<\/p>\n                        <\/div>\n                                            <div class=\"wmm-card wmm-card-border\">\n                            <h3 class=\"wmm-card-title\">06. Personalized UI interface<\/h3>\n                            <p class=\"wmm-card-desc\">Deep system integration into one unified interface.<\/p>\n                        <\/div>\n                                    <\/div>\n                <button class=\"wmm-slider-arrow wmm-next\" aria-label=\"Next\">&#10095;<\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- Mouse Drag & Arrows Logic -->\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const sliderContainers = document.querySelectorAll('.wmm-slider-container');\n        \n        sliderContainers.forEach(container => {\n            const slider = container.querySelector('.wmm-grid-cards');\n            const prev = container.querySelector('.wmm-prev');\n            const next = container.querySelector('.wmm-next');\n            if(!slider || !prev || !next) return;\n\n            const isRTL = document.documentElement.dir === 'rtl';\n            const scrollAmount = isRTL ? -350 : 350;\n\n            prev.addEventListener('click', () => { slider.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); });\n            next.addEventListener('click', () => { slider.scrollBy({ left: scrollAmount, behavior: 'smooth' }); });\n\n            let isDown = false;\n            let startX;\n            let scrollLeft;\n\n            slider.addEventListener('mousedown', (e) => {\n                isDown = true;\n                slider.style.cursor = 'grabbing';\n                startX = e.pageX - slider.offsetLeft;\n                scrollLeft = slider.scrollLeft;\n            });\n            slider.addEventListener('mouseleave', () => { isDown = false; slider.style.cursor = 'grab'; });\n            slider.addEventListener('mouseup', () => { isDown = false; slider.style.cursor = 'grab'; });\n            slider.addEventListener('mousemove', (e) => {\n                if (!isDown) return;\n                e.preventDefault();\n                const x = e.pageX - slider.offsetLeft;\n                const walk = (x - startX) * 2; \n                slider.scrollLeft = scrollLeft - walk;\n            });\n        });\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"featured_media":11682,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","project-cat":[133],"class_list":["post-11481","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","project-cat-pol-solutions"],"_links":{"self":[{"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/portfolio\/11481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/types\/portfolio"}],"replies":[{"embeddable":true,"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/comments?post=11481"}],"version-history":[{"count":29,"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/portfolio\/11481\/revisions"}],"predecessor-version":[{"id":12125,"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/portfolio\/11481\/revisions\/12125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/media\/11682"}],"wp:attachment":[{"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/media?parent=11481"}],"wp:term":[{"taxonomy":"project-cat","embeddable":true,"href":"https:\/\/np.sheetheg.com\/ar\/wp-json\/wp\/v2\/project-cat?post=11481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}