{"id":8,"date":"2026-03-28T16:05:43","date_gmt":"2026-03-28T16:05:43","guid":{"rendered":"https:\/\/tamazirtsurfshopschool.com\/?page_id=8"},"modified":"2026-03-30T20:50:12","modified_gmt":"2026-03-30T20:50:12","slug":"home","status":"publish","type":"page","link":"https:\/\/tamazirtsurfshopschool.com\/de\/","title":{"rendered":"Startseite"},"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 Tamazirt Surf | Ocean Blue Slider \u2013 Book Surf Lessons<\/title>\r\n <style>\r\n \/* minimal global reset for seamless embedding \u2013 design untouched except colors & content *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n body {\r\n background: #f2f7ff;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\r\n }\r\n \/* ensure slider container fills width and looks perfect *\/\r\n #tamazirt-surf-slider {\r\n width: 100%;\r\n position: relative;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Tamazirt Surf Shop School - Ocean Blue Slider (same structure, only colors changed to blue & text\/surf theme) -->\r\n <div id=\"tamazirt-surf-slider\"><\/div>\r\n\r\n <script>\r\n (function() {\r\n const mountPoint = document.getElementById('tamazirt-surf-slider');\r\n if (!mountPoint) return;\r\n const shadowRoot = mountPoint.attachShadow({ mode: 'open' });\r\n\r\n \/\/ \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014 SLIDER HTML + STYLES (original design preserved, colors changed to BLUE, all accents blue, no orange) \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\r\n shadowRoot.innerHTML = `\r\n <style>\r\n :host {\r\n \/* === FULL BLUE PALETTE === vibrant ocean, surf energy, no orange at all *\/\r\n --primary: #0A66C2; \/* strong surf blue (main cta, accents) *\/\r\n --secondary: #4A9EFF; \/* lighter wave blue (highlights, span text) *\/\r\n --accent-deep: #004e92; \/* deep ocean for subtle hover states *\/\r\n --light-bg: #eef6fe;\r\n --dark: #0b2b44;\r\n --white: #ffffff;\r\n --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n \r\n .myt-slider-container {\r\n position: relative;\r\n width: 100%;\r\n height: 680px;\r\n overflow: hidden;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\r\n background: #000; \/* fallback *\/\r\n }\r\n \r\n .myt-slider-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n \r\n .myt-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 transform: translateX(100%);\r\n transition: var(--transition);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n \r\n .myt-slide.active {\r\n opacity: 1;\r\n transform: translateX(0);\r\n z-index: 1;\r\n }\r\n \r\n .myt-slide.prev {\r\n transform: translateX(-100%);\r\n opacity: 0;\r\n }\r\n \r\n .myt-slide-image {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: brightness(0.75) contrast(1.05);\r\n }\r\n \r\n .myt-slide-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1200px;\r\n width: 90%;\r\n padding: 40px;\r\n color: var(--white);\r\n text-align: center;\r\n }\r\n \r\n .myt-slide-badge {\r\n display: inline-block;\r\n background: rgba(10, 102, 194, 0.25);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n padding: 10px 24px;\r\n border-radius: 40px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 1.2px;\r\n text-transform: uppercase;\r\n margin-bottom: 25px;\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n \r\n .myt-slide-title {\r\n font-size: 56px;\r\n font-weight: 800;\r\n line-height: 1.1;\r\n margin: 0 0 20px 0;\r\n text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);\r\n }\r\n \r\n .myt-slide-title span {\r\n color: var(--secondary); \/* lighter blue accent *\/\r\n }\r\n \r\n .myt-slide-desc {\r\n font-size: 20px;\r\n line-height: 1.6;\r\n max-width: 700px;\r\n margin: 0 auto 35px;\r\n opacity: 0.96;\r\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\r\n font-weight: 500;\r\n }\r\n \r\n \/* BUTTONS \u2013 PURE BLUE STYLE (same design, blue instead of orange) *\/\r\n .myt-slide-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: var(--primary);\r\n color: var(--white);\r\n padding: 16px 38px;\r\n border-radius: 60px;\r\n font-size: 18px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n transition: var(--transition);\r\n border: 2px solid transparent;\r\n box-shadow: 0 12px 28px rgba(10, 102, 194, 0.4);\r\n letter-spacing: 0.3px;\r\n cursor: pointer;\r\n }\r\n \r\n .myt-slide-cta:hover {\r\n background: var(--white);\r\n color: var(--primary);\r\n transform: translateY(-4px);\r\n box-shadow: 0 18px 32px rgba(10, 102, 194, 0.5);\r\n border-color: rgba(10, 102, 194, 0.2);\r\n }\r\n \r\n .myt-slide-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: currentColor;\r\n transition: var(--transition);\r\n }\r\n \r\n .myt-slide-cta:hover svg {\r\n transform: translateX(6px);\r\n }\r\n \r\n \/* Navigation arrows (glassmorphic white, unchanged elegant style) *\/\r\n .myt-slider-nav {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 56px;\r\n height: 56px;\r\n background: rgba(255, 255, 255, 0.18);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.35);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n z-index: 10;\r\n outline: none;\r\n }\r\n \r\n .myt-slider-nav:hover {\r\n background: rgba(255, 255, 255, 0.35);\r\n transform: translateY(-50%) scale(1.08);\r\n }\r\n \r\n .myt-slider-nav.prev {\r\n left: 30px;\r\n }\r\n \r\n .myt-slider-nav.next {\r\n right: 30px;\r\n }\r\n \r\n .myt-slider-nav svg {\r\n width: 26px;\r\n height: 26px;\r\n stroke: var(--white);\r\n stroke-width: 2.2;\r\n }\r\n \r\n .myt-slider-dots {\r\n position: absolute;\r\n bottom: 40px;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n justify-content: center;\r\n gap: 14px;\r\n z-index: 10;\r\n }\r\n \r\n .myt-slider-dot {\r\n width: 11px;\r\n height: 11px;\r\n background: rgba(255, 255, 255, 0.5);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n border: none;\r\n padding: 0;\r\n }\r\n \r\n .myt-slider-dot.active {\r\n background: var(--white);\r\n transform: scale(1.2);\r\n width: 12px;\r\n height: 12px;\r\n background: #ffffff;\r\n box-shadow: 0 0 8px rgba(255,255,255,0.8);\r\n }\r\n \r\n \/* responsive (same breakpoints, untouched) *\/\r\n @media (max-width: 1024px) {\r\n .myt-slider-container { height: 560px; }\r\n .myt-slide-title { font-size: 46px; }\r\n .myt-slide-desc { font-size: 18px; }\r\n .myt-slider-nav { width: 50px; height: 50px; }\r\n .myt-slider-nav.prev { left: 20px; }\r\n .myt-slider-nav.next { right: 20px; }\r\n .myt-slider-nav svg { width: 22px; height: 22px; }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .myt-slider-container { height: 500px; }\r\n .myt-slide-content { padding: 30px 25px; }\r\n .myt-slide-title { font-size: 36px; }\r\n .myt-slide-desc { font-size: 17px; margin-bottom: 30px; }\r\n .myt-slide-cta { padding: 14px 28px; font-size: 16px; gap: 8px; }\r\n .myt-slider-nav { width: 44px; height: 44px; display: none; }\r\n .myt-slider-dots { bottom: 30px; gap: 10px; }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .myt-slider-container { height: 440px; }\r\n .myt-slide-content { padding: 25px 20px; }\r\n .myt-slide-title { font-size: 30px; margin-bottom: 15px; }\r\n .myt-slide-desc { font-size: 15px; margin-bottom: 25px; }\r\n .myt-slide-badge { padding: 7px 18px; font-size: 11px; margin-bottom: 15px; }\r\n .myt-slide-cta { padding: 12px 24px; font-size: 15px; gap: 8px; }\r\n .myt-slider-dots { bottom: 25px; gap: 8px; }\r\n .myt-slider-dot { width: 8px; height: 8px; }\r\n .myt-slider-dot.active { width: 9px; height: 9px; }\r\n }\r\n \r\n @media (max-width: 360px) {\r\n .myt-slider-container { height: 400px; }\r\n .myt-slide-title { font-size: 26px; }\r\n .myt-slide-desc { font-size: 14px; }\r\n .myt-slide-cta { padding: 10px 20px; font-size: 14px; }\r\n }\r\n <\/style>\r\n\r\n <div class=\"myt-slider-container\" aria-label=\"Tamazirt Surf Shop \u2013 Surf adventures slider\">\r\n <div class=\"myt-slider-wrapper\">\r\n \r\n <!-- SLIDE 1 \u2013 Surf action \/ ocean energy (first image provided) -->\r\n <div class=\"myt-slide active\" data-slide=\"1\">\r\n <img decoding=\"async\" class=\"myt-slide-image\" \r\n src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.12-1.jpeg\"\r\n alt=\"Surf session with Tamazirt Surf School \u2013 wave riding\">\r\n <div class=\"myt-slide-content\">\r\n <div class=\"myt-slide-badge\">\ud83c\udfc4\u200d\u2642\ufe0f Tamazirt Surf Shop School<\/div>\r\n <h1 class=\"myt-slide-title\">Ride the <span>Atlantic Waves<\/span><\/h1>\r\n <p class=\"myt-slide-desc\">\r\n Experience authentic Moroccan surf culture. Professional coaching, premium gear, and the best lineups in Tamraght & Taghazout.\r\n <\/p>\r\n <a href=\"#\" class=\"myt-slide-cta\" id=\"surf-cta-1\">\r\n Let\u2019s Go Surfing!\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- SLIDE 2 \u2013 second image (surfboard \/ beach vibe) -->\r\n <div class=\"myt-slide\" data-slide=\"2\">\r\n <img decoding=\"async\" class=\"myt-slide-image\" \r\n src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.11-1.jpeg\"\r\n alt=\"Surfboards and golden hour at Tamazirt Surf School\">\r\n <div class=\"myt-slide-content\">\r\n <div class=\"myt-slide-badge\">\ud83c\udfc4\u200d\u2640\ufe0f Lessons & Rentals<\/div>\r\n <h1 class=\"myt-slide-title\">Catch Your <span>First Wave<\/span><\/h1>\r\n <p class=\"myt-slide-desc\">\r\n Beginners to pros: daily surf lessons, board rental, and unforgettable group camps. Safe, fun, and all levels welcome.\r\n <\/p>\r\n <a href=\"#\" class=\"myt-slide-cta\" id=\"surf-cta-2\">\r\n Let\u2019s Go Surfing!\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- SLIDE 3 \u2013 third image (moroccan surf lifestyle) -->\r\n <div class=\"myt-slide\" data-slide=\"3\">\r\n <img decoding=\"async\" class=\"myt-slide-image\" \r\n src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.11.jpeg\"\r\n alt=\"Tamazirt Surf community and ocean view\">\r\n <div class=\"myt-slide-content\">\r\n <div class=\"myt-slide-badge\">\ud83c\udf0a Tamazirt Vibe<\/div>\r\n <h1 class=\"myt-slide-title\">Surf, Explore, <span>Repeat<\/span><\/h1>\r\n <p class=\"myt-slide-desc\">\r\n Join our surf shop & school for epic adventures, yoga sessions, and Berber hospitality. Your Moroccan surf journey starts now.\r\n <\/p>\r\n <a href=\"#\" class=\"myt-slide-cta\" id=\"surf-cta-3\">\r\n Let\u2019s Go Surfing!\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Arrow navigation -->\r\n <button class=\"myt-slider-nav prev\" aria-label=\"Previous slide\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"\/>\r\n <\/svg>\r\n <\/button>\r\n <button class=\"myt-slider-nav next\" aria-label=\"Next slide\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/button>\r\n \r\n <!-- Dots -->\r\n <div class=\"myt-slider-dots\">\r\n <div class=\"myt-slider-dot active\" data-slide=\"1\" aria-label=\"Go to slide 1\"><\/div>\r\n <div class=\"myt-slider-dot\" data-slide=\"2\" aria-label=\"Go to slide 2\"><\/div>\r\n <div class=\"myt-slider-dot\" data-slide=\"3\" aria-label=\"Go to slide 3\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ ==================== SLIDER LOGIC (fully functional with smooth auto-play) ====================\r\n setTimeout(() => {\r\n const container = shadowRoot.querySelector('.myt-slider-container');\r\n const slides = shadowRoot.querySelectorAll('.myt-slide');\r\n const dots = shadowRoot.querySelectorAll('.myt-slider-dot');\r\n const prevBtn = shadowRoot.querySelector('.myt-slider-nav.prev');\r\n const nextBtn = shadowRoot.querySelector('.myt-slider-nav.next');\r\n \r\n let currentIdx = 0;\r\n let autoInterval;\r\n const total = slides.length;\r\n \r\n \/\/ helper: update active classes and dots\r\n function updateSliderUI() {\r\n slides.forEach((slide, i) => {\r\n slide.classList.remove('active', 'prev');\r\n if (i === currentIdx) {\r\n slide.classList.add('active');\r\n } else if (i === (currentIdx - 1 + total) % total) {\r\n slide.classList.add('prev');\r\n }\r\n });\r\n dots.forEach((dot, i) => {\r\n dot.classList.remove('active');\r\n if (i === currentIdx) dot.classList.add('active');\r\n });\r\n }\r\n \r\n function goToSlide(index) {\r\n currentIdx = (index + total) % total;\r\n updateSliderUI();\r\n resetAutoPlay();\r\n }\r\n \r\n function nextSlide() {\r\n currentIdx = (currentIdx + 1) % total;\r\n updateSliderUI();\r\n resetAutoPlay();\r\n }\r\n \r\n function prevSlide() {\r\n currentIdx = (currentIdx - 1 + total) % total;\r\n updateSliderUI();\r\n resetAutoPlay();\r\n }\r\n \r\n function startAutoPlay() {\r\n if (autoInterval) clearInterval(autoInterval);\r\n autoInterval = setInterval(() => {\r\n nextSlide();\r\n }, 6000);\r\n }\r\n \r\n function stopAutoPlay() {\r\n if (autoInterval) {\r\n clearInterval(autoInterval);\r\n autoInterval = null;\r\n }\r\n }\r\n \r\n function resetAutoPlay() {\r\n stopAutoPlay();\r\n startAutoPlay();\r\n }\r\n \r\n \/\/ attach event listeners for navigation\r\n if (prevBtn) prevBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n prevSlide();\r\n });\r\n if (nextBtn) nextBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n nextSlide();\r\n });\r\n \r\n dots.forEach(dot => {\r\n dot.addEventListener('click', () => {\r\n const slideNum = parseInt(dot.getAttribute('data-slide'), 10);\r\n if (!isNaN(slideNum)) goToSlide(slideNum - 1);\r\n });\r\n });\r\n \r\n \/\/ hover pause \/ resume\r\n if (container) {\r\n container.addEventListener('mouseenter', () => stopAutoPlay());\r\n container.addEventListener('mouseleave', () => startAutoPlay());\r\n \r\n \/\/ touch swipe (mobile)\r\n let touchStart = 0;\r\n let touchEnd = 0;\r\n container.addEventListener('touchstart', (e) => {\r\n touchStart = e.changedTouches[0].screenX;\r\n stopAutoPlay();\r\n }, { passive: true });\r\n container.addEventListener('touchend', (e) => {\r\n touchEnd = e.changedTouches[0].screenX;\r\n const diff = touchStart - touchEnd;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) nextSlide();\r\n else prevSlide();\r\n }\r\n startAutoPlay();\r\n });\r\n }\r\n \r\n \/\/ ========== UPDATE BUTTONS: open the specific link in the same page, no message, no confirmation ==========\r\n \/\/ Target link: https:\/\/tamazirtsurfshopschool.com\/surf-lessons-in-taghazout\/\r\n const targetBookingUrl = \"https:\/\/tamazirtsurfshopschool.com\/surf-lessons-in-taghazout\/\";\r\n \r\n \/\/ Select all CTA buttons inside shadow DOM and attach click handler that redirects without any popup\/message\r\n const allCtas = shadowRoot.querySelectorAll('.myt-slide-cta');\r\n allCtas.forEach(btn => {\r\n \/\/ Remove any existing inline click handlers if any, to avoid conflicts\r\n btn.removeEventListener('click', () => {});\r\n \/\/ Attach new click event\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n \/\/ Open the exact same link in the same tab\/page (no confirm, no alert)\r\n window.location.href = targetBookingUrl;\r\n });\r\n });\r\n \r\n \/\/ Also, ensure that if the buttons are clicked via any bubbling, it still works.\r\n \/\/ (extra safety)\r\n const styleWrapper = shadowRoot.querySelector('.myt-slider-container');\r\n if (styleWrapper) {\r\n styleWrapper.addEventListener('click', (e) => {\r\n const cta = e.target.closest('.myt-slide-cta');\r\n if (cta) {\r\n e.preventDefault();\r\n window.location.href = targetBookingUrl;\r\n }\r\n });\r\n }\r\n \r\n \/\/ initialization\r\n updateSliderUI();\r\n startAutoPlay();\r\n }, 80);\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-15e8a7d e-con-full e-flex e-con e-parent\" data-id=\"15e8a7d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b484190 elementor-widget elementor-widget-html\" data-id=\"b484190\" 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>Tamazirt Surf Shop School \u00b7 Surf Lessons & Premium Gear<\/title>\r\n\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=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* ALL CLASSES RENAMED WITH UNIQUE PREFIX \"tss-\" TO AVOID CONFLICTS *\/\r\n \/* MAIN COLOR: OCEAN BLUE (#0a5c7a, #1e6b8f, #0a2f44) with orange accent (#E07A2C) *\/\r\n .tss-section {\r\n width: 100%;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem 1rem 2rem;\r\n background: #e8f0f5; \/* soft light blue background - ocean inspired *\/\r\n font-family: 'Poppins', sans-serif;\r\n color: #2b2b2b;\r\n box-sizing: border-box;\r\n }\r\n\r\n .tss-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: clamp(1.5rem, 4vw, 5rem);\r\n }\r\n\r\n \/* ===== LEFT VISUAL ===== *\/\r\n .tss-visual {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 1 \/ 1.1;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .tss-main-photo {\r\n position: absolute;\r\n left: 25%;\r\n top: 6%;\r\n width: 58%;\r\n height: 64%;\r\n border-radius: 42% 42% 34% 34% \/ 20% 20% 22% 22%;\r\n background: #cbdde6;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(10, 92, 122, 0.35);\r\n z-index: 3;\r\n }\r\n\r\n .tss-main-photo img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n .tss-small-photo {\r\n position: absolute;\r\n left: 3%;\r\n bottom: 16%;\r\n width: 42%;\r\n max-width: 240px;\r\n aspect-ratio: 1\/1;\r\n border-radius: 50%;\r\n border: 6px solid #fff;\r\n background: #cbdde6;\r\n overflow: hidden;\r\n box-shadow: 0 16px 40px rgba(10, 92, 122, 0.4);\r\n z-index: 4;\r\n }\r\n\r\n .tss-small-photo img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .tss-stat-card {\r\n position: absolute;\r\n left: 0;\r\n top: 18%;\r\n width: auto;\r\n min-width: 170px;\r\n background: #ffffff;\r\n border-radius: 0 0 24px 24px;\r\n padding: 0.7rem 1.2rem 0.7rem 1rem;\r\n box-shadow: 0 20px 38px rgba(10, 92, 122, 0.25);\r\n z-index: 5;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.7rem;\r\n white-space: nowrap;\r\n }\r\n\r\n .tss-stat-icon {\r\n width: 2.2rem;\r\n height: 2.2rem;\r\n border-radius: 12px;\r\n background: #1e6b8f; \/* ocean blue instead of orange *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n .tss-stat-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: white;\r\n stroke: white;\r\n }\r\n\r\n .tss-stat-text-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .tss-stat-number {\r\n font-size: 1.2rem;\r\n font-weight: 800;\r\n color: #1e6b8f; \/* ocean blue *\/\r\n line-height: 1.2;\r\n }\r\n\r\n .tss-stat-text {\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n color: #0a5c7a;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .tss-mini-icon {\r\n position: absolute;\r\n left: 34%;\r\n bottom: 22%;\r\n width: 3.2rem;\r\n height: 3.2rem;\r\n border-radius: 16px;\r\n background: #1e6b8f; \/* ocean blue *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 16px 30px rgba(30, 107, 143, 0.45);\r\n z-index: 6;\r\n }\r\n\r\n .tss-mini-icon svg {\r\n width: 26px;\r\n height: 26px;\r\n fill: white;\r\n }\r\n\r\n .tss-dots-top {\r\n position: absolute;\r\n left: 38%;\r\n top: 12%;\r\n width: 4rem;\r\n height: 2.8rem;\r\n background-image: radial-gradient(#1e6b8f 2px, transparent 2px);\r\n background-size: 12px 12px;\r\n opacity: 0.4;\r\n z-index: 1;\r\n }\r\n\r\n .tss-dots-bottom {\r\n position: absolute;\r\n left: 5%;\r\n bottom: 10%;\r\n width: 5rem;\r\n height: 3.8rem;\r\n background-image: radial-gradient(#0a5c7a 2px, transparent 2px);\r\n background-size: 14px 14px;\r\n opacity: 0.3;\r\n z-index: 1;\r\n }\r\n\r\n .tss-ring-left {\r\n position: absolute;\r\n left: -4%;\r\n top: 38%;\r\n width: 4rem;\r\n height: 4rem;\r\n border: 2px dashed #1e6b8f; \/* ocean blue *\/\r\n border-right-color: transparent;\r\n border-top-color: transparent;\r\n border-radius: 50%;\r\n opacity: 0.4;\r\n z-index: 1;\r\n }\r\n \r\n \/* ===== RIGHT CONTENT ===== *\/\r\n .tss-content {\r\n width: 100%;\r\n max-width: 580px;\r\n margin-left: auto;\r\n }\r\n\r\n .tss-topline {\r\n font-size: clamp(0.7rem, 2vw, 0.9rem);\r\n font-weight: 700;\r\n color: #E07A2C; \/* orange accent for topline *\/\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n margin-bottom: 0.4rem;\r\n }\r\n\r\n .tss-topline span {\r\n color: #1e6b8f;\r\n margin-left: 0.4rem;\r\n letter-spacing: 0.2em;\r\n }\r\n\r\n .tss-title {\r\n font-size: clamp(1.8rem, 5.5vw, 3.2rem);\r\n font-weight: 800;\r\n line-height: 1.1;\r\n color: #0a2f44; \/* deep ocean blue *\/\r\n margin-bottom: 0.7rem;\r\n }\r\n\r\n .tss-desc {\r\n font-size: clamp(0.85rem, 2.2vw, 1rem);\r\n line-height: 1.6;\r\n color: #2c4a5e;\r\n font-weight: 400;\r\n margin-bottom: 1.5rem;\r\n max-width: 520px;\r\n }\r\n\r\n .tss-highlight {\r\n position: relative;\r\n background: #ffffff;\r\n border-radius: 1.8rem;\r\n padding: 1.5rem 1.2rem 1.2rem 5.5rem;\r\n margin-bottom: 1.8rem;\r\n border: 1px solid #cce3ed;\r\n box-shadow: 0 4px 12px rgba(10, 92, 122, 0.08);\r\n }\r\n\r\n .tss-highlight-left {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 4.8rem;\r\n background: #1e6b8f; \/* ocean blue *\/\r\n border-radius: 1.8rem 0 0 1.8rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .tss-highlight-left svg {\r\n width: 2.2rem;\r\n height: 2.2rem;\r\n fill: white;\r\n stroke: white;\r\n stroke-width: 0.2;\r\n }\r\n\r\n .tss-highlight-text {\r\n font-size: 0.85rem;\r\n line-height: 1.5;\r\n color: #2c4a5e;\r\n font-weight: 500;\r\n }\r\n\r\n .tss-highlight-text b,\r\n .tss-desc b {\r\n color: #E07A2C; \/* orange accent for bold text *\/\r\n font-weight: 700;\r\n }\r\n\r\n \/* FEATURE LIST *\/\r\n .tss-feature-list {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1rem 1.5rem;\r\n margin-bottom: 1.8rem;\r\n }\r\n\r\n .tss-feature {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.7rem;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n color: #000000; \/* BLACK FONT for keywords *\/\r\n }\r\n\r\n .tss-dot {\r\n width: 1.7rem;\r\n height: 1.7rem;\r\n border-radius: 50%;\r\n background: #1e6b8f; \/* ocean blue *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 6px 12px rgba(30, 107, 143, 0.25);\r\n }\r\n\r\n .tss-dot svg {\r\n width: 14px;\r\n height: 14px;\r\n fill: white;\r\n stroke: white;\r\n stroke-width: 0.5;\r\n }\r\n\r\n .tss-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #E07A2C; \/* orange accent for button *\/\r\n color: white;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n padding: 0.8rem 2rem;\r\n border-radius: 40px;\r\n text-decoration: none;\r\n box-shadow: 0 16px 28px rgba(224, 122, 44, 0.35);\r\n transition: 0.2s;\r\n white-space: nowrap;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n .tss-btn:hover {\r\n background: #B95C1A;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ===== MOBILE OPTIMIZATION ===== *\/\r\n @media (max-width: 900px) {\r\n .tss-container {\r\n grid-template-columns: 1fr;\r\n max-width: 620px;\r\n }\r\n\r\n .tss-visual {\r\n aspect-ratio: 1 \/ 1.15;\r\n max-width: 520px;\r\n margin: 0 auto 0.5rem;\r\n }\r\n\r\n .tss-main-photo {\r\n left: 20%;\r\n top: 3%;\r\n width: 64%;\r\n height: 70%;\r\n }\r\n\r\n .tss-small-photo {\r\n left: 2%;\r\n bottom: 12%;\r\n width: 46%;\r\n }\r\n\r\n .tss-mini-icon {\r\n left: 32%;\r\n bottom: 18%;\r\n width: 3.4rem;\r\n height: 3.4rem;\r\n }\r\n\r\n .tss-stat-card {\r\n padding: 0.6rem 1rem;\r\n gap: 0.6rem;\r\n min-width: 160px;\r\n }\r\n\r\n .tss-content {\r\n margin: 0 auto;\r\n max-width: 540px;\r\n padding: 0 0.5rem;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .tss-section {\r\n padding: 0.8rem 0.8rem 1.5rem;\r\n }\r\n\r\n .tss-visual {\r\n aspect-ratio: 1 \/ 1.25;\r\n max-width: 100%;\r\n }\r\n\r\n .tss-main-photo {\r\n left: 16%;\r\n top: 1%;\r\n width: 70%;\r\n height: 74%;\r\n }\r\n\r\n .tss-small-photo {\r\n left: 0%;\r\n bottom: 10%;\r\n width: 48%;\r\n border-width: 5px;\r\n }\r\n\r\n .tss-mini-icon {\r\n left: 28%;\r\n bottom: 16%;\r\n width: 3.2rem;\r\n height: 3.2rem;\r\n }\r\n\r\n .tss-stat-card {\r\n padding: 0.5rem 0.9rem;\r\n gap: 0.5rem;\r\n top: 16%;\r\n }\r\n\r\n .tss-stat-icon {\r\n width: 2rem;\r\n height: 2rem;\r\n }\r\n\r\n .tss-stat-number {\r\n font-size: 1rem;\r\n }\r\n\r\n .tss-stat-text {\r\n font-size: 0.6rem;\r\n }\r\n\r\n .tss-highlight {\r\n padding: 1.4rem 1rem 1rem 5rem;\r\n }\r\n\r\n .tss-highlight-left {\r\n width: 4.2rem;\r\n }\r\n\r\n .tss-highlight-left svg {\r\n width: 2rem;\r\n height: 2rem;\r\n }\r\n\r\n .tss-highlight-text {\r\n font-size: 0.78rem;\r\n }\r\n\r\n .tss-feature-list {\r\n grid-template-columns: 1fr;\r\n gap: 0.7rem;\r\n }\r\n\r\n .tss-feature {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .tss-btn {\r\n width: 100%;\r\n padding: 0.8rem 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 400px) {\r\n .tss-visual {\r\n aspect-ratio: 1 \/ 1.3;\r\n }\r\n .tss-main-photo {\r\n left: 12%;\r\n width: 76%;\r\n height: 76%;\r\n }\r\n .tss-small-photo {\r\n width: 50%;\r\n bottom: 8%;\r\n }\r\n .tss-mini-icon {\r\n left: 26%;\r\n bottom: 14%;\r\n }\r\n .tss-highlight {\r\n padding: 1.4rem 0.9rem 0.9rem 4.2rem;\r\n }\r\n .tss-highlight-left {\r\n width: 3.8rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"tss-section\">\r\n <div class=\"tss-container\">\r\n\r\n <!-- LEFT VISUAL: creative stacked images with ocean blue accents -->\r\n <div class=\"tss-visual\">\r\n <div class=\"tss-dots-top\"><\/div>\r\n <div class=\"tss-dots-bottom\"><\/div>\r\n <div class=\"tss-ring-left\"><\/div>\r\n\r\n <!-- STAT CARD: showcasing surf school achievements -->\r\n <div class=\"tss-stat-card\">\r\n <div class=\"tss-stat-icon\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 3L14.2 7.5L19 8.2L15.5 11.6L16.3 16.4L12 14.1L7.7 16.4L8.5 11.6L5 8.2L9.8 7.5L12 3Z\" fill=\"white\" stroke=\"white\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"tss-stat-text-wrapper\">\r\n <div class=\"tss-stat-number\">+1,280+<\/div>\r\n <div class=\"tss-stat-text\">Gl\u00fcckliche Surfer<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MAIN PHOTO (first image - surfing action) -->\r\n <div class=\"tss-main-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.09-3.jpeg\" alt=\"Surf instructor teaching at Tamazirt Surf Shop School Taghazout\">\r\n <\/div>\r\n\r\n <!-- SMALL CIRCLE PHOTO (second image - surf shop\/equipment) -->\r\n <div class=\"tss-small-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.09-2.jpeg\" alt=\"Surfboards and premium gear at Tamazirt Surf Shop Morocco\">\r\n <\/div>\r\n\r\n <!-- MINI ICON: surf wave accent -->\r\n <div class=\"tss-mini-icon\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10-6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT CONTENT: surf school and shop information -->\r\n <div class=\"tss-content\">\r\n <div class=\"tss-topline\">Tamazirt Surf Shop Schule <span>\u2726 \u2726 \u2726 \u2726<\/span><\/div>\r\n\r\n <h1 class=\"tss-title\">Surfunterricht &<br> Premium-Ausr\u00fcstung in Taghazout<\/h1>\r\n\r\n <p class=\"tss-desc\">\r\n <b>Tamazirt Surf Shop Schule<\/b> bietet Experte <b>Surfkurse f\u00fcr alle Niveaus<\/b>, ,\r\n Pr\u00e4mie <b>Boardverleih & Neoprenanz\u00fcge<\/b>, und unvergesslich <b>Surf-Abenteuer<\/b> entlang der marokkanischen\r\n Atlantikk\u00fcste. Erleben Sie die authentische Surfkultur von Taghazout mit zertifizierten lokalen Lehrern.\r\n <\/p>\r\n\r\n <!-- HIGHLIGHT CARD: focus on surf coaching and personalized experience -->\r\n <div class=\"tss-highlight\">\r\n <div class=\"tss-highlight-left\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path 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-2-10L6 18l8-4 4-8-8 4z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"tss-highlight-text\">\r\n <b>Pers\u00f6nliches Surf Coaching & kleine Gruppen<\/b> mit zertifizierten Lehrern.\r\n Genie\u00dfen Sie <b>Videoanalyse, Sicherheitstraining und Kenntnis der \u00f6rtlichen Gegebenheiten<\/b> -\r\n von anf\u00e4ngerfreundlichen Wellen bis zu fortgeschrittenen Reefbreaks wie Anchor Point.\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FEATURE LIST: surf school services with black font for keywords -->\r\n <div class=\"tss-feature-list\">\r\n <div class=\"tss-feature\">\r\n <span class=\"tss-dot\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path 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-2-10L6 18l8-4 4-8-8 4z\"\/>\r\n <\/svg>\r\n <\/span>\r\n Surfunterricht f\u00fcr Anf\u00e4nger\r\n <\/div>\r\n <div class=\"tss-feature\">\r\n <span class=\"tss-dot\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path 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-2-10L6 18l8-4 4-8-8 4z\"\/>\r\n <\/svg>\r\n <\/span>\r\n Fortgeschrittenes Coaching\r\n <\/div>\r\n <div class=\"tss-feature\">\r\n <span class=\"tss-dot\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path 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-2-10L6 18l8-4 4-8-8 4z\"\/>\r\n <\/svg>\r\n <\/span>\r\n Verleih von Surfbrett und Neoprenanzug\r\n <\/div>\r\n <div class=\"tss-feature\">\r\n <span class=\"tss-dot\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path 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-2-10L6 18l8-4 4-8-8 4z\"\/>\r\n <\/svg>\r\n <\/span>\r\n Surfcamps und Surfguiding\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BUTTON: just two words \"Book Now\" -->\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/de\/surf-lessons-in-taghazout\/\" class=\"tss-btn\">Buchen Sie jetzt \u2192<\/a>\r\n <\/div>\r\n <\/div>\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-8dacf1f e-con-full e-flex e-con e-parent\" data-id=\"8dacf1f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a41c51 elementor-widget elementor-widget-html\" data-id=\"3a41c51\" 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>Tamazirt & Surf Shop School \u00b7 Premium Surf Services<\/title>\r\n\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:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap\" rel=\"stylesheet\">\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 background: #ffffff;\r\n }\r\n\r\n \/* Features Section - NO BACKGROUND *\/\r\n .features-section {\r\n width: 100%;\r\n background: transparent; \/* No background *\/\r\n padding: 5rem 2rem;\r\n }\r\n\r\n .features-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Section Header *\/\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 4rem;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: clamp(2rem, 5vw, 2.8rem);\r\n font-weight: 800;\r\n color: #0a2f44;\r\n margin-bottom: 0.75rem;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .section-header p {\r\n font-size: 1.1rem;\r\n color: #4a6f86;\r\n max-width: 580px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-header .divider {\r\n width: 70px;\r\n height: 3px;\r\n background: #E07A2C;\r\n margin: 1rem auto 0;\r\n border-radius: 3px;\r\n }\r\n\r\n \/* Feature Item *\/\r\n .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 4rem;\r\n margin-bottom: 5rem;\r\n background: transparent; \/* No background *\/\r\n border-radius: 2rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-item:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Image Container with Professional Frame (Cadre) *\/\r\n .feature-image {\r\n flex: 1;\r\n position: relative;\r\n border-radius: 1.5rem;\r\n overflow: hidden;\r\n box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .feature-image:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .feature-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .feature-image:hover img {\r\n transform: scale(1.03);\r\n }\r\n\r\n \/* Professional Frame (Cadre) - Double border effect *\/\r\n .feature-image::before {\r\n content: '';\r\n position: absolute;\r\n top: 1rem;\r\n left: 1rem;\r\n right: 1rem;\r\n bottom: 1rem;\r\n border: 1.5px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 1rem;\r\n z-index: 2;\r\n pointer-events: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-image::after {\r\n content: '';\r\n position: absolute;\r\n top: 0.5rem;\r\n left: 0.5rem;\r\n right: 0.5rem;\r\n bottom: 0.5rem;\r\n border: 1px solid rgba(224, 122, 44, 0.7);\r\n border-radius: 1.2rem;\r\n z-index: 2;\r\n pointer-events: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-image:hover::before {\r\n top: 0.8rem;\r\n left: 0.8rem;\r\n right: 0.8rem;\r\n bottom: 0.8rem;\r\n border-color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .feature-image:hover::after {\r\n top: 0.3rem;\r\n left: 0.3rem;\r\n right: 0.3rem;\r\n bottom: 0.3rem;\r\n border-color: #E07A2C;\r\n }\r\n\r\n \/* Content Area *\/\r\n .feature-content {\r\n flex: 1;\r\n padding: 1rem;\r\n }\r\n\r\n \/* Category Badge - BOLD with different color *\/\r\n .feature-category {\r\n display: inline-block;\r\n font-size: 0.9rem;\r\n font-weight: 800; \/* EXTRA BOLD *\/\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-bottom: 1rem;\r\n padding: 0.3rem 0.8rem;\r\n border-radius: 50px;\r\n }\r\n\r\n \/* Different colors for each category - BOLD keywords *\/\r\n .feature-item:nth-child(1) .feature-category {\r\n color: #E07A2C;\r\n background: rgba(224, 122, 44, 0.12);\r\n }\r\n \r\n .feature-item:nth-child(2) .feature-category {\r\n color: #2C7A5E;\r\n background: rgba(44, 122, 94, 0.12);\r\n }\r\n \r\n .feature-item:nth-child(3) .feature-category {\r\n color: #3A86FF;\r\n background: rgba(58, 134, 255, 0.12);\r\n }\r\n\r\n \/* Title *\/\r\n .feature-title {\r\n font-size: clamp(1.8rem, 4vw, 2.4rem);\r\n font-weight: 800;\r\n color: #0a2f44;\r\n margin-bottom: 1.25rem;\r\n line-height: 1.3;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n \/* Description with BOLD keywords *\/\r\n .feature-description {\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n color: #4a5568;\r\n margin-bottom: 1.75rem;\r\n }\r\n \r\n \/* Make important keywords BOLD with different colors *\/\r\n .feature-description strong {\r\n font-weight: 800;\r\n color: #E07A2C;\r\n }\r\n \r\n \/* Specific keyword styling *\/\r\n .keyword-bold {\r\n font-weight: 800;\r\n color: #E07A2C;\r\n }\r\n\r\n \/* Button *\/\r\n .feature-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n background: transparent;\r\n color: #E07A2C;\r\n font-weight: 700;\r\n font-size: 0.95rem;\r\n padding: 0.8rem 1.8rem;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n border: 2px solid #E07A2C;\r\n cursor: pointer;\r\n }\r\n\r\n .feature-btn:hover {\r\n background: #E07A2C;\r\n color: white;\r\n transform: translateX(5px);\r\n }\r\n\r\n .feature-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .feature-btn:hover svg {\r\n transform: translateX(3px);\r\n }\r\n\r\n \/* Alternating Layout *\/\r\n .feature-item.reverse {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n \/* ========== OPTIMIZED MOBILE RESPONSIVE ========== *\/\r\n @media (max-width: 1024px) {\r\n .features-section {\r\n padding: 4rem 1.8rem;\r\n }\r\n .feature-item {\r\n gap: 2.5rem;\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .feature-item {\r\n flex-direction: column !important;\r\n gap: 2rem;\r\n margin-bottom: 4rem;\r\n background: transparent;\r\n }\r\n \r\n .feature-image {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n }\r\n \r\n .feature-content {\r\n text-align: left;\r\n padding: 0;\r\n width: 100%;\r\n }\r\n \r\n .feature-category {\r\n display: inline-block;\r\n font-size: 0.85rem;\r\n }\r\n \r\n .feature-title {\r\n font-size: 1.7rem;\r\n margin-bottom: 1rem;\r\n }\r\n \r\n .feature-description {\r\n font-size: 0.98rem;\r\n line-height: 1.55;\r\n margin-bottom: 1.5rem;\r\n }\r\n \r\n .feature-btn {\r\n display: inline-flex;\r\n margin: 0;\r\n }\r\n \r\n \/* Keep frames on mobile but simpler for performance *\/\r\n .feature-image::before,\r\n .feature-image::after {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 680px) {\r\n .features-section {\r\n padding: 2.5rem 1.2rem;\r\n }\r\n \r\n .feature-item {\r\n margin-bottom: 3rem;\r\n gap: 1.5rem;\r\n }\r\n \r\n .feature-title {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .feature-description {\r\n font-size: 0.92rem;\r\n line-height: 1.5;\r\n }\r\n \r\n .feature-category {\r\n font-size: 0.8rem;\r\n padding: 0.25rem 0.7rem;\r\n margin-bottom: 0.75rem;\r\n }\r\n \r\n .feature-btn {\r\n padding: 0.7rem 1.5rem;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .section-header {\r\n margin-bottom: 2.5rem;\r\n }\r\n \r\n .section-header h2 {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .section-header p {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .features-section {\r\n padding: 2rem 1rem;\r\n }\r\n \r\n .feature-title {\r\n font-size: 1.35rem;\r\n }\r\n \r\n .feature-description {\r\n font-size: 0.88rem;\r\n }\r\n \r\n .feature-category {\r\n font-size: 0.75rem;\r\n }\r\n \r\n .feature-btn {\r\n padding: 0.6rem 1.3rem;\r\n font-size: 0.85rem;\r\n }\r\n }\r\n\r\n \/* Animation on load *\/\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 .feature-item {\r\n animation: fadeInUp 0.6s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .feature-item:nth-child(1) {\r\n animation-delay: 0.1s;\r\n }\r\n .feature-item:nth-child(2) {\r\n animation-delay: 0.2s;\r\n }\r\n .feature-item:nth-child(3) {\r\n animation-delay: 0.3s;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"features-section\">\r\n <div class=\"features-container\">\r\n \r\n <div class=\"section-header\">\r\n <h2>Erleben Sie den atlantischen Geist<\/h2>\r\n <p>Erstklassige Surf- und Outdoor-Abenteuer in Taghazout<\/p>\r\n <div class=\"divider\"><\/div>\r\n <\/div>\r\n\r\n <!-- FEATURE 1: Surf Lessons - Image Left, Text Right -->\r\n <div class=\"feature-item\">\r\n <div class=\"feature-image\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.12.jpeg\" alt=\"Surf lessons in Taghazout with Tamazirt Surf Shop School\">\r\n <\/div>\r\n <div class=\"feature-content\">\r\n <div class=\"feature-category\">\ud83c\udfc4\u200d\u2642\ufe0f SURFING<\/div>\r\n <h3 class=\"feature-title\">Join Surf Lessons in Taghazout<\/h3>\r\n <p class=\"feature-description\">\r\n <strong>Surfen lernen<\/strong> in Taghazout mit <strong>vertrauensw\u00fcrdige lokale Ausbilder<\/strong>. Von ersten Ausritten bis hin zu Trainingseinheiten, jede Lektion passt zu Ihrem Niveau. Anmelden bei <strong>Kleingruppenunterricht<\/strong>, gehen <strong>Eins-zu-eins-Surfunterricht mit Privatunterricht<\/strong>, oder lassen <strong>Kinder surfen sicher<\/strong>. Buchen Sie Ihr <strong>Taghazout Surferlebnis<\/strong> jetzt - lustig, freundlich und f\u00fcr alle F\u00e4higkeiten geeignet.\r\n <\/p>\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/de\/surf-lessons-in-taghazout\/\" class=\"feature-btn\">\r\n Surf-Pakete erkunden\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M5 13h11.86l-3.63 4.36L14 18l6-6-6-6-1.77 1.64L16.86 11H5v2z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FEATURE 2: Rentals - Image Right, Text Left (reverse class) -->\r\n <div class=\"feature-item reverse\">\r\n <div class=\"feature-image\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.10.58.jpeg\" alt=\"Surfboard and SUP rentals in Taghazout\">\r\n <\/div>\r\n <div class=\"feature-content\">\r\n <div class=\"feature-category\">\ud83c\udfc4\u200d\u2640\ufe0f VERMIETUNG<\/div>\r\n <h3 class=\"feature-title\">Mieten Sie ein Surfbrett oder Stand-up-Paddleboard<\/h3>\r\n <p class=\"feature-description\">\r\n Unter <strong>Tamazirt Surf Shop<\/strong>, haben wir die <strong>perfekter Vorstand<\/strong> auf Sie warten - egal, ob Sie gerade erst anfangen oder auf der Jagd nach der n\u00e4chsten gro\u00dfen D\u00fcnung sind. Von <strong>anf\u00e4ngerfreundliche Surfboards<\/strong> zu <strong>Hochleistungs-Stand-up-Paddleboards<\/strong>, Unser Mietangebot ist f\u00fcr jedes Niveau geeignet. <strong>Jetzt online buchen<\/strong> und sich gleich nach der Ankunft in die Wellen st\u00fcrzen.\r\n <\/p>\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/de\/surf-rentals\/\" class=\"feature-btn\">\r\n Jetzt buchen\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M5 13h11.86l-3.63 4.36L14 18l6-6-6-6-1.77 1.64L16.86 11H5v2z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FEATURE 3: Activities - Image Left, Text Right -->\r\n <div class=\"feature-item\">\r\n <div class=\"feature-image\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/taghazout-activities-camel-hose-sable-2-850x540-1.webp\" alt=\"Outdoor activities in Taghazout Paradise Valley and sandboarding\">\r\n <\/div>\r\n <div class=\"feature-content\">\r\n <div class=\"feature-category\">\ud83c\udf04 AKTIVIT\u00c4TEN<\/div>\r\n <h3 class=\"feature-title\">Nehmen Sie an unvergesslichen Outdoor-Aktivit\u00e4ten teil<\/h3>\r\n <p class=\"feature-description\">\r\n Es gibt <strong>Taghazout bietet mehr als Surfen<\/strong> - Wir zeigen Ihnen die Magie. Von <strong>friedliche Spazierg\u00e4nge durch das Paradise Valley<\/strong> zum <strong>Goldene D\u00fcnen von Timlalin<\/strong> und spannend <strong>Sandboarding-Erlebnisse<\/strong>, Jede Reise wird mit Sorgfalt durchgef\u00fchrt. Reisen mit Stil mit <strong>klimatisierter Transport<\/strong> und <strong>freundliche \u00f6rtliche F\u00fchrer<\/strong>. Entdecken, erforschen und Erinnerungen schaffen - <strong>Buchen Sie jetzt Ihre Reise bei uns<\/strong>.\r\n <\/p>\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/de\/activities\/\" class=\"feature-btn\">\r\n Jetzt erforschen\r\n <svg viewbox=\"0 0 24 24\"><path d=\"M5 13h11.86l-3.63 4.36L14 18l6-6-6-6-1.77 1.64L16.86 11H5v2z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\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>\n\t\t<div class=\"elementor-element elementor-element-95741f5 e-con-full e-flex e-con e-parent\" data-id=\"95741f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-086b35f elementor-widget elementor-widget-html\" data-id=\"086b35f\" 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>Tamazirt Surf Shop & School \u00b7 Taghazout Morocco<\/title>\r\n\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:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap\" rel=\"stylesheet\">\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 \/* Full Width Banner Section with Fixed Background - Reduced Height *\/\r\n .hero-banner {\r\n position: relative;\r\n width: 100%;\r\n height: 85vh;\r\n min-height: 550px;\r\n max-height: 700px;\r\n background-image: url('https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.12.jpeg');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n background-repeat: no-repeat;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Inter', sans-serif;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Dark Overlay with Vibrant Ocean Blue *\/\r\n .hero-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(10, 92, 122, 0.88) 0%, rgba(30, 107, 143, 0.82) 100%);\r\n z-index: 1;\r\n }\r\n\r\n \/* Content Container *\/\r\n .hero-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 900px;\r\n padding: 2rem;\r\n text-align: center;\r\n color: white;\r\n animation: fadeInUp 0.8s ease-out;\r\n }\r\n\r\n \/* Title with Gradient *\/\r\n .hero-title {\r\n font-size: clamp(2rem, 5vw, 3.8rem);\r\n font-weight: 900;\r\n margin-bottom: 0.75rem;\r\n line-height: 1.2;\r\n letter-spacing: -0.02em;\r\n background: linear-gradient(135deg, #ffffff 60%, #E07A2C 100%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n\r\n \/* Subtitle \/ Tagline *\/\r\n .hero-subtitle {\r\n font-size: clamp(1rem, 2.5vw, 1.2rem);\r\n font-weight: 600;\r\n margin-bottom: 1.2rem;\r\n color: rgba(255, 255, 255, 0.95);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n \/* Description Text - Exactly 3 Lines *\/\r\n .hero-description {\r\n font-size: clamp(0.9rem, 2vw, 1rem);\r\n line-height: 1.5;\r\n margin-bottom: 2rem;\r\n max-width: 700px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n color: rgba(255, 255, 255, 0.92);\r\n font-weight: 400;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n \/* CTA Button *\/\r\n .hero-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.8rem;\r\n background: transparent;\r\n color: white;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n padding: 0.85rem 2.2rem;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n border: 2px solid #E07A2C;\r\n cursor: pointer;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .hero-btn:hover {\r\n background: #E07A2C;\r\n color: white;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(224, 122, 44, 0.3);\r\n border-color: #E07A2C;\r\n }\r\n\r\n .hero-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .hero-btn:hover svg {\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* Fade In Up Animation *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 1024px) {\r\n .hero-banner {\r\n height: 80vh;\r\n min-height: 500px;\r\n max-height: 650px;\r\n }\r\n .hero-content {\r\n padding: 1.5rem;\r\n }\r\n .hero-description {\r\n max-width: 600px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-banner {\r\n height: auto;\r\n min-height: 480px;\r\n background-attachment: scroll; \/* Better performance on mobile *\/\r\n }\r\n .hero-content {\r\n padding: 1.5rem;\r\n }\r\n .hero-description {\r\n margin-bottom: 1.8rem;\r\n -webkit-line-clamp: 3;\r\n }\r\n .hero-btn {\r\n padding: 0.75rem 1.8rem;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-banner {\r\n min-height: 450px;\r\n }\r\n .hero-description {\r\n font-size: 0.85rem;\r\n line-height: 1.5;\r\n }\r\n .hero-btn {\r\n padding: 0.7rem 1.6rem;\r\n font-size: 0.9rem;\r\n }\r\n .hero-title {\r\n margin-bottom: 0.5rem;\r\n }\r\n .hero-subtitle {\r\n margin-bottom: 1rem;\r\n }\r\n }\r\n\r\n \/* Smooth Scroll Behavior *\/\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Professional Full-Width Banner with Fixed Background - Reduced Height -->\r\n <section class=\"hero-banner\">\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n \r\n <!-- Main Title -->\r\n <h1 class=\"hero-title\">Tamazirt Surf Shop & Schule<\/h1>\r\n \r\n <!-- Tagline \/ Subtitle -->\r\n <p class=\"hero-subtitle\">Taghazout's erstklassiges Surferlebnis<\/p>\r\n \r\n <!-- Description Text - Exactly 3 Lines -->\r\n <p class=\"hero-description\">\r\n Hochwertige Leihsurfbretter, unterhaltsame Surfkurse in Taghazout und eine handverlesene Auswahl an lokal hergestellten Shirts und Souvenirs.\r\n Egal, ob Sie zum ersten Mal surfen oder auf der Jagd nach Ihrer n\u00e4chsten Welle sind, wir haben alles f\u00fcr Sie.\r\n Besuchen Sie uns, sagen Sie hallo und tauchen Sie ein in den Surfspirit - kein Stress, nur Stoke.\r\n <\/p>\r\n \r\n <!-- Call to Action Button -->\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/de\/surf-rentals\/\" class=\"hero-btn\">\r\n Besuchen Sie unseren Shop\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M5 13h11.86l-3.63 4.36L14 18l6-6-6-6-1.77 1.64L16.86 11H5v2z\"\/>\r\n <\/svg>\r\n <\/a>\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>\n\t\t<div class=\"elementor-element elementor-element-fa95ebe e-flex e-con-boxed e-con e-parent\" data-id=\"fa95ebe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fc88fd elementor-widget elementor-widget-shortcode\" data-id=\"5fc88fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><pre class=\"ti-widget\"><template id=\"trustindex-google-widget-html\"><div class=\"ti-widget ti-goog ti-review-text-mode-readmore ti-text-align-left\" data-no-translation=\"true\" data-time-locale=\"%d %s ago|today|day|days|week|weeks|month|months|year|years\" data-plugin-version=\"13.2.8\" data-layout-id=\"34\" data-layout-category=\"slider\" data-set-id=\"light-background\" data-pid=\"\" data-language=\"en\" data-close-locale=\"Close\" data-review-target-width=\"300\" data-css-version=\"2\" data-reply-by-locale=\"Owner's reply\" data-only-rating-locale=\"This user only left a rating.\" data-pager-autoplay-timeout=\"6\"> <div class=\"ti-widget-container ti-col-3\"> <div class=\"ti-header ti-header-grid source-Google\"> <div class=\"ti-fade-container\"> <div class=\"ti-rating-text\"> <strong class=\"ti-rating ti-rating-large\"> EXCELLENT <\/strong> <\/div> <span class=\"ti-stars star-lg\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><\/span> <div class=\"ti-rating-text\"> <span class=\"nowrap\">Based on <strong>32 reviews<\/strong><\/span> <\/div> <div class=\"ti-large-logo\"> <div class=\"ti-v-center\"> <trustindex-image class=\"ti-logo-fb\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/logo.svg\" width=\"150\" height=\"25\" loading=\"lazy\" alt=\"Google\"><\/trustindex-image> <\/div> <\/div> <\/div> <\/div> <div class=\"ti-reviews-container\"> <div class=\"ti-controls\"> <div class=\"ti-next\" aria-label=\"Next review\" role=\"button\" tabindex=\"0\"><\/div> <div class=\"ti-prev\" aria-label=\"Previous review\" role=\"button\" tabindex=\"0\"><\/div> <\/div> <div class=\"ti-reviews-container-wrapper\"> <div data-empty=\"0\" data-time=\"1774742400\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocJP6fDBYzTp74SpQ3d_zrejZXkpVWvPqhepe0v8EPiihg20Ug=w40-h40-c-rp-mo-br100\" alt=\"School of Dough CIC profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> School of Dough CIC <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->Surf hire - board and wetsuit during short stay in taghazout to recharge! Super friendly, excellent price and good choice of boards. Strongly recommend - big shout out! \ud83c\udfc4\u200d\u2642\ufe0f \ud83e\udd19<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1774742400\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjUjg2NSPP4-Wn7lG3vuVxcusZprnyLeNFvtl0GPfTNI-FmWfveU2A=w40-h40-c-rp-mo-br100\" alt=\"Madison Boles profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> Madison Boles <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->Such great people!<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1774742400\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjXc2nmOf7yeGW5jrs3ulLK8cRcV_IIC7LCV5iygFESN1AfpUPnt=w40-h40-c-rp-mo-br100\" alt=\"Emilia Di Paola profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> Emilia Di Paola <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->What great service. If you need a board rental head over to tamazirt surf shop and school !<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1774656000\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocI3_U4ph3xgD4H7V0eNHY-54gUF_pCz5OJ_OmFNrmnZ8leMRw=w40-h40-c-rp-mo-br100\" alt=\"Josse Bender profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> Josse Bender <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->Top Preis<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1774483200\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLprSyU-NDMt1W39eqwYWQSit15oXWJ2xjzKdLm-GYG3MYLqQ=w40-h40-c-rp-mo-br100\" alt=\"Helene Weichelt profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> Helene Weichelt <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->It was so great, very friendly!<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1774224000\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocKJZ1HZOdwu8h3YvCxlIcoV9kdpToBbDWEa9t9PKEXty8J9Ww=w40-h40-c-rp-mo-br100\" alt=\"jessica hart profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> jessica hart <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->Beautiful little shop very reasonable prices. Well worth a visit \u263a\ufe0f<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1774137600\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocItLP4Hll_fN77BqZw5fOIOMwFWvdqdTUEFhb6efBM5y4zVdw=w40-h40-c-rp-mo-br100\" alt=\"Redwa Sunsurf profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> Redwa Sunsurf <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->Guys i realy remember this shop it\u2019s super nice they have nice equipment for surf good boards and also instructure I had really good lessons I learned alot<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <div data-empty=\"0\" data-time=\"1773705600\" class=\"ti-review-item source-Google ti-image-layout-thumbnail\" data-id=\"cfcd208495d565ef66e7dff9f98764da\"> <div class=\"ti-inner\"> <div class=\"ti-review-header\"> <div class=\"ti-platform-icon ti-with-tooltip\"> <span class=\"ti-tooltip\">Posted on <\/span> <trustindex-image data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"\" width=\"20\" height=\"20\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-img\"> <trustindex-image data-imgurl=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocKGKsaieMexY_E9aTTUYFO7slJtYoBQ_j_k0RW58lKWSv_Y7w=w40-h40-c-rp-mo-ba2-br100\" alt=\"alessandro solinas profile picture\" loading=\"lazy\"><\/trustindex-image> <\/div> <div class=\"ti-profile-details\"> <div class=\"ti-name\"> alessandro solinas <\/div> <div class=\"ti-date\"><\/div> <\/div> <\/div> <span class=\"ti-stars\"><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><trustindex-image class=\"ti-star\" data-imgurl=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google\" width=\"17\" height=\"17\" loading=\"lazy\"><\/trustindex-image><span class=\"ti-verified-review ti-verified-platform\"><span class=\"ti-verified-tooltip\">Trustindex verifies that the original source of the review is Google.<\/span><\/span><\/span> <div class=\"ti-review-text-container ti-review-content\"><!-- R-CONTENT -->Il top per qualit\u00e0 e prezzo Karim e i suoi amici sono stati davvero disponibili e gentili le migliori tavole da surf ai migliori prezzi<!-- R-CONTENT --><\/div> <span class=\"ti-read-more\" data-container=\".ti-review-content\" data-collapse-text=\"Hide\" data-open-text=\"Read more\"><\/span> <\/div> <\/div> <\/div> <div class=\"ti-controls-line\"> <div class=\"dot\"><\/div> <\/div> <\/div> <div class=\"ti-verified-by ti-verified-by-row\" data-style=\"1\"> <div class=\"ti-inner\"> Verified by Trustindex <span class=\"ti-info-icon\"><\/span> <div class=\"ti-disclaimer\">Trustindex verified badge is the Universal Symbol of Trust. Only the greatest companies can get the verified badge who has a review score above 4.5, based on customer reviews over the past 12 months. <a href=\"https:\/\/www.trustindex.io\/?a=sys&c=wp-verified-badge&url=\/the-trustindex-verified-badge\/\" target=\"_blank\" rel=\"noopener\">Read more<\/a><\/div> <\/div> <\/div> <\/div> <\/div> <\/template><\/pre><div data-src=\"https:\/\/cdn.trustindex.io\/loader.js?wp-widget\" data-template-id=\"trustindex-google-widget-html\" data-css-url=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/trustindex-google-widget.css?1774876167\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1632805 e-con-full e-flex e-con e-parent\" data-id=\"1632805\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ea62ad elementor-widget elementor-widget-html\" data-id=\"9ea62ad\" 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>Tamazirt Surf Shop & School \u00b7 Why Choose Us<\/title>\r\n\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=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\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 .whyus-section {\r\n width: 100%;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 5rem 2rem;\r\n background: #e8f0f5;\r\n font-family: 'Poppins', sans-serif;\r\n color: #2b2b2b;\r\n }\r\n\r\n .whyus-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: clamp(2rem, 5vw, 5rem);\r\n }\r\n\r\n \/* ===== LEFT SIDE - COLLAGE IMAGE DESIGN ===== *\/\r\n .whyus-collage {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-rows: 1fr 1fr;\r\n gap: clamp(14px, 2vw, 22px);\r\n min-height: clamp(360px, 42vw, 520px);\r\n align-content: stretch;\r\n --badge-x: 50%;\r\n --badge-y: 50%;\r\n --badge-size: clamp(110px, 14vw, 150px);\r\n }\r\n\r\n .whyus-img-box {\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 10px 25px rgba(224,122,44,.08);\r\n background: #cbdde6;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .whyus-img-box:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n .whyus-img-box img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .whyus-img-box:hover img {\r\n transform: scale(1.05);\r\n }\r\n\r\n .whyus-img-1 {\r\n grid-column: 1 \/ 2;\r\n grid-row: 1 \/ 2;\r\n border-radius: 120px 22px 22px 22px;\r\n }\r\n\r\n .whyus-img-3 {\r\n grid-column: 1 \/ 2;\r\n grid-row: 2 \/ 3;\r\n border-radius: 22px 22px 22px 120px;\r\n }\r\n\r\n .whyus-img-2 {\r\n grid-column: 2 \/ 3;\r\n grid-row: 1 \/ 3;\r\n border-radius: 22px;\r\n align-self: center;\r\n height: 86%;\r\n transform: translateY(2%);\r\n z-index: 1;\r\n }\r\n\r\n \/* Orange Ring *\/\r\n .whyus-ring {\r\n position: absolute;\r\n width: clamp(140px, 18vw, 200px);\r\n height: clamp(140px, 18vw, 200px);\r\n border-radius: 999px;\r\n border: clamp(12px, 1.4vw, 18px) solid #E07A2C;\r\n top: clamp(10px, 2vw, 18px);\r\n left: 56%;\r\n transform: translateX(-10%);\r\n z-index: 0;\r\n opacity: .8;\r\n }\r\n\r\n \/* Experience Badge *\/\r\n .whyus-exp-badge {\r\n position: absolute;\r\n width: var(--badge-size);\r\n height: var(--badge-size);\r\n border-radius: 999px;\r\n background: #0a2f44;\r\n color: #f39c12;\r\n display: grid;\r\n place-items: center;\r\n text-align: center;\r\n box-shadow: 0 18px 40px rgba(0,0,0,.20);\r\n border: 8px solid #fff;\r\n left: var(--badge-x);\r\n top: var(--badge-y);\r\n transform: translate(-50%, -50%);\r\n z-index: 4;\r\n }\r\n\r\n .whyus-exp-inner {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n }\r\n\r\n .whyus-exp-badge .whyus-num {\r\n font-weight: 900;\r\n font-size: clamp(28px, 3.2vw, 42px);\r\n line-height: 1;\r\n margin: 0;\r\n color: #E07A2C;\r\n }\r\n\r\n .whyus-exp-badge .whyus-txt {\r\n margin: 0;\r\n font-weight: 900;\r\n font-size: clamp(11px, 1.2vw, 14px);\r\n line-height: 1.15;\r\n color: #f39c12;\r\n }\r\n\r\n \/* Dots Decoration *\/\r\n .whyus-dots-top {\r\n position: absolute;\r\n left: 30%;\r\n top: -5%;\r\n width: 4rem;\r\n height: 3rem;\r\n background-image: radial-gradient(#1e6b8f 2px, transparent 2px);\r\n background-size: 12px 12px;\r\n opacity: 0.4;\r\n z-index: 1;\r\n }\r\n\r\n .whyus-dots-bottom {\r\n position: absolute;\r\n left: 8%;\r\n bottom: -5%;\r\n width: 5rem;\r\n height: 4rem;\r\n background-image: radial-gradient(#0a5c7a 2px, transparent 2px);\r\n background-size: 14px 14px;\r\n opacity: 0.3;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== RIGHT SIDE - CONTENT ===== *\/\r\n .whyus-content {\r\n width: 100%;\r\n max-width: 580px;\r\n }\r\n\r\n .whyus-topline {\r\n font-size: clamp(0.7rem, 2vw, 0.9rem);\r\n font-weight: 700;\r\n color: #E07A2C;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .whyus-title {\r\n font-size: clamp(2rem, 5vw, 3rem);\r\n font-weight: 800;\r\n line-height: 1.2;\r\n color: #0a2f44;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .whyus-subtitle {\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n color: #2c4a5e;\r\n font-weight: 400;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n \/* Features with Background *\/\r\n .features-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.2rem;\r\n }\r\n\r\n .feature-item {\r\n display: flex;\r\n gap: 1.2rem;\r\n align-items: flex-start;\r\n background: #ffffff;\r\n padding: 1.2rem 1.5rem;\r\n border-radius: 1.2rem;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(30, 107, 143, 0.1);\r\n box-shadow: 0 4px 12px rgba(10, 92, 122, 0.05);\r\n }\r\n\r\n .feature-item:hover {\r\n transform: translateX(8px);\r\n border-color: rgba(224, 122, 44, 0.3);\r\n box-shadow: 0 8px 20px rgba(10, 92, 122, 0.1);\r\n }\r\n\r\n .feature-icon {\r\n flex-shrink: 0;\r\n width: 55px;\r\n height: 55px;\r\n background: linear-gradient(135deg, #0a2f44 0%, #1e6b8f 100%);\r\n border-radius: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-item:hover .feature-icon {\r\n background: linear-gradient(135deg, #E07A2C 0%, #f39c12 100%);\r\n transform: scale(1.05);\r\n }\r\n\r\n .feature-icon svg {\r\n width: 28px;\r\n height: 28px;\r\n fill: white;\r\n }\r\n\r\n .feature-text {\r\n flex: 1;\r\n }\r\n\r\n .feature-text h3 {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: #0a2f44;\r\n margin-bottom: 0.4rem;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .feature-item:hover .feature-text h3 {\r\n color: #E07A2C;\r\n }\r\n\r\n .feature-text p {\r\n font-size: 0.85rem;\r\n line-height: 1.5;\r\n color: #4a5b68;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (min-width: 981px) {\r\n .whyus-collage {\r\n min-height: 460px;\r\n }\r\n .whyus-img-2 {\r\n height: 78%;\r\n transform: translateY(6%);\r\n }\r\n }\r\n\r\n @media (max-width: 980px) {\r\n .whyus-container {\r\n grid-template-columns: 1fr;\r\n gap: 2.5rem;\r\n }\r\n .whyus-collage {\r\n max-width: 550px;\r\n margin: 0 auto;\r\n min-height: 420px;\r\n }\r\n .whyus-content {\r\n max-width: 100%;\r\n text-align: center;\r\n }\r\n .features-list {\r\n max-width: 550px;\r\n margin: 0 auto;\r\n }\r\n .feature-item {\r\n text-align: left;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .whyus-section {\r\n padding: 3rem 1.2rem;\r\n }\r\n .whyus-collage {\r\n min-height: 380px;\r\n --badge-size: 122px;\r\n }\r\n .whyus-img-2 {\r\n height: 82%;\r\n }\r\n .whyus-ring {\r\n left: 58%;\r\n top: 8px;\r\n }\r\n .whyus-exp-badge {\r\n border-width: 6px;\r\n }\r\n .whyus-exp-badge .whyus-num {\r\n font-size: 36px;\r\n }\r\n .whyus-exp-badge .whyus-txt {\r\n font-size: 13px;\r\n }\r\n .feature-item {\r\n padding: 1rem;\r\n gap: 1rem;\r\n }\r\n .feature-icon {\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 14px;\r\n }\r\n .feature-icon svg {\r\n width: 22px;\r\n height: 22px;\r\n }\r\n .feature-text h3 {\r\n font-size: 1rem;\r\n }\r\n .feature-text p {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n \/* Animation *\/\r\n @keyframes fadeInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n @keyframes fadeInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n .whyus-collage {\r\n animation: fadeInLeft 0.6s ease-out forwards;\r\n }\r\n\r\n .whyus-content {\r\n animation: fadeInRight 0.6s ease-out forwards;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"whyus-section\">\r\n <div class=\"whyus-container\">\r\n\r\n <!-- LEFT SIDE: Professional Collage Design -->\r\n <div class=\"whyus-collage\">\r\n <div class=\"whyus-ring\"><\/div>\r\n <div class=\"whyus-dots-top\"><\/div>\r\n <div class=\"whyus-dots-bottom\"><\/div>\r\n\r\n <!-- Image 1 (top-left) -->\r\n <div class=\"whyus-img-box whyus-img-1\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/sandboarding.jpg\" alt=\"Surf lesson at Tamazirt Surf Shop Taghazout\">\r\n <\/div>\r\n\r\n <!-- Image 2 (right tall) -->\r\n <div class=\"whyus-img-box whyus-img-2\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.05-1.jpeg\" alt=\"Premium surfboards at Tamazirt Surf Shop\">\r\n <\/div>\r\n\r\n <!-- Image 3 (bottom-left) -->\r\n <div class=\"whyus-img-box whyus-img-3\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.08.jpeg\" alt=\"Surfing experience Taghazout Morocco\">\r\n <\/div>\r\n\r\n <!-- Experience Badge -->\r\n <div class=\"whyus-exp-badge\">\r\n <div class=\"whyus-exp-inner\">\r\n <div class=\"whyus-num\">8+<\/div>\r\n <div class=\"whyus-txt\">Jahre der<br\/>Surf-Exzellenz<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT SIDE: Content with Features -->\r\n <div class=\"whyus-content\">\r\n <div class=\"whyus-topline\">Warum uns w\u00e4hlen<\/div>\r\n <h2 class=\"whyus-title\">The Tamazirt Surf Shop & School Difference<\/h2>\r\n <p class=\"whyus-subtitle\">\r\n Erleben Sie authentische marokkanische Surfkultur mit leidenschaftlichen Einheimischen, die das Meer leben und atmen.\r\n <\/p>\r\n\r\n <div class=\"features-list\">\r\n \r\n <!-- Feature 1: Expert Local Instructors -->\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3>Erfahrene lokale Ausbilder<\/h3>\r\n <p>Zertifizierte marokkanische Surff\u00fchrer mit jahrelanger Erfahrung im Unterrichten aller Niveaus, von Anf\u00e4ngern bis zu Fortgeschrittenen.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 2: Premium Equipment -->\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3>Premium-Ausstattung<\/h3>\r\n <p>Hochwertige Surfbretter, SUPs und Neoprenanz\u00fcge f\u00fchrender Marken, die sorgf\u00e4ltig gewartet werden, um optimale Leistung zu erzielen.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 3: Authentic Moroccan Vibe -->\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path 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-2-10L6 18l8-4 4-8-8 4z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3>Authentisches marokkanisches Flair<\/h3>\r\n <p>Tauchen Sie ein in die lokale Kultur mit handverlesenen Souvenirs, handwerklichen Produkten und echter Gastfreundschaft in Taghazout.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\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>\n\t\t<div class=\"elementor-element elementor-element-604140f e-con-full e-flex e-con e-parent\" data-id=\"604140f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-748c4d9 elementor-widget elementor-widget-html\" data-id=\"748c4d9\" 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>Yalla Surf \u00b7 Photo Gallery | Surfing in Taghazout<\/title>\r\n\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=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\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 .gallery-section {\r\n width: 100%;\r\n background: linear-gradient(145deg, #f8fbfe 0%, #eef3fa 100%);\r\n font-family: 'Poppins', sans-serif;\r\n padding: 5rem 2rem;\r\n }\r\n\r\n .gallery-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Section Header *\/\r\n .gallery-header {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .gallery-header .badge {\r\n display: inline-block;\r\n background: rgba(224, 122, 44, 0.12);\r\n color: #E07A2C;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n padding: 0.3rem 1rem;\r\n border-radius: 30px;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .gallery-header h2 {\r\n font-size: clamp(2rem, 5vw, 2.8rem);\r\n font-weight: 800;\r\n color: #0a2f44;\r\n margin-bottom: 0.75rem;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .gallery-header p {\r\n font-size: 1.1rem;\r\n color: #4a6f86;\r\n max-width: 580px;\r\n margin: 0 auto;\r\n }\r\n\r\n .gallery-header .divider {\r\n width: 70px;\r\n height: 3px;\r\n background: #E07A2C;\r\n margin: 1rem auto 0;\r\n border-radius: 3px;\r\n }\r\n\r\n \/* Gallery Grid - 4 columns on desktop *\/\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1.5rem;\r\n }\r\n\r\n \/* Gallery Item *\/\r\n .gallery-item {\r\n position: relative;\r\n border-radius: 1.2rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n aspect-ratio: 1 \/ 1;\r\n box-shadow: 0 12px 25px -10px rgba(0, 0, 0, 0.1);\r\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);\r\n }\r\n\r\n .gallery-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .gallery-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n display: block;\r\n }\r\n\r\n .gallery-item:hover img {\r\n transform: scale(1.08);\r\n }\r\n\r\n \/* Overlay effect on hover *\/\r\n .gallery-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(10, 47, 68, 0.85), transparent);\r\n padding: 1.5rem 1rem 1rem;\r\n transform: translateY(100%);\r\n transition: transform 0.4s ease;\r\n text-align: center;\r\n }\r\n\r\n .gallery-item:hover .gallery-overlay {\r\n transform: translateY(0);\r\n }\r\n\r\n .gallery-overlay svg {\r\n width: 28px;\r\n height: 28px;\r\n fill: white;\r\n opacity: 0.9;\r\n }\r\n\r\n \/* Lightbox Modal (optional but adds professionalism) *\/\r\n .lightbox {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.9);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .lightbox.active {\r\n display: flex;\r\n opacity: 1;\r\n }\r\n\r\n .lightbox img {\r\n max-width: 90%;\r\n max-height: 90%;\r\n object-fit: contain;\r\n border-radius: 8px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .lightbox-close {\r\n position: absolute;\r\n top: 20px;\r\n right: 30px;\r\n color: white;\r\n font-size: 40px;\r\n cursor: pointer;\r\n font-weight: 300;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .lightbox-close:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 1024px) {\r\n .gallery-section {\r\n padding: 4rem 1.8rem;\r\n }\r\n .gallery-grid {\r\n gap: 1.2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .gallery-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1.2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .gallery-section {\r\n padding: 3rem 1.2rem;\r\n }\r\n .gallery-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1rem;\r\n }\r\n .gallery-header h2 {\r\n font-size: 1.8rem;\r\n }\r\n .gallery-header p {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .gallery-section {\r\n padding: 2.5rem 1rem;\r\n }\r\n .gallery-grid {\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n max-width: 380px;\r\n margin: 0 auto;\r\n }\r\n .gallery-item {\r\n aspect-ratio: 4 \/ 3;\r\n }\r\n }\r\n\r\n \/* Animation on scroll *\/\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 .gallery-item {\r\n animation: fadeInUp 0.6s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .gallery-item:nth-child(1) { animation-delay: 0.05s; }\r\n .gallery-item:nth-child(2) { animation-delay: 0.1s; }\r\n .gallery-item:nth-child(3) { animation-delay: 0.15s; }\r\n .gallery-item:nth-child(4) { animation-delay: 0.2s; }\r\n .gallery-item:nth-child(5) { animation-delay: 0.25s; }\r\n .gallery-item:nth-child(6) { animation-delay: 0.3s; }\r\n .gallery-item:nth-child(7) { animation-delay: 0.35s; }\r\n .gallery-item:nth-child(8) { animation-delay: 0.4s; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"gallery-section\">\r\n <div class=\"gallery-container\">\r\n \r\n <div class=\"gallery-header\">\r\n <div class=\"badge\">Yalla Surf Momente<\/div>\r\n <h2>Die Erfassung des Stoke<\/h2>\r\n <p>Authentische Momente von unseren Surfsessions, unserem Shop und der wundersch\u00f6nen K\u00fcste von Taghazout<\/p>\r\n <div class=\"divider\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-grid\">\r\n \r\n <!-- Image 1 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.09-3.jpeg\" \r\n alt=\"Surf instructor teaching at Yalla Surf Shop School\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 2 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.05-1.jpeg\" \r\n alt=\"Surfing action in Taghazout Bay\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 3 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.08-1.jpeg\" \r\n alt=\"Surfboard and equipment at Yalla Surf Shop\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 4 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.10-1.jpeg\" \r\n alt=\"Sunset surfing in Taghazout\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 5 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.17.21.jpeg\" \r\n alt=\"Group surf lesson with Yalla instructors\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 6 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.17.22.jpeg\" \r\n alt=\"Yalla Surf Shop interior and gear\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 7 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-27-at-15.11.12.jpeg\" \r\n alt=\"Wave riding in Taghazout\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Image 8 -->\r\n <div class=\"gallery-item\" onclick=\"openLightbox(this)\">\r\n <img decoding=\"async\" src=\"https:\/\/tamazirtsurfshopschool.com\/wp-content\/uploads\/2026\/03\/sandboarding.jpg\" \r\n alt=\"Sandboarding adventure near Taghazout\" \r\n loading=\"lazy\">\r\n <div class=\"gallery-overlay\">\r\n <svg viewbox=\"0 0 24 24\">\r\n <path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/>\r\n <path d=\"M12 4C6.48 4 2 8.48 2 14s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Lightbox Modal -->\r\n <div id=\"lightbox\" class=\"lightbox\" onclick=\"closeLightbox()\">\r\n <span class=\"lightbox-close\">\u00d7<\/span>\r\n <img decoding=\"async\" id=\"lightbox-img\" src=\"\" alt=\"Gallery image\">\r\n <\/div>\r\n\r\n <script>\r\n function openLightbox(element) {\r\n const img = element.querySelector('img');\r\n const lightbox = document.getElementById('lightbox');\r\n const lightboxImg = document.getElementById('lightbox-img');\r\n lightboxImg.src = img.src;\r\n lightbox.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeLightbox() {\r\n const lightbox = document.getElementById('lightbox');\r\n lightbox.classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n \/\/ Close with Escape key\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') {\r\n closeLightbox();\r\n }\r\n });\r\n <\/script>\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>Tamazirt Surf | Ocean Blue Slider \u2013 Book Surf Lessons Tamazirt Surf Shop School \u00b7 Surf Lessons & Premium Gear +1,280+ Happy surfers Tamazirt Surf Shop School \u2726 \u2726 \u2726 \u2726 Surf Lessons & Premium Gear in Taghazout Tamazirt Surf Shop School offers expert surf lessons for all levels, premium board rentals & wetsuits, 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-8","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":80,"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/pages\/8\/revisions\/357"}],"wp:attachment":[{"href":"https:\/\/tamazirtsurfshopschool.com\/de\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}