{"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\/fr\/","title":{"rendered":"Accueil"},"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\">Des surfeurs heureux<\/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\">\u00c9cole Tamazirt Surf Shop <span>\u2726 \u2726 \u2726 \u2726<\/span><\/div>\r\n\r\n <h1 class=\"tss-title\">Cours de surf &<br> Mat\u00e9riel de premi\u00e8re qualit\u00e9 \u00e0 Taghazout<\/h1>\r\n\r\n <p class=\"tss-desc\">\r\n <b>\u00c9cole Tamazirt Surf Shop<\/b> propose un expert <b>le\u00e7ons de surf pour tous les niveaux<\/b>, ,\r\n prime <b>location de planches et combinaisons<\/b>, et inoubliable <b>aventures de surf<\/b> le long de la c\u00f4te atlantique\r\n c\u00f4te atlantique du Maroc. D\u00e9couvrez la culture authentique du surf \u00e0 Taghazout avec des instructeurs locaux certifi\u00e9s.\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>Coaching surf personnalis\u00e9 et petits groupes<\/b> avec des instructeurs certifi\u00e9s.\r\n S'amuser <b>l'analyse vid\u00e9o, la formation \u00e0 la s\u00e9curit\u00e9 et la connaissance des lieux<\/b> -\r\n depuis les vagues pour d\u00e9butants jusqu'aux reef breaks avanc\u00e9s comme 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 Cours de surf pour d\u00e9butants\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 Coaching avanc\u00e9\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 Location de planches de surf et de combinaisons\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 Camps de surf et guides\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BUTTON: just two words \"Book Now\" -->\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/fr\/surf-lessons-in-taghazout\/\" class=\"tss-btn\">R\u00e9servez maintenant \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>D\u00e9couvrez l'esprit de l'Atlantique<\/h2>\r\n <p>Aventures de surf et de plein air de premi\u00e8re qualit\u00e9 \u00e0 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\">Rejoindre les cours de surf \u00e0 Taghazout<\/h3>\r\n <p class=\"feature-description\">\r\n <strong>Apprendre \u00e0 surfer<\/strong> \u00e0 Taghazout avec <strong>des instructeurs locaux de confiance<\/strong>. Des premi\u00e8res balades aux s\u00e9ances de perfectionnement, chaque le\u00e7on est adapt\u00e9e \u00e0 votre niveau. Rejoindre <strong>cours en petits groupes<\/strong>, aller <strong>le\u00e7ons de surf priv\u00e9es en t\u00eate-\u00e0-t\u00eate<\/strong>, ou laisser <strong>Les enfants surfent en toute s\u00e9curit\u00e9<\/strong>. R\u00e9servez votre <strong>Exp\u00e9rience de surf \u00e0 Taghazout<\/strong> maintenant - amusant, amical et con\u00e7u pour toutes les capacit\u00e9s.\r\n <\/p>\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/fr\/surf-lessons-in-taghazout\/\" class=\"feature-btn\">\r\n Explorer les forfaits de surf\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 LOCATIONS<\/div>\r\n <h3 class=\"feature-title\">Louer une planche de surf ou un stand-up paddleboard<\/h3>\r\n <p class=\"feature-description\">\r\n Au <strong>Tamazirt Surf Shop<\/strong>, nous avons le <strong>tableau parfait<\/strong> qui vous attendent, que vous d\u00e9butiez ou que vous soyez \u00e0 la recherche de la prochaine grosse houle. A partir de <strong>planches de surf pour d\u00e9butants<\/strong> \u00e0 <strong>planches \u00e0 pagaie haute performance<\/strong>, Notre s\u00e9lection de locations convient \u00e0 tous les niveaux. <strong>R\u00e9server en ligne<\/strong> et de passer directement aux vagues d\u00e8s votre arriv\u00e9e.\r\n <\/p>\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/fr\/surf-rentals\/\" class=\"feature-btn\">\r\n R\u00e9server\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 ACTIVIT\u00c9S<\/div>\r\n <h3 class=\"feature-title\">Participez \u00e0 des activit\u00e9s de plein air inoubliables<\/h3>\r\n <p class=\"feature-description\">\r\n Il y a <strong>Taghazout ne se r\u00e9sume pas au surf<\/strong> - laissez-nous vous montrer la magie. A partir de <strong>Des promenades paisibles dans Paradise Valley<\/strong> \u00e0 la <strong>Les dunes dor\u00e9es de Timlalin<\/strong> et passionnante <strong>exp\u00e9riences de surf des sables<\/strong>, Chaque voyage est guid\u00e9 avec soin. Voyagez avec style avec <strong>transport climatis\u00e9<\/strong> et <strong>des guides locaux sympathiques<\/strong>. D\u00e9couvrez, explorez et cr\u00e9ez des souvenirs - <strong>R\u00e9servez votre voyage avec nous d\u00e8s maintenant<\/strong>.\r\n <\/p>\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/fr\/activities\/\" class=\"feature-btn\">\r\n Explorer maintenant\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 & School<\/h1>\r\n \r\n <!-- Tagline \/ Subtitle -->\r\n <p class=\"hero-subtitle\">La premi\u00e8re exp\u00e9rience de surf \u00e0 Taghazout<\/p>\r\n \r\n <!-- Description Text - Exactly 3 Lines -->\r\n <p class=\"hero-description\">\r\n Location de planches de surf de qualit\u00e9, le\u00e7ons de surf amusantes \u00e0 Taghazout, et un m\u00e9lange tri\u00e9 sur le volet de chemises et de souvenirs fabriqu\u00e9s localement.\r\n Que vous soyez d\u00e9butant ou \u00e0 la recherche de votre prochaine vague, nous avons tout ce qu'il vous faut.\r\n Venez nous rendre visite, dites-nous bonjour et plongez dans l'esprit du surf - pas de stress, juste de l'enthousiasme.\r\n <\/p>\r\n \r\n <!-- Call to Action Button -->\r\n <a href=\"https:\/\/tamazirtsurfshopschool.com\/fr\/surf-rentals\/\" class=\"hero-btn\">\r\n Visitez notre boutique\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\">Ann\u00e9es de<br\/>Surf Excellence<\/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\">Pourquoi nous choisir ?<\/div>\r\n <h2 class=\"whyus-title\">La diff\u00e9rence Tamazirt Surf Shop & School<\/h2>\r\n <p class=\"whyus-subtitle\">\r\n D\u00e9couvrez l'authentique culture marocaine du surf en compagnie de locaux passionn\u00e9s qui vivent et respirent l'oc\u00e9an.\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>Des instructeurs locaux experts<\/h3>\r\n <p>Guides de surf marocains certifi\u00e9s ayant des ann\u00e9es d'exp\u00e9rience dans l'enseignement de tous les niveaux, des d\u00e9butants aux plus exp\u00e9riment\u00e9s.<\/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>\u00c9quipement de premi\u00e8re qualit\u00e9<\/h3>\r\n <p>Des planches de surf, des SUP et des combinaisons de surf de grande qualit\u00e9 des plus grandes marques, m\u00e9ticuleusement entretenues pour des performances optimales.<\/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>Authentique ambiance marocaine<\/h3>\r\n <p>Plongez dans la culture locale avec des souvenirs tri\u00e9s sur le volet, des produits artisanaux et l'hospitalit\u00e9 authentique de 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\">Moments de surf Yalla<\/div>\r\n <h2>Capturer le Stoke<\/h2>\r\n <p>Des moments authentiques de nos sessions de surf, de notre magasin et de la magnifique c\u00f4te de 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\/fr\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":80,"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/pages\/8\/revisions\/357"}],"wp:attachment":[{"href":"https:\/\/tamazirtsurfshopschool.com\/fr\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}