{"id":581,"date":"2026-03-11T13:40:12","date_gmt":"2026-03-11T13:40:12","guid":{"rendered":"https:\/\/moroccotravel.ai\/?page_id=581"},"modified":"2026-03-11T23:58:10","modified_gmt":"2026-03-11T23:58:10","slug":"home","status":"publish","type":"page","link":"https:\/\/moroccotravel.ai\/pt\/","title":{"rendered":"Home"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Morocco Travel - Sahara & Atlas Tours<\/title>\r\n \r\n <!-- Fonts & Icons -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n \r\n \/* ===== PROFESSIONAL TRAVEL SLIDER - TALLER ON MOBILE ===== *\/\r\n .mt-slider {\r\n position: relative;\r\n width: 100%;\r\n height: 100dvh; \/* Dynamic viewport height *\/\r\n max-height: 900px; \/* Slightly taller cap on large screens *\/\r\n min-height: 600px; \/* Taller minimum *\/\r\n background: #0a0a0a;\r\n overflow: hidden;\r\n }\r\n \r\n \/* \ud83d\udfe2 MOBILE OPTIMIZATION: TALLER HEIGHT ON PHONES *\/\r\n @media (max-width: 600px) {\r\n .mt-slider {\r\n min-height: 500px !important; \/* Significantly taller *\/\r\n max-height: 550px !important; \/* Taller max height *\/\r\n height: 70vh !important; \/* Use more viewport height *\/\r\n }\r\n }\r\n \r\n \/* Tall for medium phones *\/\r\n @media (max-width: 480px) {\r\n .mt-slider {\r\n min-height: 460px !important;\r\n max-height: 500px !important;\r\n height: 75vh !important;\r\n }\r\n }\r\n \r\n \/* Tall for small devices *\/\r\n @media (max-width: 380px) {\r\n .mt-slider {\r\n min-height: 420px !important;\r\n max-height: 460px !important;\r\n height: 80vh !important;\r\n }\r\n }\r\n \r\n \/* Slides Container *\/\r\n .mt-slider__slides {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n \r\n \/* Individual Slide *\/\r\n .mt-slider__slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1.2s ease;\r\n z-index: 1;\r\n }\r\n \r\n .mt-slider__slide.active {\r\n opacity: 1;\r\n visibility: visible;\r\n z-index: 2;\r\n }\r\n \r\n \/* Slide Background Image *\/\r\n .mt-slider__image {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center 30%;\r\n background-repeat: no-repeat;\r\n transform: scale(1.1);\r\n transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n filter: brightness(0.75) saturate(1.1);\r\n }\r\n \r\n .mt-slider__slide.active .mt-slider__image {\r\n transform: scale(1);\r\n }\r\n \r\n \/* Dark Overlay *\/\r\n .mt-slider__overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 100%);\r\n z-index: 1;\r\n }\r\n \r\n \/* Animated Pattern *\/\r\n .mt-slider__pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 30%);\r\n opacity: 0.3;\r\n z-index: 1;\r\n animation: patternMove 20s infinite alternate;\r\n }\r\n \r\n @keyframes patternMove {\r\n 0% { transform: scale(1) translate(0, 0); }\r\n 100% { transform: scale(1.1) translate(-2%, -2%); }\r\n }\r\n \r\n \/* Content Container *\/\r\n .mt-slider__content {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n color: white;\r\n }\r\n \r\n \/* Text Content - Mobile optimized for taller slider *\/\r\n .mt-slider__text {\r\n max-width: 700px;\r\n width: 100%;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;\r\n }\r\n \r\n .mt-slider__slide.active .mt-slider__text {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .mt-slider__subtitle {\r\n display: inline-block;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.95);\r\n background: rgba(208,146,61,0.25);\r\n backdrop-filter: blur(5px);\r\n padding: 6px 16px;\r\n border-radius: 40px;\r\n margin-bottom: 20px;\r\n border: 1px solid rgba(208,146,61,0.4);\r\n }\r\n \r\n \/* Title with good size for taller slider *\/\r\n .mt-slider__title {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(32px, 9vw, 70px);\r\n font-weight: 800;\r\n line-height: 1.1;\r\n margin-bottom: 18px;\r\n color: white;\r\n text-shadow: 0 2px 20px rgba(0,0,0,0.3);\r\n word-break: break-word;\r\n }\r\n \r\n @media (max-width: 600px) {\r\n .mt-slider__title {\r\n margin-bottom: 12px;\r\n font-size: clamp(28px, 8vw, 38px);\r\n }\r\n .mt-slider__subtitle {\r\n margin-bottom: 14px;\r\n padding: 5px 14px;\r\n font-size: 12px;\r\n }\r\n }\r\n \r\n .mt-slider__title span {\r\n color: #d0923d;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n \r\n .mt-slider__title span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 5px;\r\n left: 0;\r\n width: 100%;\r\n height: 10px;\r\n background: rgba(208,146,61,0.3);\r\n z-index: -1;\r\n border-radius: 10px;\r\n }\r\n \r\n \/* Description with comfortable spacing *\/\r\n .mt-slider__description {\r\n font-size: clamp(15px, 4vw, 18px);\r\n line-height: 1.6;\r\n margin-bottom: 28px;\r\n color: rgba(255,255,255,0.95);\r\n max-width: 600px;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n }\r\n \r\n @media (max-width: 600px) {\r\n .mt-slider__description {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin-bottom: 22px;\r\n }\r\n }\r\n \r\n \/* CTA Buttons *\/\r\n .mt-slider__buttons {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n width: 100%;\r\n max-width: 400px;\r\n }\r\n \r\n @media (min-width: 500px) {\r\n .mt-slider__buttons {\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n }\r\n \r\n \/* Buttons with good size *\/\r\n .mt-slider__btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 14px 24px;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n border: none;\r\n cursor: pointer;\r\n width: 100%;\r\n }\r\n \r\n @media (max-width: 600px) {\r\n .mt-slider__btn {\r\n padding: 12px 20px;\r\n font-size: 14px;\r\n gap: 8px;\r\n }\r\n }\r\n \r\n @media (min-width: 500px) {\r\n .mt-slider__btn {\r\n width: auto;\r\n min-width: 160px;\r\n }\r\n }\r\n \r\n .mt-slider__btn--primary {\r\n background: #d0923d;\r\n color: white;\r\n box-shadow: 0 10px 25px rgba(208,146,61,0.3);\r\n }\r\n \r\n .mt-slider__btn--primary:hover {\r\n background: #b37a34;\r\n transform: translateY(-2px);\r\n box-shadow: 0 15px 35px rgba(208,146,61,0.4);\r\n }\r\n \r\n .mt-slider__btn--secondary {\r\n background: rgba(255,255,255,0.15);\r\n backdrop-filter: blur(5px);\r\n color: white;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n }\r\n \r\n .mt-slider__btn--secondary:hover {\r\n background: rgba(255,255,255,0.25);\r\n transform: translateY(-2px);\r\n }\r\n \r\n .mt-slider__btn i {\r\n font-size: 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .mt-slider__btn:hover i {\r\n transform: translateX(5px);\r\n }\r\n \r\n \/* Navigation Arrows - HIDDEN ON MOBILE *\/\r\n .mt-slider__arrow {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 44px;\r\n height: 44px;\r\n background: rgba(255,255,255,0.2);\r\n backdrop-filter: blur(5px);\r\n border: 1px solid rgba(255,255,255,0.3);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-size: 20px;\r\n cursor: pointer;\r\n z-index: 10;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n border: none;\r\n }\r\n \r\n .mt-slider__arrow:hover {\r\n background: #d0923d;\r\n transform: translateY(-50%) scale(1.1);\r\n }\r\n \r\n .mt-slider__arrow--prev {\r\n left: 12px;\r\n }\r\n \r\n .mt-slider__arrow--next {\r\n right: 12px;\r\n }\r\n \r\n \/* Hide arrows on mobile devices *\/\r\n @media (max-width: 768px) {\r\n .mt-slider__arrow {\r\n display: none;\r\n }\r\n }\r\n \r\n @media (min-width: 769px) {\r\n .mt-slider__arrow {\r\n width: 54px;\r\n height: 54px;\r\n font-size: 24px;\r\n }\r\n .mt-slider__arrow--prev {\r\n left: 25px;\r\n }\r\n .mt-slider__arrow--next {\r\n right: 25px;\r\n }\r\n }\r\n \r\n \/* Pagination Dots - well positioned for taller slider *\/\r\n .mt-slider__pagination {\r\n position: absolute;\r\n bottom: 25px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 10px;\r\n z-index: 10;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n padding: 0 10px;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .mt-slider__pagination {\r\n bottom: 35px;\r\n gap: 15px;\r\n }\r\n }\r\n \r\n .mt-slider__dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.4);\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n \r\n .mt-slider__dot:hover {\r\n background: rgba(255,255,255,0.8);\r\n transform: scale(1.2);\r\n }\r\n \r\n .mt-slider__dot.active {\r\n width: 30px;\r\n border-radius: 20px;\r\n background: #d0923d;\r\n border-color: #d0923d;\r\n box-shadow: 0 0 15px rgba(208,146,61,0.5);\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .mt-slider__dot {\r\n width: 12px;\r\n height: 12px;\r\n }\r\n .mt-slider__dot.active {\r\n width: 40px;\r\n }\r\n }\r\n \r\n \/* Progress Bar *\/\r\n .mt-slider__progress {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0%;\r\n height: 3px;\r\n background: #d0923d;\r\n z-index: 20;\r\n transition: width 5s linear;\r\n box-shadow: 0 0 15px rgba(208,146,61,0.5);\r\n }\r\n \r\n \/* Scroll Indicator - desktop only *\/\r\n .mt-slider__scroll {\r\n display: none;\r\n }\r\n \r\n @media (min-width: 900px) {\r\n .mt-slider__scroll {\r\n display: flex;\r\n position: absolute;\r\n bottom: 40px;\r\n right: 40px;\r\n z-index: 10;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n color: white;\r\n font-size: 12px;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n opacity: 0.7;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .mt-slider__scroll:hover {\r\n opacity: 1;\r\n }\r\n \r\n .mt-slider__scroll-line {\r\n width: 1px;\r\n height: 60px;\r\n background: linear-gradient(to bottom, white, transparent);\r\n animation: scrollLine 2s infinite;\r\n }\r\n }\r\n \r\n @keyframes scrollLine {\r\n 0% { transform: scaleY(0.3); opacity: 0.3; }\r\n 50% { transform: scaleY(1); opacity: 1; }\r\n 100% { transform: scaleY(0.3); opacity: 0.3; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ===== PROFESSIONAL TRAVEL SLIDER - TALLER ON MOBILE ===== -->\r\n <section class=\"mt-slider\" id=\"mtSlider\">\r\n \r\n <!-- Slides Container (3 slides) -->\r\n <div class=\"mt-slider__slides\">\r\n \r\n <!-- Slide 1: Morocco landscape -->\r\n <div class=\"mt-slider__slide active\" data-index=\"0\">\r\n <div class=\"mt-slider__image\" style=\"background-image: url('https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/morocco-1188581_1920.webp'); background-position: center 30%;\"><\/div>\r\n <div class=\"mt-slider__overlay\"><\/div>\r\n <div class=\"mt-slider__pattern\"><\/div>\r\n \r\n <div class=\"mt-slider__content\">\r\n <div class=\"mt-slider__text\">\r\n <span class=\"mt-slider__subtitle\">Morocco Travel<\/span>\r\n <h1 class=\"mt-slider__title\">Discover <span>Morocco<\/span><\/h1>\r\n <p class=\"mt-slider__description\">Authentic Morocco day trips from Sahara to imperial cities with expert local guides.<\/p>\r\n <div class=\"mt-slider__buttons\">\r\n <a href=\"#\" class=\"mt-slider__btn mt-slider__btn--primary\">\r\n Explore Tours <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"mt-slider__btn mt-slider__btn--secondary\">\r\n Contact Us <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Slide 2: 14 days tour from Marrakech -->\r\n <div class=\"mt-slider__slide\" data-index=\"1\">\r\n <div class=\"mt-slider__image\" style=\"background-image: url('https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/14-days-tour-from-Marrakech.webp'); background-position: center 30%;\"><\/div>\r\n <div class=\"mt-slider__overlay\"><\/div>\r\n <div class=\"mt-slider__pattern\"><\/div>\r\n \r\n <div class=\"mt-slider__content\">\r\n <div class=\"mt-slider__text\">\r\n <span class=\"mt-slider__subtitle\">Visit Morocco<\/span>\r\n <h1 class=\"mt-slider__title\">Marrakech <span>to Sahara<\/span><\/h1>\r\n <p class=\"mt-slider__description\">14-day journey: imperial cities, desert camps, and Berber villages.<\/p>\r\n <div class=\"mt-slider__buttons\">\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/contact\/\" class=\"mt-slider__btn mt-slider__btn--primary\">\r\n Explore Tours <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/explore-morocco-tours-2026\/\" class=\"mt-slider__btn mt-slider__btn--secondary\">\r\n Contact Us <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Slide 3: Camel team in desert -->\r\n <div class=\"mt-slider__slide\" data-index=\"2\">\r\n <div class=\"mt-slider__image\" style=\"background-image: url('https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/camel-team-in-desert-2026-01-07-06-57-11-utc-scaled.jpg'); background-position: center 30%;\"><\/div>\r\n <div class=\"mt-slider__overlay\"><\/div>\r\n <div class=\"mt-slider__pattern\"><\/div>\r\n \r\n <div class=\"mt-slider__content\">\r\n <div class=\"mt-slider__text\">\r\n <span class=\"mt-slider__subtitle\">Morocco Experience<\/span>\r\n <h1 class=\"mt-slider__title\">Sahara <span>Desert<\/span><\/h1>\r\n <p class=\"mt-slider__description\">Camel treks, luxury camps, and unforgettable sunsets over the dunes.<\/p>\r\n <div class=\"mt-slider__buttons\">\r\n <a href=\"#\" class=\"mt-slider__btn mt-slider__btn--primary\">\r\n Explore Tours <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"mt-slider__btn mt-slider__btn--secondary\">\r\n Contact Us <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <!-- Navigation Arrows - hidden on mobile -->\r\n <button class=\"mt-slider__arrow mt-slider__arrow--prev\" aria-label=\"Previous slide\">\r\n <i class=\"fas fa-chevron-left\"><\/i>\r\n <\/button>\r\n <button class=\"mt-slider__arrow mt-slider__arrow--next\" aria-label=\"Next slide\">\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/button>\r\n \r\n <!-- Pagination Dots (3 dots) -->\r\n <div class=\"mt-slider__pagination\">\r\n <span class=\"mt-slider__dot active\" data-index=\"0\"><\/span>\r\n <span class=\"mt-slider__dot\" data-index=\"1\"><\/span>\r\n <span class=\"mt-slider__dot\" data-index=\"2\"><\/span>\r\n <\/div>\r\n \r\n <!-- Progress Bar -->\r\n <div class=\"mt-slider__progress\" id=\"sliderProgress\"><\/div>\r\n \r\n <!-- Scroll Indicator (desktop only) -->\r\n <div class=\"mt-slider__scroll\">\r\n <span>Scroll<\/span>\r\n <div class=\"mt-slider__scroll-line\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Slider JavaScript (unchanged) -->\r\n <script>\r\n (function() {\r\n const slider = document.getElementById('mtSlider');\r\n const slides = document.querySelectorAll('.mt-slider__slide');\r\n const dots = document.querySelectorAll('.mt-slider__dot');\r\n const prevBtn = document.querySelector('.mt-slider__arrow--prev');\r\n const nextBtn = document.querySelector('.mt-slider__arrow--next');\r\n const progressBar = document.getElementById('sliderProgress');\r\n \r\n let currentIndex = 0;\r\n const totalSlides = slides.length;\r\n let slideInterval;\r\n let progressInterval;\r\n let isTransitioning = false;\r\n \r\n const AUTO_ADVANCE_TIME = 5000;\r\n \r\n function initSlider() {\r\n updateActiveSlide(currentIndex);\r\n startAutoAdvance();\r\n startProgressBar();\r\n }\r\n \r\n function updateActiveSlide(index) {\r\n if (isTransitioning) return;\r\n isTransitioning = true;\r\n \r\n slides.forEach(slide => slide.classList.remove('active'));\r\n dots.forEach(dot => dot.classList.remove('active'));\r\n \r\n slides[index].classList.add('active');\r\n dots[index].classList.add('active');\r\n \r\n currentIndex = index;\r\n resetProgressBar();\r\n \r\n setTimeout(() => {\r\n isTransitioning = false;\r\n }, 1200);\r\n }\r\n \r\n function nextSlide() {\r\n const nextIndex = (currentIndex + 1) % totalSlides;\r\n updateActiveSlide(nextIndex);\r\n }\r\n \r\n function prevSlide() {\r\n const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;\r\n updateActiveSlide(prevIndex);\r\n }\r\n \r\n function startAutoAdvance() {\r\n if (slideInterval) clearInterval(slideInterval);\r\n slideInterval = setInterval(nextSlide, AUTO_ADVANCE_TIME);\r\n }\r\n \r\n function resetAutoAdvance() {\r\n clearInterval(slideInterval);\r\n startAutoAdvance();\r\n }\r\n \r\n function startProgressBar() {\r\n if (progressInterval) clearInterval(progressInterval);\r\n progressBar.style.width = '0%';\r\n \r\n let width = 0;\r\n const step = 100 \/ (AUTO_ADVANCE_TIME \/ 100);\r\n \r\n progressInterval = setInterval(() => {\r\n width += step;\r\n if (width <= 100) {\r\n progressBar.style.width = width + '%';\r\n } else {\r\n progressBar.style.width = '100%';\r\n }\r\n }, 100);\r\n }\r\n \r\n function resetProgressBar() {\r\n clearInterval(progressInterval);\r\n progressBar.style.width = '0%';\r\n startProgressBar();\r\n }\r\n \r\n if (prevBtn) {\r\n prevBtn.addEventListener('click', () => {\r\n prevSlide();\r\n resetAutoAdvance();\r\n });\r\n }\r\n \r\n if (nextBtn) {\r\n nextBtn.addEventListener('click', () => {\r\n nextSlide();\r\n resetAutoAdvance();\r\n });\r\n }\r\n \r\n dots.forEach((dot, index) => {\r\n dot.addEventListener('click', () => {\r\n if (index !== currentIndex) {\r\n updateActiveSlide(index);\r\n resetAutoAdvance();\r\n }\r\n });\r\n });\r\n \r\n slider.addEventListener('mouseenter', () => {\r\n clearInterval(slideInterval);\r\n clearInterval(progressInterval);\r\n });\r\n \r\n slider.addEventListener('mouseleave', () => {\r\n startAutoAdvance();\r\n const currentWidth = parseFloat(progressBar.style.width) || 0;\r\n clearInterval(progressInterval);\r\n \r\n progressInterval = setInterval(() => {\r\n let width = parseFloat(progressBar.style.width) || 0;\r\n width += 100 \/ (AUTO_ADVANCE_TIME \/ 100);\r\n if (width <= 100) {\r\n progressBar.style.width = width + '%';\r\n }\r\n }, 100);\r\n });\r\n \r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowLeft') {\r\n prevSlide();\r\n resetAutoAdvance();\r\n } else if (e.key === 'ArrowRight') {\r\n nextSlide();\r\n resetAutoAdvance();\r\n }\r\n });\r\n \r\n let touchStartX = 0;\r\n let touchEndX = 0;\r\n \r\n slider.addEventListener('touchstart', (e) => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, { passive: true });\r\n \r\n slider.addEventListener('touchend', (e) => {\r\n touchEndX = e.changedTouches[0].screenX;\r\n const swipeThreshold = 50;\r\n if (touchEndX < touchStartX - swipeThreshold) {\r\n nextSlide();\r\n resetAutoAdvance();\r\n } else if (touchEndX > touchStartX + swipeThreshold) {\r\n prevSlide();\r\n resetAutoAdvance();\r\n }\r\n }, { passive: true });\r\n \r\n initSlider();\r\n })();\r\n <\/script>\r\n \r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d464ce elementor-widget elementor-widget-html\" data-id=\"5d464ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\"\/>\r\n <title>Morocco Travel - Tours, Activities & Trekking<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* PROFESSIONAL BANNERS - ONE ITEM PER LINE ON MOBILE *\/\r\n .mt-banners, .mt-banners * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n .mt-banners {\r\n --ink: #131a2a;\r\n --muted: #4b5563;\r\n --card: #ffffff;\r\n --border: rgba(17,24,39,.08);\r\n \r\n \/* Your golden brown color scheme *\/\r\n --primary: #d0923d;\r\n --primary-dark: #b37a34;\r\n --primary-light: #e0aa60;\r\n --primary-bg: rgba(208,146,61,0.08);\r\n\r\n width: 100%;\r\n background: #ffffff;\r\n padding: 40px 0;\r\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .mt-container {\r\n max-width: 1220px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n\r\n \/* DESKTOP GRID - 3 COLUMNS, NO SHADOW *\/\r\n .mt-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* PROFESSIONAL CARD - CLEAN, NO SHADOW *\/\r\n .mt-card {\r\n position: relative;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n min-height: 280px;\r\n transition: transform 0.2s ease;\r\n }\r\n \r\n .mt-card:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .mt-card__bg {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));\r\n z-index: 0;\r\n }\r\n\r\n .mt-card__pattern {\r\n position: absolute; inset: -25% -15%;\r\n background: radial-gradient(circle at 10px 10px, rgba(208,146,61,0.1) 2px, transparent 2.6px);\r\n background-size: 34px 34px;\r\n opacity: 0.6;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .mt-card__image {\r\n position: absolute;\r\n right: -20px;\r\n bottom: -20px;\r\n width: 48%;\r\n height: 100%;\r\n z-index: 0;\r\n opacity: 0.95;\r\n }\r\n \r\n .mt-card__image img {\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);\r\n }\r\n \r\n .mt-card__image::after {\r\n content: \"\";\r\n position: absolute; inset: 0;\r\n background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 60%);\r\n }\r\n\r\n .mt-card__content {\r\n position: relative;\r\n z-index: 2;\r\n padding: 28px 24px;\r\n width: 58%;\r\n }\r\n\r\n .mt-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 6px 12px;\r\n border-radius: 40px;\r\n background: var(--primary-bg);\r\n border: 1px solid rgba(208,146,61,0.2);\r\n font-weight: 700;\r\n font-size: 11px;\r\n letter-spacing: 0.3px;\r\n text-transform: uppercase;\r\n color: var(--ink);\r\n margin-bottom: 14px;\r\n }\r\n \r\n .mt-badge .dot {\r\n width: 8px; height: 8px;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n }\r\n\r\n .mt-title {\r\n font-family: \"Playfair Display\", serif;\r\n font-weight: 800;\r\n font-size: 24px;\r\n line-height: 1.2;\r\n color: var(--ink);\r\n margin-bottom: 8px;\r\n }\r\n \r\n .mt-title strong { color: var(--primary); font-weight: 900; }\r\n\r\n .mt-desc {\r\n color: var(--muted);\r\n font-weight: 500;\r\n font-size: 13.5px;\r\n line-height: 1.5;\r\n margin-bottom: 18px;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n max-width: 90%;\r\n }\r\n\r\n \/* OPTIMIZED BUTTON - CLEANER DESIGN *\/\r\n .mt-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 10px 20px;\r\n border-radius: 40px;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 13px;\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 4px 12px rgba(208,146,61,0.2);\r\n }\r\n \r\n .mt-btn:hover {\r\n background: var(--primary-dark);\r\n transform: translateY(-1px);\r\n box-shadow: 0 6px 16px rgba(208,146,61,0.3);\r\n }\r\n \r\n .mt-btn svg { \r\n width: 14px; \r\n height: 14px; \r\n stroke: white; \r\n stroke-width: 2; \r\n }\r\n\r\n \/* ===== MOBILE CAROUSEL - ONE ITEM PER LINE ===== *\/\r\n @media (max-width: 768px) {\r\n .mt-container {\r\n padding: 0;\r\n max-width: 100%;\r\n overflow: hidden;\r\n }\r\n \r\n .mt-grid {\r\n display: flex;\r\n overflow-x: auto;\r\n scroll-snap-type: x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n gap: 0;\r\n padding: 0 16px 20px 16px;\r\n scrollbar-width: none; \/* Firefox *\/\r\n }\r\n \r\n .mt-grid::-webkit-scrollbar {\r\n display: none; \/* Chrome\/Safari *\/\r\n }\r\n \r\n \/* ONE ITEM PER LINE - takes almost full width *\/\r\n .mt-card {\r\n flex: 0 0 calc(100% - 32px); \/* Full width minus padding *\/\r\n scroll-snap-align: start;\r\n margin-right: 16px;\r\n min-height: 260px;\r\n border-radius: 24px;\r\n }\r\n \r\n .mt-card:last-child {\r\n margin-right: 0;\r\n }\r\n \r\n .mt-card__content {\r\n width: 65%;\r\n padding: 24px 20px;\r\n }\r\n \r\n .mt-card__image {\r\n width: 45%;\r\n right: -15px;\r\n }\r\n \r\n .mt-desc {\r\n max-width: 95%;\r\n font-size: 13px;\r\n }\r\n \r\n \/* PAGINATION DOTS - 3 DOTS CENTERED *\/\r\n .mt-carousel-pagination {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 12px;\r\n padding-bottom: 8px;\r\n }\r\n \r\n .mt-carousel-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #d1d5db;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n \r\n .mt-carousel-dot.active {\r\n background: var(--primary);\r\n width: 24px;\r\n border-radius: 12px;\r\n }\r\n \r\n \/* Optional: make dots clickable *\/\r\n .mt-carousel-dot {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n @media (min-width: 769px) {\r\n .mt-carousel-pagination { display: none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- ===== PROFESSIONAL BANNERS: TOURS | ACTIVITIES | TREKKING ===== -->\r\n <section class=\"mt-banners\">\r\n <div class=\"mt-container\">\r\n \r\n <!-- Grid\/Carousel Container -->\r\n <div class=\"mt-grid\" id=\"mtCarousel\">\r\n \r\n <!-- CARD 1: TOURS (using Jemaa el-Fnaa) -->\r\n <div class=\"mt-card\">\r\n <div class=\"mt-card__bg\"><\/div>\r\n <div class=\"mt-card__pattern\" aria-hidden=\"true\"><\/div>\r\n \r\n <div class=\"mt-card__content\">\r\n <div class=\"mt-badge\"><span class=\"dot\"><\/span> Tours<\/div>\r\n <h3 class=\"mt-title\"><strong>Morocco<\/strong> Multi-Day<\/h3>\r\n <p class=\"mt-desc\">Imperial cities, Sahara deserts & authentic Berber culture.<\/p>\r\n <a class=\"mt-btn\" href=\"https:\/\/moroccotravel.ai\/pt\/explore-morocco-tours-2026\/\">\r\n Explore Now\r\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M5 12h14\"\/><path d=\"M13 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n \r\n <div class=\"mt-card__image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/jemaa-el-fnaa-square-illuminated-at-dusk-marrakes-2024-11-03-05-40-49-utc-scaled.jpg\" alt=\"Morocco tours\">\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- CARD 2: ACTIVITIES (previously Day Trips) - updated label and link -->\r\n <div class=\"mt-card\">\r\n <div class=\"mt-card__bg\"><\/div>\r\n <div class=\"mt-card__pattern\" aria-hidden=\"true\"><\/div>\r\n \r\n <div class=\"mt-card__content\">\r\n <div class=\"mt-badge\"><span class=\"dot\"><\/span> Activities<\/div>\r\n <h3 class=\"mt-title\"><strong>Memorable<\/strong> Experiences<\/h3>\r\n <p class=\"mt-desc\">Atlas Mountains, cooking classes, hot air balloons & more.<\/p>\r\n <!-- UPDATED LINK FOR ACTIVITIES -->\r\n <a class=\"mt-btn\" href=\"https:\/\/moroccotravel.ai\/pt\/explore-morocco-activities-2026\/\">\r\n Explore Now\r\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M5 12h14\"\/><path d=\"M13 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n \r\n <div class=\"mt-card__image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/One-Hour-Merzouga-Buggy-Tour-2.webp\" alt=\"Morocco activities\">\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- CARD 3: TREKKING (unchanged, with original link) -->\r\n <div class=\"mt-card\">\r\n <div class=\"mt-card__bg\"><\/div>\r\n <div class=\"mt-card__pattern\" aria-hidden=\"true\"><\/div>\r\n \r\n <div class=\"mt-card__content\">\r\n <div class=\"mt-badge\"><span class=\"dot\"><\/span> Trekking<\/div>\r\n <h3 class=\"mt-title\"><strong>Mountain<\/strong> Adventures<\/h3>\r\n <p class=\"mt-desc\">High Atlas summits, valleys & guided treks.<\/p>\r\n <a class=\"mt-btn\" href=\"https:\/\/moroccotravel.ai\/pt\/explore-morocco-treakking-2026\/\">\r\n Explore Now\r\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M5 12h14\"\/><path d=\"M13 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n \r\n <div class=\"mt-card__image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/10-Days-tour-from-Marrakech-Day-5-Merzouga-1-700x400-1.webp\" alt=\"Morocco trekking\">\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <!-- Mobile Carousel Pagination - 3 DOTS -->\r\n <div class=\"mt-carousel-pagination\" id=\"carouselPagination\">\r\n <span class=\"mt-carousel-dot active\" data-index=\"0\"><\/span>\r\n <span class=\"mt-carousel-dot\" data-index=\"1\"><\/span>\r\n <span class=\"mt-carousel-dot\" data-index=\"2\"><\/span>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n <!-- JavaScript for Carousel Dots -->\r\n <script>\r\n (function() {\r\n const carousel = document.getElementById('mtCarousel');\r\n const dots = document.querySelectorAll('.mt-carousel-dot');\r\n \r\n if (carousel && dots.length) {\r\n \/\/ Update active dot on scroll\r\n carousel.addEventListener('scroll', function() {\r\n const scrollPos = carousel.scrollLeft;\r\n const card = carousel.querySelector('.mt-card');\r\n if (!card) return;\r\n \r\n const cardWidth = card.offsetWidth + 16; \/\/ width + margin\r\n const activeIndex = Math.round(scrollPos \/ cardWidth);\r\n \r\n dots.forEach((dot, index) => {\r\n if (index === activeIndex && index < 3) {\r\n dot.classList.add('active');\r\n } else {\r\n dot.classList.remove('active');\r\n }\r\n });\r\n });\r\n \r\n \/\/ Make dots clickable - scroll to corresponding card\r\n dots.forEach((dot, index) => {\r\n dot.addEventListener('click', function() {\r\n const card = carousel.querySelector('.mt-card');\r\n if (!card) return;\r\n \r\n const cardWidth = card.offsetWidth + 16;\r\n carousel.scrollTo({\r\n left: cardWidth * index,\r\n behavior: 'smooth'\r\n });\r\n \r\n \/\/ Update active state\r\n dots.forEach(d => d.classList.remove('active'));\r\n this.classList.add('active');\r\n });\r\n });\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4dd0dba e-con-full e-flex e-con e-parent\" data-id=\"4dd0dba\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1bb9b8 elementor-widget elementor-widget-html\" data-id=\"f1bb9b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Morocco Travel \u2013 Day Trips & Tours<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\"\/>\r\n<\/head>\r\n<body>\r\n<!-- \r\n FULLY ISOLATED SECTION \u2013 WORDPRESS PROOF \r\n Inline style on wrapper resets all inheritable properties.\r\n Image designs restored exactly as original code.\r\n-->\r\n<div style=\"all: initial; display: block;\"> <!-- resets font, color, background etc. for all children -->\r\n\r\n <style>\r\n \/* ===== LOCKED STYLES \u2013 NO THEME INFLUENCE ===== *\/\r\n \/* Target only elements inside the isolation wrapper *\/\r\n div[style*=\"all: initial\"] .tm-isolate *,\r\n div[style*=\"all: initial\"] .tm-isolate {\r\n all: revert; \/* revert inside our own components but with our explicit rules *\/\r\n }\r\n\r\n .tm-isolate {\r\n display: block;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;\r\n line-height: normal !important;\r\n color: #4b5563 !important; \/* base text color *\/\r\n }\r\n\r\n \/* force every possible text element to use our font stack *\/\r\n .tm-isolate,\r\n .tm-isolate div,\r\n .tm-isolate span,\r\n .tm-isolate p,\r\n .tm-isolate h1,\r\n .tm-isolate h2,\r\n .tm-isolate h3,\r\n .tm-isolate h4,\r\n .tm-isolate a,\r\n .tm-isolate li,\r\n .tm-isolate section,\r\n .tm-isolate article {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;\r\n }\r\n\r\n \/* COLOR SCHEMA \u2013 LOCKED *\/\r\n .tm-isolate {\r\n --primary: #d0923d !important;\r\n --primary-dark: #b37a34 !important;\r\n --dark: #111827 !important;\r\n --gray-dark: #4b5563 !important;\r\n --light: #f9fafb !important;\r\n --white: #ffffff !important;\r\n --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;\r\n --shadow2: 0 10px 25px rgba(208,146,61,.08) !important;\r\n --radius: 12px !important;\r\n --radiusBig: 120px !important;\r\n }\r\n\r\n \/* SECTION CONTAINER *\/\r\n .tm-isolate .tm-section {\r\n padding: clamp(28px, 4vw, 60px) 18px !important;\r\n background: #ffffff !important;\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n box-sizing: border-box !important;\r\n }\r\n\r\n \/* GRID LAYOUT \u2013 LOCKED *\/\r\n .tm-isolate .tm-container {\r\n display: grid !important;\r\n grid-template-columns: 1.05fr 1fr !important;\r\n gap: clamp(24px, 4vw, 56px) !important;\r\n align-items: center !important;\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n }\r\n\r\n \/* LEFT COLLAGE - EXACT ORIGINAL DESIGN *\/\r\n .tm-isolate .tm-collage {\r\n position: relative !important;\r\n display: grid !important;\r\n grid-template-columns: 1fr 1fr !important;\r\n grid-template-rows: 1fr 1fr !important;\r\n gap: clamp(14px, 2vw, 22px) !important;\r\n min-height: clamp(360px, 42vw, 520px) !important;\r\n align-content: stretch !important;\r\n --badge-x: 50% !important;\r\n --badge-y: 50% !important;\r\n --badge-size: clamp(110px, 14vw, 150px) !important;\r\n }\r\n\r\n .tm-isolate .tm-img-box {\r\n position: relative !important;\r\n overflow: hidden !important;\r\n box-shadow: var(--shadow2) !important;\r\n background: #f2f2f2 !important;\r\n }\r\n\r\n .tm-isolate .tm-img-box img {\r\n width: 100% !important;\r\n height: 100% !important;\r\n object-fit: cover !important;\r\n display: block !important;\r\n }\r\n\r\n \/* EXACT ORIGINAL BORDER RADIUS VALUES *\/\r\n .tm-isolate .tm-img-1 {\r\n grid-column: 1 \/ 2 !important;\r\n grid-row: 1 \/ 2 !important;\r\n border-radius: var(--radiusBig) var(--radius) var(--radius) var(--radius) !important;\r\n }\r\n\r\n .tm-isolate .tm-img-3 {\r\n grid-column: 1 \/ 2 !important;\r\n grid-row: 2 \/ 3 !important;\r\n border-radius: var(--radius) var(--radius) var(--radius) var(--radiusBig) !important;\r\n }\r\n\r\n .tm-isolate .tm-img-2 {\r\n grid-column: 2 \/ 3 !important;\r\n grid-row: 1 \/ 3 !important;\r\n border-radius: var(--radius) !important;\r\n align-self: center !important;\r\n height: 86% !important;\r\n transform: translateY(2%) !important;\r\n z-index: 1 !important;\r\n }\r\n\r\n \/* ORANGE RING - EXACT ORIGINAL *\/\r\n .tm-isolate .tm-ring {\r\n position: absolute !important;\r\n width: clamp(140px, 18vw, 200px) !important;\r\n height: clamp(140px, 18vw, 200px) !important;\r\n border-radius: 999px !important;\r\n border: clamp(12px, 1.4vw, 18px) solid #d0923d !important;\r\n top: clamp(10px, 2vw, 18px) !important;\r\n left: 56% !important;\r\n transform: translateX(-10%) !important;\r\n z-index: 0 !important;\r\n opacity: 0.9 !important;\r\n }\r\n\r\n \/* EXPERIENCE BADGE - EXACT ORIGINAL *\/\r\n .tm-isolate .tm-exp-badge {\r\n position: absolute !important;\r\n width: var(--badge-size) !important;\r\n height: var(--badge-size) !important;\r\n border-radius: 999px !important;\r\n background: var(--dark) !important;\r\n color: var(--primary-light, #e0aa60) !important;\r\n display: grid !important;\r\n place-items: center !important;\r\n text-align: center !important;\r\n box-shadow: 0 18px 40px rgba(0,0,0,0.2) !important;\r\n border: 8px solid #ffffff !important;\r\n left: var(--badge-x) !important;\r\n top: var(--badge-y) !important;\r\n transform: translate(-50%, -50%) !important;\r\n z-index: 4 !important;\r\n }\r\n\r\n .tm-isolate .tm-exp-inner {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 6px !important;\r\n }\r\n\r\n .tm-isolate .tm-exp-badge .tm-num {\r\n font-weight: 900 !important;\r\n font-size: clamp(28px, 3.2vw, 42px) !important;\r\n line-height: 1 !important;\r\n margin: 0 !important;\r\n color: var(--primary) !important;\r\n }\r\n\r\n .tm-isolate .tm-exp-badge .tm-txt {\r\n font-weight: 900 !important;\r\n font-size: clamp(11px, 1.2vw, 14px) !important;\r\n line-height: 1.15 !important;\r\n margin: 0 !important;\r\n color: var(--primary-light, #e0aa60) !important;\r\n }\r\n\r\n \/* RIGHT CONTENT *\/\r\n .tm-isolate .tm-content {\r\n max-width: 560px !important;\r\n }\r\n\r\n .tm-isolate .tm-pill {\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 10px !important;\r\n padding: 8px 14px !important;\r\n border-radius: 999px !important;\r\n background: var(--light) !important;\r\n color: var(--dark) !important;\r\n font-weight: 900 !important;\r\n font-size: 13px !important;\r\n border: 1px solid var(--primary) !important;\r\n }\r\n\r\n .tm-isolate .tm-pill-ico {\r\n width: 26px !important;\r\n height: 26px !important;\r\n border-radius: 999px !important;\r\n background: #ffffff !important;\r\n border: 1px solid var(--primary) !important;\r\n display: grid !important;\r\n place-items: center !important;\r\n }\r\n\r\n .tm-isolate .tm-pill svg {\r\n width: 14px !important;\r\n height: 14px !important;\r\n stroke: var(--primary) !important;\r\n stroke-width: 2 !important;\r\n fill: none !important;\r\n }\r\n\r\n \/* MAIN HEADING \u2013 KEYWORDS LOCKED *\/\r\n .tm-isolate .tm-title {\r\n margin: 14px 0 12px !important;\r\n font-size: clamp(28px, 3.1vw, 44px) !important;\r\n line-height: 1.1 !important;\r\n letter-spacing: -0.2px !important;\r\n color: var(--dark) !important;\r\n font-weight: 800 !important;\r\n }\r\n\r\n .tm-isolate .tm-highlight {\r\n color: var(--primary) !important;\r\n }\r\n\r\n \/* DESCRIPTION \u2013 consistent color & font *\/\r\n .tm-isolate .tm-description {\r\n margin: 0 0 20px !important;\r\n color: var(--gray-dark) !important;\r\n line-height: 1.7 !important;\r\n font-size: 16px !important;\r\n max-width: 56ch !important;\r\n font-weight: 400 !important;\r\n }\r\n\r\n .tm-isolate .tm-description b {\r\n font-weight: 700 !important;\r\n color: var(--gray-dark) !important;\r\n }\r\n\r\n \/* FEATURE GRID \u2013 SINGLE COLUMN *\/\r\n .tm-isolate .tm-feature-grid {\r\n display: grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap: 18px !important;\r\n margin-top: 8px !important;\r\n }\r\n\r\n .tm-isolate .tm-feature {\r\n display: flex !important;\r\n gap: 14px !important;\r\n padding: 10px 0 !important;\r\n }\r\n\r\n .tm-isolate .tm-feature-icon {\r\n width: 52px !important;\r\n height: 52px !important;\r\n border-radius: 999px !important;\r\n background: var(--dark) !important;\r\n display: grid !important;\r\n place-items: center !important;\r\n box-shadow: 0 14px 30px rgba(0,0,0,0.14) !important;\r\n flex: 0 0 auto !important;\r\n border: 1px solid var(--primary) !important;\r\n }\r\n\r\n .tm-isolate .tm-feature-icon img {\r\n width: 24px !important;\r\n height: 24px !important;\r\n display: block !important;\r\n filter: brightness(0) saturate(100%) invert(53%) sepia(98%) saturate(1852%) hue-rotate(358deg) brightness(101%) contrast(101%) !important;\r\n }\r\n\r\n .tm-isolate .tm-feature h4 {\r\n margin: 2px 0 6px !important;\r\n font-size: 16px !important;\r\n line-height: 1.2 !important;\r\n color: var(--dark) !important;\r\n font-weight: 700 !important;\r\n }\r\n\r\n .tm-isolate .tm-feature p {\r\n margin: 0 !important;\r\n color: var(--primary) !important;\r\n font-size: 14px !important;\r\n line-height: 1.6 !important;\r\n font-weight: 700 !important;\r\n }\r\n\r\n \/* CTA BUTTON *\/\r\n .tm-isolate .tm-btn {\r\n margin-top: 24px !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 10px !important;\r\n padding: 12px 28px !important;\r\n border-radius: 8px !important;\r\n background: var(--primary) !important;\r\n color: var(--white) !important;\r\n font-weight: 800 !important;\r\n font-size: 16px !important;\r\n text-decoration: none !important;\r\n box-shadow: 0 4px 12px rgba(208,146,61,0.2) !important;\r\n border: none !important;\r\n transition: all 0.3s ease !important;\r\n }\r\n\r\n .tm-isolate .tm-btn:hover {\r\n background: var(--primary-dark) !important;\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 6px 15px rgba(208,146,61,0.3) !important;\r\n }\r\n\r\n .tm-isolate .tm-btn svg {\r\n width: 16px !important;\r\n height: 16px !important;\r\n stroke: var(--white) !important;\r\n stroke-width: 2 !important;\r\n fill: none !important;\r\n }\r\n\r\n \/* RESPONSIVE \u2013 LOCKED FOR MOBILE *\/\r\n @media (min-width: 981px) {\r\n .tm-isolate .tm-collage { min-height: 460px !important; }\r\n .tm-isolate .tm-img-2 { height: 78% !important; transform: translateY(6%) !important; }\r\n }\r\n\r\n @media (max-width: 980px) {\r\n .tm-isolate .tm-container {\r\n grid-template-columns: 1fr !important;\r\n }\r\n .tm-isolate .tm-content {\r\n max-width: 100% !important;\r\n }\r\n .tm-isolate .tm-collage {\r\n min-height: 420px !important;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .tm-isolate .tm-collage {\r\n min-height: 380px !important;\r\n --badge-size: 122px !important;\r\n }\r\n .tm-isolate .tm-img-2 {\r\n height: 82% !important;\r\n }\r\n .tm-isolate .tm-ring {\r\n left: 58% !important;\r\n top: 8px !important;\r\n }\r\n .tm-isolate .tm-exp-badge {\r\n border-width: 6px !important;\r\n }\r\n .tm-isolate .tm-exp-badge .tm-num {\r\n font-size: 36px !important;\r\n }\r\n .tm-isolate .tm-exp-badge .tm-txt {\r\n font-size: 13px !important;\r\n }\r\n \/* ensure heading doesn't overflow *\/\r\n .tm-isolate .tm-title {\r\n font-size: 32px !important;\r\n word-break: break-word !important;\r\n }\r\n }\r\n\r\n \/* force animate.css not to override *\/\r\n .tm-isolate .animate__animated {\r\n animation-duration: 1s !important;\r\n }\r\n <\/style>\r\n\r\n <!-- ALL CONTENT WRAPPED IN tm-isolate WITH LOCKED STYLES -->\r\n <div class=\"tm-isolate\">\r\n <div class=\"tm-section\">\r\n <div class=\"tm-container\">\r\n\r\n <!-- left collage - EXACT ORIGINAL DESIGN RESTORED -->\r\n <div class=\"tm-collage\">\r\n <div class=\"tm-ring animate__animated animate__fadeIn\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"tm-img-box tm-img-1 animate__animated animate__fadeInLeft\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/03\/Design-sans-titre-51.png\" alt=\"Morocco Travel - Cultural experience\" \/>\r\n <\/div>\r\n\r\n <div class=\"tm-img-box tm-img-2 animate__animated animate__fadeInRight\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/Sahara-tours-2025-08-05T193107.542.png\" alt=\"Morocco Travel - Sahara desert tour\" \/>\r\n <\/div>\r\n\r\n <div class=\"tm-img-box tm-img-3 animate__animated animate__fadeInLeft\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/belle-vue-sur-la-kasbah-ait-ben-haddou-ait-maroc-scaled.jpg\" alt=\"Morocco Travel - Ait Ben Haddou kasbah\" \/>\r\n <\/div>\r\n\r\n <div class=\"tm-exp-badge animate__animated animate__zoomIn\">\r\n <div class=\"tm-exp-inner\">\r\n <div class=\"tm-num\">10+<\/div>\r\n <div class=\"tm-txt\">Years of<br\/>Experience<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- right content -->\r\n <div class=\"tm-content\">\r\n <div class=\"tm-pill animate__animated animate__fadeIn\">\r\n <span class=\"tm-pill-ico\" aria-hidden=\"true\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M7 17h10\"><\/path>\r\n <path d=\"M6 17V9a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v8\"><\/path>\r\n <path d=\"M8 9h8\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n About Morocco Travel\r\n <\/div>\r\n\r\n <!-- MAIN HEADER: exactly as requested, optimized keywords -->\r\n <h2 class=\"tm-title animate__animated animate__fadeInRight\">\r\n <span class=\"tm-highlight\">Morocco Travel<\/span> \u2013 Your Gateway to<br\/><span class=\"tm-highlight\">Moroccan Day Trips & Tours<\/span>\r\n <\/h2>\r\n\r\n <p class=\"tm-description animate__animated animate__fadeInRight\">\r\n <b>Morocco Travel<\/b> specializes in crafting unforgettable <b>Morocco day trips<\/b> and immersive <b>Morocco tour day<\/b> experiences across the country. From thrilling <b>Sahara desert tours<\/b> to serene cultural walks through ancient medinas, we combine local expertise with modern convenience to bring you closer to the heart of every destination. Every <b>Morocco experience<\/b> is handcrafted with passion and authenticity.\r\n <\/p>\r\n\r\n <!-- two feature cards only -->\r\n <div class=\"tm-feature-grid animate__animated animate__fadeIn\">\r\n <div class=\"tm-feature\">\r\n <div class=\"tm-feature-icon\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='%23d0923d'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'\/%3E%3C\/svg%3E\" alt=\"\" \/>\r\n <\/div>\r\n <div>\r\n <h4>Tailored Excursions<\/h4>\r\n <p>Morocco Day Trip packages<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tm-feature\">\r\n <div class=\"tm-feature-icon\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='%23d0923d'%3E%3Cpath d='M14 6l-1-2H5v17h2v-7h5l1 2h7V6h-6zm3 8h-4l-1-2H7V6h5l1 2h5v6z'\/%3E%3C\/svg%3E\" alt=\"\" \/>\r\n <\/div>\r\n <div>\r\n <h4>Local Experts<\/h4>\r\n <p>Visit Morocco with guide<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CTA BUTTON -->\r\n <a class=\"tm-btn animate__animated animate__fadeInUp\" href=\"https:\/\/moroccotravel.ai\/pt\/contact\/\">\r\n Book Now\r\n <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M5 12h12\"><\/path>\r\n <path d=\"M13 6l6 6-6 6\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div> <!-- tm-container -->\r\n <\/div> <!-- tm-section -->\r\n <\/div> <!-- tm-isolate -->\r\n\r\n<\/div> <!-- isolation wrapper -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b9a50e1 e-con-full e-flex e-con e-parent\" data-id=\"b9a50e1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c938123 elementor-widget elementor-widget-html\" data-id=\"c938123\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Morocco Signature Tours \u00b7 exact titles<\/title>\r\n\r\n <!-- Fonts & Icons -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* === RESET & BASE === *\/\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: 'Inter', sans-serif; background: #fff; color: #1e293b; }\r\n\r\n \/* === UNIQUE PREFIX: \"tw-\" === *\/\r\n .tw-signature {\r\n --tw-gold: #d0923d; \/* golden brown *\/\r\n --tw-gold-dark: #b37a34;\r\n --tw-gold-light: #e0aa60;\r\n --tw-gold-bg: rgba(208,146,61,0.08);\r\n --tw-gold-bg-light: rgba(208,146,61,0.05);\r\n --tw-sand: #f8f4f0;\r\n --tw-stone: #e9e1d9;\r\n --tw-charcoal: #2c3e4f;\r\n --tw-slate: #4a5b6e;\r\n --tw-mist: #f0f2f5;\r\n --tw-card-bg: #ffffff;\r\n --tw-border-light: rgba(0,0,0,0.06);\r\n --tw-shadow: 0 20px 35px -8px rgba(0,0,0,0.07), 0 5px 12px -4px rgba(0,0,0,0.05);\r\n\r\n position: relative;\r\n background: linear-gradient(145deg, #ffffff 0%, var(--tw-sand) 100%);\r\n padding: 70px 0 90px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n\r\n \/* abstract background *\/\r\n .tw-signature::before {\r\n content: ''; position: absolute; top: -10%; right: -5%; width: 600px; height: 600px;\r\n background: radial-gradient(circle, rgba(208,146,61,0.03) 0%, transparent 70%);\r\n border-radius: 50%; z-index: 0;\r\n }\r\n .tw-signature::after {\r\n content: ''; position: absolute; bottom: -10%; left: -5%; width: 500px; height: 500px;\r\n background: radial-gradient(circle, rgba(44,62,79,0.03) 0%, transparent 70%);\r\n border-radius: 50%; z-index: 0;\r\n }\r\n\r\n .tw-container {\r\n position: relative; z-index: 2;\r\n max-width: 1280px; margin: 0 auto; padding: 0 30px;\r\n }\r\n\r\n \/* --- header --- *\/\r\n .tw-header {\r\n text-align: center; max-width: 800px; margin: 0 auto 50px;\r\n }\r\n .tw-subhead {\r\n display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 2px;\r\n text-transform: uppercase; color: var(--tw-gold); background: var(--tw-gold-bg);\r\n padding: 8px 18px; border-radius: 40px; margin-bottom: 20px;\r\n }\r\n .tw-title {\r\n font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 800; line-height: 1.1; color: var(--tw-charcoal); margin-bottom: 18px;\r\n }\r\n .tw-title span {\r\n color: var(--tw-gold); position: relative; display: inline-block;\r\n }\r\n .tw-title span::after {\r\n content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px;\r\n background: var(--tw-gold-bg); z-index: -1;\r\n }\r\n .tw-description {\r\n font-size: 17px; color: var(--tw-slate); font-weight: 400;\r\n max-width: 650px; margin: 0 auto; line-height: 1.7;\r\n }\r\n\r\n \/* --- grid (exactly 6 cards) --- *\/\r\n .tw-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;\r\n }\r\n @media (max-width: 1024px) { .tw-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 640px) {\r\n .tw-container { padding: 0 16px; }\r\n .tw-grid { grid-template-columns: 1fr; gap: 20px; }\r\n }\r\n\r\n \/* --- card (identical refined style) --- *\/\r\n .tw-card {\r\n background: var(--tw-card-bg); border-radius: 24px; overflow: hidden;\r\n box-shadow: var(--tw-shadow); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n text-decoration: none; color: inherit; display: block;\r\n border: 1px solid var(--tw-border-light); backdrop-filter: blur(2px);\r\n }\r\n .tw-card:hover { transform: translateY(-6px); box-shadow: 0 30px 45px -15px rgba(208,146,61,0.15); }\r\n\r\n .tw-card-image {\r\n position: relative; height: 260px; overflow: hidden; background: #f0f0f0;\r\n }\r\n .tw-card-image img {\r\n width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease;\r\n }\r\n .tw-card:hover .tw-card-image img { transform: scale(1.05); }\r\n\r\n .tw-day-badge {\r\n position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,0.9);\r\n backdrop-filter: blur(5px); border-radius: 60px; padding: 8px 16px;\r\n font-weight: 700; font-size: 14px; color: var(--tw-charcoal);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 6px;\r\n border: 1px solid rgba(255,255,255,0.5); z-index: 2;\r\n }\r\n .tw-day-badge i { color: var(--tw-gold); font-size: 14px; }\r\n\r\n .tw-card-content { padding: 22px 22px 24px; }\r\n .tw-card-title {\r\n font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700;\r\n line-height: 1.3; color: var(--tw-charcoal); margin-bottom: 12px;\r\n }\r\n .tw-card-title .tw-gold-highlight {\r\n color: var(--tw-gold); font-weight: 800;\r\n }\r\n\r\n .tw-features {\r\n display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;\r\n }\r\n .tw-feature-tag {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n background: var(--tw-gold-bg-light); padding: 6px 12px; border-radius: 40px;\r\n font-size: 12px; font-weight: 500; color: var(--tw-slate);\r\n border: 1px solid rgba(208,146,61,0.1);\r\n }\r\n .tw-feature-tag i { color: var(--tw-gold); font-size: 12px; }\r\n\r\n .tw-meta {\r\n display: flex; align-items: center; justify-content: space-between;\r\n margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.05);\r\n }\r\n .tw-rating { display: flex; align-items: center; gap: 8px; }\r\n .tw-stars { color: var(--tw-gold); font-size: 14px; letter-spacing: 2px; }\r\n .tw-rating-value { font-weight: 600; font-size: 14px; color: var(--tw-slate); }\r\n .tw-difficulty {\r\n font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 40px;\r\n text-transform: uppercase; letter-spacing: 0.3px;\r\n }\r\n .tw-difficulty.easy { background: rgba(208,146,61,0.1); color: var(--tw-gold-dark); }\r\n .tw-difficulty.moderate { background: rgba(208,146,61,0.15); color: var(--tw-gold-dark); }\r\n .tw-difficulty.challenging { background: rgba(208,146,61,0.2); color: var(--tw-gold-dark); }\r\n\r\n .tw-card-btn {\r\n display: flex; align-items: center; justify-content: center; gap: 12px;\r\n width: 100%; padding: 14px 0; background: transparent; border: 1.5px solid var(--tw-gold);\r\n border-radius: 60px; color: var(--tw-gold); font-weight: 700; font-size: 14px;\r\n transition: all 0.25s ease; cursor: pointer; text-decoration: none;\r\n }\r\n .tw-card-btn i { transition: transform 0.25s ease; font-size: 14px; }\r\n .tw-card:hover .tw-card-btn { background: var(--tw-gold); color: white; }\r\n .tw-card:hover .tw-card-btn i { transform: translateX(4px); }\r\n\r\n \/* --- footer \/ see all (removed as requested) --- *\/\r\n\r\n \/* === PROFESSIONAL MOBILE REFINEMENT === *\/\r\n @media (max-width: 480px) {\r\n .tw-card-image { height: 200px; }\r\n .tw-card-content { padding: 18px 16px 20px; }\r\n .tw-card-title { font-size: 19px; margin-bottom: 10px; }\r\n .tw-features { gap: 8px; margin-bottom: 14px; }\r\n .tw-feature-tag { padding: 5px 10px; font-size: 11px; }\r\n .tw-meta { margin-bottom: 16px; padding-bottom: 14px; }\r\n .tw-stars { font-size: 13px; }\r\n .tw-rating-value { font-size: 13px; }\r\n .tw-difficulty { font-size: 11px; padding: 4px 10px; }\r\n .tw-day-badge { top: 16px; left: 16px; padding: 6px 12px; font-size: 12px; }\r\n .tw-card-btn { padding: 12px 0; font-size: 13px; gap: 10px; }\r\n .tw-card-btn i { font-size: 13px; }\r\n }\r\n @media (max-width: 360px) {\r\n .tw-card-content { padding: 16px 14px 18px; }\r\n .tw-card-title { font-size: 18px; }\r\n .tw-feature-tag { padding: 4px 8px; font-size: 10px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- === Morocco Signature Tours \u2013 exact titles as provided (6 new tours) === -->\r\n <section class=\"tw-signature\" aria-label=\"Signature Morocco Tours\">\r\n <div class=\"tw-container\">\r\n\r\n <!-- header (unchanged) -->\r\n <div class=\"tw-header\">\r\n <div class=\"tw-subhead\">Curated Experiences<\/div>\r\n <h2 class=\"tw-title\">Discover <span>Morocco<\/span> With Us<\/h2>\r\n <p class=\"tw-description\">Handcrafted journeys through imperial cities, Sahara dunes, and authentic Berber villages. Expert guides, seamless experiences.<\/p>\r\n <\/div>\r\n\r\n <!-- grid \u2013 exactly 6 tours with ORIGINAL titles (exact wording) -->\r\n <div class=\"tw-grid\">\r\n \r\n <!-- 1. Morocco Desert Tour 10 Day Desert Tour from Casablanca 2026 (title exactly) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/morocco-desert-tour-10-day-desert-tour-from-casablanca-2026\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/14-days-tour-from-Marrakech.webp\" alt=\"10 Day Desert Tour Casablanca\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-calendar\"><\/i> 10 Days<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">10 Day Desert Tour from<\/span> Casablanca 2026<\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-shield-halved\"><\/i> Security<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-car\"><\/i> Transport<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.9<\/span><\/div>\r\n <span class=\"tw-difficulty moderate\">Moderate<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Tour <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 2. 2 Days From Fes To Merzouga Desert 2026 (title exactly) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/morocco-desert-tour-2-days-from-fes-to-merzouga-desert-2026\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/Sahara-tours-2025-08-05T161244.661.png\" alt=\"2 Days Fes to Merzouga\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-calendar\"><\/i> 2 Days<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">2 Days From Fes To Merzouga Desert<\/span> 2026<\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-shield-halved\"><\/i> Security<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-car\"><\/i> Transport<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.7<\/span><\/div>\r\n <span class=\"tw-difficulty easy\">Easy<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Tour <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 3. 4 Days From Marrakech To Desert 2026 (title exactly) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/morocco-desert-tour-4-days-from-marrakech-to-desert-2026\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/morocco-4060601_1280-1.webp\" alt=\"4 Days Marrakech Desert\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-calendar\"><\/i> 4 Days<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">4 Days From Marrakech To Desert<\/span> 2026<\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-shield-halved\"><\/i> Security<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-car\"><\/i> Transport<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.8<\/span><\/div>\r\n <span class=\"tw-difficulty moderate\">Moderate<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Tour <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 4. 7 Days Tour from Casablanca to Marrakech Desert 2026 (title exactly) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/morocco-desert-tour-7-days-tour-from-casablanca-to-marrakech-desert-2026\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/mosque-4134459_1280.webp\" alt=\"7 Days Casablanca Marrakech\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-calendar\"><\/i> 7 Days<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">7 Days Tour from Casablanca to Marrakech Desert<\/span> 2026<\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-shield-halved\"><\/i> Security<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-car\"><\/i> Transport<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.8<\/span><\/div>\r\n <span class=\"tw-difficulty moderate\">Moderate<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Tour <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 5. 9-Day Tour from Casablanca to Marrakech Desert 2026 (title exactly) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/morocco-desert-tour-9-day-tour-from-casablanca-to-marrakech-desert-2026\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/pexels-amani-allan-2147911089-29824127-scaled-1.webp\" alt=\"9 Day Casablanca Marrakech\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-calendar\"><\/i> 9 Days<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">9-Day Tour from Casablanca to Marrakech Desert<\/span> 2026<\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-shield-halved\"><\/i> Security<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-car\"><\/i> Transport<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.9<\/span><\/div>\r\n <span class=\"tw-difficulty challenging\">Challenging<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Tour <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 6. 4 Days from Fes To Sahara Desert 2026 (title exactly) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/morocco-desert-tours-4-days-from-fes-to-sahara-desert-2026\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/10-Days-tour-from-Tangier-to-Marrakech-2-800x600-1.jpg\" alt=\"4 Days Fes to Sahara\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-calendar\"><\/i> 4 Days<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">4 Days from Fes To Sahara Desert<\/span> 2026<\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-shield-halved\"><\/i> Security<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-car\"><\/i> Transport<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.8<\/span><\/div>\r\n <span class=\"tw-difficulty moderate\">Moderate<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Tour <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div> <!-- end tw-grid -->\r\n\r\n <!-- NO FOOTER BUTTON (as requested) -->\r\n\r\n <\/div> <!-- end tw-container -->\r\n <\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3aea6e9 e-con-full e-flex e-con e-parent\" data-id=\"3aea6e9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9451bed elementor-widget elementor-widget-html\" data-id=\"9451bed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes\"\/>\r\n <title>Morocco Travel \u2013 Professional Banner<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\"\/>\r\n <style>\r\n \/* ===== FULLY ISOLATED \u2013 EDGE-TO-EDGE ON MOBILE ===== *\/\r\n .mt-banner-isolate,\r\n .mt-banner-isolate * {\r\n all: revert;\r\n box-sizing: border-box !important;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;\r\n }\r\n\r\n .mt-banner-isolate {\r\n display: block !important;\r\n width: 100% !important;\r\n max-width: 100% !important; \/* Allow full width *\/\r\n margin: 0 auto !important;\r\n padding: 0 !important; \/* NO PADDING - edge to edge *\/\r\n }\r\n\r\n \/* color variables *\/\r\n .mt-banner-isolate {\r\n --primary: #d0923d;\r\n --primary-dark: #b37a34;\r\n --primary-light: #e0aa60;\r\n --dark: #111827;\r\n --gray-dark: #4b5563;\r\n --gray: #6b7280;\r\n --light: #f9fafb;\r\n --white: #ffffff;\r\n --shadow: 0 10px 25px rgba(208,146,61,0.15);\r\n --radius: 18px;\r\n }\r\n\r\n \/* main banner container \u2013 FULL WIDTH ON MOBILE, centered on desktop *\/\r\n .mt-banner {\r\n position: relative !important;\r\n background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%) !important;\r\n border-radius: 0 !important; \/* No radius on mobile for edge-to-edge *\/\r\n padding: 2.5rem 1rem !important; \/* Reduced side padding on mobile *\/\r\n margin: 0 !important; \/* No margin *\/\r\n box-shadow: var(--shadow) !important;\r\n overflow: hidden !important;\r\n isolation: isolate !important;\r\n border: 1px solid rgba(208,146,61,0.2) !important;\r\n width: 100% !important;\r\n }\r\n\r\n \/* Desktop: add border radius and max-width container effect *\/\r\n @media (min-width: 768px) {\r\n .mt-banner {\r\n border-radius: var(--radius) !important;\r\n padding: 3.5rem 2.5rem !important;\r\n margin: 2rem auto !important;\r\n max-width: 1400px !important;\r\n }\r\n }\r\n\r\n \/* decorative elements (unchanged) *\/\r\n .mt-banner-bg-pattern {\r\n position: absolute !important;\r\n inset: 0 !important;\r\n opacity: 0.1 !important;\r\n background-image: \r\n radial-gradient(circle at 20% 30%, var(--primary) 2px, transparent 2px),\r\n radial-gradient(circle at 80% 70%, var(--primary) 2px, transparent 2px),\r\n radial-gradient(circle at 40% 80%, var(--primary-light) 3px, transparent 3px),\r\n radial-gradient(circle at 90% 20%, var(--primary-light) 1px, transparent 1px) !important;\r\n background-size: 60px 60px !important;\r\n z-index: 0 !important;\r\n pointer-events: none !important;\r\n }\r\n\r\n .mt-banner-orange-ring {\r\n position: absolute !important;\r\n width: 280px !important;\r\n height: 280px !important;\r\n border-radius: 999px !important;\r\n border: 3px solid rgba(208,146,61,0.15) !important;\r\n top: -100px !important;\r\n right: -50px !important;\r\n z-index: 0 !important;\r\n }\r\n\r\n .mt-banner-orange-ring2 {\r\n position: absolute !important;\r\n width: 180px !important;\r\n height: 180px !important;\r\n border-radius: 999px !important;\r\n border: 2px solid rgba(208,146,61,0.1) !important;\r\n bottom: -60px !important;\r\n left: 10% !important;\r\n z-index: 0 !important;\r\n }\r\n\r\n \/* content wrapper \u2013 stacked on mobile, row on desktop *\/\r\n .mt-banner-content {\r\n position: relative !important;\r\n z-index: 2 !important;\r\n display: flex !important;\r\n flex-direction: column !important; \/* stacked on mobile *\/\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 2rem !important;\r\n width: 100% !important;\r\n max-width: 1400px !important; \/* Constrain content on desktop *\/\r\n margin: 0 auto !important; \/* Center content *\/\r\n }\r\n\r\n \/* tablet and up: switch to row *\/\r\n @media (min-width: 900px) {\r\n .mt-banner-content {\r\n flex-direction: row !important;\r\n align-items: center !important;\r\n justify-content: space-between !important;\r\n gap: 3rem !important;\r\n }\r\n }\r\n\r\n \/* left text section \u2013 full width on mobile *\/\r\n .mt-banner-text {\r\n flex: 1 1 auto !important;\r\n width: 100% !important;\r\n text-align: center !important; \/* centered on mobile *\/\r\n }\r\n\r\n @media (min-width: 900px) {\r\n .mt-banner-text {\r\n text-align: left !important;\r\n flex: 1 1 450px !important;\r\n }\r\n }\r\n\r\n .mt-banner-sup {\r\n display: inline-block !important;\r\n font-size: 0.85rem !important;\r\n font-weight: 600 !important;\r\n letter-spacing: 1px !important;\r\n text-transform: uppercase !important;\r\n color: var(--primary-light) !important;\r\n background: rgba(208,146,61,0.1) !important;\r\n padding: 0.3rem 1rem !important;\r\n border-radius: 100px !important;\r\n border: 1px solid rgba(208,146,61,0.3) !important;\r\n margin-bottom: 1rem !important;\r\n white-space: nowrap !important;\r\n }\r\n\r\n \/* mobile-friendly title *\/\r\n .mt-banner-title {\r\n font-size: clamp(2rem, 8vw, 2.8rem) !important;\r\n font-weight: 800 !important;\r\n line-height: 1.2 !important;\r\n color: var(--white) !important;\r\n margin: 0 0 0.75rem 0 !important;\r\n word-break: break-word !important;\r\n }\r\n\r\n .mt-banner-title span {\r\n color: var(--primary) !important;\r\n border-bottom: 2px solid rgba(208,146,61,0.4) !important;\r\n display: inline-block !important;\r\n }\r\n\r\n .mt-banner-desc {\r\n font-size: 1rem !important;\r\n line-height: 1.6 !important;\r\n color: #e0e7ff !important;\r\n max-width: 100% !important;\r\n margin: 0 auto 2rem auto !important;\r\n width: 100% !important;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .mt-banner-desc {\r\n font-size: 1.1rem !important;\r\n max-width: 500px !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n }\r\n\r\n \/* CTA button \u2013 full width on mobile *\/\r\n .mt-banner-btn {\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 10px !important;\r\n background: var(--primary) !important;\r\n color: var(--white) !important;\r\n font-weight: 700 !important;\r\n font-size: 1.1rem !important;\r\n padding: 0.9rem 1.5rem !important;\r\n border-radius: 50px !important;\r\n text-decoration: none !important;\r\n box-shadow: 0 8px 20px rgba(208,146,61,0.3) !important;\r\n border: 1px solid rgba(255,255,255,0.2) !important;\r\n transition: all 0.3s ease !important;\r\n width: 100% !important;\r\n max-width: 320px !important;\r\n margin: 0 auto !important;\r\n }\r\n\r\n @media (min-width: 500px) {\r\n .mt-banner-btn {\r\n width: auto !important;\r\n min-width: 220px !important;\r\n margin: 0 !important;\r\n }\r\n }\r\n\r\n @media (min-width: 900px) {\r\n .mt-banner-btn {\r\n margin: 0 !important;\r\n width: auto !important;\r\n }\r\n }\r\n\r\n .mt-banner-btn:hover {\r\n background: var(--primary-dark) !important;\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 12px 28px rgba(208,146,61,0.4) !important;\r\n }\r\n\r\n .mt-banner-btn svg {\r\n width: 20px !important;\r\n height: 20px !important;\r\n stroke: currentColor !important;\r\n stroke-width: 2 !important;\r\n fill: none !important;\r\n transition: transform 0.2s ease !important;\r\n }\r\n\r\n .mt-banner-btn:hover svg {\r\n transform: translateX(4px) !important;\r\n }\r\n\r\n \/* right stat section \u2013 full width on mobile *\/\r\n .mt-banner-stats {\r\n flex: 1 1 auto !important;\r\n width: 100% !important;\r\n display: flex !important;\r\n flex-wrap: wrap !important;\r\n gap: 1rem !important;\r\n justify-content: center !important;\r\n align-items: stretch !important;\r\n margin-top: 1rem !important;\r\n }\r\n\r\n @media (min-width: 900px) {\r\n .mt-banner-stats {\r\n flex: 0 1 380px !important;\r\n justify-content: flex-end !important;\r\n margin-top: 0 !important;\r\n }\r\n }\r\n\r\n \/* stat cards *\/\r\n .mt-stat-item {\r\n background: rgba(255,255,255,0.05) !important;\r\n backdrop-filter: blur(4px) !important;\r\n padding: 1.2rem 0.8rem !important;\r\n border-radius: 18px !important;\r\n text-align: center !important;\r\n flex: 1 1 130px !important;\r\n min-width: 120px !important;\r\n border: 1px solid rgba(208,146,61,0.25) !important;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;\r\n }\r\n\r\n .mt-stat-number {\r\n font-size: 2rem !important;\r\n font-weight: 800 !important;\r\n color: var(--primary) !important;\r\n line-height: 1 !important;\r\n margin-bottom: 0.3rem !important;\r\n }\r\n\r\n .mt-stat-label {\r\n font-size: 0.8rem !important;\r\n font-weight: 500 !important;\r\n color: #cbd5e1 !important;\r\n text-transform: uppercase !important;\r\n letter-spacing: 0.5px !important;\r\n word-break: keep-all !important;\r\n }\r\n\r\n \/* fine-tuning for very small phones *\/\r\n @media (max-width: 400px) {\r\n .mt-banner {\r\n padding: 1.8rem 0.5rem !important; \/* Minimal side padding *\/\r\n }\r\n .mt-stat-item {\r\n flex: 1 1 100px !important;\r\n min-width: 100px !important;\r\n padding: 1rem 0.5rem !important;\r\n }\r\n .mt-stat-number {\r\n font-size: 1.8rem !important;\r\n }\r\n .mt-stat-label {\r\n font-size: 0.7rem !important;\r\n }\r\n .mt-banner-title {\r\n font-size: 1.8rem !important;\r\n }\r\n .mt-banner-desc {\r\n font-size: 0.95rem !important;\r\n }\r\n }\r\n\r\n \/* Remove any leftover padding\/margin *\/\r\n body {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"margin:0; padding:0;\">\r\n <!-- FULLY ISOLATED BANNER \u2013 EDGE-TO-EDGE ON MOBILE -->\r\n <div class=\"mt-banner-isolate\">\r\n <div class=\"mt-banner animate__animated animate__fadeIn\">\r\n \r\n <!-- decorative background elements -->\r\n <div class=\"mt-banner-bg-pattern\"><\/div>\r\n <div class=\"mt-banner-orange-ring\"><\/div>\r\n <div class=\"mt-banner-orange-ring2\"><\/div>\r\n\r\n <!-- main content -->\r\n <div class=\"mt-banner-content\">\r\n \r\n <!-- left side: text + CTA -->\r\n <div class=\"mt-banner-text\">\r\n <div class=\"mt-banner-sup\">\u2726 Morocco's finest \u2726<\/div>\r\n <h2 class=\"mt-banner-title\">\r\n <span>Morocco Travel<\/span><br\/>Experience the Magic\r\n <\/h2>\r\n <p class=\"mt-banner-desc\">\r\n Handcrafted day trips & tours from the Sahara to the medinas. \r\n Your journey starts here.\r\n <\/p>\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/explore-morocco-tours-2026\/\" class=\"mt-banner-btn\">\r\n Explore Now\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M5 12h12\"><\/path>\r\n <path d=\"M13 6l6 6-6 6\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- right side: stat cards -->\r\n <div class=\"mt-banner-stats\">\r\n <div class=\"mt-stat-item\">\r\n <div class=\"mt-stat-number\">10+<\/div>\r\n <div class=\"mt-stat-label\">Years experience<\/div>\r\n <\/div>\r\n <div class=\"mt-stat-item\">\r\n <div class=\"mt-stat-number\">50+<\/div>\r\n <div class=\"mt-stat-label\">Day trips<\/div>\r\n <\/div>\r\n <div class=\"mt-stat-item\">\r\n <div class=\"mt-stat-number\">100%<\/div>\r\n <div class=\"mt-stat-label\">Local guides<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div> <!-- banner-content -->\r\n <\/div> <!-- banner -->\r\n <\/div> <!-- isolate -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5ce69a e-con-full e-flex e-con e-parent\" data-id=\"d5ce69a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-279ff0c elementor-widget elementor-widget-html\" data-id=\"279ff0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Morocco \u00b7 Camel Trek & Desert Camps<\/title>\r\n\r\n <!-- Fonts & Icons -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* === RESET & BASE === *\/\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: 'Inter', sans-serif; background: #fff; color: #1e293b; }\r\n\r\n \/* === UNIQUE PREFIX: \"tw-\" (same refined style) === *\/\r\n .tw-signature {\r\n --tw-gold: #d0923d; \/* golden brown *\/\r\n --tw-gold-dark: #b37a34;\r\n --tw-gold-light: #e0aa60;\r\n --tw-gold-bg: rgba(208,146,61,0.08);\r\n --tw-gold-bg-light: rgba(208,146,61,0.05);\r\n --tw-sand: #f8f4f0;\r\n --tw-stone: #e9e1d9;\r\n --tw-charcoal: #2c3e4f;\r\n --tw-slate: #4a5b6e;\r\n --tw-mist: #f0f2f5;\r\n --tw-card-bg: #ffffff;\r\n --tw-border-light: rgba(0,0,0,0.06);\r\n --tw-shadow: 0 20px 35px -8px rgba(0,0,0,0.07), 0 5px 12px -4px rgba(0,0,0,0.05);\r\n\r\n position: relative;\r\n background: linear-gradient(145deg, #ffffff 0%, var(--tw-sand) 100%);\r\n padding: 70px 0 90px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n\r\n \/* abstract background *\/\r\n .tw-signature::before {\r\n content: ''; position: absolute; top: -10%; right: -5%; width: 600px; height: 600px;\r\n background: radial-gradient(circle, rgba(208,146,61,0.03) 0%, transparent 70%);\r\n border-radius: 50%; z-index: 0;\r\n }\r\n .tw-signature::after {\r\n content: ''; position: absolute; bottom: -10%; left: -5%; width: 500px; height: 500px;\r\n background: radial-gradient(circle, rgba(44,62,79,0.03) 0%, transparent 70%);\r\n border-radius: 50%; z-index: 0;\r\n }\r\n\r\n .tw-container {\r\n position: relative; z-index: 2;\r\n max-width: 1280px; margin: 0 auto; padding: 0 30px;\r\n }\r\n\r\n \/* --- header (adjusted for camel theme) --- *\/\r\n .tw-header {\r\n text-align: center; max-width: 800px; margin: 0 auto 50px;\r\n }\r\n .tw-subhead {\r\n display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 2px;\r\n text-transform: uppercase; color: var(--tw-gold); background: var(--tw-gold-bg);\r\n padding: 8px 18px; border-radius: 40px; margin-bottom: 20px;\r\n }\r\n .tw-title {\r\n font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 800; line-height: 1.1; color: var(--tw-charcoal); margin-bottom: 18px;\r\n }\r\n .tw-title span {\r\n color: var(--tw-gold); position: relative; display: inline-block;\r\n }\r\n .tw-title span::after {\r\n content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px;\r\n background: var(--tw-gold-bg); z-index: -1;\r\n }\r\n .tw-description {\r\n font-size: 17px; color: var(--tw-slate); font-weight: 400;\r\n max-width: 650px; margin: 0 auto; line-height: 1.7;\r\n }\r\n\r\n \/* --- grid: 3 cards exactly --- *\/\r\n .tw-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;\r\n margin-bottom: 0; \/* no footer, no extra space *\/\r\n }\r\n @media (max-width: 1024px) { .tw-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 640px) {\r\n .tw-container { padding: 0 16px; }\r\n .tw-grid { grid-template-columns: 1fr; gap: 20px; }\r\n }\r\n\r\n \/* --- card (same refined style) --- *\/\r\n .tw-card {\r\n background: var(--tw-card-bg); border-radius: 24px; overflow: hidden;\r\n box-shadow: var(--tw-shadow); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n text-decoration: none; color: inherit; display: block;\r\n border: 1px solid var(--tw-border-light); backdrop-filter: blur(2px);\r\n }\r\n .tw-card:hover { transform: translateY(-6px); box-shadow: 0 30px 45px -15px rgba(208,146,61,0.15); }\r\n\r\n .tw-card-image {\r\n position: relative; height: 260px; overflow: hidden; background: #f0f0f0;\r\n }\r\n .tw-card-image img {\r\n width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease;\r\n }\r\n .tw-card:hover .tw-card-image img { transform: scale(1.05); }\r\n\r\n .tw-day-badge {\r\n position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,0.9);\r\n backdrop-filter: blur(5px); border-radius: 60px; padding: 8px 16px;\r\n font-weight: 700; font-size: 14px; color: var(--tw-charcoal);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 6px;\r\n border: 1px solid rgba(255,255,255,0.5); z-index: 2;\r\n }\r\n .tw-day-badge i { color: var(--tw-gold); font-size: 14px; }\r\n\r\n .tw-card-content { padding: 22px 22px 24px; }\r\n .tw-card-title {\r\n font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700;\r\n line-height: 1.3; color: var(--tw-charcoal); margin-bottom: 12px;\r\n }\r\n .tw-gold-highlight {\r\n color: var(--tw-gold); font-weight: 800;\r\n }\r\n\r\n .tw-features {\r\n display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;\r\n }\r\n .tw-feature-tag {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n background: var(--tw-gold-bg-light); padding: 6px 12px; border-radius: 40px;\r\n font-size: 12px; font-weight: 500; color: var(--tw-slate);\r\n border: 1px solid rgba(208,146,61,0.1);\r\n }\r\n .tw-feature-tag i { color: var(--tw-gold); font-size: 12px; }\r\n\r\n .tw-meta {\r\n display: flex; align-items: center; justify-content: space-between;\r\n margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.05);\r\n }\r\n .tw-rating { display: flex; align-items: center; gap: 8px; }\r\n .tw-stars { color: var(--tw-gold); font-size: 14px; letter-spacing: 2px; }\r\n .tw-rating-value { font-weight: 600; font-size: 14px; color: var(--tw-slate); }\r\n .tw-difficulty {\r\n font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 40px;\r\n text-transform: uppercase; letter-spacing: 0.3px;\r\n }\r\n .tw-difficulty.easy { background: rgba(208,146,61,0.1); color: var(--tw-gold-dark); }\r\n .tw-difficulty.moderate { background: rgba(208,146,61,0.15); color: var(--tw-gold-dark); }\r\n .tw-difficulty.challenging { background: rgba(208,146,61,0.2); color: var(--tw-gold-dark); }\r\n\r\n .tw-card-btn {\r\n display: flex; align-items: center; justify-content: center; gap: 12px;\r\n width: 100%; padding: 14px 0; background: transparent; border: 1.5px solid var(--tw-gold);\r\n border-radius: 60px; color: var(--tw-gold); font-weight: 700; font-size: 14px;\r\n transition: all 0.25s ease; cursor: pointer; text-decoration: none;\r\n }\r\n .tw-card-btn i { transition: transform 0.25s ease; font-size: 14px; }\r\n .tw-card:hover .tw-card-btn { background: var(--tw-gold); color: white; }\r\n .tw-card:hover .tw-card-btn i { transform: translateX(4px); }\r\n\r\n \/* === MOBILE REFINEMENT (same) === *\/\r\n @media (max-width: 480px) {\r\n .tw-card-image { height: 200px; }\r\n .tw-card-content { padding: 18px 16px 20px; }\r\n .tw-card-title { font-size: 19px; margin-bottom: 10px; }\r\n .tw-features { gap: 8px; margin-bottom: 14px; }\r\n .tw-feature-tag { padding: 5px 10px; font-size: 11px; }\r\n .tw-meta { margin-bottom: 16px; padding-bottom: 14px; }\r\n .tw-stars { font-size: 13px; }\r\n .tw-rating-value { font-size: 13px; }\r\n .tw-difficulty { font-size: 11px; padding: 4px 10px; }\r\n .tw-day-badge { top: 16px; left: 16px; padding: 6px 12px; font-size: 12px; }\r\n .tw-card-btn { padding: 12px 0; font-size: 13px; gap: 10px; }\r\n .tw-card-btn i { font-size: 13px; }\r\n }\r\n @media (max-width: 360px) {\r\n .tw-card-content { padding: 16px 14px 18px; }\r\n .tw-card-title { font-size: 18px; }\r\n .tw-feature-tag { padding: 4px 8px; font-size: 10px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- === Camel Trek & Desert Camps \u2013 3 exclusive tours === -->\r\n <section class=\"tw-signature\" aria-label=\"Camel Trek Desert Camps\">\r\n <div class=\"tw-container\">\r\n\r\n <!-- header with camel theme -->\r\n <div class=\"tw-header\">\r\n <div class=\"tw-subhead\">Sahara camel journeys<\/div>\r\n <h2 class=\"tw-title\"><span>Camel Trek<\/span> & Desert Nights<\/h2>\r\n <p class=\"tw-description\">Ride into the golden dunes, sleep under the stars, and experience authentic Berber hospitality in the heart of the Sahara.<\/p>\r\n <\/div>\r\n\r\n <!-- grid \u2013 exactly 3 cards with original titles -->\r\n <div class=\"tw-grid\">\r\n \r\n <!-- 1. Camel Trek And 1 Night In Desert Camp (exact title) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/camel-trek-and-1-night-in-desert-camp\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/pexels-christophe-rascle-159591525-26689361-scaled-1.webp\" alt=\"Camel trek 1 night camp\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-moon\"><\/i> 1 Night<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">Camel Trek And 1 Night In Desert Camp<\/span><\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-camel\"><\/i> Camel ride<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-utensils\"><\/i> Dinner\/breakfast<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.8<\/span><\/div>\r\n <span class=\"tw-difficulty easy\">Easy<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Trek <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 2. Camel Trek And 2 Nights In Desert Camp (exact title) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/camel-trek-and-2-nights-in-desert-camp\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/Intrepid-Travel-MOROCCO_SAHARA_41_0-1-800x600-1.jpg\" alt=\"Camel trek 2 nights camp\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-moon\"><\/i> 2 Nights<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">Camel Trek And 2 Nights In Desert Camp<\/span><\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-camel\"><\/i> Camel ride<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-fire\"><\/i> Campfire<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">4.9<\/span><\/div>\r\n <span class=\"tw-difficulty moderate\">Moderate<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Trek <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- 3. Camel Trek And 3 Nights In Desert Camp (exact title) -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/camel-trek-and-3-nights-in-desert-camp\/\" class=\"tw-card\">\r\n <div class=\"tw-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/02\/sunset-over-the-sand-dunes-in-the-desert-2026-01-07-06-18-39-utc-scaled.jpg\" alt=\"Camel trek 3 nights camp\" loading=\"lazy\">\r\n <div class=\"tw-day-badge\"><i class=\"fa-regular fa-moon\"><\/i> 3 Nights<\/div>\r\n <\/div>\r\n <div class=\"tw-card-content\">\r\n <h3 class=\"tw-card-title\"><span class=\"tw-gold-highlight\">Camel Trek And 3 Nights In Desert Camp<\/span><\/h3>\r\n <div class=\"tw-features\">\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-camel\"><\/i> Camel ride<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-regular fa-user\"><\/i> Guide<\/span>\r\n <span class=\"tw-feature-tag\"><i class=\"fa-solid fa-star\"><\/i> Stargazing<\/span>\r\n <\/div>\r\n <div class=\"tw-meta\">\r\n <div class=\"tw-rating\"><span class=\"tw-stars\">\u2605\u2605\u2605\u2605\u2605<\/span><span class=\"tw-rating-value\">5.0<\/span><\/div>\r\n <span class=\"tw-difficulty moderate\">Moderate<\/span>\r\n <\/div>\r\n <div class=\"tw-card-action\"><span class=\"tw-card-btn\">View Trek <i class=\"fa-solid fa-arrow-right\"><\/i><\/span><\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div> <!-- end tw-grid -->\r\n\r\n <!-- no footer \/ see all button (pure collection) -->\r\n\r\n <\/div> <!-- end tw-container -->\r\n <\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b3ad0fb e-con-full e-flex e-con e-parent\" data-id=\"b3ad0fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ee620a elementor-widget elementor-widget-html\" data-id=\"8ee620a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Morocco Travel - Why Choose Us<\/title>\r\n \r\n <!-- Fonts & Icons -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n line-height: 1.6;\r\n color: #1e293b;\r\n background-color: #ffffff;\r\n }\r\n \r\n \/* ===== WHY CHOOSE US - TWO SECTION LAYOUT ===== *\/\r\n .mt-why {\r\n --mt-primary: #d0923d; \/* Your golden brown *\/\r\n --mt-primary-dark: #b37a34; \/* Darker golden brown *\/\r\n --mt-primary-light: #e0aa60; \/* Lighter golden brown *\/\r\n --mt-primary-bg: rgba(208,146,61,0.08);\r\n --mt-primary-light-bg: rgba(208,146,61,0.05);\r\n \r\n --mt-charcoal: #1e293b;\r\n --mt-slate: #475569;\r\n --mt-mist: #f8fafc;\r\n --mt-card: #ffffff;\r\n --mt-border: rgba(0,0,0,0.06);\r\n --mt-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);\r\n \r\n position: relative;\r\n background: #ffffff;\r\n padding: 90px 0;\r\n overflow: hidden;\r\n }\r\n \r\n .mt-why__container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 30px;\r\n }\r\n \r\n \/* Two Column Layout *\/\r\n .mt-why__grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n \r\n @media (max-width: 1024px) {\r\n .mt-why__grid {\r\n gap: 40px;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why {\r\n padding: 60px 0;\r\n }\r\n \r\n .mt-why__container {\r\n padding: 0 20px;\r\n }\r\n \r\n .mt-why__grid {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n }\r\n \r\n \/* ===== LEFT SIDE - IMAGE SECTION (MOBILE OPTIMIZED) ===== *\/\r\n .mt-why__image {\r\n position: relative;\r\n border-radius: 30px;\r\n overflow: hidden;\r\n box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);\r\n height: 550px; \/* Default desktop height *\/\r\n }\r\n \r\n \/* \ud83d\udfe2 MOBILE: Much shorter image height *\/\r\n @media (max-width: 768px) {\r\n .mt-why__image {\r\n height: 320px !important; \/* Significantly reduced for mobile *\/\r\n max-height: 350px !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .mt-why__image {\r\n height: 280px !important; \/* Even shorter for small phones *\/\r\n max-height: 300px !important;\r\n }\r\n }\r\n \r\n @media (max-width: 380px) {\r\n .mt-why__image {\r\n height: 240px !important; \/* Minimum height *\/\r\n }\r\n }\r\n \r\n .mt-why__image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.8s ease;\r\n }\r\n \r\n .mt-why__image:hover img {\r\n transform: scale(1.05);\r\n }\r\n \r\n \/* Decorative Elements - adjusted for mobile *\/\r\n .mt-why__image::before {\r\n content: '';\r\n position: absolute;\r\n top: 20px;\r\n left: 20px;\r\n right: 20px;\r\n bottom: 20px;\r\n border: 2px solid rgba(255,255,255,0.3);\r\n border-radius: 20px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n \r\n \/* Badge - scaled for mobile *\/\r\n .mt-why__badge {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 20px;\r\n background: var(--mt-primary);\r\n color: white;\r\n padding: 12px 20px;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n font-size: 16px;\r\n z-index: 3;\r\n box-shadow: 0 10px 25px rgba(208,146,61,0.3);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n backdrop-filter: blur(5px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__badge {\r\n padding: 8px 16px;\r\n font-size: 14px;\r\n bottom: 15px;\r\n right: 15px;\r\n }\r\n }\r\n \r\n .mt-why__badge i {\r\n font-size: 20px;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__badge i {\r\n font-size: 16px;\r\n }\r\n }\r\n \r\n .mt-why__badge span {\r\n font-size: 13px;\r\n font-weight: 400;\r\n opacity: 0.9;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__badge span {\r\n font-size: 11px;\r\n }\r\n }\r\n \r\n \/* ===== RIGHT SIDE - CONTENT SECTION ===== *\/\r\n .mt-why__content {\r\n padding-left: 20px;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__content {\r\n padding-left: 0;\r\n }\r\n }\r\n \r\n .mt-why__subhead {\r\n display: inline-block;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--mt-primary);\r\n background: var(--mt-primary-bg);\r\n padding: 6px 16px;\r\n border-radius: 40px;\r\n margin-bottom: 20px;\r\n border: 1px solid rgba(208,146,61,0.15);\r\n }\r\n \r\n .mt-why__title {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 42px;\r\n font-weight: 800;\r\n line-height: 1.2;\r\n color: var(--mt-charcoal);\r\n margin-bottom: 25px;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__title {\r\n font-size: 36px;\r\n margin-bottom: 20px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .mt-why__title {\r\n font-size: 32px;\r\n }\r\n }\r\n \r\n .mt-why__title span {\r\n color: var(--mt-primary);\r\n position: relative;\r\n display: inline-block;\r\n }\r\n \r\n .mt-why__title span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 8px;\r\n left: 0;\r\n width: 100%;\r\n height: 8px;\r\n background: var(--mt-primary-bg);\r\n z-index: -1;\r\n border-radius: 10px;\r\n }\r\n \r\n \/* 4 Items Grid *\/\r\n .mt-why__items {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n margin: 30px 0 25px;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__items {\r\n gap: 15px;\r\n margin: 25px 0 20px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .mt-why__items {\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n }\r\n }\r\n \r\n \/* Individual Item *\/\r\n .mt-why__item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 15px;\r\n padding: 15px;\r\n background: #ffffff;\r\n border-radius: 20px;\r\n transition: all 0.3s ease;\r\n border: 1px solid var(--mt-border);\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__item {\r\n padding: 12px;\r\n gap: 12px;\r\n }\r\n }\r\n \r\n .mt-why__item:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 30px -10px rgba(208,146,61,0.15);\r\n border-color: rgba(208,146,61,0.2);\r\n }\r\n \r\n \/* Item Icon *\/\r\n .mt-why__item-icon {\r\n width: 50px;\r\n height: 50px;\r\n background: var(--mt-primary-bg);\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__item-icon {\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 14px;\r\n }\r\n \r\n .mt-why__item-icon i {\r\n font-size: 20px;\r\n }\r\n }\r\n \r\n .mt-why__item:hover .mt-why__item-icon {\r\n background: var(--mt-primary);\r\n }\r\n \r\n .mt-why__item-icon i {\r\n font-size: 22px;\r\n color: var(--mt-primary);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .mt-why__item:hover .mt-why__item-icon i {\r\n color: white;\r\n }\r\n \r\n \/* Item Content *\/\r\n .mt-why__item-content h4 {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: var(--mt-charcoal);\r\n margin-bottom: 5px;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__item-content h4 {\r\n font-size: 16px;\r\n margin-bottom: 4px;\r\n }\r\n }\r\n \r\n .mt-why__item-content p {\r\n font-size: 14px;\r\n color: var(--mt-slate);\r\n line-height: 1.5;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__item-content p {\r\n font-size: 13px;\r\n line-height: 1.4;\r\n }\r\n }\r\n \r\n \/* CTA Button *\/\r\n .mt-why__btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n padding: 14px 32px;\r\n background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-dark));\r\n color: white;\r\n font-weight: 600;\r\n font-size: 15px;\r\n border-radius: 60px;\r\n text-decoration: none;\r\n letter-spacing: 0.3px;\r\n box-shadow: 0 15px 30px -8px rgba(208,146,61,0.3);\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n margin-top: 15px;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .mt-why__btn {\r\n padding: 12px 28px;\r\n font-size: 14px;\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n }\r\n \r\n .mt-why__btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 20px 35px -8px rgba(208,146,61,0.4);\r\n background: linear-gradient(135deg, var(--mt-primary-dark), var(--mt-primary));\r\n }\r\n \r\n .mt-why__btn i {\r\n font-size: 15px;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .mt-why__btn:hover i {\r\n transform: translateX(5px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ===== WHY CHOOSE US - TWO SECTION LAYOUT ===== -->\r\n <section class=\"mt-why\" aria-label=\"Why Choose Morocco Travel\">\r\n <div class=\"mt-why__container\">\r\n \r\n <div class=\"mt-why__grid\">\r\n \r\n <!-- LEFT SIDE - IMAGE SECTION with mobile-optimized height -->\r\n <div class=\"mt-why__image\">\r\n <img decoding=\"async\" src=\"https:\/\/moroccotravel.ai\/wp-content\/uploads\/2026\/03\/IMG-20230903-WA0011.jpg\" alt=\"Morocco travel experience - camel trek in desert\">\r\n <div class=\"mt-why__badge\">\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n 4.9 <span>(2.5k+ reviews)<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- RIGHT SIDE - CONTENT SECTION WITH 4 ITEMS -->\r\n <div class=\"mt-why__content\">\r\n <div class=\"mt-why__subhead\">Why Choose Us<\/div>\r\n <h2 class=\"mt-why__title\">Travel with <span>Confidence<\/span><\/h2>\r\n \r\n <!-- 4 Items Grid - Each with one line description -->\r\n <div class=\"mt-why__items\">\r\n \r\n <!-- Item 1: Expert Guides -->\r\n <div class=\"mt-why__item\">\r\n <div class=\"mt-why__item-icon\">\r\n <i class=\"fa-regular fa-user\"><\/i>\r\n <\/div>\r\n <div class=\"mt-why__item-content\">\r\n <h4>Expert Local Guides<\/h4>\r\n <p>Born and raised in Morocco with insider knowledge<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Item 2: Handcrafted Tours -->\r\n <div class=\"mt-why__item\">\r\n <div class=\"mt-why__item-icon\">\r\n <i class=\"fa-regular fa-compass\"><\/i>\r\n <\/div>\r\n <div class=\"mt-why__item-content\">\r\n <h4>Handcrafted Tours<\/h4>\r\n <p>Carefully designed itineraries for every traveler<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Item 3: Safety First -->\r\n <div class=\"mt-why__item\">\r\n <div class=\"mt-why__item-icon\">\r\n <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n <\/div>\r\n <div class=\"mt-why__item-content\">\r\n <h4>Safety First<\/h4>\r\n <p>Modern vehicles & 24\/7 support throughout<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Item 4: Best Price -->\r\n <div class=\"mt-why__item\">\r\n <div class=\"mt-why__item-icon\">\r\n <i class=\"fa-regular fa-tag\"><\/i>\r\n <\/div>\r\n <div class=\"mt-why__item-content\">\r\n <h4>Best Price Guarantee<\/h4>\r\n <p>Direct bookings with no hidden fees<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <!-- CTA Button - Start Your Journey -->\r\n <a href=\"https:\/\/moroccotravel.ai\/pt\/explore-morocco-tours-2026\/\" class=\"mt-why__btn\">\r\n Start Your Journey <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c35acde elementor-widget elementor-widget-html\" data-id=\"c35acde\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Booking Process | Morocco Travel<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n* {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: \"Segoe UI\", system-ui, -apple-system, sans-serif;\r\n}\r\n\r\nbody {\r\n background: #ffffff;\r\n color: #111;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* ANIMATIONS *\/\r\n@keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n text-align: center;\r\n opacity: 0;\r\n animation: fadeIn 0.8s ease-out forwards;\r\n background: #ffffff;\r\n}\r\n\r\n\/* Top text - using your golden brown *\/\r\n.small-title {\r\n color: #d0923d;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 10px;\r\n font-size: 13px;\r\n text-transform: uppercase;\r\n display: inline-block;\r\n padding: 6px 18px;\r\n background: linear-gradient(135deg, rgba(208,146,61,0.1), rgba(208,146,61,0.05));\r\n border-radius: 30px;\r\n border: 1px solid rgba(208,146,61,0.2);\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n animation-delay: 0.3s;\r\n}\r\n\r\n.main-title {\r\n font-size: 32px;\r\n font-weight: 900;\r\n line-height: 1.4;\r\n margin-bottom: 40px;\r\n color: #1f2937;\r\n position: relative;\r\n display: block;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n animation-delay: 0.5s;\r\n}\r\n\r\n.main-title span {\r\n color: #d0923d;\r\n}\r\n\r\n.main-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 60px;\r\n height: 3px;\r\n background: linear-gradient(90deg, #d0923d, #e0aa60);\r\n border-radius: 2px;\r\n}\r\n\r\n\/* Steps wrapper *\/\r\n.steps {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding: 40px 0;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n animation-delay: 0.7s;\r\n}\r\n\r\n\/* ===== DASHED CURVED WAVE (DESKTOP ONLY) ===== *\/\r\n@media (min-width: 901px) {\r\n .steps::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 75px;\r\n left: 5%;\r\n width: 90%;\r\n height: 120px;\r\n z-index: 0;\r\n background-repeat: no-repeat;\r\n background-size: 100% 100%;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C150,0 300,120 450,60 600,0 750,120 900,60 1050,0 1200,60 1200,60' fill='none' stroke='%23d0923d' stroke-width='3' stroke-dasharray='10 10' stroke-linecap='round' opacity='0.3'\/%3E%3C\/svg%3E\");\r\n }\r\n}\r\n\r\n\/* Step *\/\r\n.step {\r\n width: 22%;\r\n position: relative;\r\n z-index: 1;\r\n transition: all 0.4s ease;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n}\r\n\r\n.step:nth-child(1) {\r\n animation-delay: 0.9s;\r\n}\r\n\r\n.step:nth-child(2) {\r\n animation-delay: 1.1s;\r\n}\r\n\r\n.step:nth-child(3) {\r\n animation-delay: 1.3s;\r\n}\r\n\r\n.step:nth-child(4) {\r\n animation-delay: 1.5s;\r\n}\r\n\r\n.step:hover {\r\n transform: translateY(-10px);\r\n}\r\n\r\n.step-container {\r\n background: linear-gradient(135deg, #ffffff, #fefaf4);\r\n padding: 35px 20px 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 15px 35px rgba(208,146,61,0.1);\r\n border: 2px solid rgba(208,146,61,0.1);\r\n position: relative;\r\n}\r\n\r\n\/* Number *\/\r\n.step-number {\r\n position: absolute;\r\n top: 20px;\r\n left: 20px;\r\n background: linear-gradient(135deg, #d0923d, #e0aa60);\r\n color: white;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 800;\r\n font-size: 18px;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n}\r\n\r\n.step:nth-child(1) .step-number {\r\n animation-delay: 1.1s;\r\n}\r\n\r\n.step:nth-child(2) .step-number {\r\n animation-delay: 1.3s;\r\n}\r\n\r\n.step:nth-child(3) .step-number {\r\n animation-delay: 1.5s;\r\n}\r\n\r\n.step:nth-child(4) .step-number {\r\n animation-delay: 1.7s;\r\n}\r\n\r\n\/* Icon *\/\r\n.icon-box {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, rgba(208,146,61,0.1), rgba(208,146,61,0.05));\r\n margin: 10px auto 25px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 18px;\r\n border: 2px solid rgba(208,146,61,0.15);\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n}\r\n\r\n.step:nth-child(1) .icon-box {\r\n animation-delay: 1.3s;\r\n}\r\n\r\n.step:nth-child(2) .icon-box {\r\n animation-delay: 1.5s;\r\n}\r\n\r\n.step:nth-child(3) .icon-box {\r\n animation-delay: 1.7s;\r\n}\r\n\r\n.step:nth-child(4) .icon-box {\r\n animation-delay: 1.9s;\r\n}\r\n\r\n.icon-box i {\r\n font-size: 32px;\r\n color: #d0923d;\r\n}\r\n\r\n\/* Text *\/\r\n.step h3 {\r\n font-size: 20px;\r\n font-weight: 800;\r\n margin-bottom: 15px;\r\n color: #1f2937;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n}\r\n\r\n.step:nth-child(1) h3 {\r\n animation-delay: 1.5s;\r\n}\r\n\r\n.step:nth-child(2) h3 {\r\n animation-delay: 1.7s;\r\n}\r\n\r\n.step:nth-child(3) h3 {\r\n animation-delay: 1.9s;\r\n}\r\n\r\n.step:nth-child(4) h3 {\r\n animation-delay: 2.1s;\r\n}\r\n\r\n.step p {\r\n font-size: 15px;\r\n color: #4b5563;\r\n line-height: 1.6;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n}\r\n\r\n.step:nth-child(1) p {\r\n animation-delay: 1.7s;\r\n}\r\n\r\n.step:nth-child(2) p {\r\n animation-delay: 1.9s;\r\n}\r\n\r\n.step:nth-child(3) p {\r\n animation-delay: 2.1s;\r\n}\r\n\r\n.step:nth-child(4) p {\r\n animation-delay: 2.3s;\r\n}\r\n\r\n\/* ===== MOBILE VERSION - OPTIMIZED ===== *\/\r\n@media (max-width: 900px) {\r\n .container {\r\n margin: 30px auto;\r\n padding: 40px 20px;\r\n }\r\n \r\n .main-title {\r\n font-size: 28px;\r\n margin-bottom: 30px;\r\n line-height: 1.3;\r\n }\r\n \r\n .steps {\r\n flex-direction: column;\r\n gap: 20px;\r\n padding: 20px 0 30px;\r\n position: relative;\r\n }\r\n\r\n .steps::before {\r\n display: none;\r\n }\r\n\r\n .step {\r\n width: 100%;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n .step-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n text-align: left;\r\n padding: 25px 20px;\r\n border-radius: 18px;\r\n }\r\n \r\n \/* Step number - mobile *\/\r\n .step-number {\r\n position: relative;\r\n top: auto;\r\n left: auto;\r\n width: 45px;\r\n height: 45px;\r\n font-size: 20px;\r\n flex-shrink: 0;\r\n }\r\n \r\n \/* Icon - mobile *\/\r\n .icon-box {\r\n margin: 0;\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 15px;\r\n flex-shrink: 0;\r\n }\r\n \r\n .icon-box i {\r\n font-size: 28px;\r\n }\r\n \r\n \/* Text content - mobile *\/\r\n .step-content {\r\n flex: 1;\r\n }\r\n \r\n .step h3 {\r\n font-size: 19px;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .step p {\r\n font-size: 14.5px;\r\n line-height: 1.5;\r\n }\r\n \r\n \/* Vertical connector line between mobile steps *\/\r\n .step:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 2px;\r\n height: 15px;\r\n background: linear-gradient(to bottom, #d0923d, #e0aa60);\r\n opacity: 0.3;\r\n z-index: 1;\r\n }\r\n}\r\n\r\n\/* Small phones *\/\r\n@media (max-width: 600px) {\r\n .container {\r\n margin: 20px auto;\r\n padding: 30px 15px;\r\n }\r\n \r\n .main-title {\r\n font-size: 24px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .small-title {\r\n font-size: 12px;\r\n padding: 5px 15px;\r\n }\r\n \r\n .step-container {\r\n padding: 22px 18px;\r\n gap: 18px;\r\n }\r\n \r\n .step-number {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 18px;\r\n }\r\n \r\n .icon-box {\r\n width: 55px;\r\n height: 55px;\r\n }\r\n \r\n .icon-box i {\r\n font-size: 26px;\r\n }\r\n \r\n .step h3 {\r\n font-size: 18px;\r\n }\r\n \r\n .step p {\r\n font-size: 14px;\r\n }\r\n \r\n .step:not(:last-child)::after {\r\n bottom: -8px;\r\n height: 12px;\r\n }\r\n}\r\n\r\n\/* Extra small phones *\/\r\n@media (max-width: 480px) {\r\n .container {\r\n padding: 20px 15px;\r\n margin: 15px auto;\r\n }\r\n \r\n .main-title {\r\n font-size: 22px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .step-container {\r\n padding: 20px 16px;\r\n gap: 16px;\r\n border-radius: 16px;\r\n }\r\n \r\n .step-number {\r\n width: 38px;\r\n height: 38px;\r\n font-size: 17px;\r\n }\r\n \r\n .icon-box {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 14px;\r\n }\r\n \r\n .icon-box i {\r\n font-size: 24px;\r\n }\r\n \r\n .step h3 {\r\n font-size: 17px;\r\n }\r\n \r\n .step p {\r\n font-size: 13.5px;\r\n }\r\n \r\n .step:not(:last-child)::after {\r\n bottom: -6px;\r\n height: 10px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"container\">\r\n\r\n <div class=\"small-title\">Simple Booking Process<\/div>\r\n\r\n <h2 class=\"main-title\">\r\n Book Your <span>Morocco Travel<\/span><br>\r\n in 4 Easy Steps\r\n <\/h2>\r\n\r\n <div class=\"steps\">\r\n\r\n <div class=\"step\">\r\n <div class=\"step-container\">\r\n <div class=\"step-number\">1<\/div>\r\n <div class=\"icon-box\"><i class=\"fas fa-compass\"><\/i><\/div>\r\n <div class=\"step-content\">\r\n <h3>Choose Your Tour<\/h3>\r\n <p>Select from Sahara desert treks, Atlas Mountains hiking, or imperial city tours.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step\">\r\n <div class=\"step-container\">\r\n <div class=\"step-number\">2<\/div>\r\n <div class=\"icon-box\"><i class=\"fas fa-comments\"><\/i><\/div>\r\n <div class=\"step-content\">\r\n <h3>Contact Our Team<\/h3>\r\n <p>Reach out via WhatsApp, email, or phone for availability and expert advice.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step\">\r\n <div class=\"step-container\">\r\n <div class=\"step-number\">3<\/div>\r\n <div class=\"icon-box\"><i class=\"fas fa-calendar-check\"><\/i><\/div>\r\n <div class=\"step-content\">\r\n <h3>Confirm Your Booking<\/h3>\r\n <p>Secure your spot with a small deposit. We'll send all tour details and tips.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step\">\r\n <div class=\"step-container\">\r\n <div class=\"step-number\">4<\/div>\r\n <div class=\"icon-box\"><i class=\"fas fa-hiking\"><\/i><\/div>\r\n <div class=\"step-content\">\r\n <h3>Start Your Adventure<\/h3>\r\n <p>Meet your certified local guide and immerse yourself in authentic Morocco.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Morocco Travel – Sahara & Atlas Tours Morocco Travel Discover Morocco Authentic Morocco day trips from Sahara to imperial cities with expert local guides. Explore Tours Contact Us Visit Morocco Marrakech to Sahara 14-day journey: imperial cities, desert camps, and Berber villages. Explore Tours Contact Us Morocco Experience Sahara Desert Camel treks, luxury camps, and […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-581","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/pages\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":58,"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/pages\/581\/revisions"}],"predecessor-version":[{"id":672,"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/pages\/581\/revisions\/672"}],"wp:attachment":[{"href":"https:\/\/moroccotravel.ai\/pt\/wp-json\/wp\/v2\/media?parent=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}