{"id":25,"date":"2023-10-14T12:56:44","date_gmt":"2023-10-14T12:56:44","guid":{"rendered":"https:\/\/trusthouseholidays.co\/home\/"},"modified":"2026-04-29T13:37:58","modified_gmt":"2026-04-29T13:37:58","slug":"home","status":"publish","type":"page","link":"https:\/\/trusthouseholidays.co\/arabic\/","title":{"rendered":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"},"content":{"rendered":"\n\n<html>\n<div class='example -i0'>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n    <div class='block'><\/div>\n<\/div>\n<\/html>\n\n\n\n\n\n\n\n\n<!-- Elfsight All-in-One Chat | whatsapp -->\n<script src=\"https:\/\/static.elfsight.com\/platform\/platform.js\" async><\/script>\n<div class=\"elfsight-app-b8b469b1-2b02-42cb-b2bb-1ba319d63b5a\" data-elfsight-app-lazy><\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n    <title>CinemaScreen Slider | Heritage Collection<\/title>\n    <style>\n        \/* RESET \u2014 ABSOLUTE ZERO LAYOUT SHIFT *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n            background: #030405;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            padding: 24px 20px;\n        }\n\n        \/* \n            CINEMA \/ TV SCREEN EFFECT \u2014 Deep Black Frame, subtle glow & scanlines\n            Rigid container, no rounding, but enriched background texture.\n        *\/\n        .cinema-stage {\n            width: 100%;\n            max-width: 1400px;\n            height: 70vh;\n            min-height: 520px;\n            position: relative;\n            overflow: hidden;\n            border-radius: 0px;\n            \/* TV \/ Cinema aesthetic *\/\n            background: #000000;\n            box-shadow: \n                0 0 0 2px rgba(80, 80, 90, 0.3),\n                0 0 0 6px #0a0a0c,\n                0 25px 40px -8px black,\n                inset 0 0 20px rgba(0, 0, 0, 0.6);\n            transform: translateZ(0);\n            isolation: isolate;\n        }\n\n        \/* \n            CRT \/ CINEMA SCREEN EFFECT: \n            - Subtle scanline pattern\n            - Vignette darkness around edges\n            - Flicker-free but cinematic\n        *\/\n        .cinema-stage::before {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: repeating-linear-gradient(\n                0deg,\n                rgba(0, 0, 0, 0.08) 0px,\n                rgba(0, 0, 0, 0.08) 2px,\n                transparent 2px,\n                transparent 6px\n            );\n            pointer-events: none;\n            z-index: 15;\n            mix-blend-mode: multiply;\n        }\n\n        \/* \n            Vignette \/ Cinema lens effect (darkens edges, draws focus)\n        *\/\n        .cinema-stage::after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.65) 95%);\n            pointer-events: none;\n            z-index: 14;\n        }\n\n        \/* slider track \u2014 dynamic, smooth *\/\n        .slider-cinema-track {\n            display: flex;\n            transition: transform 0.6s cubic-bezier(0.25, 0.92, 0.4, 1);\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            top: 0;\n            left: 0;\n            will-change: transform;\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* each slide \u2014 perfectly centered container *\/\n        .cinema-slide {\n            height: 100%;\n            flex-shrink: 0;\n            background: #000000;\n            position: relative;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-radius: 0px;\n            overflow: hidden;\n        }\n\n        \/* Image style: object-fit contain \u2014 perfectly centered, no cropping, cinema-style framing *\/\n        .cinema-img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n            display: block;\n            background: #000000;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            border-radius: 0px;\n            transition: none;\n            image-rendering: crisp-edges;\n            filter: brightness(1.02) contrast(1.02);\n        }\n\n        \/* loading shimmer \u2014 dark cinematic style *\/\n        .cinema-img.loading-shimmer {\n            background: linear-gradient(90deg, #0a0a0e 25%, #1c1c24 50%, #0a0a0e 75%);\n            background-size: 200% 100%;\n            animation: cinemaShimmer 1s ease-in-out infinite;\n        }\n\n        @keyframes cinemaShimmer {\n            0% { background-position: 200% 0; }\n            100% { background-position: -200% 0; }\n        }\n\n        \/* \n            INDICATORS \u2014 styled like subtle cinema status LEDs\n            Blends with screen but remains functional\n        *\/\n        .cinema-dock {\n            position: absolute;\n            bottom: 22px;\n            left: 0;\n            right: 0;\n            display: flex;\n            justify-content: center;\n            gap: 14px;\n            z-index: 40;\n            pointer-events: auto;\n            flex-wrap: wrap;\n            padding: 6px 18px;\n            background: rgba(0, 0, 0, 0.55);\n            backdrop-filter: blur(8px);\n            width: fit-content;\n            margin: 0 auto;\n            border-radius: 40px;\n            border: 0.5px solid rgba(220, 220, 255, 0.2);\n            box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);\n        }\n\n        .cinema-dot {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n            background-color: rgba(200, 205, 230, 0.55);\n            cursor: pointer;\n            transition: all 0.2s ease;\n            box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);\n            flex-shrink: 0;\n        }\n\n        .cinema-dot.active {\n            background-color: #f5f2e8;\n            transform: scale(1.3);\n            box-shadow: 0 0 8px rgba(255, 240, 180, 0.7);\n        }\n\n        .cinema-dot:focus-visible {\n            outline: 2px solid #ffd48a;\n            outline-offset: 2px;\n        }\n\n        \/* Optional: small \"film grain\" effect on container hover to enhance cinema feel *\/\n        @keyframes subtleGrain {\n            0% { background-position: 0% 0%; }\n            100% { background-position: 100% 100%; }\n        }\n\n        \/* responsive adjustments \u2014 container height changes, but cinema effect remains *\/\n        @media (max-width: 900px) {\n            .cinema-stage {\n                height: 62vh;\n                min-height: 460px;\n            }\n            .cinema-dock {\n                gap: 10px;\n                bottom: 14px;\n                padding: 5px 14px;\n            }\n        }\n\n        @media (max-width: 640px) {\n            .cinema-stage {\n                height: 55vh;\n                min-height: 400px;\n            }\n            .cinema-dot {\n                width: 8px;\n                height: 8px;\n            }\n            .cinema-dock {\n                gap: 8px;\n                bottom: 12px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .cinema-stage {\n                height: 48vh;\n                min-height: 350px;\n            }\n            .cinema-dock {\n                bottom: 10px;\n                padding: 4px 12px;\n            }\n        }\n\n        \/* Force absolute squared edges + extra cinematic contrast *\/\n        .cinema-stage,\n        .slider-cinema-track,\n        .cinema-slide,\n        .cinema-img {\n            border-radius: 0px !important;\n        }\n\n        \/* Subtle screen reflection effect (modern cinema) *\/\n        .cinema-stage .screen-reflection {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, rgba(255,255,245,0.03) 0%, rgba(0,0,0,0) 60%);\n            pointer-events: none;\n            z-index: 16;\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"cinema-stage\">\n    <div class=\"slider-cinema-track\" id=\"cinemaRailTrack\">\n        <!-- \n            TOTAL SLIDES: 26 (7 original heritage + 19 new images after removal of IMG_3489)\n            object-fit: contain ensures perfect centering, no cropping.\n            Cinema-screen background treated with scanlines + vignette.\n        -->\n        \n        <!-- ORIGINAL 7 SLIDES preserved -->\n        <div class=\"cinema-slide\">\n            <img fetchpriority=\"high\" class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/05\/f7c1ac92-6fb2-4e1f-8d4b-1f5416466efe.jpeg\" \n                 alt=\"Heritage Journey\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n        <div class=\"cinema-slide\">\n            <img class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests8-e1758503334359.jpeg\" \n                 alt=\"Cultural Encounters\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n        <div class=\"cinema-slide\">\n            <img class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/09\/Wedding-Festival-Trust-House-Holidays-optimized.webp\" \n                 alt=\"Wedding Festival Celebration\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n        <div class=\"cinema-slide\">\n            <img class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/04\/luxor-group-love.jpeg\" \n                 alt=\"Luxor Spectacle\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n        <div class=\"cinema-slide\">\n            <img class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/09\/boat-driving-river-nile-aswan-e1740853532473.jpeg\" \n                 alt=\"Nile River Serenity\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n        <div class=\"cinema-slide\">\n            <img class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/07\/theartofwel.jpg\" \n                 alt=\"Art of Wellbeing\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n        <div class=\"cinema-slide\">\n            <img class=\"cinema-img loading-shimmer\" \n                 src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/09\/Travel-Round-TheWorld-optimized.webp\" \n                 alt=\"Global Expedition\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"eager\">\n        <\/div>\n\n        <!-- NEW IMAGES (April 2026) \u2014 IMG_3489 removed (8th image excluded) 19 images total -->\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3490.jpeg\" alt=\"Travel Memory 3490\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3491.jpeg\" alt=\"Travel Memory 3491\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3492.jpeg\" alt=\"Travel Memory 3492\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3493.jpeg\" alt=\"Travel Memory 3493\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3494.jpeg\" alt=\"Travel Memory 3494\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3495.jpeg\" alt=\"Travel Memory 3495\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3496.jpeg\" alt=\"Travel Memory 3496\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3499.jpeg\" alt=\"Travel Memory 3499\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3500.jpeg\" alt=\"Travel Memory 3500\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3501.jpeg\" alt=\"Travel Memory 3501\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3502.jpeg\" alt=\"Travel Memory 3502\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3503.jpeg\" alt=\"Travel Memory 3503\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3504.jpeg\" alt=\"Travel Memory 3504\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3507.jpeg\" alt=\"Travel Memory 3507\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3505.jpeg\" alt=\"Travel Memory 3505\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3506.jpeg\" alt=\"Travel Memory 3506\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3509.jpeg\" alt=\"Travel Memory 3509\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3510.jpeg\" alt=\"Travel Memory 3510\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n        <div class=\"cinema-slide\"><img class=\"cinema-img loading-shimmer\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/IMG_3511.jpeg\" alt=\"Travel Memory 3511\" width=\"1400\" height=\"900\" decoding=\"async\" loading=\"lazy\"><\/div>\n    <\/div>\n    <div class=\"cinema-dock\" id=\"cinemaIndicatorDock\"><\/div>\n    <div class=\"screen-reflection\"><\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ CINEMATIC TV SCREEN SLIDER \u2014 zero layout shift, perfectly centered images\n        const trackEl = document.getElementById('cinemaRailTrack');\n        const slides = document.querySelectorAll('.cinema-slide');\n        const totalSlidesCount = slides.length;   \/\/ 26 slides\n        \n        let currentIdx = 0;\n        let autoIntervalId = null;\n        let touchStartX = 0;\n        let isSwiping = false;\n        let isVerticalScrollIntent = false;\n        let mouseDownActive = false;\n        let mouseStartX = 0;\n        const SWIPE_DISTANCE = 42;\n        \n        \/\/ set track width & slide widths (rigid fractional)\n        if (trackEl) {\n            trackEl.style.width = `${totalSlidesCount * 100}%`;\n        }\n        const slideWidthPercent = 100 \/ totalSlidesCount;\n        slides.forEach(slide => {\n            slide.style.width = `${slideWidthPercent}%`;\n        });\n        \n        \/\/ --- create indicator dots dynamically (based on exact slide count)---\n        const dockContainer = document.getElementById('cinemaIndicatorDock');\n        function buildIndicators() {\n            if (!dockContainer) return;\n            dockContainer.innerHTML = '';\n            for (let i = 0; i < totalSlidesCount; i++) {\n                const dotSpan = document.createElement('div');\n                dotSpan.classList.add('cinema-dot');\n                if (i === 0) dotSpan.classList.add('active');\n                dotSpan.setAttribute('data-slide', i);\n                dotSpan.setAttribute('aria-label', `Cinema slide ${i+1}`);\n                dockContainer.appendChild(dotSpan);\n            }\n        }\n        buildIndicators();\n        const allDots = document.querySelectorAll('.cinema-dot');\n        \n        \/\/ transform management (percentage based to avoid rounding errors)\n        function applyTranslate(index) {\n            if (!trackEl) return;\n            const movePercent = -(index * slideWidthPercent);\n            trackEl.style.transform = `translateX(${movePercent}%)`;\n        }\n        \n        function updateActiveDot(index) {\n            allDots.forEach((dot, i) => {\n                if (i === index) dot.classList.add('active');\n                else dot.classList.remove('active');\n            });\n        }\n        \n        function goToSlide(newIndex, skipReset = false) {\n            if (newIndex < 0) newIndex = 0;\n            if (newIndex >= totalSlidesCount) newIndex = totalSlidesCount - 1;\n            if (currentIdx === newIndex && trackEl && trackEl.style.transform) return;\n            currentIdx = newIndex;\n            applyTranslate(currentIdx);\n            updateActiveDot(currentIdx);\n            if (!skipReset) resetAutoTimer();\n        }\n        \n        function nextSlide() { goToSlide((currentIdx + 1) % totalSlidesCount); }\n        function prevSlide() { goToSlide((currentIdx - 1 + totalSlidesCount) % totalSlidesCount); }\n        function jumpToSlide(index) { if (index >= 0 && index < totalSlidesCount) goToSlide(index); }\n        \n        \/\/ --- Auto rotation (cinematic duration)---\n        function startAutoRotation() {\n            if (autoIntervalId) clearInterval(autoIntervalId);\n            autoIntervalId = setInterval(() => {\n                nextSlide();\n            }, 5500);\n        }\n        \n        function stopAutoRotation() {\n            if (autoIntervalId) {\n                clearInterval(autoIntervalId);\n                autoIntervalId = null;\n            }\n        }\n        \n        function resetAutoTimer() {\n            if (autoIntervalId) {\n                clearInterval(autoIntervalId);\n                startAutoRotation();\n            }\n        }\n        \n        \/\/ --- Image loading management \u2014 remove shimmer without dimensional shift ---\n        const allImages = document.querySelectorAll('.cinema-img');\n        function handleImageLoading() {\n            allImages.forEach(img => {\n                if (img.complete && img.naturalWidth > 0) {\n                    img.classList.remove('loading-shimmer');\n                    return;\n                }\n                const removeShimmerClass = () => img.classList.remove('loading-shimmer');\n                img.addEventListener('load', removeShimmerClass, { once: true });\n                img.addEventListener('error', removeShimmerClass, { once: true });\n                if (img.decode) img.decode().catch(()=>{}).then(removeShimmerClass);\n            });\n        }\n        \n        \/\/ --- touch & mouse events: responsive but no frame shift---\n        const frameContainer = document.querySelector('.cinema-stage');\n        \n        function initTouchControls() {\n            if (!frameContainer) return;\n            frameContainer.addEventListener('touchstart', (e) => {\n                touchStartX = e.touches[0].clientX;\n                isSwiping = true;\n                isVerticalScrollIntent = false;\n                stopAutoRotation();\n            }, { passive: true });\n            \n            frameContainer.addEventListener('touchmove', (e) => {\n                if (!isSwiping) return;\n                const deltaXmove = Math.abs(e.touches[0].clientX - touchStartX);\n                const deltaYmove = Math.abs(e.touches[0].clientY - (e.touches[0].clientY));\n                if (deltaYmove > deltaXmove && deltaYmove > 12) isVerticalScrollIntent = true;\n                if (deltaXmove > 8 && !isVerticalScrollIntent) e.preventDefault();\n            }, { passive: false });\n            \n            frameContainer.addEventListener('touchend', (e) => {\n                if (!isSwiping || isVerticalScrollIntent) {\n                    isSwiping = false;\n                    isVerticalScrollIntent = false;\n                    startAutoRotation();\n                    return;\n                }\n                const endTouchX = e.changedTouches[0].clientX;\n                const diffX = touchStartX - endTouchX;\n                if (Math.abs(diffX) > SWIPE_DISTANCE) {\n                    if (diffX > 0) nextSlide();\n                    else prevSlide();\n                }\n                isSwiping = false;\n                isVerticalScrollIntent = false;\n                startAutoRotation();\n            });\n        }\n        \n        function initMouseDrag() {\n            if (!frameContainer) return;\n            frameContainer.addEventListener('mousedown', (e) => {\n                e.preventDefault();\n                mouseStartX = e.clientX;\n                mouseDownActive = true;\n                stopAutoRotation();\n            });\n            window.addEventListener('mousemove', (e) => {\n                if (!mouseDownActive) return;\n                e.preventDefault();\n            });\n            window.addEventListener('mouseup', (e) => {\n                if (!mouseDownActive) {\n                    startAutoRotation();\n                    return;\n                }\n                const dragDelta = mouseStartX - e.clientX;\n                if (Math.abs(dragDelta) > SWIPE_DISTANCE) {\n                    if (dragDelta > 0) nextSlide();\n                    else prevSlide();\n                }\n                mouseDownActive = false;\n                startAutoRotation();\n            });\n        }\n        \n        function initKeyboardAndDotNav() {\n            document.addEventListener('keydown', (e) => {\n                if (e.key === 'ArrowLeft') {\n                    e.preventDefault();\n                    prevSlide();\n                } else if (e.key === 'ArrowRight') {\n                    e.preventDefault();\n                    nextSlide();\n                }\n            });\n            allDots.forEach(dot => {\n                dot.addEventListener('click', (e) => {\n                    e.stopPropagation();\n                    const idx = parseInt(dot.getAttribute('data-slide'), 10);\n                    if (!isNaN(idx)) jumpToSlide(idx);\n                });\n            });\n        }\n        \n        function initHoverCinemaPause() {\n            if (!frameContainer) return;\n            frameContainer.addEventListener('mouseenter', () => stopAutoRotation());\n            frameContainer.addEventListener('mouseleave', () => {\n                if (!isSwiping && !mouseDownActive) startAutoRotation();\n            });\n        }\n        \n        \/\/ resize Recalculate \u2014 keep images centered & no shift\n        function recalcResize() {\n            if (!trackEl) return;\n            const recalcWidth = 100 \/ totalSlidesCount;\n            slides.forEach(slide => { slide.style.width = `${recalcWidth}%`; });\n            applyTranslate(currentIdx);\n        }\n        \n        \/\/ extra enforcement: ensure no border radius & scanlines intact\n        function enforceCinemaSquare() {\n            const styleElement = document.createElement('style');\n            styleElement.textContent = `\n                .cinema-stage, .slider-cinema-track, .cinema-slide, .cinema-img {\n                    border-radius: 0px !important;\n                }\n                .cinema-img {\n                    object-fit: contain !important;\n                }\n            `;\n            document.head.appendChild(styleElement);\n        }\n        \n        \/\/ --- BOOTSTRAP: full cinematic slider ready ---\n        function initCinemaSlider() {\n            applyTranslate(0);\n            currentIdx = 0;\n            updateActiveDot(0);\n            handleImageLoading();\n            startAutoRotation();\n            initTouchControls();\n            initMouseDrag();\n            initKeyboardAndDotNav();\n            initHoverCinemaPause();\n            window.addEventListener('resize', recalcResize);\n            enforceCinemaSquare();\n            \n            \/\/ extra observer for any runtime rounding glitch\n            const roundingObserver = new MutationObserver(() => {\n                const frame = document.querySelector('.cinema-stage');\n                if (frame && getComputedStyle(frame).borderRadius !== '0px') frame.style.borderRadius = '0px';\n                document.querySelectorAll('.cinema-slide, .cinema-img').forEach(el => {\n                    if (getComputedStyle(el).borderRadius !== '0px') el.style.borderRadius = '0px';\n                });\n            });\n            roundingObserver.observe(document.body, { attributes: true, subtree: false, attributeFilter: ['class', 'style'] });\n        }\n        \n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', initCinemaSlider);\n        } else {\n            initCinemaSlider();\n        }\n    })();\n<\/script>\n<\/body>\n<\/html>\n\n\n<head>\n    <title>Trust House Holidays | Bespoke Tours &#038; Pilgrimage Travel<\/title>\n    <meta name=\"description\" content=\"Trust House Holidays: Expertly curated Egypt tours, romantic honeymoons, and sacred religious pilgrimage tours. Bespoke travel planning for your trusted journey.\">\n<\/head>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Trust House Holidays<\/title>\n    <style>\n        body {\n            font-family: 'Georgia', serif;\n            background-color: #fefefe;\n            color: #333;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            margin: 0;\n            padding: 20px;\n            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);\n        }\n\n        .container {\n            max-width: 700px;\n            text-align: center;\n            width: 100%;\n        }\n\n        .logo {\n            font-size: 2.5em;\n            font-weight: bold;\n            margin-bottom: 0.5em;\n            color: #555;\n            opacity: 0;\n            animation: fadeIn 2s ease-in-out forwards;\n        }\n\n        .tagline {\n            font-style: italic;\n            margin-bottom: 2em;\n            color: #666;\n            border-bottom: 1px solid #e0e0e0;\n            padding-bottom: 1em;\n            opacity: 0;\n            animation: fadeIn 2s ease-in-out 0.5s forwards;\n        }\n\n        #text-container {\n            font-size: 1.2em;\n            line-height: 1.8;\n            text-align: left;\n            min-height: 300px;\n        }\n\n        .text-line {\n            opacity: 0;\n            transform: translateY(20px);\n            animation: fadeInUp 1s ease-out forwards;\n            margin-bottom: 1em;\n        }\n\n        .closing-line {\n            font-style: italic;\n            color: #666;\n            margin-top: 1.5em;\n            text-align: center;\n        }\n\n        @keyframes fadeInUp {\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes fadeIn {\n            to { opacity: 1; }\n        }\n\n        \/* Mobile responsiveness *\/\n        @media (max-width: 768px) {\n            .container {\n                max-width: 90%;\n            }\n            \n            .logo {\n                font-size: 2em;\n            }\n            \n            #text-container {\n                font-size: 1em;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .logo {\n                font-size: 1.8em;\n            }\n            \n            #text-container {\n                font-size: 0.9em;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"logo\">Trust House Holidays<\/div>\n        <div class=\"tagline\">Your Journey, Curated with Care.<\/div>\n        <div id=\"text-container\"><\/div>\n    <\/div>\n\n    <script>\n        const textLines = [\n            `We go beyond the booking to craft the experience you envision. Choose from our <strong>expertly crafted package tours<\/strong> for exceptional value, or let us design a completely <strong>personalized bespoke journey<\/strong> tailored to your every desire.`,\n            `We handle every detail, from meticulously planned itineraries to seamless <strong>flight and hotel reservations<\/strong> that respect your budget. Our dedication extends to profound journeys of faith and wellness, facilitating <strong>religious pilgrimages<\/strong> and <strong>medical travel<\/strong> with utmost sensitivity.`,\n            `We provide the freedom to explore with our <strong>car rental<\/strong> services, and create powerful platforms for connection with our expertly managed <strong>MICE events<\/strong>.`\n        ];\n\n        const closingLine = `At Trust House Holidays, we don't just arrange trips; we build <em>trust<\/em> and bring your most important journeys to life.`;\n\n        const textContainer = document.getElementById('text-container');\n        let lineIndex = 0;\n\n        function revealLines() {\n            if (lineIndex < textLines.length) {\n                const lineElement = document.createElement('div');\n                lineElement.className = 'text-line';\n                lineElement.innerHTML = textLines[lineIndex];\n                textContainer.appendChild(lineElement);\n                \n                lineIndex++;\n                setTimeout(revealLines, 800);\n            } else {\n                \/\/ Add the closing line with special styling\n                const closingElement = document.createElement('div');\n                closingElement.className = 'text-line closing-line';\n                closingElement.innerHTML = closingLine;\n                textContainer.appendChild(closingElement);\n            }\n        }\n\n        \/\/ Start revealing lines after the title and tagline have appeared\n        setTimeout(() => {\n            revealLines();\n        }, 2000);\n    <\/script>\n<\/body>\n<\/html>\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Quick Booking Widget<\/title>\n    \n    <!-- Preload critical third-party connections -->\n    <link rel=\"preconnect\" href=\"https:\/\/tp.media\" crossorigin>\n    <link rel=\"dns-prefetch\" href=\"https:\/\/tp.media\">\n    \n    <style>\n        \/* Reset default margins and padding *\/\n        body, html {\n            margin: 0;\n            padding: 0;\n            font-family: Arial, sans-serif;\n        }\n        \n        \/* Your original CSS preserved - EXACTLY AS IT WAS *\/\n        .quick-booking-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            text-align: center;\n            z-index: 10;\n            min-height: 50px;\n            margin: 0;\n            padding: 0;\n            contain: layout style paint;\n        }\n        \n        .quick-booking-container {\n            display: inline-block;\n            position: relative;\n            vertical-align: top;\n            min-height: 50px;\n            margin: 0;\n            padding: 0;\n        }\n        \n        .booking-trigger {\n            background: #1C8080;\n            color: white;\n            border: none;\n            border-radius: 50px;\n            padding: 8px 20px;\n            font-size: 14px;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            box-shadow: 0 4px 12px rgba(28, 128, 128, 0.3);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n            position: relative;\n            z-index: 11;\n            margin-bottom: 10px;\n        }\n        \n        .booking-trigger:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 6px 16px rgba(28, 128, 128, 0.4);\n            background: #1C8080;\n        }\n        \n        .plus-icon {\n            font-size: 16px;\n            transition: transform 0.3s ease;\n        }\n        \n        .widget-wrapper {\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.15);\n            opacity: 0;\n            transition: \n                opacity 0.3s ease,\n                max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n            z-index: 10;\n            width: 100%;\n            max-height: 0;\n            overflow: hidden;\n            position: absolute;\n            left: 0;\n            will-change: max-height, opacity;\n            transform: translateZ(0);\n            backface-visibility: hidden;\n        }\n        \n        .widget-wrapper.visible {\n            opacity: 1;\n            position: relative;\n        }\n\n        .widget-wrapper.expanded {\n            max-height: 1000px;\n        }\n\n        .tp-widget, \n        .tp-widget * {\n            border: none !important;\n            box-shadow: none !important;\n        }\n\n        @media (max-width: 600px) {\n            .widget-wrapper {\n                width: 95vw;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Your original HTML preserved EXACTLY -->\n    <div class=\"quick-booking-wrapper\">\n        <div class=\"quick-booking-container\">\n            <button class=\"booking-trigger\">\n                Quick Booking\n                <span class=\"plus-icon\">+<\/span>\n            <\/button>\n            \n            <div class=\"widget-wrapper\">\n                <!-- YOUR ORIGINAL SCRIPT - THIS IS WHAT MAKES IT WORK -->\n                <script async=\"async\" src=\"https:\/\/tp.media\/content?currency=usd&amp;shmarker=505918.505918&amp;combine_promos=101_7873&amp;show_hotels=false&amp;powered_by=false&amp;locale=en&amp;searchUrl=bookonline.trusthouseholidays.co%2Fflights&amp;primary_override=%231C8080FF&amp;color_button=%231C8080ff&amp;color_icons=%231C8080FF&amp;dark=%23262626&amp;light=%23FFFFFF&amp;secondary=%23FFFFFF&amp;special=%00000&amp;color_focused=%2332a8dd&amp;border_radius=0&amp;plain=true&amp;promo_id=7879&amp;campaign_id=100\" charset=\"utf-8\"><\/script>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Your original JavaScript preserved EXACTLY\n        (function() {\n            const wrapper = document.querySelector('.widget-wrapper');\n            const plusIcon = document.querySelector('.plus-icon');\n            const button = document.querySelector('.booking-trigger');\n            let widgetOpen = false;\n            \n            function toggleWidget(e) {\n                e.stopPropagation();\n                \n                if (widgetOpen) {\n                    closeWidget();\n                } else {\n                    openWidget();\n                }\n            }\n            \n            function openWidget() {\n                widgetOpen = true;\n                plusIcon.textContent = '\u2212';\n                plusIcon.style.transform = 'rotate(45deg)';\n                wrapper.classList.add('visible', 'expanded');\n            }\n            \n            function closeWidget() {\n                widgetOpen = false;\n                plusIcon.textContent = '+';\n                plusIcon.style.transform = 'rotate(0deg)';\n                wrapper.classList.remove('visible', 'expanded');\n            }\n            \n            button.addEventListener('click', toggleWidget);\n            \n            document.addEventListener('click', function(e) {\n                if (widgetOpen && !wrapper.contains(e.target) && !button.contains(e.target)) {\n                    closeWidget();\n                }\n            });\n            \n            \/\/ Handle dynamic content loading\n            const observer = new MutationObserver(function(mutations) {\n                if (widgetOpen && wrapper.scrollHeight > 0) {\n                    \/\/ Ensure the wrapper can expand to show all content\n                    wrapper.style.maxHeight = wrapper.scrollHeight + 'px';\n                }\n            });\n            \n            observer.observe(wrapper, {\n                childList: true,\n                subtree: true,\n                attributes: true,\n                characterData: true\n            });\n            \n        })();\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<h2 style=\"color: rgb(0, 0, 0);\"><strong>Pick a Tour CArd<\/strong><\/h2>\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n    <title>Compact Tour Carousel<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n        \n        body {\n            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n            color: #2c3e50;\n            line-height: 1.5;\n            padding: 15px;\n            min-height: 100vh;\n            position: relative;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .container {\n            max-width: 1100px;\n            margin: 0 auto;\n            padding: 15px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        \n        .card-container {\n            position: relative;\n            width: 100%;\n            height: 280px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin: 8px 0 15px;\n            touch-action: pan-y;\n        }\n        \n        .card-wrapper {\n            position: absolute;\n            width: 145px;\n            height: 190px;\n            transition: all 0.8s ease;\n            cursor: pointer;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .card {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            transition: transform 0.6s ease;\n            border-radius: 8px;\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n            transform-style: preserve-3d;\n        }\n        \n        .card.flipped {\n            transform: rotateY(180deg);\n        }\n        \n        .card .face {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            border-radius: 8px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            overflow: hidden;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .card .front {\n            background: #f1f2f6; \/* Changed from purple gradient to neutral color *\/\n        }\n        \n        .card .back {\n            background: linear-gradient(to bottom, #f9f9f9, #e6e6e6);\n            transform: rotateY(180deg);\n            flex-direction: column;\n            padding: 12px;\n            text-align: center;\n            justify-content: space-between;\n        }\n        \n        .tour-title-back {\n            font-size: 1rem;\n            font-weight: bold;\n            color: #2c3e50;\n            margin-top: 6px;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .button {\n            background-color: rgba(255, 255, 255, 0.8);\n            border: none;\n            border-radius: 5px;\n            padding: 9px 14px;\n            cursor: pointer;\n            font-size: 0.75rem;\n            font-weight: bold;\n            color: #2c3e50;\n            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n            transition: all 0.3s ease;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 90%;\n            max-width: 450px;\n            white-space: nowrap;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .button:hover {\n            background-color: #4a6fa5;\n            color: white;\n            transform: translateY(-1px);\n        }\n        \n        .stars {\n            color: gold;\n            font-size: 1rem;\n            margin: 6px 0;\n            letter-spacing: 1px;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .card img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            border-radius: 8px;\n            \/* Prevent image dragging *\/\n            -webkit-user-drag: none;\n            -khtml-user-drag: none;\n            -moz-user-drag: none;\n            -o-user-drag: none;\n            user-drag: none;\n        }\n        \n        .center-card {\n            transform: scale(1.2);\n            z-index: 10;\n        }\n\n        .tabs-content-wrapper {\n            width: 55%;\n            background: rgba(255, 255, 255, 0.9);\n            border-radius: 8px;\n            padding: 14px;\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);\n            margin: 0 auto 18px;\n        }\n        \n        .tabs {\n            display: flex;\n            justify-content: center;\n            margin-bottom: 12px;\n            gap: 8px;\n        }\n        \n        .tab {\n            text-align: center;\n            padding: 5px 9px;\n            font-size: 0.8rem;\n            background: linear-gradient(45deg, #6a89cc, #4a69bd);\n            color: white;\n            cursor: pointer;\n            border-radius: 4px;\n            transition: all 0.3s ease;\n            flex: 1;\n            max-width: 85px;\n            height: 28px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            \/* Prevent text selection *\/\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .tab.active {\n            background: linear-gradient(45deg, #3c6382, #0a3d62);\n        }\n        \n        .content-container {\n            width: 100%;\n            max-height: 0;\n            overflow: hidden;\n            opacity: 0;\n            transition: all 0.4s ease;\n        }\n        \n        .content-container.active {\n            max-height: 280px;\n            opacity: 1;\n            margin-bottom: 0;\n        }\n        \n        .content-box {\n            width: 100%;\n            background: white;\n            border-radius: 6px;\n            overflow: hidden;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n            height: 220px;\n        }\n        \n        .content-box-inner {\n            padding: 12px;\n            height: 100%;\n            overflow-y: auto;\n            font-size: 0.9rem;\n            \/* Allow text selection only in content *\/\n            -webkit-user-select: text;\n            -moz-user-select: text;\n            -ms-user-select: text;\n            user-select: text;\n        }\n        \n        .content-box-inner::-webkit-scrollbar {\n            width: 6px;\n        }\n        \n        .content-box-inner::-webkit-scrollbar-track {\n            background: #f1f1f1;\n            border-radius: 3px;\n        }\n        \n        .content-box-inner::-webkit-scrollbar-thumb {\n            background: #c3cfe2;\n            border-radius: 3px;\n        }\n        \n        .content-box-inner p {\n            margin: 7px 0;\n        }\n        \n        .content-box-inner ul {\n            padding-left: 18px;\n            margin: 7px 0;\n        }\n        \n        .content-box-inner li {\n            margin-bottom: 5px;\n        }\n        \n        .content-box-inner h3 {\n            \/* Made day headers bigger *\/\n            font-size: 1.1rem !important;\n            font-weight: 700;\n            margin: 12px 0 6px;\n            padding-bottom: 5px;\n            border-bottom: 1px solid #eaecef;\n            color: #2c3e50;\n        }\n\n        \/* Flip button for mobile *\/\n        .flip-button {\n            position: absolute;\n            bottom: -30px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(255, 255, 255, 0.9);\n            border: none;\n            border-radius: 20px;\n            padding: 6px 12px;\n            cursor: pointer;\n            font-size: 0.7rem;\n            font-weight: bold;\n            color: #2c3e50;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n            transition: all 0.3s ease;\n            z-index: 20;\n            display: none;\n        }\n        \n        .flip-button:hover {\n            background: #4a6fa5;\n            color: white;\n        }\n\n        @media (max-width: 768px) {\n            .card-wrapper {\n                width: 120px;\n                height: 160px;\n            }\n            \n            .card-container {\n                height: 230px;\n            }\n            \n            .content-box {\n                height: 200px;\n            }\n            \n            .tab {\n                padding: 5px 7px;\n                max-width: 75px;\n                font-size: 0.75rem;\n                height: 26px;\n            }\n            \n            .button {\n                padding: 9px;\n                font-size: 0.65rem;\n            }\n            \n            .tabs-content-wrapper {\n                width: 75%;\n            }\n            \n            .tour-title-back {\n                font-size: 0.85rem;\n            }\n            \n            .stars {\n                font-size: 0.85rem;\n            }\n            \n            \/* Show flip button on mobile *\/\n            .flip-button {\n                display: block;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .card-wrapper {\n                width: 100px;\n                height: 135px;\n            }\n            \n            .card-container {\n                height: 190px;\n            }\n            \n            .content-box {\n                height: 180px;\n            }\n            \n            .tab {\n                padding: 4px 6px;\n                max-width: 70px;\n                font-size: 0.7rem;\n                height: 24px;\n            }\n            \n            .button {\n                padding: 7px;\n                font-size: 0.6rem;\n            }\n            \n            .tabs-content-wrapper {\n                width: 90%;\n                padding: 12px;\n            }\n            \n            .tour-title-back {\n                font-size: 0.75rem;\n            }\n            \n            .stars {\n                font-size: 0.75rem;\n            }\n            \n            \/* Show flip button on mobile *\/\n            .flip-button {\n                display: block;\n                font-size: 0.65rem;\n                padding: 5px 10px;\n                bottom: -25px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"card-container\" id=\"carousel\"><\/div>\n        <button class=\"flip-button\" id=\"flip-button\">Flip Card<\/button>\n        \n        <div class=\"tabs-content-wrapper\">\n            <div class=\"tabs\">\n                <div class=\"tab\" onclick=\"switchTab('overview')\">Overview<\/div>\n                <div class=\"tab\" onclick=\"switchTab('outline')\">Outline<\/div>\n            <\/div>\n            \n            <!-- Content containers start hidden -->\n            <div class=\"content-container\" id=\"overview-container\">\n                <div class=\"content-box\">\n                    <div class=\"content-box-inner\" id=\"overview\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"content-container\" id=\"outline-container\">\n                <div class=\"content-box\">\n                    <div class=\"content-box-inner\" id=\"outline\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const cardData = [\n            { \n                frontImage: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/dahabiya_yacht.webp\",\n                backText: \"Book Now\",\n                backTitle: \"DAHABIYA CRUISE\",\n                link: \"https:\/\/www.trusthouseholidays.co\/tours\",\n                overview: `\n                    <p>The Dahabiya is a traditional Egyptian sailing boat that offers a unique way to explore the Nile River. Enjoy the beautiful scenery, visit ancient temples, and experience the rich culture of Egypt.<\/p>\n                    <p>The trip includes guided tours, meals, and accommodations on the boat. Relax on the deck, take in the views, and immerse yourself in the history of this incredible region. Whether you're traveling solo, as a couple, or with family, the Dahabiya experience is sure to be memorable.<\/p>\n                    <p>For more information, please contact us or visit our website. We look forward to welcoming you on board!<\/p>\n                `,\n                outline: `\n                    <h3>Day 1 \u2014 Cairo<\/h3>\n                    <p>Arrive and transferred to your hotel and check in. It has been said of Egypt's exhilarating capital, \"He who has not seen Cairo has not seen the world. Cairo's very age mesmerizes; its monuments have stood here for more than 5,000 years, it is one of the great cities of antiquity.<\/p>\n                    \n                    <h3>Day 2 \u2014 Cairo<\/h3>\n                    <p>After breakfast you'll see two of the world's most iconic sights \u2013 the Pyramids of Giza and the Sphinx. Explore these structures which have stood tall for over 4500 years, and for an additional charge, you may be able to go inside the Great Pyramid of Khufu. Afterwards, your adventure continues to the Great Egyptian Museum, home to one of the world's great collections of ancient artefacts.<\/p>\n                    \n                    <h3>Day 3 \u2014 Cairo<\/h3>\n                    <p>After breakfast, you will see A captivating world that has withstood the tests of time unfolds beyond the medieval walls enclosing Old Cairo. The Citadel of Sultan Salah al-Din al-Ayyubi (Saladin) is one of the most iconic monuments in Islamic Cairo, and among the most impressive defensive fortresses.<\/p>\n                    <p>At the end of the trip, you will go to Khanel-Khalili, a famous bazaar and souq (or souk) in the historic center of Cairo, Egypt. Established as a center of trade in the Mamluk era, the bazaar district has since become one of Cairo's main attractions for tourists and Egyptians alike.<\/p>\n                    \n                    <h3>Day 4 \u2014 Nile Cruise<\/h3>\n                    <p>Transfer to Esna, embarkation on board of your Dahabiehs, elegant Authentic boats with two Latin sails. Our first lunch on board, while cruising to El-Hegz. Dinner and overnight on board.<\/p>\n                    \n                    <h3>Day 5 \u2014 EL KAAB - EDFU \u2013 FAWAZA<\/h3>\n                    <p>After Breakfast, sailing to El-Kaab to visit the tombs of the governors of the ancient city, the ruins of the temple where Hathor and Horus used to meet.<\/p>\n                    \n                    <h3>Day 6 \u2014 BASSAW - DJEBEL SILSILA - BESHIR<\/h3>\n                    <p>Breakfast while cruising to Bassaw, the old village of fishers on the Nile. Visit the temple of the Horemheb era and the ancient quarry where the temple stones were extracted. Dinner and overnight on board.<\/p>\n                    \n                    <h3>Day 7 \u2014 KOM OMBO \u2013 HERDIAB<\/h3>\n                    <p>Breakfast while sailing to Kom Ombo. Departure to visit Kom Ombo Temple dedicated to both Sobek the crocodile god and Haroeris the hawk.<\/p>\n                    \n                    <h3>Day 8 \u2014 HERDIAB - ASWAN \/ Cairo<\/h3>\n                    <p>Breakfast on Herdiab beach, where you can swim if you like. Visit of Philae temple, Centre for the cult of the goddess Isis.<\/p>\n                    \n                    <h3>Day 9 \u2014 Cairo<\/h3>\n                    <p>Trip Includes: Transfer to Cairo International airport for final departure. Meet and greet service by our representative at the airport. Assistance of our guest relations during your stay. All transfers by a private air-conditioned vehicle.<\/p>\n                `\n            },\n            { \n                frontImage: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/09\/trusthouse.jpg\",\n                backText: \"Book Now\",\n                backTitle: \"LUXOR ADVENTURE\",\n                link: \"https:\/\/www.trusthouseholidays.co\/tours\",\n                overview: `\n                    <p>Known as the world's greatest open-air museum, Luxor is home to some of the most significant archaeological sites in Egypt, including the Valley of the Kings, Karnak Temple, and Luxor Temple.<\/p>\n                    <p>Visitors can explore the tombs of ancient pharaohs, marvel at the intricate hieroglyphics, and learn about the fascinating history of ancient Egypt. Luxor offers a unique opportunity to step back in time and experience the grandeur of this ancient civilization.<\/p>\n                    <p>For more information about tours and activities in Luxor, please contact us or visit our website.<\/p>\n                `,\n                outline: `\n                    <h3>Day 1 \u2014 Cairo<\/h3>\n                    <p>Upon your arrival, our representative will meet and assist you at Cairo International Airport, and transfer to your hotel. At the hotel, the representative will assist with a smooth check-in and review your holiday itinerary to establish and confirm pick-up times for each tour.<\/p>\n                    <p>Overnight in Cairo.<\/p>\n                    \n                    <h3>Day 2 \u2014 Cairo<\/h3>\n                    <p>Breakfast at hotel. Proceed to visit the Pyramids, stand in awe at the magnificent Sphinx carved out of a single piece of stone. Then proceed to visit National Museum Of Egyptian Civilization in the heart of our nation's capital. This iconic institution offers a breathtaking journey through millennia of Egyptian heritage. From the era of pharaohs to the daily lives of ordinary Egyptians, our exhibits showcase the rich tapestry of culture, art, and architecture that has defined Egypt throughout history.<\/p>\n                    <p>Then visit Khan El Khalili Bazaars. Back to hotel.<\/p>\n                    <p>Overnight in Cairo.<\/p>\n                    \n                    <h3>Day 3 \u2014 Cairo\/Luxor<\/h3>\n                    <p>Transfer to Cairo Domestic Airport, fly to Luxor. Upon arrival, meet & transfer. Proceed to visit the Valley of the Kings, the beautifully terraced Temple of Queen Hatshepsut at Deir el Bahari, continue to Tombs of Khokha, one of the necropolises on the western bank of the Nile southward El-Assasif Necropolis in Luxor.<\/p>\n                    <p>Check-in at your hotel.<\/p>\n                    <p>Overnight in Luxor.<\/p>\n                    \n                    <h3>Day 4 \u2014 Luxor<\/h3>\n                    <p>Early morning tour to visit the vast Karnak Temple Complex, built by generations of Pharaohs over a 2000-year period. Continue to a lovely and tranquil place The Open-Air Museum which is filled with trees, stone footpaths, and some of the most beautiful monuments ever to come from the Temple of Amon.<\/p>\n                    <p>Lunch, then proceed to the large ancient Egyptian temple Luxor Temple.<\/p>\n                    <p>Overnight in Luxor.<\/p>\n                    \n                    <h3>Day 5 \u2014 Luxor\/Hurghada<\/h3>\n                    <p>Early morning, drive to Hurghada, check-in at your Hotel.<\/p>\n                    <p>Overnight in Hurghada.<\/p>\n                    \n                    <h3>Day 6 \u2014 Hurghada<\/h3>\n                    <p>Free day at leisure.<\/p>\n                    <p>Overnight in Hurghada.<\/p>\n                    \n                    <h3>Day 7 \u2014 Hurghada<\/h3>\n                    <p>Free day at leisure.<\/p>\n                    <p>Overnight in Hurghada.<\/p>\n                    \n                    <h3>Day 8 \u2014 Hurghada\/Cairo<\/h3>\n                    <p>Transfer to Hurghada airport, fly to Cairo. Upon arrival, meet & transfer to your Hotel.<\/p>\n                    <p>Overnight in Cairo.<\/p>\n                    \n                    <h3>Day 9 \u2014 Cairo<\/h3>\n                    <p>Transfer to Cairo International airport for final departure.<\/p>\n                    \n                    <h3>Trip Includes:<\/h3>\n                    <ul>\n                        <li>Meet and greet service by our representative at airport<\/li>\n                        <li>Assistance of our guest relations during your stay (24 Hours)<\/li>\n                        <li>All transfers by a private air-conditioned vehicle<\/li>\n                        <li>3 Nights accommodation in Cairo on Bed and Breakfast basis<\/li>\n                        <li>2 Nights accommodation in Luxor on Bed and Breakfast basis<\/li>\n                        <li>3 Nights accommodation in Hurghada on Half Board basis<\/li>\n                        <li>All sightseeing tours as mentioned (Private Tours)<\/li>\n                        <li>Private Egyptologist<\/li>\n                        <li>Entrance fees to all the sites<\/li>\n                        <li>Meals as above mentioned<\/li>\n                        <li>Bottle of Mineral Water during the excursions<\/li>\n                        <li>All service charges and taxes<\/li>\n                    <\/ul>\n                    \n                    <h3>Trip Excludes:<\/h3>\n                    <ul>\n                        <li>International airfare<\/li>\n                        <li>Domestic air tickets (Cairo\/Luxor - Hurghada\/Cairo)<\/li>\n                        <li>Entry Visa to Egypt<\/li>\n                        <li>Any optional tours<\/li>\n                        <li>Personal consumption<\/li>\n                        <li>Tipping\/gratitude<\/li>\n                    <\/ul>\n                `\n            },\n            { \n                frontImage: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/classical_egypt.jpeg\",\n                backText: \"Book Now\",\n                backTitle: \"CLASSICAL EGYPT\",\n                link: \"https:\/\/www.trusthouseholidays.co\/tours\",\n                overview: `\n                    <p>Capture the very best of Egypt on this eight-day adventure through the fascinating cities of Cairo, Aswan and Luxor. Get up close to the mighty pyramids of Giza, discover the fascinating tombs of ancient pharaohs and watch daily life flow by as you cruise in style along the River Nile.<\/p>\n                    <p>Sail from Luxor to Aswan, with plenty of stops along the way to visit ancient archaeological sites, with this three-night cruise down the Nile River. You'll visit Karnak, the West Bank of Luxor, the temples of Edfu and Kom Ombo, and Aswan.<\/p>\n                    <p>Let an experienced guide bring the captivating stories of this time gone by to life, as you immerse yourself in the history, grandeur and culture of ancient Egypt, without forgoing modern comforts.<\/p>\n                `,\n                outline: `\n                    <h3>Day 1 \u2014 Cairo<\/h3>\n                    <p>Arrive and transferred to your hotel and check in. It has been said of Egypt's exhilarating capital, \"He who has not seen Cairo has not seen the world. Cairo's very age mesmerizes; its monuments have stood here for more than 5,000 years, it is one of the great cities of antiquity.<\/p>\n                    <p>Overnight at your hotel.<\/p>\n                    \n                    <h3>Day 2 \u2014 Cairo<\/h3>\n                    <p>After breakfast you'll see two of the world's most iconic sights \u2013 the Pyramids of Giza and the Sphinx. Explore these structures which have stood tall for over 4500 years, and for an additional charge, you may be able to go inside the Great Pyramid of Khufu. Afterwards, your adventure continues to the Great Egyptian Museum, home to one of the world's great collections of ancient artefacts.<\/p>\n                    <p>Back to your hotel after a day rich in information.<\/p>\n                    \n                    <h3>Day 3 \u2014 Cairo<\/h3>\n                    <p>After breakfast, you will see A captivating world that has withstood the tests of time unfolds beyond the medieval walls enclosing Old Cairo. The Citadel of Sultan Salah al-Din al-Ayyubi (Saladin) is one of the most iconic monuments in Islamic Cairo, and among the most impressive defensive fortresses.<\/p>\n                    <p>At the end of trip you will go to Khanel-Khalili is a famous bazaar and souq in the historic center of Cairo, Egypt. Established as a center of trade in the Mamluk era and named for one of its several historic caravanserais, the bazaar district has since become one of Cairo's main attractions for tourists and Egyptians alike.<\/p>\n                    <p>Back to your hotel.<\/p>\n                    \n                    <h3>Day 4 \u2014 Aswan<\/h3>\n                    <p>Catch a morning flight to Aswan. Aswan Located at the first cataract of the Nile, a set of rapids coursing through a rocky riverbed, Aswan has long been a terminus town on the Nile. Today, the trading tradition continues in the city's lively market near the Nile's banks.<\/p>\n                    <p>Check into your Hotel, then travel to Philae Island and visit the beautiful Temple of Isis \u2013 the goddess of health, marriage and wisdom \u2013 rescued from the rising waters of the Nile and relocated here.<\/p>\n                    <p>Over night at your Aswan hotel to enjoy the magnificent Nile.<\/p>\n                    \n                    <h3>Day 5 \u2014 Nile Cruise<\/h3>\n                    <p>After breakfast, you may like to take a stroll around Aswan or join an optional tour of Abu Simbel \u2013 a temple complex that was dismantled and moved to make way for the Aswan High Dam. Board a Nile riverboat \u2013 your accommodation for the next three nights!<\/p>\n                    \n                    <h3>Day 6 \u2014 Nile Cruise<\/h3>\n                    <p>Enjoy a peaceful morning on board your riverboat, then set out in the afternoon along the river, relaxing in the sun on deck and taking in the desert hills forming a backdrop over the lush riverbanks. Arrive at Kom Ombo Temple, sitting spectacularly on the river's edge.<\/p>\n                    \n                    <h3>Day 7 \u2014 Nile Cruise<\/h3>\n                    <p>This morning you will visit Edfu is steeped in Egyptian legend. In this sacred place, ancient myth says that the falcon god Horus battled his uncle Seth after Seth brutally killed Horus's father Osiris. To honor Horus, the people of Edfu built a grand temple from 237 to 57 BC.<\/p>\n                    <p>Arrive Luxor, Luxor lies amid what is arguably one of the world's largest archaeological sites: Thebes, once a thriving imperial capital.<\/p>\n                    \n                    <h3>Day 8 \u2014 Luxor \/ Cairo<\/h3>\n                    <p>Disembark your riverboat and travel to the Valley of the Kings. Buried under the arid hills are over 60 tombs of pharaohs, many richly decorated with reliefs and paintings.<\/p>\n                    <p>Board a flight bound for Cairo, When you arrive, settle into your hotel.<\/p>\n                    \n                    <h3>Day 9 \u2014 Cairo<\/h3>\n                    <p>Your trip will come to an end today after breakfast we arranged a private airport transfer.<\/p>\n                `\n            }\n        ];\n\n        \/\/ Initialize variables\n        let currentCenterIndex = 0;\n        let isAnimating = false;\n        let currentActiveTab = null;\n        let startX = 0;\n        let endX = 0;\n        let isDragging = false;\n        let lastTap = 0;\n        let tapTimeout;\n        \n        \/\/ Create cards\n        function createCards() {\n            const carousel = document.getElementById('carousel');\n            carousel.innerHTML = '';\n            \n            cardData.forEach((card, index) => {\n                const cardWrapper = document.createElement('div');\n                cardWrapper.className = 'card-wrapper';\n                cardWrapper.dataset.index = index;\n                \n                cardWrapper.innerHTML = `\n                    <div class=\"card\">\n                        <div class=\"face front\">\n                            <img decoding=\"async\" src=\"${card.frontImage}\" alt=\"\">\n                        <\/div>\n                        <div class=\"face back\">\n                            <div class=\"tour-title-back\">${card.backTitle}<\/div>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                            <button class=\"button\" onclick=\"window.open('${card.link}', '_blank'); event.stopPropagation();\">${card.backText}<\/button>\n                        <\/div>\n                    <\/div>\n                `;\n                \n                \/\/ Click handler for cards - with double-tap support\n                cardWrapper.addEventListener('click', function(e) {\n                    if (e.target.classList.contains('button') || e.target.classList.contains('stars') || e.target.classList.contains('tour-title-back')) return;\n                    if (isAnimating || isDragging) return;\n                    \n                    const clickedIndex = parseInt(cardWrapper.dataset.index);\n                    \n                    \/\/ If clicked on center card, flip it\n                    if (clickedIndex === currentCenterIndex) {\n                        cardWrapper.querySelector('.card').classList.toggle('flipped');\n                    } \n                    \/\/ If clicked on different card, switch to it\n                    else {\n                        currentCenterIndex = clickedIndex;\n                        positionCards();\n                        showCardDetails(cardData[clickedIndex]);\n                    }\n                });\n                \n                \/\/ Add touch events for swipe to individual cards\n                cardWrapper.addEventListener('touchstart', handleTouchStart, false);\n                cardWrapper.addEventListener('touchmove', handleTouchMove, false);\n                cardWrapper.addEventListener('touchend', handleTouchEnd, false);\n                \n                \/\/ Add mouse events for desktop drag\/swipe\n                cardWrapper.addEventListener('mousedown', handleMouseDown, false);\n                cardWrapper.addEventListener('mousemove', handleMouseMove, false);\n                cardWrapper.addEventListener('mouseup', handleMouseUp, false);\n                cardWrapper.addEventListener('mouseleave', handleMouseUp, false);\n                \n                carousel.appendChild(cardWrapper);\n            });\n            \n            positionCards();\n            \/\/ Show center card details on load\n            showCardDetails(cardData[currentCenterIndex]);\n        }\n\n        \/\/ Touch event handlers for mobile\/tablet\n        function handleTouchStart(evt) {\n            startX = evt.touches[0].clientX;\n            isDragging = true;\n        }\n\n        function handleTouchMove(evt) {\n            if (!isDragging) return;\n            endX = evt.touches[0].clientX;\n        }\n\n        function handleTouchEnd() {\n            if (!isDragging) return;\n            \n            if (startX - endX > 50) {\n                \/\/ Swipe left - go to next card\n                navigateCards(1);\n            } else if (endX - startX > 50) {\n                \/\/ Swipe right - go to previous card\n                navigateCards(-1);\n            }\n            isDragging = false;\n        }\n\n        \/\/ Mouse event handlers for desktop\n        function handleMouseDown(evt) {\n            startX = evt.clientX;\n            isDragging = true;\n        }\n\n        function handleMouseMove(evt) {\n            if (!isDragging) return;\n            endX = evt.clientX;\n        }\n\n        function handleMouseUp() {\n            if (!isDragging) return;\n            \n            if (startX - endX > 50) {\n                \/\/ Swipe\/drag left - go to next card\n                navigateCards(1);\n            } else if (endX - startX > 50) {\n                \/\/ Swipe\/drag right - go to previous card\n                navigateCards(-1);\n            }\n            isDragging = false;\n        }\n\n        \/\/ Navigate between cards\n        function navigateCards(direction) {\n            if (isAnimating) return;\n            \n            currentCenterIndex = (currentCenterIndex + direction + cardData.length) % cardData.length;\n            positionCards();\n            showCardDetails(cardData[currentCenterIndex]);\n        }\n\n        \/\/ Hide all content containers\n        function hideAllContent() {\n            document.querySelectorAll('.content-container').forEach(container => {\n                container.classList.remove('active');\n            });\n            \n            document.querySelectorAll('.tab').forEach(tab => {\n                tab.classList.remove('active');\n            });\n            \n            currentActiveTab = null;\n        }\n\n        \/\/ Position cards in a circle\n        function positionCards() {\n            isAnimating = true;\n            const radius = Math.min(window.innerWidth, window.innerHeight) * 0.22;\n            const angleStep = (Math.PI * 2) \/ cardData.length;\n            const wrappers = document.querySelectorAll('.card-wrapper');\n            \n            wrappers.forEach((wrapper, index) => {\n                if (index === currentCenterIndex) {\n                    wrapper.classList.add('center-card');\n                    wrapper.style.transform = 'translate(0, 0) scale(1.2)';\n                    wrapper.style.zIndex = '10';\n                } else {\n                    wrapper.classList.remove('center-card');\n                    const angle = angleStep * (index - currentCenterIndex);\n                    const x = Math.sin(angle) * radius;\n                    const y = Math.cos(angle) * radius * 0.5;\n                    const distanceFromCenter = Math.sqrt(x*x + y*y);\n                    const scale = 1 - (distanceFromCenter \/ radius) * 0.5;\n                    wrapper.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;\n                    wrapper.style.zIndex = Math.floor(scale * 5);\n                }\n            });\n            \n            setTimeout(() => { isAnimating = false; }, 1000);\n        }\n\n        \/\/ Show card details\n        function showCardDetails(card) {\n            document.getElementById('overview').innerHTML = card.overview || '<p>No overview available<\/p>';\n            document.getElementById('outline').innerHTML = card.outline || '<p>No outline available<\/p>';\n            \n            \/\/ Don't automatically show any tab content\n            hideAllContent();\n        }\n\n        \/\/ Flip the center card\n        function flipCenterCard() {\n            const centerCard = document.querySelector('.center-card .card');\n            if (centerCard) {\n                centerCard.classList.toggle('flipped');\n            }\n        }\n\n        \/\/ Switch between tabs\n        function switchTab(contentId) {\n            \/\/ If clicking the same tab that's already active, close it\n            if (currentActiveTab === contentId) {\n                hideAllContent();\n                return;\n            }\n            \n            \/\/ Close all tabs first\n            document.querySelectorAll('.content-container').forEach(container => {\n                container.classList.remove('active');\n            });\n            \n            document.querySelectorAll('.tab').forEach(t => {\n                t.classList.remove('active');\n            });\n            \n            \/\/ Activate the selected tab\n            const tabs = document.querySelectorAll('.tab');\n            if (contentId === 'overview') tabs[0].classList.add('active');\n            else if (contentId === 'outline') tabs[1].classList.add('active');\n            \n            document.getElementById(`${contentId}-container`).classList.add('active');\n            currentActiveTab = contentId;\n        }\n\n        \/\/ Initialize\n        document.addEventListener('DOMContentLoaded', function() {\n            createCards();\n            \n            \/\/ Add flip button functionality for mobile\n            document.getElementById('flip-button').addEventListener('click', flipCenterCard);\n            \n            window.addEventListener('resize', function() {\n                positionCards();\n            });\n            \n            \/\/ Add event listener to close content when clicking outside\n            document.addEventListener('click', function(event) {\n                const tabsContentWrapper = document.querySelector('.tabs-content-wrapper');\n                const cardContainer = document.querySelector('.card-container');\n                const flipButton = document.getElementById('flip-button');\n                \n                \/\/ Check if click is outside both the tabs content and card container\n                if (!tabsContentWrapper.contains(event.target) && !cardContainer.contains(event.target) && event.target !== flipButton) {\n                    hideAllContent();\n                }\n            });\n\n            \/\/ Add keyboard navigation\n            document.addEventListener('keydown', function(e) {\n                if (e.key === 'ArrowLeft') navigateCards(-1);\n                else if (e.key === 'ArrowRight') navigateCards(1);\n                else if (e.key === 'f' || e.key === 'F') flipCenterCard();\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n<p>\n\n<style>\n  .quick-booking-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 20px 0;\n    perspective: 1000px; \/* For 3D rotation effect *\/\n  }\n  \n  .quick-booking-container {\n    position: relative;\n    text-align: center;\n  }\n  \n  .booking-trigger {\n    background: #1C8080;\n    color: white;\n    border: none;\n    border-radius: 50px;\n    padding: 8px 20px;\n    font-size: 14px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    box-shadow: 0 4px 12px rgba(28, 128, 128, 0.3);\n    transition: all 0.3s ease;\n    z-index: 10;\n    position: relative;\n  }\n  \n  .booking-trigger:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 6px 16px rgba(28, 128, 128, 0.4);\n  }\n  \n  .plus-icon {\n    font-size: 16px;\n    transition: transform 0.3s ease;\n    line-height: 1;\n  }\n  \n  .widget-wrapper {\n    position: absolute;\n    top: calc(100% + 10px);\n    left: 50%;\n    transform: translateX(-50%) rotateX(-90deg);\n    transform-origin: top center;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 15px 35px rgba(0,0,0,0.15);\n    opacity: 0;\n    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    z-index: 9;\n    width: 350px;\n    overflow: hidden;\n    padding: 0;\n    visibility: hidden;\n    backface-visibility: visible;\n  }\n  \n  .widget-wrapper.visible {\n    opacity: 1;\n    transform: translateX(-50%) rotateX(0deg);\n    visibility: visible;\n  }\n  \n  \/* Remove all borders from widget elements *\/\n  .tp-widget, \n  .tp-widget * {\n    border: none !important;\n    box-shadow: none !important;\n  }\n\n  \/* Responsive adjustment *\/\n  @media (max-width: 480px) {\n    .widget-wrapper {\n      width: 300px;\n    }\n  }\n<\/style>\n\n<script>\n  function toggleWidget() {\n    const wrapper = document.querySelector('.widget-wrapper');\n    const plusIcon = document.querySelector('.plus-icon');\n    \n    wrapper.classList.toggle('hidden');\n    wrapper.classList.toggle('visible');\n    \n    if (wrapper.classList.contains('visible')) {\n      plusIcon.textContent = '\u2212';\n      plusIcon.style.transform = 'rotate(180deg)';\n    } else {\n      plusIcon.textContent = '+';\n      plusIcon.style.transform = 'rotate(0deg)';\n    }\n  }\n<\/script><\/p>\n\n\n\n\n    <div class=\"quote-request-wrapper\">\r\n        <div id=\"quote-request-modal\" class=\"quote-request-modal\">\r\n            <div class=\"quote-request-form\">\r\n                <span class=\"close\">&times;<\/span>\r\n                <form id=\"quote-request\">\r\n                    <!-- Required Fields -->\r\n                    <input type=\"text\" name=\"name\" placeholder=\"Name\" required>\r\n                    <input type=\"email\" name=\"email_unique\" placeholder=\"Email\" required>\r\n                    <div class=\"phone-container\">\r\n                        <select name=\"country_code\">\r\n                            <option value=\"\">Country Code<\/option>\r\n                            <option value=\"+1\">+1 (USA)<\/option>\r\n                            <option value=\"+1\">+1 (Canada)<\/option>\r\n                            <option value=\"+44\">+44 (UK)<\/option>\r\n                            <option value=\"+20\">+20 (Egypt)<\/option>\r\n                            <option value=\"+91\">+91 (India)<\/option>\r\n                            <option value=\"+49\">+49 (Germany)<\/option>\r\n                            <option value=\"+33\">+33 (France)<\/option>\r\n                            <option value=\"+61\">+61 (Australia)<\/option>\r\n                            <option value=\"+81\">+81 (Japan)<\/option>\r\n                            <option value=\"+39\">+39 (Italy)<\/option>\r\n                            <option value=\"+34\">+34 (Spain)<\/option>\r\n                            <option value=\"+86\">+86 (China)<\/option>\r\n                            <option value=\"+7\">+7 (Russia)<\/option>\r\n                            <option value=\"+966\">+966 (Saudi Arabia)<\/option>\r\n                            <option value=\"+971\">+971 (UAE)<\/option>\r\n                            <option value=\"+212\">+212 (Morocco)<\/option>\r\n                            <option value=\"+254\">+254 (Kenya)<\/option>\r\n                            <option value=\"+256\">+256 (Uganda)<\/option>\r\n                            <option value=\"+27\">+27 (South Africa)<\/option>\r\n                            <option value=\"+63\">+63 (Philippines)<\/option>\r\n                            <option value=\"+90\">+90 (Turkey)<\/option>\r\n                            <option value=\"+30\">+30 (Greece)<\/option>\r\n                            <option value=\"+41\">+41 (Switzerland)<\/option>\r\n                            <option value=\"+31\">+31 (Netherlands)<\/option>\r\n                            <option value=\"+32\">+32 (Belgium)<\/option>\r\n                            <option value=\"+45\">+45 (Denmark)<\/option>\r\n                            <option value=\"+46\">+46 (Sweden)<\/option>\r\n                            <option value=\"+47\">+47 (Norway)<\/option>\r\n                            <option value=\"+1\">+1 (Jamaica)<\/option>\r\n                            <option value=\"+1\">+1 (Barbados)<\/option>\r\n                            <option value=\"+1\">+1 (Trinidad and Tobago)<\/option>\r\n                            <option value=\"+55\">+55 (Brazil)<\/option>\r\n                            <option value=\"+52\">+52 (Mexico)<\/option>\r\n                            <option value=\"+64\">+64 (New Zealand)<\/option>\r\n                            <option value=\"+43\">+43 (Austria)<\/option>\r\n                            <option value=\"+36\">+36 (Hungary)<\/option>\r\n                            <option value=\"+48\">+48 (Poland)<\/option>\r\n                            <option value=\"+213\">+213 (Algeria)<\/option>\r\n                            <option value=\"+249\">+249 (Sudan)<\/option>\r\n                            <option value=\"+374\">+374 (Armenia)<\/option>\r\n                            <option value=\"+251\">+251 (Ethiopia)<\/option>\r\n                        <\/select>\r\n                        <input type=\"text\" name=\"phone\" placeholder=\"Phone Number\" required>\r\n                    <\/div>\r\n                    <input type=\"text\" name=\"country\" placeholder=\"Country\" required>\r\n                    \r\n                    <!-- Optional Fields -->\r\n                    <input type=\"text\" name=\"destination\" placeholder=\"Destination\">\r\n                    \r\n                    <div class=\"date-container\">\r\n                        <input type=\"text\" id=\"departure-date\" name=\"departure_date\" placeholder=\"Departure Date\">\r\n                        <input type=\"text\" id=\"return-date\" name=\"return_date\" placeholder=\"Return Date\">\r\n                    <\/div>\r\n                    \r\n                    <div class=\"passengers-container\">\r\n                        <input type=\"number\" name=\"adults\" placeholder=\"Adults\" min=\"1\" max=\"20\" required>\r\n                        <input type=\"number\" name=\"children\" placeholder=\"Children\" min=\"0\" max=\"20\">\r\n                    <\/div>\r\n                    \r\n                    <select name=\"city\" class=\"city-select\">\r\n                        <option value=\"\">Select City in Egypt<\/option>\r\n                        <option value=\"Cairo\">Cairo<\/option>\r\n                        <option value=\"Alexandria\">Alexandria<\/option>\r\n                        <option value=\"Giza\">Giza<\/option>\r\n                        <option value=\"Sharm El Sheikh\">Sharm El Sheikh<\/option>\r\n                        <option value=\"Hurghada\">Hurghada<\/option>\r\n                        <option value=\"Luxor\">Luxor<\/option>\r\n                        <option value=\"Aswan\">Aswan<\/option>\r\n                        <option value=\"Mansoura\">Mansoura<\/option>\r\n                        <option value=\"Tanta\">Tanta<\/option>\r\n                        <option value=\"Suez\">Suez<\/option>\r\n                        <option value=\"Port Said\">Port Said<\/option>\r\n                        <option value=\"Ismailia\">Ismailia<\/option>\r\n                        <option value=\"Damanhur\">Damanhur<\/option>\r\n                        <option value=\"Beni Suef\">Beni Suef<\/option>\r\n                        <option value=\"Minya\">Minya<\/option>\r\n                        <option value=\"Fayoum\">Fayoum<\/option>\r\n                        <option value=\"Qena\">Qena<\/option>\r\n                        <option value=\"Sohag\">Sohag<\/option>\r\n                        <option value=\"Kafr El Sheikh\">Kafr El Sheikh<\/option>\r\n                        <option value=\"Dakahlia\">Dakahlia<\/option>\r\n                        <option value=\"Matrouh\">Matrouh<\/option>\r\n                        <option value=\"North Sinai\">North Sinai<\/option>\r\n                        <option value=\"South Sinai\">South Sinai<\/option>\r\n                    <\/select>\r\n                    <textarea name=\"message\" placeholder=\"Message\"><\/textarea>\r\n                    <div class=\"submit-button-container\">\r\n                        <button type=\"submit\" class=\"submit-button\">Request Quote<\/button>\r\n                    <\/div>\r\n                <\/form>\r\n                <div class=\"response-message\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"backdrop\"><\/div>\r\n        <div id=\"success-popup\" class=\"success-popup\">\r\n            <div class=\"success-content\">\r\n                <div class=\"checkmark\">\u2713<\/div>\r\n                <p>Sent<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"button-container\">\r\n            <button id=\"open-quote-request\" class=\"open-quote-button\">Request Quote<\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <style>\r\n        .quote-request-wrapper {\r\n            position: relative;\r\n            display: inline-block;\r\n            width: 100%;\r\n        }\r\n        \r\n        \/* Prevent body scroll when modal is open - more specific *\/\r\n        body.quote-modal-open {\r\n            overflow: hidden;\r\n            position: fixed;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n        \r\n        .quote-request-modal {\r\n            display: none;\r\n            position: fixed;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            background-color: #ffcc80;\r\n            border-radius: 15px;\r\n            padding: 20px;\r\n            z-index: 1000001;\r\n            max-height: 70vh;\r\n            overflow-y: auto;\r\n            width: 60%;\r\n            max-width: 450px;\r\n            border: 2px solid rgba(255, 255, 255, 0.5);\r\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n            box-sizing: border-box;\r\n            \/* Prevent horizontal overflow - only for this modal *\/\r\n            overflow-x: hidden;\r\n        }\r\n        \/* Hide scrollbar for all devices *\/\r\n        .quote-request-modal::-webkit-scrollbar {\r\n            display: none;\r\n        }\r\n        .quote-request-modal {\r\n            -ms-overflow-style: none;\r\n            scrollbar-width: none;\r\n        }\r\n        .quote-request-form {\r\n            position: relative;\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n            \/* Prevent horizontal overflow - only for this form *\/\r\n            overflow-x: hidden;\r\n        }\r\n        .quote-request-form form {\r\n            width: 100%;\r\n            max-width: 100%;\r\n            box-sizing: border-box;\r\n            \/* Prevent horizontal overflow - only for this form *\/\r\n            overflow-x: hidden;\r\n        }\r\n        .close {\r\n            position: absolute;\r\n            top: -12px;\r\n            right: -12px;\r\n            width: 24px;\r\n            height: 24px;\r\n            background: white;\r\n            border-radius: 4px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n            font-weight: bold;\r\n            color: #333;\r\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n            z-index: 1000002;\r\n            border: 1px solid rgba(0, 0, 0, 0.1);\r\n            line-height: 1;\r\n            padding: 0;\r\n            margin: 0;\r\n            transform: translate(50%, -50%);\r\n        }\r\n        .close:hover {\r\n            background: #f5f5f5;\r\n        }\r\n        .backdrop {\r\n            display: none;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0, 0, 0, 0.5);\r\n            z-index: 1000000;\r\n        }\r\n        .submit-button-container {\r\n            display: flex;\r\n            justify-content: center;\r\n            margin-top: 10px;\r\n        }\r\n        .submit-button {\r\n            background-color: #ffeb3b;\r\n            border: none;\r\n            border-radius: 5px;\r\n            padding: 8px 20px;\r\n            cursor: pointer;\r\n            font-size: 14px;\r\n            width: auto;\r\n            font-weight: bold;\r\n        }\r\n        .submit-button:hover {\r\n            background-color: #ffeb3b;\r\n        }\r\n        .open-quote-button {\r\n            background-color: #ffeb3b;\r\n            border: none;\r\n            border-radius: 5px;\r\n            padding: 10px 20px;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n            min-width: 150px;\r\n            text-align: center;\r\n            font-weight: bold;\r\n        }\r\n        .open-quote-button:hover {\r\n            background-color: #ffeb3b;\r\n        }\r\n        .button-container {\r\n            display: flex;\r\n            justify-content: center;\r\n            width: 100%;\r\n            margin: 20px 0;\r\n        }\r\n        \/* Only target inputs within our form *\/\r\n        .quote-request-form input, \r\n        .quote-request-form select, \r\n        .quote-request-form textarea {\r\n            width: 100%;\r\n            margin: 8px 0;\r\n            padding: 8px;\r\n            border-radius: 5px;\r\n            border: 1px solid #ccc;\r\n            font-size: 14px;\r\n            box-sizing: border-box;\r\n            max-width: 100%;\r\n            \/* Prevent horizontal overflow - only for our form *\/\r\n            overflow-x: hidden;\r\n        }\r\n        .quote-request-form textarea {\r\n            resize: vertical;\r\n            min-height: 80px;\r\n            max-height: 150px;\r\n        }\r\n        \/* Fix for Egypt city dropdown - force downward opening *\/\r\n        .city-select {\r\n            position: static !important;\r\n            transform: none !important;\r\n        }\r\n        \/* Date container - two dates side by side *\/\r\n        .date-container {\r\n            display: flex;\r\n            gap: 10px;\r\n            margin: 8px 0;\r\n        }\r\n        .date-container input {\r\n            width: 50%;\r\n            margin: 0;\r\n            flex: 1;\r\n            min-width: 0; \/* Prevent flex item overflow - only for our form *\/\r\n        }\r\n        \/* Passengers container - adults and children side by side *\/\r\n        .passengers-container {\r\n            display: flex;\r\n            gap: 10px;\r\n            margin: 8px 0;\r\n        }\r\n        .passengers-container input {\r\n            width: 50%;\r\n            margin: 0;\r\n            flex: 1;\r\n            min-width: 0; \/* Prevent flex item overflow - only for our form *\/\r\n        }\r\n        \/* Custom dropdown styles - only for our form *\/\r\n        .quote-request-form select {\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\r\n            background-repeat: no-repeat;\r\n            background-position: right 8px center;\r\n            background-size: 16px;\r\n            padding-right: 30px;\r\n        }\r\n        \/* Custom scrollbar for dropdowns - only for our form *\/\r\n        .quote-request-form select::-webkit-scrollbar {\r\n            width: 4px;\r\n        }\r\n        .quote-request-form select::-webkit-scrollbar-track {\r\n            background: #f1f1f1;\r\n            border-radius: 2px;\r\n        }\r\n        .quote-request-form select::-webkit-scrollbar-thumb {\r\n            background: #c1c1c1;\r\n            border-radius: 2px;\r\n        }\r\n        .quote-request-form select::-webkit-scrollbar-thumb:hover {\r\n            background: #a8a8a8;\r\n        }\r\n        \/* For Firefox - only for our form *\/\r\n        .quote-request-form select {\r\n            scrollbar-width: thin;\r\n            scrollbar-color: #c1c1c1 #f1f1f1;\r\n        }\r\n        .phone-container {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n        .phone-container select {\r\n            width: 40%;\r\n            min-width: 120px;\r\n        }\r\n        .phone-container input {\r\n            width: 60%;\r\n            flex: 1;\r\n            min-width: 0; \/* Prevent flex item overflow - only for our form *\/\r\n        }\r\n        \/* Success Popup Styles *\/\r\n        .success-popup {\r\n            display: none;\r\n            position: fixed;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            background: rgba(0, 0, 0, 0.8);\r\n            border-radius: 10px;\r\n            padding: 20px 30px;\r\n            z-index: 1000003;\r\n            color: white;\r\n            text-align: center;\r\n            backdrop-filter: blur(5px);\r\n        }\r\n        .success-content {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n        .checkmark {\r\n            font-size: 32px;\r\n            color: #4CAF50;\r\n            font-weight: bold;\r\n        }\r\n        .success-popup p {\r\n            margin: 0;\r\n            font-size: 16px;\r\n            font-weight: 300;\r\n        }\r\n        @media (max-width: 600px) {\r\n            .quote-request-modal {\r\n                width: 95%;\r\n                max-height: 65vh; \/* Reduced height *\/\r\n                padding: 12px;\r\n                left: 50%;\r\n                right: auto;\r\n                margin: 0;\r\n                top: 50%;\r\n                transform: translate(-50%, -50%);\r\n                max-width: 320px;\r\n                \/* Prevent any overflow - only for our modal *\/\r\n                overflow-x: hidden;\r\n                overflow-y: auto;\r\n                z-index: 1000001; \/* Higher z-index for mobile *\/\r\n            }\r\n            \r\n            .quote-request-form {\r\n                width: 100%;\r\n                overflow-x: hidden;\r\n            }\r\n            \r\n            .quote-request-form form {\r\n                width: 100%;\r\n                padding: 0;\r\n                margin: 0;\r\n                overflow-x: hidden;\r\n            }\r\n            \r\n            .backdrop {\r\n                width: 100vw;\r\n                height: 100vh;\r\n                left: 0;\r\n                top: 0;\r\n                z-index: 1000000; \/* Higher z-index for mobile *\/\r\n            }\r\n            \r\n            .quote-request-modal {\r\n                z-index: 1000001; \/* Higher z-index for mobile *\/\r\n            }\r\n            \r\n            .close {\r\n                z-index: 1000002; \/* Higher z-index for mobile *\/\r\n            }\r\n            \r\n            .phone-container {\r\n                flex-direction: column;\r\n                gap: 8px;\r\n            }\r\n            .phone-container select {\r\n                width: 100%;\r\n                min-width: auto;\r\n            }\r\n            .phone-container input {\r\n                width: 100%;\r\n            }\r\n            .date-container {\r\n                flex-direction: column;\r\n                gap: 8px;\r\n            }\r\n            .date-container input {\r\n                width: 100%;\r\n            }\r\n            .passengers-container {\r\n                flex-direction: column;\r\n                gap: 8px;\r\n            }\r\n            .passengers-container input {\r\n                width: 100%;\r\n            }\r\n            .close {\r\n                top: -8px;\r\n                right: -8px;\r\n                width: 20px;\r\n                height: 20px;\r\n                font-size: 14px;\r\n                transform: translate(50%, -50%);\r\n            }\r\n            .success-popup {\r\n                padding: 15px 25px;\r\n                z-index: 1000003; \/* Higher z-index for mobile *\/\r\n            }\r\n            .checkmark {\r\n                font-size: 28px;\r\n            }\r\n            .success-popup p {\r\n                font-size: 14px;\r\n            }\r\n            html {\r\n                touch-action: manipulation;\r\n            }\r\n            \/* Only target our form elements on mobile *\/\r\n            .quote-request-form input, \r\n            .quote-request-form select, \r\n            .quote-request-form textarea {\r\n                font-size: 16px;\r\n                padding: 10px;\r\n                margin: 4px 0; \/* Reduced margin *\/\r\n                max-width: 100%;\r\n                box-sizing: border-box;\r\n            }\r\n            \r\n            .quote-request-form textarea {\r\n                min-height: 60px; \/* Reduced height *\/\r\n                max-height: 100px;\r\n            }\r\n            \r\n            \/* Prevent horizontal scroll on mobile - specific to our modal *\/\r\n            body.quote-modal-open {\r\n                position: fixed;\r\n                overflow: hidden;\r\n                width: 100%;\r\n            }\r\n            \r\n            \/* Force no horizontal overflow - only for our form elements *\/\r\n            .quote-request-modal * {\r\n                max-width: 100%;\r\n                box-sizing: border-box;\r\n            }\r\n            \r\n            \/* Specific overflow prevention for form elements - only our form *\/\r\n            .quote-request-modal .quote-request-form * {\r\n                overflow-x: hidden;\r\n                max-width: 100%;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 400px) {\r\n            .quote-request-modal {\r\n                width: 98%;\r\n                max-width: 300px;\r\n                padding: 10px;\r\n                max-height: 60vh; \/* Further reduced height *\/\r\n            }\r\n            \r\n            .quote-request-form input, \r\n            .quote-request-form select, \r\n            .quote-request-form textarea {\r\n                padding: 8px;\r\n                font-size: 14px;\r\n                margin: 3px 0;\r\n            }\r\n            \r\n            .quote-request-form .submit-button {\r\n                padding: 8px 16px;\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .quote-request-form textarea {\r\n                min-height: 50px;\r\n                max-height: 80px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 350px) {\r\n            .quote-request-modal {\r\n                max-width: 280px;\r\n                padding: 8px;\r\n            }\r\n            \r\n            .quote-request-form input, \r\n            .quote-request-form select, \r\n            .quote-request-form textarea {\r\n                padding: 6px;\r\n                font-size: 13px;\r\n                margin: 2px 0;\r\n            }\r\n        }\r\n    <\/style>\r\n    <script>\r\n        jQuery(document).ready(function($) {\r\n            var scrollPosition = 0;\r\n            \r\n            \/\/ Prevent zooming on mobile when fields are focused - only our form\r\n            $('.quote-request-form input, .quote-request-form select, .quote-request-form textarea').on('focus', function() {\r\n                $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');\r\n            }).on('blur', function() {\r\n                $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0');\r\n            });\r\n\r\n            \/\/ Initialize datepickers - only our form\r\n            $(\"#departure-date\").datepicker({\r\n                dateFormat: 'mm\/dd\/yy',\r\n                minDate: 0,\r\n                onSelect: function(selectedDate) {\r\n                    $(\"#return-date\").datepicker(\"option\", \"minDate\", selectedDate);\r\n                }\r\n            });\r\n\r\n            $(\"#return-date\").datepicker({\r\n                dateFormat: 'mm\/dd\/yy',\r\n                minDate: 0\r\n            });\r\n\r\n            $(\"#open-quote-request\").on(\"click\", function(e) {\r\n                e.preventDefault();\r\n                \/\/ Save current scroll position\r\n                scrollPosition = window.pageYOffset || document.documentElement.scrollTop;\r\n                \r\n                $(\".quote-request-modal, .backdrop\").fadeIn(300);\r\n                \/\/ Prevent body scroll when modal is open - use specific class\r\n                $('body').addClass('quote-modal-open');\r\n                \r\n                \/\/ Prevent any automatic scrolling\r\n                $('html, body').stop();\r\n            });\r\n            \r\n            $(\".close, .backdrop\").on(\"click\", function(e) {\r\n                e.preventDefault();\r\n                $(\".quote-request-modal, .backdrop\").fadeOut(300);\r\n                \/\/ Restore body scroll when modal is closed - use specific class\r\n                $('body').removeClass('quote-modal-open');\r\n                \r\n                \/\/ Restore scroll position after a short delay\r\n                setTimeout(function() {\r\n                    window.scrollTo(0, scrollPosition);\r\n                }, 50);\r\n            });\r\n            \r\n            \/\/ Fix for Egypt city dropdown - ensure it opens downward\r\n            $('.city-select').on('click focus', function() {\r\n                $(this).css({\r\n                    'position': 'static',\r\n                    'transform': 'none',\r\n                    'top': 'auto',\r\n                    'left': 'auto'\r\n                });\r\n            });\r\n            \r\n            $(\"#quote-request\").on(\"submit\", function(e) {\r\n                e.preventDefault();\r\n                var formData = $(this).serialize();\r\n                \r\n                $.ajax({\r\n                    type: \"POST\",\r\n                    url: ajax_object.ajax_url,\r\n                    data: formData + '&action=quote_request',\r\n                    success: function(response) {\r\n                        if (response.success) {\r\n                            \/\/ Show success popup\r\n                            $(\"#success-popup\").fadeIn();\r\n                            $(\"#quote-request\")[0].reset();\r\n                            $(\".quote-request-modal, .backdrop\").fadeOut();\r\n                            \/\/ Restore body scroll when modal is closed\r\n                            $('body').removeClass('quote-modal-open');\r\n                            \r\n                            \/\/ Restore scroll position\r\n                            setTimeout(function() {\r\n                                window.scrollTo(0, scrollPosition);\r\n                            }, 50);\r\n                            \r\n                            \/\/ Hide popup after 2 seconds\r\n                            setTimeout(function() {\r\n                                $(\"#success-popup\").fadeOut();\r\n                            }, 2000);\r\n                        } else {\r\n                            $(\".response-message\").text(\"There was an error sending your message.\").css(\"color\", \"red\");\r\n                        }\r\n                    },\r\n                    error: function() {\r\n                        $(\".response-message\").text(\"There was an error sending your message.\").css(\"color\", \"red\");\r\n                    }\r\n                });\r\n            });\r\n            \r\n            \/\/ Additional fix for dropdown direction\r\n            $(document).on('click', 'select', function() {\r\n                var $select = $(this);\r\n                setTimeout(function() {\r\n                    $select.css('transform', 'none');\r\n                }, 10);\r\n            });\r\n\r\n            \/\/ Close modal on escape key\r\n            $(document).on('keydown', function(e) {\r\n                if (e.key === 'Escape') {\r\n                    $(\".quote-request-modal, .backdrop\").fadeOut();\r\n                    $('body').removeClass('quote-modal-open');\r\n                    \/\/ Restore scroll position\r\n                    setTimeout(function() {\r\n                        window.scrollTo(0, scrollPosition);\r\n                    }, 50);\r\n                }\r\n            });\r\n            \r\n            \/\/ Prevent form submission on enter key in inputs - only our form\r\n            $('#quote-request input').on('keypress', function(e) {\r\n                if (e.which === 13) {\r\n                    e.preventDefault();\r\n                }\r\n            });\r\n            \r\n            \/\/ Ensure modal stays in place during animations\r\n            $('.quote-request-modal').on('click', function(e) {\r\n                e.stopPropagation();\r\n            });\r\n        });\r\n    <\/script>\r\n    \n\n\n\n\n<h3><strong style=\"color: rgb(0, 0, 0);\">Reviews<\/strong><\/h3>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\n    <title>Trust House Holidays \u00b7 Guest Voices<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: #f5f5f5;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-start;\n            padding: 20px;\n            position: relative;\n        }\n        \n        \/* Very thin scrollbar for body *\/\n        body::-webkit-scrollbar {\n            width: 4px;\n        }\n        body::-webkit-scrollbar-track {\n            background: #e0e0e0;\n            border-radius: 10px;\n        }\n        body::-webkit-scrollbar-thumb {\n            background: #e67e22;\n            border-radius: 10px;\n        }\n        \n        .reviews-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            position: relative;\n            background: transparent;\n            z-index: 5;\n            overflow-x: hidden;\n        }\n        \n        \/* .reviews-title removed as requested *\/\n        \n        .slider-wrapper {\n            position: relative;\n            width: 100%;\n            height: 320px;\n            display: flex;\n            align-items: center;\n            touch-action: pan-y pinch-zoom;\n            overflow: hidden;\n        }\n        \n        .slider-track {\n            display: flex;\n            position: absolute;\n            width: 100%;\n            height: auto;\n            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            align-items: center;\n            will-change: transform;\n        }\n        \n        .review-card {\n            flex: 0 0 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100%;\n            user-select: none;\n        }\n        \n        .card-content {\n            background: white;\n            border-radius: 28px;\n            padding: 20px;\n            width: 560px;\n            max-width: 85vw;\n            height: 280px;\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n            border: 1px solid #eee;\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            margin: 0 auto;\n            transition: transform 0.2s ease;\n        }\n        \n        .card-content:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n        }\n        \n        .review-text-container {\n            flex: 1;\n            overflow: hidden;\n            position: relative;\n            margin-bottom: 8px;\n        }\n        \n        .review-text {\n            color: #555;\n            line-height: 1.6;\n            font-size: 0.88rem;\n            text-align: left;\n            font-weight: 300;\n            font-style: italic;\n            height: 100%;\n            overflow-y: auto;\n            padding-right: 8px;\n            padding-bottom: 20px;\n            scrollbar-width: thin;\n        }\n        \n        \/* Very thin scrollbar inside review text *\/\n        .review-text::-webkit-scrollbar {\n            width: 3px;\n            background: transparent;\n        }\n        .review-text::-webkit-scrollbar-track {\n            background: #f0f0f0;\n            border-radius: 10px;\n        }\n        .review-text::-webkit-scrollbar-thumb {\n            background: #e67e22;\n            border-radius: 10px;\n        }\n        \n        .scroll-indicator {\n            position: absolute;\n            bottom: 2px;\n            right: 12px;\n            color: #e67e22;\n            font-size: 1.2rem;\n            z-index: 5;\n            opacity: 0.7;\n            animation: bounce 2s infinite;\n            pointer-events: none;\n        }\n        \n        @keyframes bounce {\n            0%, 100% { transform: translateY(0); }\n            50% { transform: translateY(-3px); }\n        }\n        \n        .review-signature {\n            padding-top: 12px;\n            border-top: 1px solid #f0f0f0;\n            text-align: right;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            min-height: 55px;\n            margin-top: auto;\n        }\n        \n        .reviewer-info {\n            flex: 1;\n            text-align: right;\n        }\n        \n        .reviewer-image {\n            width: 44px;\n            height: 44px;\n            border-radius: 50%;\n            background: #f0f0f0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #999;\n            font-size: 0.7rem;\n            border: 2px solid #e67e22;\n            margin-right: 12px;\n            flex-shrink: 0;\n            overflow: hidden;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n        .reviewer-image:hover {\n            transform: scale(1.02);\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n        }\n        .reviewer-image img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n        \n        .reviewer-name {\n            font-size: 0.85rem;\n            color: #333;\n            font-weight: 700;\n            font-style: italic;\n            letter-spacing: 0.3px;\n            margin-bottom: 4px;\n            display: inline-block;\n        }\n        \n        .stars-container {\n            display: flex;\n            gap: 2px;\n            justify-content: flex-end;\n        }\n        \n        .star {\n            color: #ff9500;\n            font-size: 0.95rem;\n        }\n        \n        .image-full-modal {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.96);\n            z-index: 20000;\n            justify-content: center;\n            align-items: center;\n            backdrop-filter: blur(5px);\n        }\n        .image-full-modal.active {\n            display: flex;\n        }\n        .full-modal-content {\n            max-width: 92vw;\n            max-height: 92vh;\n            position: relative;\n            text-align: center;\n        }\n        .full-modal-content img {\n            max-width: 100%;\n            max-height: 85vh;\n            width: auto;\n            height: auto;\n            object-fit: contain;\n            border-radius: 24px;\n            box-shadow: 0 10px 35px rgba(0,0,0,0.5);\n            border: 2px solid rgba(255,255,255,0.2);\n        }\n        .full-modal-close {\n            position: absolute;\n            top: -50px;\n            right: -20px;\n            background: rgba(0,0,0,0.6);\n            color: white;\n            font-size: 2.2rem;\n            font-weight: bold;\n            width: 48px;\n            height: 48px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.2s;\n            border: 2px solid rgba(255,255,255,0.4);\n            backdrop-filter: blur(4px);\n        }\n        .full-modal-close:hover {\n            background: #e67e22;\n            transform: scale(1.05);\n            border-color: white;\n        }\n        .full-modal-caption {\n            margin-top: 16px;\n            color: #f0f0f0;\n            font-size: 1rem;\n            font-style: italic;\n            background: rgba(0,0,0,0.5);\n            display: inline-block;\n            padding: 6px 16px;\n            border-radius: 40px;\n        }\n        \n        \/* Navigation dots *\/\n        .slider-dots {\n            display: flex;\n            justify-content: center;\n            gap: 10px;\n            margin-top: 20px;\n        }\n        .dot {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n            background: #ccc;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n        .dot.active {\n            background: #e67e22;\n            width: 24px;\n            border-radius: 10px;\n        }\n        .dot:hover {\n            background: #e67e22;\n            opacity: 0.7;\n        }\n        \n        @media (max-width: 600px) {\n            .slider-wrapper { height: 340px; }\n            .card-content { width: 90vw; height: 300px; padding: 16px; border-radius: 24px; }\n            .review-text { font-size: 0.82rem; }\n            .full-modal-close { top: -40px; right: -5px; width: 40px; height: 40px; font-size: 1.8rem; }\n            .slider-dots { gap: 8px; margin-top: 16px; }\n            .dot { width: 8px; height: 8px; }\n            .dot.active { width: 20px; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"reviews-container\">\n    <!-- H1 with 'REVIEWS' title removed as requested -->\n    <div class=\"slider-wrapper\">\n        <div class=\"slider-track\" id=\"sliderTrack\"><\/div>\n    <\/div>\n    <div class=\"slider-dots\" id=\"sliderDots\"><\/div>\n<\/div>\n\n<div class=\"image-full-modal\" id=\"fullImageModal\">\n    <div class=\"full-modal-content\">\n        <button class=\"full-modal-close\" id=\"closeFullModalBtn\">\u2715<\/button>\n        <img decoding=\"async\" id=\"fullModalImage\" src=\"\" alt=\"reviewer photo\">\n        <div class=\"full-modal-caption\" id=\"fullModalCaption\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ All reviews - beautifully written testimonials from guests\n        const reviews = [\n            { \n                name: \"Helen Forty\", \n                text: \"I recommend Trust House Holidays and Mr Amr Ibrahim to anyone travelling to Egypt. Amr has organised all the travel arrangements for groups of people that my husband and I brought to Egypt. I recommend him & Trust House because:<br><br>1) He is honest and trustworthy (just like the business name!)<br>2) If an unexpected problem arises he finds a solution.<br>3) He understands the sites and logistics and makes good suggestions.<br>4) He genuinely cares that our holiday is successful and goes the extra mile to take care of all details.<br>5) The price is fair. Amr also helps me understand how much to tip people including Dahabeya staff, tour guide etc.<br>6) Amr's communication and English skills are excellent.<br>7) I would also like to say an extra thank you to Mr Ramadan who's friendly face and kind nature greets me when I arrive in Egypt. The airport collection and drop off provided by Trust House Holidays is fabulous and takes the stress out of arrival and departure.<br>8) Finally to add that I hope to organise another group tour with the help of Amr in the future, god willing.\", \n                rating: 5, \n                image: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/03\/IMG_3102.jpeg\" \n            },\n            { \n                name: \"Richard & Julia\", \n                text: \"Hi Amr, we are at the airport ready to fly back to London. We have had an amazing trip to Egypt, and we both thank you for your efficient arrangements and for selecting very knowledgeable, responsible and friendly guides for us. Everyone - drivers and airport reps included - were kind and helpful. Thank you! - Richard & Julia\", \n                rating: 5, \n                image: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/02\/IMG_3077.jpeg\" \n            },\n            { \n                name: \"Asif\", \n                text: \"Mr Amr, I was hoping to see you in person. Next time inshaAllah. But wanted to thank you for an amazing vacation without any flaws. I appreciate how everyone was on time, available almost 24x7 and the great tour guides. Thanks brother, will count you among my friends in Egypt and would recommend your service to my friends. Again thank you from the bottom of our hearts!\", \n                rating: 5, \n                image: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/01\/Asif.jpeg\" \n            },\n            { \n                name: \"David Leonard\", \n                text: \"What an incredible experience to visit Luxor, a visit made all the more wonderful when accompanied through the temples and tombs by the fantastic Egyptologist and guide Dr Mahmoud El Tayeb. From reading hieroglyphs by torch on Alexander the Great to highlighting sculptural details that may never be noticed without the knowledgeable eye of Dr Mahmoud. From ancient geology, modern day Egypt, to even the best restaurant to visit for lunch, every question was encouraged and answered with patience and great knowledge. I highly recommend Dr Mahmoud El Tayeb as your guide to everyone who visits Luxor. And to the wonderful driver Mohamed who safely drove us to every destination with a welcoming smile in comfort and style.\", \n                rating: 5, \n                image: \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/01\/David1.jpg\" \n            },\n            { \n                name: \"Sandra Gonzalez\", \n                text: \"We thank you once again for your amazing support and trust. Despite the small group we managed to gather this trip was by far the most powerful and transformational at the spiritual and emotional level for all participants and myself. Thank you for keeping your feet on the ground, holding a solid structure for us to be able to heal, transform and fly high while traveling within Egypt.\", \n                rating: 5, \n                image: null \n            },\n            { \n                name: \"Yasmin Atasi\", \n                text: \"Trust House Holidays helped us plan a phenomenal 4-week trip to Egypt from the US in November 2025. I worked closely with Amr Ibrahim and Dalia Abdel Rahim, and I cannot say enough good things about them. The planning process was easy and detailed, and we relied heavily on Dalia's expertise and knowledge of the tourist industry (e.g. best times to visit sites, best restaurants, best travel guides\u2026 etc).<br><br>We were a group of 4, and we travelled privately to Cairo, Luxor, Aswan, Abu Simbel, Marsa Alam, Western Desert oases, Sinai, and Nuweiba. Dalia's responsiveness, professionalism and attention to detail was unrivaled. We received detailed itineraries and the billing was transparent and very competitive.<br><br>Importantly, Dalia was always one step ahead of us while we were touring, and always had alternatives if changes to the schedule needed to be made (trust me, in a 4-week trip 'stuff' inevitably happens). Dalia went above and beyond to make this the best trip for us. I highly recommend Trust House Holidays, and I definitely plan to use them again for my next trip to Egypt. They are the gold standard in tourism.\", \n                rating: 5, \n                image: null \n            },\n            { \n                name: \"Marta Samorini\", \n                text: \"An unforgettable journey through Egypt! Every detail was perfectly arranged. The guides were incredibly knowledgeable and passionate about their history. Trust House Holidays made our dream vacation a reality. Highly recommended!\", \n                rating: 5, \n                image: null \n            },\n            { \n                name: \"Arafa Shaban\", \n                text: \"Magnificent experience from start to finish. The professionalism and care shown by the entire team was outstanding. Egypt's beauty was showcased perfectly. Will definitely book again!\", \n                rating: 5, \n                image: null \n            },\n            { \n                name: \"Pakinam Essam\", \n                text: \"I really had a wonderful experience with this company. I strongly recommend that you try your coming trip with Trusthouse Holidays :) . I promise you will never regret. From the warm welcome to the farewell, everything was flawless.\", \n                rating: 5, \n                image: null \n            }\n        ];\n\n        let currentSlide = 0;\n        let autoSlideInterval;\n        let autoSlideEnabled = true;\n        let isDragging = false;\n        let startX = 0;\n        let dragDistance = 0;\n        const AUTO_DELAY = 5000;\n\n        function escapeHtml(str) { \n            if(!str) return ''; \n            let div = document.createElement('div'); \n            div.textContent = str; \n            return div.innerHTML; \n        }\n\n        function renderSlider() {\n            const track = document.getElementById('sliderTrack');\n            const dotsContainer = document.getElementById('sliderDots');\n            if(!track) return;\n            \n            track.innerHTML = '';\n            dotsContainer.innerHTML = '';\n            \n            reviews.forEach((review, index) => {\n                const card = document.createElement('div');\n                card.className = 'review-card';\n                const hasImage = review.image && review.image.trim() !== '' && review.image !== 'null';\n                card.innerHTML = `\n                    <div class=\"card-content\">\n                        <div class=\"review-text-container\">\n                            <div class=\"review-text\">${review.text}<\/div>\n                            <div class=\"scroll-indicator\">\u2193<\/div>\n                        <\/div>\n                        <div class=\"review-signature\">\n                            <div class=\"reviewer-image\" data-reviewer=\"${escapeHtml(review.name)}\" data-img-src=\"${hasImage ? review.image : ''}\">\n                                ${hasImage ? `<img decoding=\"async\" src=\"${review.image}\" alt=\"${escapeHtml(review.name)}\">` : '<span style=\"font-size:18px;\">\ud83d\udcf7<\/span>'}\n                            <\/div>\n                            <div class=\"reviewer-info\">\n                                <div class=\"reviewer-name\">${escapeHtml(review.name)}<\/div>\n                                <div class=\"stars-container\">\n                                    ${'\u2605'.repeat(5).split('').map(() => '<span class=\"star\">\u2605<\/span>').join('')}\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                track.appendChild(card);\n                \n                \/\/ Create dot\n                const dot = document.createElement('div');\n                dot.className = 'dot' + (index === currentSlide ? ' active' : '');\n                dot.addEventListener('click', () => goToSlide(index));\n                dotsContainer.appendChild(dot);\n            });\n            \n            attachImageEvents();\n            attachScrollListeners();\n            updateDots();\n        }\n        \n        function updateDots() {\n            const dots = document.querySelectorAll('.dot');\n            dots.forEach((dot, index) => {\n                if(index === currentSlide) {\n                    dot.classList.add('active');\n                } else {\n                    dot.classList.remove('active');\n                }\n            });\n        }\n        \n        function goToSlide(index) {\n            if(index < 0) index = 0;\n            if(index >= reviews.length) index = reviews.length - 1;\n            currentSlide = index;\n            updateSliderTransform();\n            updateDots();\n            pauseAutoSlide(4000);\n        }\n        \n        function attachImageEvents() { \n            document.querySelectorAll('.reviewer-image').forEach(el => { \n                el.removeEventListener('click', imageClickHandler); \n                el.addEventListener('click', imageClickHandler); \n            }); \n        }\n        \n        function imageClickHandler(e) { \n            e.stopPropagation(); \n            const src = this.getAttribute('data-img-src'); \n            const name = this.getAttribute('data-reviewer') || 'Guest'; \n            if(src && src !== '') openFullImageModal(src, name); \n        }\n        \n        function attachScrollListeners() { \n            document.querySelectorAll('.review-text').forEach(t => { \n                t.removeEventListener('scroll', scrollHandler); \n                t.addEventListener('scroll', scrollHandler); \n                const container = t.closest('.review-text-container'); \n                if(container) { \n                    const indicator = container.querySelector('.scroll-indicator'); \n                    if(t.scrollHeight <= t.clientHeight + 2) indicator.style.display = 'none'; \n                    else indicator.style.display = 'block'; \n                } \n            }); \n        }\n        \n        function scrollHandler(e) { \n            const container = this.closest('.review-text-container'); \n            if(!container) return; \n            const indicator = container.querySelector('.scroll-indicator'); \n            const atBottom = (this.scrollHeight - this.scrollTop) <= this.clientHeight + 2; \n            if(indicator) indicator.style.opacity = atBottom ? '0.2' : '0.8'; \n        }\n        \n        function updateSliderTransform() { \n            const track = document.getElementById('sliderTrack'); \n            if(track &#038;&#038; reviews.length) {\n                track.style.transform = `translateX(-${currentSlide * 100}%)`;\n            }\n        }\n        \n        function goToNextSlide() { \n            if(reviews.length){ \n                currentSlide = (currentSlide + 1) % reviews.length; \n                updateSliderTransform(); \n                updateDots();\n            } \n        }\n        \n        function goToPrevSlide() {\n            if(reviews.length) {\n                currentSlide = (currentSlide - 1 + reviews.length) % reviews.length;\n                updateSliderTransform();\n                updateDots();\n            }\n        }\n        \n        function startAutoSlide() { \n            clearInterval(autoSlideInterval); \n            autoSlideInterval = setInterval(() => { \n                if(autoSlideEnabled && reviews.length) goToNextSlide(); \n            }, AUTO_DELAY); \n        }\n        \n        function pauseAutoSlide(ms) { \n            autoSlideEnabled = false; \n            clearInterval(autoSlideInterval); \n            setTimeout(() => { \n                autoSlideEnabled = true; \n                startAutoSlide(); \n            }, ms); \n        }\n        \n        \/\/ Drag\/swipe handlers for mobile and desktop\n        const trackElem = document.getElementById('sliderTrack');\n        if(trackElem) {\n            \/\/ Touch events for mobile\n            trackElem.addEventListener('touchstart', (e) => { \n                startX = e.touches[0].clientX; \n                isDragging = true; \n                pauseAutoSlide(4000); \n                trackElem.style.transition = 'none'; \n            });\n            \n            trackElem.addEventListener('touchmove', (e) => { \n                if(!isDragging) return; \n                let curX = e.touches[0].clientX; \n                let dist = startX - curX; \n                dragDistance = dist; \n                if(Math.abs(dist) > 5 && reviews.length) { \n                    let offset = -currentSlide * 100 + (dist \/ window.innerWidth * 100); \n                    trackElem.style.transform = `translateX(${offset}%)`; \n                } \n            });\n            \n            trackElem.addEventListener('touchend', () => { \n                if(!isDragging) return; \n                isDragging = false; \n                trackElem.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; \n                if(Math.abs(dragDistance) > 40 && reviews.length) { \n                    if(dragDistance > 0 && currentSlide < reviews.length - 1) {\n                        currentSlide++;\n                    } else if(dragDistance < 0 &#038;&#038; currentSlide > 0) {\n                        currentSlide--;\n                    }\n                } \n                updateSliderTransform(); \n                updateDots();\n                dragDistance = 0; \n            });\n            \n            \/\/ Mouse events for desktop\n            trackElem.addEventListener('mousedown', (e) => {\n                e.preventDefault();\n                isDragging = true;\n                startX = e.clientX;\n                pauseAutoSlide(4000);\n                trackElem.style.transition = 'none';\n            });\n            \n            document.addEventListener('mousemove', (e) => {\n                if(!isDragging) return;\n                let curX = e.clientX;\n                let dist = startX - curX;\n                dragDistance = dist;\n                if(Math.abs(dist) > 5 && reviews.length) {\n                    let offset = -currentSlide * 100 + (dist \/ window.innerWidth * 100);\n                    trackElem.style.transform = `translateX(${offset}%)`;\n                }\n            });\n            \n            document.addEventListener('mouseup', () => {\n                if(!isDragging) return;\n                isDragging = false;\n                trackElem.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n                if(Math.abs(dragDistance) > 40 && reviews.length) {\n                    if(dragDistance > 0 && currentSlide < reviews.length - 1) {\n                        currentSlide++;\n                    } else if(dragDistance < 0 &#038;&#038; currentSlide > 0) {\n                        currentSlide--;\n                    }\n                }\n                updateSliderTransform();\n                updateDots();\n                dragDistance = 0;\n            });\n            \n            \/\/ Keyboard navigation\n            document.addEventListener('keydown', (e) => {\n                if(e.key === 'ArrowLeft') {\n                    goToPrevSlide();\n                    pauseAutoSlide(4000);\n                } else if(e.key === 'ArrowRight') {\n                    goToNextSlide();\n                    pauseAutoSlide(4000);\n                }\n            });\n        }\n        \n        \/\/ Full image modal functionality\n        const fullModal = document.getElementById('fullImageModal');\n        const fullImg = document.getElementById('fullModalImage');\n        const fullCaptionSpan = document.getElementById('fullModalCaption');\n        const closeFullBtn = document.getElementById('closeFullModalBtn');\n        \n        function openFullImageModal(src, name) { \n            fullImg.src = src; \n            fullCaptionSpan.textContent = name; \n            fullModal.classList.add('active'); \n            pauseAutoSlide(4000); \n            document.body.style.overflow = 'hidden'; \n        }\n        \n        function closeFullImageModal() { \n            fullModal.classList.remove('active'); \n            fullImg.src = ''; \n            document.body.style.overflow = ''; \n        }\n        \n        if(closeFullBtn) closeFullBtn.addEventListener('click', closeFullImageModal);\n        fullModal.addEventListener('click', (e) => { \n            if(e.target === fullModal) closeFullImageModal(); \n        });\n        \n        document.addEventListener('keydown', (e) => { \n            if(e.key === 'Escape' && fullModal.classList.contains('active')) closeFullImageModal(); \n        });\n        \n        \/\/ Initialize everything\n        renderSlider();\n        setTimeout(() => { \n            updateSliderTransform(); \n            startAutoSlide(); \n        }, 100);\n        \n        \/\/ Handle window resize to maintain proper slider position\n        window.addEventListener('resize', () => {\n            updateSliderTransform();\n        });\n    })();\n<\/script>\n<\/body>\n<\/html>\n<h3><strong style=\"color: rgb(0, 0, 0);\">Associates<\/strong><\/h3>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"Explore Trust House Holidays' prestigious partners and associates through our interactive carousel featuring Electrolux, HSBC, and other leading brands.\">\n    <title>Associates Carousel<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            background: #f8f9fa;\n            min-height: 100vh;\n            padding: 20px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            font-family: Arial, sans-serif;\n        }\n        \n        .associates-content-container {\n            max-width: 1200px;\n            width: 100%;\n            padding: 20px;\n        }\n        \n        .associates-title {\n            font-size: 2.5rem;\n            color: #000000;\n            text-align: center;\n            margin: 20px 0 30px;\n            font-weight: 700;\n        }\n        \n        \/* Carousel Styles - Transparent background *\/\n        #associates-carousel.associates-container {\n            position: relative;\n            max-width: 900px;\n            margin: 10px auto 40px;\n            overflow: hidden;\n            border-radius: 8px;\n            background: transparent; \/* Changed to transparent *\/\n            touch-action: pan-y;\n            height: 120px;\n        }\n        \n        #associates-carousel .associates-slides {\n            display: flex;\n            transition: transform 0.5s ease;\n            height: 100%;\n        }\n        \n        #associates-carousel .associates-slide {\n            flex: 0 0 auto;\n            width: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 10px;\n            box-sizing: border-box;\n            background: transparent; \/* Added transparent background *\/\n        }\n        \n        #associates-carousel .associates-slide img {\n            max-width: 180px;\n            max-height: 80px;\n            object-fit: contain;\n            display: block;\n            border-radius: 4px;\n            transition: all 0.5s ease;\n            \/* 3D effect with multiple shadows *\/\n            filter: \n                drop-shadow(0 2px 2px rgba(0,0,0,0.2))\n                drop-shadow(0 4px 4px rgba(0,0,0,0.1))\n                drop-shadow(0 8px 8px rgba(0,0,0,0.05));\n            transform: perspective(500px) translateZ(0);\n            background: transparent; \/* Ensure images have transparent background *\/\n        }\n        \n        \/* Style adjustments for specific images *\/\n        #associates-carousel .associates-slide img.rounded {\n            border-radius: 12px;\n        }\n        \n        #associates-carousel .associates-slide img.shiny {\n            filter: \n                drop-shadow(0 2px 2px rgba(0,0,0,0.2))\n                drop-shadow(0 4px 4px rgba(0,0,0,0.1))\n                drop-shadow(0 8px 8px rgba(0,0,0,0.05))\n                brightness(1.1)\n                contrast(1.1);\n        }\n        \n        #associates-carousel .associates-slide img.no-bg {\n            \/* Force white background removal *\/\n            mix-blend-mode: multiply;\n        }\n        \n        \/* Hover effect for images *\/\n        #associates-carousel .associates-slide img:hover {\n            transform: perspective(500px) translateZ(10px) scale(1.03);\n            filter: \n                drop-shadow(0 4px 4px rgba(0,0,0,0.25))\n                drop-shadow(0 8px 8px rgba(0,0,0,0.15))\n                drop-shadow(0 12px 12px rgba(0,0,0,0.1));\n        }\n        \n        \/* Flip animation when active *\/\n        #associates-carousel .associates-slide.associates-active img {\n            animation: associates-flip 0.8s ease forwards, \n                       associates-twinkle 2s ease-in-out 0.8s forwards;\n        }\n        \n        @keyframes associates-flip {\n            0% {\n                transform: perspective(500px) rotateY(0deg) translateZ(0);\n            }\n            50% {\n                transform: perspective(500px) rotateY(90deg) scale(0.9) translateZ(20px);\n                opacity: 0.7;\n            }\n            100% {\n                transform: perspective(500px) rotateY(0deg) translateZ(0);\n            }\n        }\n        \n        \/* Twinkle effect *\/\n        @keyframes associates-twinkle {\n            0%, 100% {\n                filter: \n                    drop-shadow(0 2px 2px rgba(0,0,0,0.2))\n                    drop-shadow(0 4px 4px rgba(0,0,0,0.1))\n                    drop-shadow(0 8px 8px rgba(0,0,0,0.05));\n            }\n            50% {\n                filter: \n                    drop-shadow(0 0 5px rgba(255, 255, 255, 0.6))\n                    drop-shadow(0 0 10px rgba(255, 255, 255, 0.4))\n                    drop-shadow(0 0 15px rgba(255, 255, 255, 0.2))\n                    drop-shadow(0 4px 4px rgba(0,0,0,0.1))\n                    drop-shadow(0 8px 8px rgba(0,0,0,0.05));\n            }\n        }\n        \n        \/* Responsive adjustments *\/\n        @media (max-width: 768px) {\n            #associates-carousel.associates-container {\n                max-width: 95%;\n                height: 100px;\n            }\n            \n            #associates-carousel .associates-slide img {\n                max-width: 150px;\n                max-height: 70px;\n            }\n            \n            .associates-title {\n                font-size: 2rem;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            #associates-carousel.associates-container {\n                height: 85px;\n            }\n            \n            #associates-carousel .associates-slide img {\n                max-width: 130px;\n                max-height: 60px;\n            }\n            \n            .associates-title {\n                font-size: 1.8rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"associates-content-container\">\n        <!-- Title removed as requested -->\n        \n        <div id=\"associates-carousel\" class=\"associates-container\" tabindex=\"0\">\n            <div class=\"associates-slides\">\n                <!-- Original Images -->\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image019.png\" alt=\"Electrolux Home Appliances\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image018.png\" alt=\"TEN Company\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image014.gif\" alt=\"HSBC Bank\">\n                <\/div>\n                \n                <!-- Newly Added Images -->\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image012.png\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image013-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image020.jpg\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image015.png\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image016-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image017-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image009-Copy-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image007-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image004-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image003-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image001-1.png\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/p9-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/p6-jpg.webp\" alt=\"\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/p5-jpg.webp\" alt=\"\">\n                <\/div>\n                \n                <!-- Requested Additional Images with style adjustments -->\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/image011-jpg.webp\" alt=\"\" class=\"shiny\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/03\/p5-jpg.webp\" alt=\"\" class=\"rounded shiny\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/images2.jpeg\" alt=\"\" class=\"no-bg\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/airfrance5.jpeg\" alt=\"\" class=\"rounded\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/cid_A9F1E4731C7544519A33D97D09E9C46D@MrAmrPC1.png\" alt=\"\" class=\"no-bg shiny\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/cid_E2916ACC9FE94DACAE0C28CB8B1FA1D6@MrAmrPC1.png\" alt=\"\" class=\"no-bg\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/cid_401A4A57ADD440069752551EA38072A3@MrAmrPC1.png\" alt=\"\" class=\"rounded shiny\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/cid_801E92A9C5824EB3A9FA407D66E05E90@MrAmrPC1.png\" alt=\"\" class=\"no-bg\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/cid_13133E4DDDAC402285A3CFA8FC1B6D3D@MrAmrPC1.png\" alt=\"\" class=\"rounded\">\n                <\/div>\n                <div class=\"associates-slide\">\n                    <img decoding=\"async\" src=\"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/12\/cid_3E44AF9F8D394327BE76F40D26C85DCB@MrAmrPC1.png\" alt=\"\" class=\"no-bg shiny\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    (function() {\n        const carousel = document.getElementById('associates-carousel');\n        if (!carousel) return;\n        \n        const slides = carousel.querySelector('.associates-slides');\n        const slideItems = carousel.querySelectorAll('.associates-slide');\n        const totalSlides = slideItems.length;\n        \n        let currentIndex = 0;\n        let autoSlideInterval;\n        \n        \/\/ Make carousel focusable for keyboard events\n        carousel.setAttribute('tabindex', '0');\n        carousel.style.outline = 'none';\n        \n        \/\/ Initialize first slide as active\n        slideItems[currentIndex].classList.add('associates-active');\n        \n        function navigate(direction) {\n            \/\/ Remove active class from current slide\n            slideItems[currentIndex].classList.remove('associates-active');\n            \n            currentIndex = (currentIndex + direction + totalSlides) % totalSlides;\n            updateSlidePosition();\n            \n            \/\/ Add active class to new slide to trigger flip animation\n            slideItems[currentIndex].classList.add('associates-active');\n            \n            resetInterval();\n        }\n        \n        function navigateToSlide(index) {\n            \/\/ Remove active class from current slide\n            slideItems[currentIndex].classList.remove('associates-active');\n            \n            currentIndex = index;\n            updateSlidePosition();\n            \n            \/\/ Add active class to new slide to trigger flip animation\n            slideItems[currentIndex].classList.add('associates-active');\n            \n            resetInterval();\n        }\n        \n        function updateSlidePosition() {\n            slides.style.transform = `translateX(-${currentIndex * 100}%)`;\n        }\n        \n        function startInterval() {\n            autoSlideInterval = setInterval(() => navigate(1), 3000);\n        }\n        \n        function resetInterval() {\n            clearInterval(autoSlideInterval);\n            startInterval();\n        }\n        \n        \/\/ Touch and mouse events for dragging\n        let isDragging = false;\n        let startPosition = 0;\n        let currentTranslate = 0;\n        let prevTranslate = 0;\n        let animationID = 0;\n        \n        slides.addEventListener('mousedown', touchStart);\n        slides.addEventListener('touchstart', touchStart, {passive: true});\n        slides.addEventListener('mouseup', touchEnd);\n        slides.addEventListener('touchend', touchEnd);\n        slides.addEventListener('mouseleave', touchEnd);\n        slides.addEventListener('mousemove', touchMove);\n        slides.addEventListener('touchmove', touchMove, {passive: true});\n        \n        \/\/ Keyboard navigation\n        document.addEventListener('keydown', function(e) {\n            if (document.activeElement === carousel) {\n                if (e.key === 'ArrowLeft') {\n                    navigate(-1);\n                    e.preventDefault();\n                } else if (e.key === 'ArrowRight') {\n                    navigate(1);\n                    e.preventDefault();\n                }\n            }\n        });\n        \n        function touchStart(event) {\n            if (event.type === 'mousedown') {\n                startPosition = event.clientX;\n            } else {\n                startPosition = event.touches[0].clientX;\n            }\n            \n            isDragging = true;\n            animationID = requestAnimationFrame(animation);\n            slides.style.transition = 'none';\n            clearInterval(autoSlideInterval);\n        }\n        \n        function touchEnd() {\n            if (!isDragging) return;\n            \n            isDragging = false;\n            cancelAnimationFrame(animationID);\n            \n            const movedBy = currentTranslate - prevTranslate;\n            \n            if (movedBy < -50) {\n                \/\/ Swipe left - go to next slide\n                navigate(1);\n            } else if (movedBy > 50) {\n                \/\/ Swipe right - go to previous slide\n                navigate(-1);\n            } else {\n                \/\/ Not enough movement - return to original position\n                updateSlidePosition();\n            }\n            \n            slides.style.transition = 'transform 0.5s ease';\n            resetInterval();\n            \n            \/\/ Reset values\n            prevTranslate = 0;\n            currentTranslate = 0;\n        }\n        \n        function touchMove(event) {\n            if (!isDragging) return;\n            \n            let currentPosition = 0;\n            if (event.type === 'mousemove') {\n                currentPosition = event.clientX;\n                event.preventDefault(); \/\/ Prevent text selection\n            } else {\n                currentPosition = event.touches[0].clientX;\n            }\n            \n            currentTranslate = prevTranslate + currentPosition - startPosition;\n        }\n        \n        function animation() {\n            if (isDragging) {\n                slides.style.transform = `translateX(calc(-${currentIndex * 100}% + ${currentTranslate}px))`;\n                requestAnimationFrame(animation);\n            }\n        }\n        \n        \/\/ Prevent image drag\n        const images = carousel.querySelectorAll('img');\n        images.forEach(img => {\n            img.addEventListener('dragstart', (e) => {\n                e.preventDefault();\n            });\n        });\n        \n        \/\/ Pause auto-slide when user hovers over carousel\n        carousel.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));\n        carousel.addEventListener('mouseleave', () => resetInterval());\n        \n        \/\/ Start the interval initially\n        startInterval();\n    })();\n    <\/script>\n<\/body>\n<\/html>\n\n\n<h4 style=\"color: rgb(0, 0, 0);\"><strong>Guests<\/strong><\/h4>\n\n\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\n    <title>Trust House Holidays | Immersive Gallery Experience<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: #f8f8f8;\n            color: #333;\n            line-height: 1.6;\n            padding: 20px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            overflow-x: hidden;\n        }\n        \n        .thh-gallery-container {\n            max-width: 1200px;\n            width: 100%;\n        }\n        \n        .thh-slider-container {\n            position: relative;\n            width: 100%;\n            overflow: hidden;\n            border-radius: 20px;\n            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);\n            background: #fff;\n        }\n        \n        .thh-slider-track {\n            display: flex;\n            transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            will-change: transform;\n        }\n        \n        .thh-slide {\n            display: flex;\n            flex-shrink: 0;\n            justify-content: center;\n            align-items: center;\n            width: 100%;\n            padding: 18px;\n            gap: 18px;\n            background: #ffffff;\n        }\n        \n        .thh-image-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-radius: 16px;\n            overflow: hidden;\n            background: #f4f4f4;\n            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n            cursor: pointer;\n            \/* Force even aspect ratio + uniform size *\/\n            position: relative;\n        }\n        \n        \/* INSIDE each container, image covers fully with same dimensions per breakpoint *\/\n        .thh-slide img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: transform 0.4s ease;\n        }\n        \n        .thh-image-container:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 20px 28px -12px rgba(0, 0, 0, 0.25);\n        }\n        \n        .thh-image-container:hover img {\n            transform: scale(1.04);\n        }\n        \n        .thh-dots-container {\n            display: flex;\n            justify-content: center;\n            margin-top: 22px;\n            flex-wrap: wrap;\n            gap: 8px;\n            row-gap: 10px;\n        }\n        \n        .thh-dot {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n            background: #cdcdcd;\n            cursor: pointer;\n            transition: all 0.25s ease;\n            flex-shrink: 0;\n        }\n        \n        .thh-dot.active {\n            background: #e68a00;\n            transform: scale(1.3);\n            box-shadow: 0 0 0 2px rgba(230, 138, 0, 0.2);\n        }\n        \n        \/* Lightbox - fully isolated & elegant *\/\n        .thh-lightbox-overlay {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.94);\n            z-index: 10000;\n            justify-content: center;\n            align-items: center;\n            backdrop-filter: blur(4px);\n        }\n        \n        .thh-lightbox-overlay.active {\n            display: flex;\n        }\n        \n        .thh-lightbox-content {\n            max-width: 90%;\n            max-height: 90%;\n            position: relative;\n            animation: fadeScale 0.25s ease;\n        }\n        \n        @keyframes fadeScale {\n            from { opacity: 0; transform: scale(0.96); }\n            to { opacity: 1; transform: scale(1); }\n        }\n        \n        .thh-lightbox-content img {\n            max-width: 100%;\n            max-height: 85vh;\n            object-fit: contain;\n            border-radius: 20px;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n            border: 2px solid rgba(255,255,240,0.15);\n        }\n        \n        .thh-lightbox-caption {\n            position: absolute;\n            bottom: -42px;\n            left: 0;\n            width: 100%;\n            text-align: center;\n            color: #f5f5f5;\n            font-size: 17px;\n            font-weight: 500;\n            letter-spacing: 0.3px;\n            text-shadow: 0 1px 4px black;\n        }\n        \n        .thh-lightbox-close {\n            position: absolute;\n            top: 22px;\n            right: 28px;\n            width: 44px;\n            height: 44px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            cursor: pointer;\n            z-index: 10001;\n            background: rgba(0,0,0,0.5);\n            border-radius: 50%;\n            transition: 0.2s;\n        }\n        \n        .thh-lightbox-close:hover {\n            background: rgba(0,0,0,0.85);\n            transform: scale(1.05);\n        }\n        \n        .thh-lightbox-close:before, .thh-lightbox-close:after {\n            content: '';\n            position: absolute;\n            width: 24px;\n            height: 2px;\n            background: white;\n        }\n        \n        .thh-lightbox-close:before {\n            transform: rotate(45deg);\n        }\n        \n        .thh-lightbox-close:after {\n            transform: rotate(-45deg);\n        }\n        \n        \/* Navigation arrows (simple elegance) *\/\n        .thh-nav-arrow {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            background: rgba(0,0,0,0.5);\n            color: white;\n            border: none;\n            width: 40px;\n            height: 40px;\n            border-radius: 60px;\n            font-size: 28px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            z-index: 15;\n            transition: 0.2s;\n            backdrop-filter: blur(6px);\n            font-weight: bold;\n        }\n        \n        .thh-nav-arrow:hover {\n            background: #e68a00;\n            color: white;\n        }\n        \n        .thh-prev-arrow {\n            left: 15px;\n        }\n        \n        .thh-next-arrow {\n            right: 15px;\n        }\n        \n        \/* RESPONSIVE: UNIFORM IMAGE SIZES ACROSS ALL DEVICES *\/\n        @media (max-width: 599px) {\n            .thh-slide {\n                padding: 12px;\n                gap: 12px;\n            }\n            .thh-image-container {\n                width: 100%;\n                max-width: 380px;\n                height: 280px;\n                margin: 0 auto;\n            }\n            .thh-nav-arrow {\n                width: 34px;\n                height: 34px;\n                font-size: 22px;\n            }\n        }\n        \n        @media (min-width: 600px) and (max-width: 1023px) {\n            .thh-slide {\n                padding: 16px;\n                gap: 18px;\n            }\n            .thh-image-container {\n                width: calc(50% - 10px);\n                height: 210px;\n            }\n        }\n        \n        @media (min-width: 1024px) {\n            .thh-slide {\n                padding: 20px;\n                gap: 20px;\n            }\n            .thh-image-container {\n                width: calc(20% - 16px);\n                height: 170px;\n            }\n        }\n        \n        \/* additional nice touch *\/\n        .thh-slider-container {\n            position: relative;\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"thh-gallery-container\">\n    <div class=\"thh-slider-container\" id=\"thhSliderContainer\">\n        <div class=\"thh-slider-track\" id=\"thhSliderTrack\"><\/div>\n        <!-- navigation arrows for better UX -->\n        <button class=\"thh-nav-arrow thh-prev-arrow\" id=\"thhPrevBtn\" aria-label=\"Previous slide\">\u2039<\/button>\n        <button class=\"thh-nav-arrow thh-next-arrow\" id=\"thhNextBtn\" aria-label=\"Next slide\">\u203a<\/button>\n    <\/div>\n    <div class=\"thh-dots-container\" id=\"thhDotsContainer\"><\/div>\n<\/div>\n\n<!-- Lightbox block -->\n<div class=\"thh-lightbox-overlay\" id=\"thhLightbox\">\n    <div class=\"thh-lightbox-close\" id=\"thhLightboxClose\"><\/div>\n    <div class=\"thh-lightbox-content\">\n        <img decoding=\"async\" id=\"thhLightboxImage\" src=\"\" alt=\"enlarged view\">\n        <div class=\"thh-lightbox-caption\" id=\"thhLightboxCaption\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ ---------- MERGED IMAGE SET (original 32 + 20 new unique images) preserve all content with even sizing ----------\n    const thhImages = [\n        \/\/ original images (32 assets)\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/05\/f7c1ac92-6fb2-4e1f-8d4b-1f5416466efe.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/05\/03896af0-2f0c-45f0-afc9-080599c497e3.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/05\/e8a0aca3-6b0e-49bc-b751-925119c9dd2b.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2023\/10\/ilovuthh.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests4.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/pyramids-tour.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/cairo-sight-seeing.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests5.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests6.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests-eg.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests8-e1758503334359.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests-e1758503378640.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests09-e1758503549388.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/11\/tour-guests2.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2024\/12\/tour-guests3.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/33cb4aa9-b13a-4e54-8eff-89dcf281540e-e1739800870123.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/elts-e1739800522446.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/b0208a9b-cca8-4137-b0c7-34db7d855020-e1739800800926.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/04\/THH-CEO.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/04\/luxor-group-fun.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/04\/luxor-group-love-e1758461855656.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/03\/IMG_6352.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/03\/27e7d2fc-3c4d-4719-bb39-b092666f5684.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/03\/96535922-5d2e-4f2e-ae3e-547c3f646331.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/03\/e7082dee-42d1-411e-b673-1e61e31f07b4.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/03\/karnak-temple.jpeg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/IMG_8312.png\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/THH-Flag-e1758549473523.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/travel-around-the-world.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/02\/7841e068-0f43-4ed3-8749-7c5672e45156-e1739800765878.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/09\/Wedding-Festival-Trust-House-Holidays-optimized.webp\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2025\/04\/Egypt-Luxor-Tour-With-Manager-Amr-Ibrahim-2.webp\",\n        \/\/ ---- NEW ADDITIONS (20 images, all even dimensions, beautifully aligned) ----\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Sea-Tour.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/egypt-sightseeing.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/amazinge-egypt-room.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/trust-house-holidays-tours.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/aswan-view.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Egypt-Tourism.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Sea-Egypt.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Exceptional-Egypt-Hotel.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/aswan-view-Copy.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/inspiring-egypt.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/egyptian-hotel.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/tour.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/egypt.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/master-room.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/egypt-hotel-tour.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Pool-Egypt.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Meals-on-tour.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Dining-With-us.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Master-Room-Egypt.jpg\",\n        \"https:\/\/trusthouseholidays.co\/wp-content\/uploads\/2026\/04\/Egyptian-art-tourism.jpg\"\n    ];\n\n    \/\/ Captions array for ALL images (original + new)\n    const originalCaptions = [\n        \"Egyptian Adventure\", \"Historic Sites\", \"Desert Experience\", \"Customer Love\",\n        \"Tour Group\", \"Pyramids Tour\", \"Cairo Sightseeing\", \"Happy Guests\",\n        \"Group Tour\", \"Egyptian Tour\", \"Tour Experience\", \"Memorable Moments\",\n        \"Tour Group 09\", \"Tour Guests\", \"Tour Group 3\", \"Egyptian Landscapes\",\n        \"Egyptian Landmarks\", \"Historic Egypt\", \"THH CEO\", \"Luxor Group Fun\",\n        \"Luxor Group Love\", \"Temple Visit\", \"Historic Tour\", \"Egyptian Experience\",\n        \"Cultural Tour\", \"Karnak Temple\", \"THH Group Photo\", \"THH Flag\",\n        \"Travel Around the World\", \"Egyptian Culture\", \"Wedding Festival\",\n        \"Egypt Luxor Tour with Manager Amr Ibrahim\"\n    ];\n    \n    const newCaptions = [\n        \"Sea Breeze Serenity\", \"Egyptian Sightseeing Magic\", \"Amazing Egyptian Room Escape\",\n        \"Trust House Tours Excellence\", \"Aswan Nile View\", \"Egypt Tourism Wonders\",\n        \"Red Sea Riviera\", \"Exceptional Egypt Hotel\", \"Aswan Panorama\",\n        \"Inspiring Egypt Heritage\", \"Egyptian Hotel Grandeur\", \"Authentic Tour Moments\",\n        \"Timeless Egypt\", \"Master Suite Elegance\", \"Egypt Hotel Tour Luxury\",\n        \"Poolside Paradise Egypt\", \"Gourmet Meals On Tour\", \"Dining With Us Experience\",\n        \"Master Room Luxury\", \"Egyptian Art & Culture\"\n    ];\n    \n    const thhCaptions = [...originalCaptions, ...newCaptions];\n    \n    \/\/ Ensure caption length matches images count\n    if (thhCaptions.length !== thhImages.length) {\n        console.warn(\"Caption length mismatch, adjusting dynamically\");\n        while(thhCaptions.length < thhImages.length) thhCaptions.push(\"Trust House Holidays\");\n        while(thhCaptions.length > thhImages.length) thhCaptions.pop();\n    }\n\n    \/\/ DOM elements\n    const thhSliderTrack = document.getElementById('thhSliderTrack');\n    const thhSliderContainer = document.getElementById('thhSliderContainer');\n    const thhDotsContainer = document.getElementById('thhDotsContainer');\n    const thhLightbox = document.getElementById('thhLightbox');\n    const thhLightboxImage = document.getElementById('thhLightboxImage');\n    const thhLightboxCaption = document.getElementById('thhLightboxCaption');\n    const thhLightboxClose = document.getElementById('thhLightboxClose');\n    const prevBtn = document.getElementById('thhPrevBtn');\n    const nextBtn = document.getElementById('thhNextBtn');\n\n    \/\/ Slider state\n    let thhCurrentSlide = 0;\n    let thhTotalSlides = 0;\n    let thhImagesPerSlide = 0;\n    let thhCurrentLightboxIndex = 0;\n    let thhAutoSlideInterval;\n    let thhIsPaused = false;\n    let thhClickTimeout = null;\n    let thhLastTap = 0;\n    \n    \/\/ Swipe \/ drag variables\n    let thhTouchStartX = 0;\n    let thhTouchEndX = 0;\n    let thhIsDragging = false;\n    let thhDragStartX = 0;\n    let thhDragDistance = 0;\n\n    function thhGetImagesPerSlide() {\n        if (window.innerWidth >= 1024) return 5;\n        if (window.innerWidth >= 600) return 2;\n        return 1;\n    }\n\n    \/\/ create slides: ensures each image is placed inside uniform containers\n    function thhCreateSlides() {\n        thhSliderTrack.innerHTML = '';\n        thhDotsContainer.innerHTML = '';\n        \n        thhImagesPerSlide = thhGetImagesPerSlide();\n        thhTotalSlides = Math.ceil(thhImages.length \/ thhImagesPerSlide);\n        thhSliderTrack.style.width = `${thhTotalSlides * 100}%`;\n        \n        for (let slideIdx = 0; slideIdx < thhTotalSlides; slideIdx++) {\n            const slide = document.createElement('div');\n            slide.className = 'thh-slide';\n            slide.style.width = `${100 \/ thhTotalSlides}%`;\n            \n            let imagesInSlide = 0;\n            for (let i = 0; i < thhImagesPerSlide; i++) {\n                const imgIdx = slideIdx * thhImagesPerSlide + i;\n                if (imgIdx >= thhImages.length) break;\n                imagesInSlide++;\n                \n                const container = document.createElement('div');\n                container.className = 'thh-image-container';\n                const img = document.createElement('img');\n                img.src = thhImages[imgIdx];\n                img.alt = thhCaptions[imgIdx] || \"Trust House Holidays\";\n                img.dataset.thhIndex = imgIdx;\n                img.loading = \"lazy\";\n                \n                img.addEventListener('click', thhHandleImageClick);\n                img.addEventListener('touchend', thhHandleTouchEnd);\n                \n                container.appendChild(img);\n                slide.appendChild(container);\n            }\n            \n            \/\/ ensure last slide containers adapt gracefully but keep even visual alignment\n            if (imagesInSlide < thhImagesPerSlide &#038;&#038; imagesInSlide > 0 && window.innerWidth >= 600) {\n                const containers = slide.querySelectorAll('.thh-image-container');\n                const basePercent = 100 \/ imagesInSlide;\n                containers.forEach(container => {\n                    container.style.flex = `1 1 ${basePercent}%`;\n                    container.style.maxWidth = `${basePercent}%`;\n                });\n            } else if (imagesInSlide < thhImagesPerSlide &#038;&#038; window.innerWidth < 600) {\n                \/\/ mobile: ensure single container centered\n                const cont = slide.querySelector('.thh-image-container');\n                if(cont) cont.style.margin = \"0 auto\";\n            }\n            \n            thhSliderTrack.appendChild(slide);\n        }\n        \n        \/\/ Dots: responsive count but keep all slides represented with scroll-friendly dots\n        const maxDots = Math.min(28, thhTotalSlides);\n        for (let i = 0; i < maxDots; i++) {\n            const dot = document.createElement('div');\n            dot.className = 'thh-dot';\n            if (i === 0) dot.classList.add('active');\n            dot.addEventListener('click', () => thhGoToSlide(i));\n            thhDotsContainer.appendChild(dot);\n        }\n        \n        thhUpdateSliderPosition();\n        thhStartAutoSlide();\n    }\n    \n    function thhHandleTouchEnd(e) {\n        const currentTime = new Date().getTime();\n        const tapLength = currentTime - thhLastTap;\n        if (tapLength < 500 &#038;&#038; tapLength > 0) {\n            const imgIndex = parseInt(e.target.dataset.thhIndex);\n            if (!isNaN(imgIndex)) thhOpenLightbox(imgIndex);\n            e.preventDefault();\n        }\n        thhLastTap = currentTime;\n    }\n    \n    function thhHandleImageClick(e) {\n        const imgIndex = parseInt(e.target.dataset.thhIndex);\n        if (thhClickTimeout === null) {\n            thhClickTimeout = setTimeout(() => {\n                thhClickTimeout = null;\n            }, 280);\n        } else {\n            clearTimeout(thhClickTimeout);\n            thhClickTimeout = null;\n            thhOpenLightbox(imgIndex);\n        }\n    }\n    \n    function thhUpdateSliderPosition() {\n        if (!thhSliderTrack.children.length) return;\n        const slideWidth = thhSliderContainer.offsetWidth;\n        const translateX = -thhCurrentSlide * slideWidth;\n        thhSliderTrack.style.transform = `translateX(${translateX}px)`;\n        \n        const dots = document.querySelectorAll('#thhDotsContainer .thh-dot');\n        if (dots.length) {\n            const activeIndex = thhCurrentSlide % dots.length;\n            dots.forEach((dot, idx) => {\n                dot.classList.toggle('active', idx === activeIndex);\n            });\n        }\n    }\n    \n    function thhGoToSlide(slideIndex) {\n        if (slideIndex >= thhTotalSlides || slideIndex < 0) return;\n        thhCurrentSlide = slideIndex;\n        thhUpdateSliderPosition();\n    }\n    \n    function thhNextSlide() {\n        if (thhCurrentSlide === thhTotalSlides - 1) {\n            \/\/ seamless loop: instant reset to first without gap\n            thhSliderTrack.style.transition = 'none';\n            thhCurrentSlide = 0;\n            thhUpdateSliderPosition();\n            void thhSliderTrack.offsetHeight;\n            thhSliderTrack.style.transition = 'transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n        } else {\n            thhCurrentSlide++;\n            thhUpdateSliderPosition();\n        }\n    }\n    \n    function thhPrevSlide() {\n        if (thhCurrentSlide === 0) {\n            thhSliderTrack.style.transition = 'none';\n            thhCurrentSlide = thhTotalSlides - 1;\n            thhUpdateSliderPosition();\n            void thhSliderTrack.offsetHeight;\n            thhSliderTrack.style.transition = 'transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n        } else {\n            thhCurrentSlide--;\n            thhUpdateSliderPosition();\n        }\n    }\n    \n    function thhStartAutoSlide() {\n        if (thhAutoSlideInterval) clearInterval(thhAutoSlideInterval);\n        thhAutoSlideInterval = setInterval(() => {\n            if (!thhIsPaused && !thhLightbox.classList.contains('active')) {\n                thhNextSlide();\n            }\n        }, 4200);\n        thhIsPaused = false;\n    }\n    \n    function thhStopAutoSlide() { thhIsPaused = true; }\n    function thhResumeAutoSlide() { if (!thhLightbox.classList.contains('active')) thhIsPaused = false; }\n    \n    \/\/ lightbox controls\n    function thhOpenLightbox(index) {\n        thhCurrentLightboxIndex = index;\n        thhLightboxImage.src = thhImages[index];\n        thhLightboxCaption.textContent = thhCaptions[index];\n        thhLightbox.classList.add('active');\n        thhStopAutoSlide();\n        document.body.style.overflow = 'hidden';\n    }\n    \n    function thhCloseLightbox() {\n        thhLightbox.classList.remove('active');\n        if (!thhIsPaused) thhResumeAutoSlide();\n        document.body.style.overflow = '';\n    }\n    \n    function thhNextLightboxImage() {\n        thhCurrentLightboxIndex = (thhCurrentLightboxIndex + 1) % thhImages.length;\n        thhLightboxImage.src = thhImages[thhCurrentLightboxIndex];\n        thhLightboxCaption.textContent = thhCaptions[thhCurrentLightboxIndex];\n    }\n    \n    function thhPrevLightboxImage() {\n        thhCurrentLightboxIndex = (thhCurrentLightboxIndex - 1 + thhImages.length) % thhImages.length;\n        thhLightboxImage.src = thhImages[thhCurrentLightboxIndex];\n        thhLightboxCaption.textContent = thhCaptions[thhCurrentLightboxIndex];\n    }\n    \n    \/\/ EVENT LISTENERS\n    thhLightbox.addEventListener('click', (e) => {\n        if (e.target === thhLightbox || e.target === thhLightboxClose) thhCloseLightbox();\n    });\n    \n    document.addEventListener('keydown', (e) => {\n        if (thhLightbox.classList.contains('active')) {\n            if (e.key === 'Escape') thhCloseLightbox();\n            else if (e.key === 'ArrowLeft') thhPrevLightboxImage();\n            else if (e.key === 'ArrowRight') thhNextLightboxImage();\n            e.stopPropagation();\n        } else {\n            \/\/ optional: not interfere\n        }\n    });\n    \n    \/\/ hover pause \/ play\n    thhSliderContainer.addEventListener('mouseenter', () => thhStopAutoSlide());\n    thhSliderContainer.addEventListener('mouseleave', () => { if (!thhLightbox.classList.contains('active')) thhResumeAutoSlide(); });\n    \n    \/\/ touch swipe\n    thhSliderContainer.addEventListener('touchstart', (e) => {\n        thhTouchStartX = e.touches[0].clientX;\n        thhStopAutoSlide();\n    });\n    thhSliderContainer.addEventListener('touchmove', (e) => { if (thhTouchStartX) thhTouchEndX = e.touches[0].clientX; });\n    thhSliderContainer.addEventListener('touchend', () => {\n        if (thhTouchStartX && thhTouchEndX) {\n            const diff = thhTouchStartX - thhTouchEndX;\n            if (Math.abs(diff) > 45) diff > 0 ? thhNextSlide() : thhPrevSlide();\n        }\n        thhTouchStartX = null; thhTouchEndX = null;\n        setTimeout(() => { if (!thhLightbox.classList.contains('active')) thhResumeAutoSlide(); }, 800);\n    });\n    \n    \/\/ mouse drag simulation\n    thhSliderContainer.addEventListener('mousedown', (e) => {\n        thhIsDragging = true;\n        thhDragStartX = e.clientX;\n        thhDragDistance = 0;\n        thhStopAutoSlide();\n        e.preventDefault();\n    });\n    document.addEventListener('mousemove', (e) => {\n        if (!thhIsDragging) return;\n        thhDragDistance = e.clientX - thhDragStartX;\n        const slideWidth = thhSliderContainer.offsetWidth;\n        const baseOffset = -thhCurrentSlide * slideWidth;\n        thhSliderTrack.style.transform = `translateX(${baseOffset + thhDragDistance}px)`;\n    });\n    document.addEventListener('mouseup', () => {\n        if (!thhIsDragging) return;\n        thhIsDragging = false;\n        if (Math.abs(thhDragDistance) > 55) thhDragDistance < 0 ? thhNextSlide() : thhPrevSlide();\n        else thhUpdateSliderPosition();\n        setTimeout(() => { if (!thhLightbox.classList.contains('active')) thhResumeAutoSlide(); }, 800);\n        thhDragDistance = 0;\n    });\n    \n    \/\/ buttons navigation\n    prevBtn.addEventListener('click', (e) => { e.stopPropagation(); thhPrevSlide(); });\n    nextBtn.addEventListener('click', (e) => { e.stopPropagation(); thhNextSlide(); });\n    \n    window.addEventListener('resize', () => {\n        if (thhAutoSlideInterval) clearInterval(thhAutoSlideInterval);\n        thhCreateSlides();\n    });\n    \n    document.addEventListener('DOMContentLoaded', () => thhCreateSlides());\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<h3>Enjoy<\/h3>\n<p><span style=\"color: white;\"><span style=\"color: white;\"><\/span><\/span><\/p>\n<h3>Your Next<\/h3>\n<p><span style=\"color: white;\"><span style=\"color: white;\"> <\/span><\/span><\/p>\n<h3 style=\"color: #cce8cc;\">Travel<\/h3>\n<p><span style=\"color: white;\"><span style=\"color: white;\"><\/span><\/span><\/p>\n <\/span><\/span><\/p>\r\n<p>&nbsp;<\/p>\r\n<p><span style=\"color: white;\"><span style=\"color: white;\"> \n\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Accessible Contact Information<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n        \/* Visually hidden but accessible to screen readers *\/\n        .sr-only {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n        }\n        \n        \/* Centering container *\/\n        .center-container {\n            display: flex;\n            justify-content: center;\n            width: 100%;\n        }\n        \n        \/* Original styles preserved *\/\n        .p-vq51379 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}\n        .p-vq51379 .pagelayer-svg-top .pagelayer-shape-fill{fill:#227bc3}\n        .p-vq51379 .pagelayer-row-svg .pagelayer-svg-top{width:100%;height:100px}\n        .p-vq51379 .pagelayer-svg-bottom .pagelayer-shape-fill{fill:#e44993}\n        .p-vq51379 .pagelayer-row-svg .pagelayer-svg-bottom{width:100%;height:100px}\n        .p-vq51379{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}\n        @media (max-width: 780px) and (min-width: 501px){.p-vq51379{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}}\n        @media (max-width: 500px){.p-vq51379{margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}}\n        \n        .pagelayer-row-holder .p-wwt2393{width: 25%}\n        .p-wwt2393 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}\n        .p-wwt2393{padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px}\n        @media (max-width: 780px) and (min-width: 501px){.pagelayer-row-holder .p-wwt2393{width: 100%}}\n        @media (max-width: 500px){.pagelayer-row-holder .p-wwt2393{width: 100%}}\n        \n        .p-zot3037 .pagelayer-service-icon i{color:#04c09c;-webkit-transition: all 400ms; transition: all 400ms}\n        .p-zot3037 .pagelayer-service-icon{font-size:34px}\n        .p-zot3037 .pagelayer-service-heading{text-align:center;padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;font-family: ; font-size: 25px !important; font-style:  !important; font-weight:  !important; font-variant:  !important; text-decoration-line:  !important; text-decoration-style: Solid !important; line-height: em !important; text-transform:  !important; letter-spacing: px !important; word-spacing: px !important;-webkit-transition: all 400ms; transition: all 400ms}\n        .p-zot3037 .pagelayer-service-details{text-align:center}\n        .p-zot3037 .pagelayer-service-text{padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px}\n        .p-zot3037 .pagelayer-service-btn{-webkit-transition: all 400ms; transition: all 400ms}\n        .p-zot3037{font-variant: Small-caps !important}\n        @media (max-width: 780px) and (min-width: 501px){.p-zot3037 .pagelayer-service-icon{font-size:40px}}\n        @media (max-width: 500px){.p-zot3037{padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}}\n        \n        .p-m5f1907 .pagelayer-address *, .p-m5f1907 .pagelayer-address{color:#000000}\n        .p-m5f1907 .pagelayer-address-holder{justify-content: center}\n        .p-m5f1907{font-variant: Small-caps !important}\n        \n        .pagelayer-row-holder .p-qvb2095{width: 25%}\n        .p-qvb2095 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}\n        .p-qvb2095{padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px}\n        @media (max-width: 780px) and (min-width: 501px){.pagelayer-row-holder .p-qvb2095{width: 100%}}\n        @media (max-width: 500px){.pagelayer-row-holder .p-qvb2095{width: 100%}}\n        \n        .p-t0p2195 .pagelayer-service-icon i{color:#18b9fb;-webkit-transition: all 400ms; transition: all 400ms}\n        .p-t0p2195 .pagelayer-service-icon{font-size:34px}\n        .p-t0p2195 .pagelayer-service-heading{text-align:center;padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;font-family: ; font-size: 25px !important; font-style:  !important; font-weight:  !important; font-variant:  !important; text-decoration-line:  !important; text-decoration-style: Solid !important; line-height: em !important; text-transform:  !important; letter-spacing: px !important; word-spacing: px !important;-webkit-transition: all 400ms; transition: all 400ms}\n        .p-t0p2195 .pagelayer-service-details{text-align:center}\n        .p-t0p2195 .pagelayer-service-text{padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px}\n        .p-t0p2195 .pagelayer-service-btn{-webkit-transition: all 400ms; transition: all 400ms}\n        .p-t0p2195{padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;font-variant: Small-caps !important}\n        @media (max-width: 780px) and (min-width: 501px){.p-t0p2195 .pagelayer-service-icon{font-size:40px}}\n        @media (max-width: 500px){.p-t0p2195{padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}}\n        \n        .p-u4c5301 .pagelayer-phone *, .p-u4c5301 .pagelayer-phone{color:#000000;font-family: ; font-size: px !important; font-style:  !important; font-weight:  !important; font-variant: small-caps !important; text-decoration-line:  !important; text-decoration-style: solid !important; line-height: em !important; text-transform:  !important; letter-spacing: px !important; word-spacing: px !important}\n        .p-u4c5301 .pagelayer-phone-holder{justify-content: center}\n        .p-u4c5301{font-variant: Small-caps !important}\n        \n        .pagelayer-row-holder .p-aaf1006{width: 25%}\n        .p-aaf1006 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}\n        .p-aaf1006{padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px}\n        @media (max-width: 780px) and (min-width: 501px){.pagelayer-row-holder .p-aaf1006{width: 100%}}\n        @media (max-width: 500px){.pagelayer-row-holder .p-aaf1006{width: 100%}}\n        \n        .p-gvr7623 .pagelayer-service-icon i{color:rgba(32,35,50,0.64);-webkit-transition: all 400ms; transition: all 400ms}\n        .p-gvr7623 .pagelayer-service-icon{font-size:34px}\n        .p-gvr7623 .pagelayer-service-heading{text-align:center;padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;font-family: ; font-size: 25px !important; font-style:  !important; font-weight:  !important; font-variant:  !important; text-decoration-line:  !important; text-decoration-style: Solid !important; line-height: em !important; text-transform:  !important; letter-spacing: px !important; word-spacing: px !important;-webkit-transition: all 400ms; transition: all 400ms}\n        .p-gvr7623 .pagelayer-service-details{text-align:center}\n        .p-gvr7623 .pagelayer-service-text{padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px}\n        .p-gvr7623 .pagelayer-service-btn{-webkit-transition: all 400ms; transition: all 400ms}\n        .p-gvr7623{font-family: Lustria !important}\n        @media (max-width: 780px) and (min-width: 501px){.p-gvr7623 .pagelayer-service-icon{font-size:40px}}\n        @media (max-width: 500px){.p-gvr7623{padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}}\n        \n        .p-qpc5091 .pagelayer-email *, .p-qpc5091 .pagelayer-email{color:#0a0a0b}\n        .p-qpc5091 .pagelayer-email-holder{justify-content: center}\n        .p-qpc5091{font-variant: Small-caps !important}\n        \n        \/* Minimal fix for icon alignment *\/\n        .pagelayer-service-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 50px;\n        }\n        \n        .p-zot3037 .pagelayer-service-icon {\n            margin-bottom: 5px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"center-container\">\n        <div pagelayer-id=\"vq51379\" class=\"p-vq51379 pagelayer-row pagelayer-row-stretch-full pagelayer-height-custom\" style=\"width: 773px; max-width: 100vw; left: 0; margin: 0 auto;\">\t\t\t\n            <div class=\"pagelayer-row-holder pagelayer-row pagelayer-auto pagelayer-width-auto\">\n                <div pagelayer-id=\"wwt2393\" class=\"p-wwt2393 pagelayer-col\">\n                    <div class=\"pagelayer-col-holder\">\n                        <div pagelayer-id=\"zot3037\" class=\"p-zot3037 pagelayer-iconbox\">\n                            <div class=\"pagelayer-service-container pagelayer-service-align-top pagelayer-service-vertical-{{service_vertical_alignment}}\">\n                                <div class=\"pagelayer-service-icon pagelayer-service-default\">\n                                    <i class=\"fas fa-map-marker-alt pagelayer-icon-{{service_icon_shape_type}} pagelayer-animation-{{anim_hover}}\" aria-hidden=\"true\"><\/i>\n                                <\/div>\n                                <div class=\"pagelayer-service-details\">\n                                    <div class=\"pagelayer-service-text\"><br><\/div>\n                                <\/div>\n                                <a href=\"https:\/\/maps.app.goo.gl\/eMyf1QZ1ejmAXgZo8\" class=\"pagelayer-ele-link pagelayer-box-link\">\n                                    <span class=\"sr-only\">Our location<\/span>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                        <div pagelayer-id=\"m5f1907\" class=\"p-m5f1907 pagelayer-address\">\n                            <div class=\"pagelayer-address-holder\">\n                                <span class=\"pagelayer-address-icon\"><i class=\"\"><\/i><\/span>\n                                <span class=\"pagelayer-address\">46 A El Khalifa El Maamoun St, Heliopolis , Cairo, Egypt.<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div pagelayer-id=\"qvb2095\" class=\"p-qvb2095 pagelayer-col\">\n                    <div class=\"pagelayer-col-holder\">\n                        <div pagelayer-id=\"t0p2195\" class=\"p-t0p2195 pagelayer-iconbox\">\n                            <div class=\"pagelayer-service-container pagelayer-service-align-top pagelayer-service-vertical-{{service_vertical_alignment}}\">\n                                <div class=\"pagelayer-service-icon pagelayer-service-default\">\n                                    <i class=\"fas fa-mobile-alt pagelayer-icon-{{service_icon_shape_type}} pagelayer-animation-{{anim_hover}}\" aria-hidden=\"true\"><\/i>\n                                <\/div>\n                                <div class=\"pagelayer-service-details\">\n                                    <div class=\"pagelayer-service-text\"><br><\/div>\n                                <\/div>\n                                <a href=\"tel:%20-%20+201122888838\" class=\"pagelayer-ele-link pagelayer-box-link\">\n                                    <span class=\"sr-only\">Call us<\/span>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                        <div pagelayer-id=\"u4c5301\" class=\"p-u4c5301 pagelayer-phone\">\n                            <div class=\"pagelayer-phone-holder\">\n                                <span class=\"pagelayer-phone-icon\"><i class=\"\"><\/i><\/span>\n                                <a href=\"tel:+201222109426\">\n                                    <span class=\"pagelayer-phone\">+201222109426<\/span>\n                                    <span class=\"sr-only\">Call us at +201222109426<\/span>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div pagelayer-id=\"aaf1006\" class=\"p-aaf1006 pagelayer-col\">\n                    <div class=\"pagelayer-col-holder\">\n                        <div pagelayer-id=\"gvr7623\" class=\"p-gvr7623 pagelayer-iconbox\">\n                            <div class=\"pagelayer-service-container pagelayer-service-align-top pagelayer-service-vertical-{{service_vertical_alignment}}\">\n                                <div class=\"pagelayer-service-icon pagelayer-service-default\">\n                                    <i class=\"fas fa-envelope pagelayer-icon-{{service_icon_shape_type}} pagelayer-animation-{{anim_hover}}\" aria-hidden=\"true\"><\/i>\n                                <\/div>\n                                <div class=\"pagelayer-service-details\">\n                                    <div class=\"pagelayer-service-text\"><br><\/div>\n                                <\/div>\n                                <a href=\"mailto:md@trusthouseholidays.com\" class=\"pagelayer-ele-link pagelayer-box-link\">\n                                    <span class=\"sr-only\">Email us<\/span>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                        <div pagelayer-id=\"qpc5091\" class=\"p-qpc5091 pagelayer-email\">\n                            <div class=\"pagelayer-email-holder\">\n                                <span class=\"pagelayer-email-icon\"><i class=\"\"><\/i><\/span>\n                                <a href=\"mailto:md@trusthouseholidays.com\">\n                                    <span class=\"pagelayer-email\">md@trusthouseholidays.com<\/span>\n                                    <span class=\"sr-only\">Email us at md@trusthouseholidays.com<\/span>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/body>\n<\/html>\n\n\n<h3><h7 style=\"color: #000000;\"><strong>&nbsp;Contact Us<\/strong><\/h3><p><span style=\"color: white;\"><span style=\"color: white;\"> <\/span><\/span><\/p><\/h6>\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","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":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":4,"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":10097,"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/pages\/25\/revisions\/10097"}],"wp:attachment":[{"href":"https:\/\/trusthouseholidays.co\/arabic\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}