{"id":1261,"date":"2020-03-27T13:30:09","date_gmt":"2020-03-27T11:30:09","guid":{"rendered":"https:\/\/boothitnow.gr\/home\/"},"modified":"2026-05-01T14:23:34","modified_gmt":"2026-05-01T14:23:34","slug":"home","status":"publish","type":"page","link":"https:\/\/boothitnow.gr\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1261\" class=\"elementor elementor-1261 elementor-233\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ab4939 qode_elementor_container_inner e-con-full e-flex parallax_section_no e-con e-parent\" data-id=\"1ab4939\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6fe8bb elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"f6fe8bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;800&family=Space+Mono:wght@700&display=swap');\r\n    \r\n    * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n    \r\n    .elementor-element-1ab4939,\r\n    .qode_elementor_container_inner,\r\n    .e-con-full,\r\n    .e-con {\r\n        padding: 0 !important;\r\n        margin: 0 !important;\r\n        --container-widget-width: 100% !important;\r\n    }\r\n\r\n    .elementor-element-f6fe8bb,\r\n    .elementor-widget-html,\r\n    .elementor-widget__width-initial {\r\n        padding: 0 !important;\r\n        margin: 0 !important;\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n    }\r\n\r\n    body, \r\n    .elementor-page,\r\n    .elementor,\r\n    .elementor-inner,\r\n    .elementor-section-wrap,\r\n    .elementor-top-section {\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n        overflow-x: hidden;\r\n    }\r\n\r\n    .elementor-container,\r\n    .elementor-row,\r\n    .elementor-column,\r\n    .elementor-widget-wrap,\r\n    .elementor-widget-container {\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n    \r\n    \/* ===== COVERFLOW WRAPPER ===== *\/\r\n    .coverflow-wrapper {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        margin: 0 !important;\r\n        padding: 60px 40px !important;\r\n        position: relative;\r\n        left: 0 !important;\r\n        right: 0 !important;\r\n        margin-left: 0 !important;\r\n        margin-right: 0 !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-family: 'Outfit', sans-serif;\r\n        user-select: none;\r\n        background: transparent;\r\n        min-height: 650px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ambient-glow {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 800px;\r\n        height: 600px;\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n        transition: background 1s ease;\r\n        z-index: 1;\r\n        filter: blur(100px);\r\n        will-change: background;\r\n    }\r\n    \r\n    .coverflow-title-section {\r\n        margin-bottom: 30px;\r\n        text-align: center;\r\n        z-index: 10;\r\n        position: relative;\r\n    }\r\n    \r\n    .coverflow-subtitle {\r\n        font-size: clamp(16px, 1.5vw, 22px);\r\n        letter-spacing: 2px;\r\n        line-height: 1.3;\r\n        text-transform: uppercase;\r\n        background: linear-gradient(135deg, #00BFFF, #A020F0);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        margin-bottom: 8px;\r\n        font-weight: 700;\r\n        padding: 0 15px;\r\n        max-width: 100%;\r\n        white-space: normal;\r\n        word-wrap: break-word;\r\n    }\r\n    \r\n    .coverflow-main-title {\r\n        font-size: clamp(36px, 5vw, 60px);\r\n        font-weight: 800;\r\n        color: #FFFFFF;\r\n        min-height: auto;\r\n        line-height: 1.2;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-shadow: 0 0 40px rgba(0, 191, 255, 0.3);\r\n        position: relative;\r\n        margin-top: 5px;\r\n    }\r\n    \r\n    .coverflow-main-title.animating {\r\n        animation: titleSwitch 0.5s ease forwards;\r\n    }\r\n    \r\n    @keyframes titleSwitch {\r\n        0% { opacity: 1; transform: translateY(0); }\r\n        40% { opacity: 0; transform: translateY(-15px); }\r\n        60% { opacity: 0; transform: translateY(10px); }\r\n        100% { opacity: 1; transform: translateY(0); }\r\n    }\r\n    \r\n    .slider-container {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 580px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        touch-action: pan-y;\r\n        z-index: 10;\r\n        cursor: grab;\r\n        perspective: 1200px;\r\n    }\r\n    \r\n    .slider-container:active {\r\n        cursor: grabbing;\r\n    }\r\n    \r\n    .slide-wrapper {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        text-decoration: none;\r\n        display: block;\r\n        will-change: transform;\r\n        backface-visibility: hidden;\r\n        -webkit-backface-visibility: hidden;\r\n    }\r\n    \r\n    .slide-wrapper.animate {\r\n        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),\r\n                    opacity 0.6s ease,\r\n                    filter 0.6s ease;\r\n    }\r\n    \r\n    .slide-wrapper.active {\r\n        cursor: pointer;\r\n        z-index: 100 !important;\r\n    }\r\n    \r\n    .phone-frame {\r\n        width: 320px;\r\n        height: 520px;\r\n        border-radius: 36px;\r\n        background: rgba(5, 7, 10, 0.95);\r\n        overflow: hidden;\r\n        position: relative;\r\n        transition: box-shadow 0.5s ease;\r\n    }\r\n    \r\n    .phone-frame.active-frame {\r\n        box-shadow: 0 0 60px rgba(0, 191, 255, 0.4), \r\n                    0 0 120px rgba(160, 32, 240, 0.25),\r\n                    0 40px 100px rgba(0, 0, 0, 0.6);\r\n        border: 2.5px solid transparent;\r\n        background-clip: padding-box;\r\n    }\r\n    \r\n    .phone-frame.active-frame::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: -2.5px;\r\n        border-radius: 36px;\r\n        padding: 2.5px;\r\n        background: linear-gradient(135deg, #00BFFF, #A020F0);\r\n        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n        -webkit-mask-composite: xor;\r\n        mask-composite: exclude;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n    \r\n    .phone-notch {\r\n        position: absolute;\r\n        top: 12px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 80px;\r\n        height: 8px;\r\n        border-radius: 4px;\r\n        background: #1a1a2e;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .phone-content {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-end;\r\n        position: relative;\r\n        overflow: hidden;\r\n        background-size: cover;\r\n        background-position: center;\r\n        background-repeat: no-repeat;\r\n    }\r\n    \r\n    .phone-content::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 55%;\r\n        background: linear-gradient(to top, rgba(5, 7, 10, 0.98) 0%, rgba(5, 7, 10, 0.65) 35%, rgba(5, 7, 10, 0.1) 70%, transparent 100%);\r\n        z-index: 2;\r\n    }\r\n    \r\n    .animated-circle {\r\n        position: absolute;\r\n        border-radius: 50%;\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        z-index: 1;\r\n    }\r\n    \r\n    .animated-circle.playing {\r\n        animation: spin 12s linear infinite;\r\n    }\r\n    \r\n    .animated-circle.playing.reverse {\r\n        animation: spin 8s linear infinite reverse;\r\n    }\r\n    \r\n    .slide-label {\r\n        color: rgba(255, 255, 255, 0.95);\r\n        font-size: 20px;\r\n        font-weight: 700;\r\n        letter-spacing: 3px;\r\n        text-transform: uppercase;\r\n        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);\r\n        z-index: 3;\r\n        text-align: center;\r\n        padding: 0 24px;\r\n        margin-bottom: 8px;\r\n        line-height: 1.2;\r\n    }\r\n    \r\n    .slide-subtitle {\r\n        color: rgba(255, 255, 255, 0.75);\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        letter-spacing: 1.5px;\r\n        line-height: 1.3;\r\n        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);\r\n        z-index: 3;\r\n        margin-bottom: 30px;\r\n        text-align: center;\r\n        padding: 0 24px;\r\n        white-space: normal;\r\n        word-wrap: break-word;\r\n    }\r\n    \r\n    .neon-overlay {\r\n        position: absolute;\r\n        inset: 0;\r\n        border-radius: 36px;\r\n        box-shadow: inset 0 0 50px rgba(0, 191, 255, 0.2),\r\n                    inset 0 0 100px rgba(160, 32, 240, 0.1);\r\n        pointer-events: none;\r\n        z-index: 4;\r\n    }\r\n    \r\n    .slide-flash {\r\n        position: absolute;\r\n        inset: 0;\r\n        border-radius: 36px;\r\n        background: radial-gradient(circle, rgba(0, 191, 255, 0.5) 0%, transparent 70%);\r\n        pointer-events: none;\r\n        z-index: 10;\r\n        animation: flashEffect 0.5s ease-out forwards;\r\n    }\r\n    \r\n    @keyframes flashEffect {\r\n        from { opacity: 1; transform: scale(0.8); }\r\n        to { opacity: 0; transform: scale(1.5); }\r\n    }\r\n    \r\n    .particle-burst {\r\n        position: absolute;\r\n        width: 5px;\r\n        height: 5px;\r\n        border-radius: 50%;\r\n        background: #00BFFF;\r\n        pointer-events: none;\r\n        z-index: 11;\r\n        animation: particleBurst 0.8s ease-out forwards;\r\n    }\r\n    \r\n    @keyframes particleBurst {\r\n        0% { transform: translate(0, 0) scale(1); opacity: 1; }\r\n        100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }\r\n    }\r\n    \r\n    .nav-section {\r\n        display: flex;\r\n        gap: 35px;\r\n        margin-top: 60px;\r\n        z-index: 10;\r\n        align-items: center;\r\n        position: relative;\r\n    }\r\n    \r\n    .nav-btn {\r\n        width: 60px;\r\n        height: 60px;\r\n        border-radius: 50%;\r\n        border: 2px solid rgba(0, 191, 255, 0.5);\r\n        background: rgba(5, 7, 10, 0.4);\r\n        color: #00BFFF;\r\n        font-size: 26px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        padding: 0;\r\n    }\r\n    \r\n    .nav-btn:hover {\r\n        background: linear-gradient(135deg, rgba(0, 191, 255, 0.25), rgba(160, 32, 240, 0.25));\r\n        transform: scale(1.15);\r\n        border-color: #A020F0;\r\n        box-shadow: 0 0 50px rgba(0, 191, 255, 0.4);\r\n    }\r\n    \r\n    .nav-btn:disabled {\r\n        opacity: 0.5;\r\n        cursor: not-allowed;\r\n        pointer-events: none;\r\n    }\r\n    \r\n    .dots-container {\r\n        display: flex;\r\n        gap: 14px;\r\n    }\r\n    \r\n    .dot {\r\n        height: 14px;\r\n        border-radius: 7px;\r\n        border: none;\r\n        cursor: pointer;\r\n        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n        padding: 0;\r\n        background: rgba(255, 255, 255, 0.25);\r\n    }\r\n    \r\n    .dot.active {\r\n        background: linear-gradient(135deg, #00BFFF, #A020F0);\r\n        width: 40px;\r\n        box-shadow: 0 0 25px rgba(0, 191, 255, 0.6);\r\n    }\r\n    \r\n    .dot:not(.active) {\r\n        width: 14px;\r\n    }\r\n    \r\n    .dot:hover:not(.active) {\r\n        background: rgba(0, 191, 255, 0.5);\r\n    }\r\n    \r\n    @keyframes spin {\r\n        from { transform: rotate(0deg); }\r\n        to { transform: rotate(360deg); }\r\n    }\r\n    \r\n    \/* ============ MOBILE ============ *\/\r\n    @media (max-width: 768px) {\r\n        .ambient-glow { filter: blur(50px); }\r\n        .phone-frame, .nav-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }\r\n        .coverflow-main-title.animating { animation: titleSwitchMobile 0.4s ease forwards; }\r\n        \r\n        @keyframes titleSwitchMobile {\r\n            0% { opacity: 1; }\r\n            50% { opacity: 0; }\r\n            100% { opacity: 1; }\r\n        }\r\n        \r\n        .particle-burst { width: 3px; height: 3px; }\r\n        .slide-wrapper { filter: none !important; }\r\n        .slider-container { perspective: 800px; }\r\n        .phone-frame.active-frame { box-shadow: 0 0 30px rgba(0, 191, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.5); }\r\n    }\r\n    \r\n    @media (min-width: 1600px) {\r\n        .coverflow-wrapper { min-height: 750px; }\r\n        .slider-container { height: 650px; }\r\n        .phone-frame { width: 360px; height: 560px; }\r\n        .slide-label { font-size: 22px; }\r\n        .slide-subtitle { font-size: 15px; }\r\n    }\r\n    \r\n    @media (min-width: 1200px) and (max-width: 1599px) {\r\n        .slider-container { height: 600px; }\r\n        .phone-frame { width: 340px; height: 540px; }\r\n    }\r\n    \r\n    @media (max-width: 1199px) {\r\n        .coverflow-wrapper { padding: 50px 30px !important; min-height: 550px; }\r\n        .slider-container { height: 500px; }\r\n        .phone-frame { width: 280px; height: 460px; }\r\n        .nav-btn { width: 52px; height: 52px; }\r\n        .slide-label { font-size: 18px; }\r\n        .slide-subtitle { font-size: 13px; }\r\n    }\r\n    \r\n    @media (max-width: 900px) {\r\n        .coverflow-wrapper { padding: 40px 20px !important; min-height: 500px; }\r\n        .slider-container { height: 450px; perspective: 1000px; }\r\n        .phone-frame { width: 240px; height: 400px; border-radius: 30px; }\r\n        .phone-frame.active-frame::before { border-radius: 30px; }\r\n        .nav-btn { width: 48px; height: 48px; font-size: 22px; }\r\n        .nav-section { gap: 25px; margin-top: 45px; }\r\n        .slide-label { font-size: 16px; letter-spacing: 2px; }\r\n        .slide-subtitle { font-size: 12px; margin-bottom: 24px; }\r\n    }\r\n    \r\n    @media (max-width: 600px) {\r\n        .coverflow-wrapper { padding: 30px 15px !important; min-height: 400px; }\r\n        .coverflow-title-section { margin-bottom: 20px; }\r\n        .coverflow-subtitle { letter-spacing: 1px; font-size: 16px; line-height: 1.3; margin-bottom: 6px; padding: 0 10px; }\r\n        .coverflow-main-title { min-height: auto; margin-top: 4px; }\r\n        .slider-container { height: 360px; perspective: 600px; }\r\n        .phone-frame { width: 200px; height: 340px; border-radius: 26px; }\r\n        .phone-frame.active-frame::before { border-radius: 26px; }\r\n        .phone-notch { width: 60px; height: 6px; top: 8px; }\r\n        .nav-btn { width: 42px; height: 42px; font-size: 20px; }\r\n        .nav-section { gap: 20px; margin-top: 30px; }\r\n        .dots-container { gap: 10px; }\r\n        .dot { height: 10px; }\r\n        .dot.active { width: 30px; }\r\n        .dot:not(.active) { width: 10px; }\r\n        .slide-label { font-size: 14px; padding: 0 16px; margin-bottom: 6px; }\r\n        .slide-subtitle { font-size: 11px; margin-bottom: 20px; padding: 0 16px; line-height: 1.3; }\r\n        .slide-flash { border-radius: 26px; }\r\n        .animated-circle { display: none; }\r\n        .particle-burst { display: none; }\r\n        .slide-flash { display: none; }\r\n    }\r\n    \r\n    @media (max-width: 400px) {\r\n        .coverflow-wrapper { padding: 25px 10px !important; min-height: 360px; }\r\n        .slider-container { height: 320px; perspective: 500px; }\r\n        .phone-frame { width: 170px; height: 290px; border-radius: 22px; }\r\n        .phone-frame.active-frame::before { border-radius: 22px; }\r\n        .nav-btn { width: 38px; height: 38px; font-size: 18px; }\r\n        .nav-section { gap: 15px; margin-top: 25px; }\r\n        .slide-label { font-size: 12px; }\r\n        .slide-subtitle { font-size: 10px; margin-bottom: 18px; }\r\n        .slide-flash { border-radius: 22px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"coverflow-wrapper\" id=\"coverflow-app\" style=\"width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;\">\r\n    <div class=\"ambient-glow\" id=\"ambient-glow\"><\/div>\r\n    \r\n    <div class=\"coverflow-title-section\">\r\n        <div class=\"coverflow-subtitle\">Our Services<\/div>\r\n        <div class=\"coverflow-main-title\" id=\"main-title\">Combo Pack<\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"slider-container\" id=\"slider-container\"><\/div>\r\n    \r\n    <div class=\"nav-section\">\r\n        <button class=\"nav-btn\" id=\"prev-btn\" aria-label=\"\u03a0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03bf\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n        \r\n        <div class=\"dots-container\" id=\"dots-container\"><\/div>\r\n        \r\n        <button class=\"nav-btn\" id=\"next-btn\" aria-label=\"\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n            <\/svg>\r\n        <\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    const SLIDES = [\r\n        { \r\n            id: 1, \r\n            title: \"Combo Pack\", \r\n            subtitle: \"The ultimate entertainment experience\",\r\n            image: \"https:\/\/boothitnow.gr\/wp-content\/uploads\/2026\/04\/20260406_194846.jpg\",\r\n            link: \"https:\/\/boothitnow.gr\/en\/combo-package-the-full-experience\/\",\r\n            color: \"#A020F0\",\r\n            accent: \"#00BFFF\"\r\n        },\r\n        { \r\n            id: 2, \r\n            title: \"Photo Booth\", \r\n            subtitle: \"Strike a pose, smile, and capture the moment!\",\r\n            image: \"https:\/\/boothitnow.gr\/wp-content\/uploads\/2026\/04\/20260406_185242.jpg\",\r\n            link: \"https:\/\/boothitnow.gr\/en\/photo-booth-with-printing\/\",\r\n            color: \"#00BFFF\",\r\n            accent: \"#A020F0\"\r\n        },\r\n        { \r\n            id: 3, \r\n            title: \"360\u00b0 Video Booth\", \r\n            subtitle: \"Make your guests the stars of the show!\",\r\n            image: \"https:\/\/boothitnow.gr\/wp-content\/uploads\/2026\/04\/20260406_191751.jpg\",\r\n            link: \"https:\/\/boothitnow.gr\/en\/360-video-booth\/\",\r\n            color: \"#A020F0\",\r\n            accent: \"#00BFFF\"\r\n        },\r\n        { \r\n            id: 4, \r\n            title: \"Wishing Phone\", \r\n            subtitle: \"Memories that can\u2019t be read\u2026 can be heard!\",\r\n            image: \"https:\/\/boothitnow.gr\/wp-content\/uploads\/2026\/04\/IMG_7485.jpg\",\r\n            link: \"https:\/\/boothitnow.gr\/en\/wishing-phone-audio-wishing-book\/\",\r\n            color: \"#00BFFF\",\r\n            accent: \"#A020F0\"\r\n        }\r\n    ];\r\n    \r\n    const total = SLIDES.length;\r\n    let active = 0;\r\n    let dragging = false;\r\n    let dragStart = 0;\r\n    let dragDelta = 0;\r\n    let autoPlayInterval;\r\n    let isAnimating = false;\r\n    let pointerMoved = false;\r\n    let startTime = 0;\r\n    let isMobile = window.innerWidth <= 768;\r\n    \r\n    const sliderContainer = document.getElementById('slider-container');\r\n    const mainTitle = document.getElementById('main-title');\r\n    const ambientGlow = document.getElementById('ambient-glow');\r\n    const dotsContainer = document.getElementById('dots-container');\r\n    const prevBtn = document.getElementById('prev-btn');\r\n    const nextBtn = document.getElementById('next-btn');\r\n    const titleSection = document.querySelector('.coverflow-title-section');\r\n    \r\n    if (titleSection) {\r\n        titleSection.style.cursor = 'pointer';\r\n        titleSection.addEventListener('click', (e) => {\r\n            if (pointerMoved) return;\r\n            const now = Date.now();\r\n            if (now - startTime < 300) {\r\n                window.location.href = SLIDES[active].link;\r\n            }\r\n        });\r\n    }\r\n    \r\n    window.addEventListener('resize', () => {\r\n        isMobile = window.innerWidth <= 768;\r\n    });\r\n    \r\n    function getSpacing() {\r\n        const width = window.innerWidth;\r\n        if (width <= 400) return 150;\r\n        if (width <= 600) return 170;\r\n        if (width <= 900) return 210;\r\n        if (width <= 1199) return 250;\r\n        if (width <= 1599) return 300;\r\n        return 330;\r\n    }\r\n    \r\n    function createSlides(direction = 0) {\r\n        sliderContainer.innerHTML = '';\r\n        const spacing = getSpacing();\r\n        \r\n        SLIDES.forEach((slide, index) => {\r\n            const wrapper = document.createElement('div');\r\n            wrapper.className = 'slide-wrapper animate';\r\n            wrapper.setAttribute('data-index', index);\r\n            wrapper.setAttribute('data-link', slide.link);\r\n            \r\n            let diff = index - active;\r\n            if (diff > total \/ 2) diff -= total;\r\n            if (diff < -total \/ 2) diff += total;\r\n            const absDiff = Math.abs(diff);\r\n            \r\n            let translateX, translateZ, rotateY, scale, opacity;\r\n            \r\n            if (absDiff === 0) {\r\n                translateX = 0; translateZ = 0; rotateY = 0; scale = 1; opacity = 1;\r\n            } else if (absDiff === 1) {\r\n                translateX = diff * spacing;\r\n                translateZ = isMobile ? -80 : -150;\r\n                rotateY = diff * -25;\r\n                scale = 0.82;\r\n                opacity = 0.65;\r\n            } else {\r\n                translateX = diff * (spacing * 1.2);\r\n                translateZ = isMobile ? -150 : -250;\r\n                rotateY = diff * -35;\r\n                scale = 0.7;\r\n                opacity = 0;\r\n            }\r\n            \r\n            wrapper.style.transform = `perspective(${isMobile ? '600px' : '1200px'}) translateX(${translateX}px) translateZ(${translateZ}px) rotateY(${rotateY}deg) scale(${scale})`;\r\n            wrapper.style.opacity = opacity;\r\n            wrapper.style.zIndex = 100 - absDiff * 20;\r\n            wrapper.style.pointerEvents = absDiff > 1 ? 'none' : 'auto';\r\n            \r\n            if (index === active) wrapper.classList.add('active');\r\n            \r\n            const particlesHTML = isMobile ? '' : `\r\n                <div class=\"animated-circle ${index === active ? 'playing' : ''}\" style=\"width: 400px; height: 400px; top: -100px; right: -110px; border-color: rgba(0, 191, 255, 0.15);\"><\/div>\r\n                <div class=\"animated-circle reverse ${index === active ? 'playing' : ''}\" style=\"width: 260px; height: 260px; bottom: -50px; left: -80px; border-color: rgba(160, 32, 240, 0.15);\"><\/div>`;\r\n            \r\n            wrapper.innerHTML = `\r\n                <div class=\"phone-frame ${index === active ? 'active-frame' : ''}\">\r\n                    <div class=\"phone-notch\"><\/div>\r\n                    <div class=\"phone-content\" style=\"background-image: url('${slide.image}');\">\r\n                        ${particlesHTML}\r\n                        <span class=\"slide-label\">${slide.title}<\/span>\r\n                        <span class=\"slide-subtitle\">${slide.subtitle}<\/span>\r\n                    <\/div>\r\n                    ${index === active && !isMobile ? '<div class=\"neon-overlay\"><\/div>' : ''}\r\n                <\/div>`;\r\n            \r\n            wrapper.addEventListener('click', (e) => {\r\n                e.preventDefault(); e.stopPropagation();\r\n                if (pointerMoved || isAnimating) { pointerMoved = false; return; }\r\n                const clickDuration = Date.now() - startTime;\r\n                if (clickDuration > 300) return;\r\n                if (index === active) { window.location.href = slide.link; }\r\n                else { const dir = index > active ? 1 : -1; goTo(index, dir); }\r\n            });\r\n            \r\n            wrapper.style.cursor = 'pointer';\r\n            sliderContainer.appendChild(wrapper);\r\n        });\r\n    }\r\n    \r\n    function createDots() {\r\n        dotsContainer.innerHTML = '';\r\n        SLIDES.forEach((_, index) => {\r\n            const dot = document.createElement('button');\r\n            dot.className = 'dot';\r\n            dot.setAttribute('aria-label', '\u039c\u03b5\u03c4\u03ac\u03b2\u03b1\u03c3\u03b7 \u03c3\u03c4\u03b7\u03bd \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b1 ' + (index + 1));\r\n            if (index === active) dot.classList.add('active');\r\n            dot.addEventListener('click', (e) => {\r\n                e.preventDefault(); e.stopPropagation();\r\n                if (pointerMoved) { pointerMoved = false; return; }\r\n                if (!isAnimating && index !== active) { const dir = index > active ? 1 : -1; goTo(index, dir); }\r\n                else if (index === active && !pointerMoved) { window.location.href = SLIDES[active].link; }\r\n            });\r\n            dotsContainer.appendChild(dot);\r\n        });\r\n    }\r\n    \r\n    function goTo(index, direction = 0) {\r\n        if (isAnimating) return;\r\n        isAnimating = true;\r\n        pointerMoved = false;\r\n        const oldActive = active;\r\n        active = ((index % total) + total) % total;\r\n        if (direction === 0) direction = index > oldActive ? 1 : -1;\r\n        \r\n        prevBtn.disabled = true;\r\n        nextBtn.disabled = true;\r\n        \r\n        mainTitle.classList.add('animating');\r\n        setTimeout(() => { mainTitle.textContent = SLIDES[active].title; }, 200);\r\n        setTimeout(() => { mainTitle.classList.remove('animating'); }, 500);\r\n        \r\n        ambientGlow.style.background = 'radial-gradient(ellipse, ' + SLIDES[active].color + '30 0%, rgba(0, 191, 255, 0.08) 50%, transparent 70%)';\r\n        \r\n        const slides = sliderContainer.querySelectorAll('.slide-wrapper');\r\n        const spacing = getSpacing();\r\n        \r\n        slides.forEach((slide) => {\r\n            const slideIndex = parseInt(slide.getAttribute('data-index'));\r\n            let diff = slideIndex - active;\r\n            if (diff > total \/ 2) diff -= total;\r\n            if (diff < -total \/ 2) diff += total;\r\n            const absDiff = Math.abs(diff);\r\n            \r\n            slide.classList.remove('active');\r\n            \r\n            let targetX = 0, targetZ = 0, targetRotate = 0, targetScale = 1, targetOpacity = 1;\r\n            \r\n            if (absDiff === 1) {\r\n                targetX = diff * spacing; targetZ = isMobile ? -80 : -150;\r\n                targetRotate = diff * -25; targetScale = 0.82; targetOpacity = 0.65;\r\n            } else if (absDiff > 1) {\r\n                targetX = diff * (spacing * 1.2); targetZ = isMobile ? -150 : -250;\r\n                targetRotate = diff * -35; targetScale = 0.7; targetOpacity = 0;\r\n            }\r\n            \r\n            if (absDiff === 0) {\r\n                slide.classList.add('active');\r\n                slide.setAttribute('data-link', SLIDES[active].link);\r\n            }\r\n            \r\n            slide.style.transform = 'perspective(' + (isMobile ? '600px' : '1200px') + ') translateX(' + targetX + 'px) translateZ(' + targetZ + 'px) rotateY(' + targetRotate + 'deg) scale(' + targetScale + ')';\r\n            slide.style.opacity = targetOpacity;\r\n            slide.style.zIndex = 100 - absDiff * 20;\r\n            slide.style.pointerEvents = absDiff > 1 ? 'none' : 'auto';\r\n            \r\n            const frame = slide.querySelector('.phone-frame');\r\n            if (frame) frame.classList.toggle('active-frame', absDiff === 0);\r\n        });\r\n        \r\n        createDots();\r\n        \r\n        setTimeout(() => {\r\n            isAnimating = false;\r\n            prevBtn.disabled = false;\r\n            nextBtn.disabled = false;\r\n        }, 600);\r\n        \r\n        resetAutoPlay();\r\n    }\r\n    \r\n    function next() { if (!isAnimating) goTo(active + 1, 1); }\r\n    function prev() { if (!isAnimating) goTo(active - 1, -1); }\r\n    \r\n    sliderContainer.addEventListener('pointerdown', (e) => {\r\n        if (isAnimating) return;\r\n        dragging = true; pointerMoved = false; startTime = Date.now();\r\n        dragStart = e.clientX; dragDelta = 0;\r\n        stopAutoPlay();\r\n    });\r\n    \r\n    sliderContainer.addEventListener('pointermove', (e) => {\r\n        if (!dragging) return;\r\n        dragDelta = e.clientX - dragStart;\r\n        if (Math.abs(dragDelta) > 8) pointerMoved = true;\r\n        \r\n        const slides = sliderContainer.querySelectorAll('.slide-wrapper');\r\n        const spacing = getSpacing();\r\n        \r\n        slides.forEach((slide) => {\r\n            slide.classList.remove('animate');\r\n            const slideIndex = parseInt(slide.getAttribute('data-index'));\r\n            let diff = slideIndex - active;\r\n            if (diff > total \/ 2) diff -= total;\r\n            if (diff < -total \/ 2) diff += total;\r\n            const absDiff = Math.abs(diff);\r\n            \r\n            const translateX = diff * spacing + dragDelta * 0.4;\r\n            const translateZ = isMobile ? -absDiff * 60 : -absDiff * 120;\r\n            const rotateY = diff * -25 + dragDelta * 0.03;\r\n            const scale = absDiff === 0 ? Math.max(0.88, 1 - Math.abs(dragDelta) * 0.0003) : 0.82;\r\n            const opacity = absDiff > 1 ? Math.max(0, 0.65 - Math.abs(dragDelta) * 0.002) : 0.65;\r\n            \r\n            slide.style.transform = 'perspective(' + (isMobile ? '600px' : '1200px') + ') translateX(' + translateX + 'px) translateZ(' + translateZ + 'px) rotateY(' + rotateY + 'deg) scale(' + scale + ')';\r\n            slide.style.opacity = opacity;\r\n        });\r\n    });\r\n    \r\n    const pointerUp = () => {\r\n        if (!dragging) return;\r\n        dragging = false;\r\n        \r\n        const slides = sliderContainer.querySelectorAll('.slide-wrapper');\r\n        slides.forEach((slide) => slide.classList.add('animate'));\r\n        \r\n        const threshold = isMobile ? 40 : 60;\r\n        \r\n        if (Math.abs(dragDelta) > threshold) {\r\n            if (dragDelta < -threshold) next(); else prev();\r\n        } else if (Math.abs(dragDelta) > 8) {\r\n            createSlides(0);\r\n        }\r\n        \r\n        dragDelta = 0;\r\n        setTimeout(() => { pointerMoved = false; }, 50);\r\n        startAutoPlay();\r\n    };\r\n    \r\n    sliderContainer.addEventListener('pointerup', pointerUp);\r\n    sliderContainer.addEventListener('pointerleave', pointerUp);\r\n    sliderContainer.addEventListener('pointercancel', pointerUp);\r\n    \r\n    prevBtn.addEventListener('click', (e) => { e.preventDefault(); if (!isAnimating) { prev(); resetAutoPlay(); } });\r\n    nextBtn.addEventListener('click', (e) => { e.preventDefault(); if (!isAnimating) { next(); resetAutoPlay(); } });\r\n    \r\n    document.addEventListener('keydown', (e) => {\r\n        const sliderRect = sliderContainer.getBoundingClientRect();\r\n        const isInView = sliderRect.top < window.innerHeight && sliderRect.bottom > 0;\r\n        if (isInView && !isAnimating) {\r\n            if (e.key === 'ArrowRight') { next(); resetAutoPlay(); }\r\n            if (e.key === 'ArrowLeft') { prev(); resetAutoPlay(); }\r\n        }\r\n    });\r\n    \r\n    function startAutoPlay() {\r\n        stopAutoPlay();\r\n        autoPlayInterval = setInterval(() => { if (!isAnimating && !dragging) next(); }, 5000);\r\n    }\r\n    \r\n    function stopAutoPlay() {\r\n        if (autoPlayInterval) { clearInterval(autoPlayInterval); autoPlayInterval = null; }\r\n    }\r\n    \r\n    function resetAutoPlay() { stopAutoPlay(); startAutoPlay(); }\r\n    \r\n    sliderContainer.addEventListener('mouseenter', stopAutoPlay);\r\n    sliderContainer.addEventListener('mouseleave', startAutoPlay);\r\n    \r\n    function init() {\r\n        isMobile = window.innerWidth <= 768;\r\n        createSlides(0);\r\n        createDots();\r\n        ambientGlow.style.background = 'radial-gradient(ellipse, ' + SLIDES[active].color + '30 0%, rgba(0, 191, 255, 0.08) 50%, transparent 70%)';\r\n        \r\n        let resizeTimeout;\r\n        window.addEventListener('resize', () => {\r\n            clearTimeout(resizeTimeout);\r\n            resizeTimeout = setTimeout(() => {\r\n                isMobile = window.innerWidth <= 768;\r\n                if (!dragging && !isAnimating) createSlides(0);\r\n            }, 200);\r\n        });\r\n        \r\n        startAutoPlay();\r\n    }\r\n    \r\n    init();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Services Combo Pack<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1261","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/pages\/1261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/comments?post=1261"}],"version-history":[{"count":4,"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/pages\/1261\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/pages\/1261\/revisions\/1297"}],"wp:attachment":[{"href":"https:\/\/boothitnow.gr\/en\/wp-json\/wp\/v2\/media?parent=1261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}