Day Trip to Casablanca | Morocco's Atlantic Capital<\/title>\r\n <meta name=\"description\" content=\"Full-day excursion from Marrakech to Casablanca. Visit Hassan II Mosque, A\u00efn Diab Corniche, Habous Quarter, and enjoy a classic seafood lunch.\">\r\n <meta name=\"keywords\" content=\"Casablanca day trip, Marrakech excursion, Hassan II Mosque, Morocco tours\">\r\n <meta property=\"og:title\" content=\"Day Trip to Casablanca - Morocco's Atlantic Capital\">\r\n <meta property=\"og:description\" content=\"Experience Casablanca's highlights: Hassan II Mosque, seaside Corniche, Habous Quarter, and grand civic squares.\">\r\n <meta property=\"og:type\" content=\"website\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\r\n <style>\r\n \/* Tour Booking Page Styles - Self-contained *\/\r\n .tour-booking-page {\r\n \/* earthy palette - similar to Shaka *\/\r\n --tour-bg:#f5efe6; \/* sand background *\/\r\n --tour-ink:#2d2a26; \/* deep ink text *\/\r\n --tour-muted:#6b6a66; \/* muted text *\/\r\n --tour-card:#ffffff; \/* card bg *\/\r\n --tour-border:#e6dfd4; \/* soft border *\/\r\n --tour-sage:#647a68; \/* green accent *\/\r\n --tour-sage-700:#4f6254; \/* darker green *\/\r\n --tour-terra:#e67e22; \/* orange accent *\/\r\n --tour-terra-700:#d35400; \/* darker orange *\/\r\n --tour-cream:#fffaf2; \/* soft cream *\/\r\n\r\n --radius:14px; \r\n --shadow:0 10px 30px rgba(2,6,23,.08);\r\n \r\n box-sizing: border-box;\r\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n background: linear-gradient(180deg, var(--tour-cream), var(--tour-bg));\r\n color: var(--tour-ink);\r\n line-height: 1.6;\r\n -webkit-text-size-adjust: 100%;\r\n }\r\n \r\n .tour-booking-page * {\r\n box-sizing: border-box;\r\n }\r\n \r\n .tour-booking-page .container{\r\n max-width:1160px; \r\n margin-inline:auto; \r\n padding:24px;\r\n }\r\n\r\n \/* ---------------- Content Layout ---------------- *\/\r\n .tour-booking-page .content-wrapper{display:grid; grid-template-columns:1.6fr .9fr; gap:26px}\r\n @media (max-width:980px){.tour-booking-page .content-wrapper{grid-template-columns:1fr}}\r\n\r\n .tour-booking-page .section{\r\n background:var(--tour-card); \r\n border-radius:var(--radius); \r\n padding:24px; \r\n margin-bottom:22px; \r\n box-shadow:var(--shadow); \r\n border:1px solid var(--tour-border)\r\n }\r\n .tour-booking-page .section-title{\r\n display:flex; \r\n align-items:center; \r\n gap:10px; \r\n font-size:1.35rem; \r\n margin:0 0 16px;\r\n color: var(--tour-ink);\r\n }\r\n .tour-booking-page .section-title i{color:var(--tour-terra)}\r\n .tour-booking-page .description{color:var(--tour-muted); font-size:1.05rem}\r\n\r\n \/* ---------------- Interactive Gallery ---------------- *\/\r\n .tour-booking-page .image-gallery{display:grid; gap:12px; margin:22px 0 34px}\r\n .tour-booking-page .gallery-main{height:380px; border-radius:16px; background-size:cover; background-position:center; position:relative; overflow:hidden; cursor: pointer;}\r\n .tour-booking-page .gallery-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}\r\n .tour-booking-page .gallery-thumb{height:140px; border-radius:12px; background-size:cover; background-position:center; position:relative; overflow:hidden; cursor: pointer;}\r\n .tour-booking-page .gallery-thumb.active {border: 3px solid var(--tour-terra);}\r\n .tour-booking-page .img-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); opacity:0; transition:.25s}\r\n .tour-booking-page .zoom-btn{\r\n position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.9); border:1px solid var(--tour-border);\r\n padding:8px 10px; border-radius:999px; display:flex; gap:8px; align-items:center; font-weight:600; color:#111; box-shadow:var(--shadow); cursor:pointer\r\n }\r\n .tour-booking-page .gallery-main:hover .img-overlay, .tour-booking-page .gallery-thumb:hover .img-overlay{opacity:1}\r\n\r\n \/* ---------------- Itinerary ---------------- *\/\r\n .tour-booking-page .itinerary-item{\r\n display:grid; \r\n grid-template-columns:120px 1fr; \r\n gap:16px; \r\n padding:16px 0; \r\n border-bottom:1px solid var(--tour-border)\r\n }\r\n .tour-booking-page .itinerary-item:last-child{border-bottom:0}\r\n .tour-booking-page .itinerary-day{font-weight:800; color:var(--tour-terra)}\r\n .tour-booking-page .itinerary-content h4{margin:.2rem 0 .25rem}\r\n\r\n \/* ---------------- Inclusions ---------------- *\/\r\n .tour-booking-page .inclusion-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}\r\n @media (max-width:700px){.tour-booking-page .inclusion-grid{grid-template-columns:1fr}}\r\n .tour-booking-page .inclusion-list,.tour-booking-page .exclusion-list{list-style:none; padding:0; margin:0}\r\n .tour-booking-page .inclusion-list li,.tour-booking-page .exclusion-list li{display:flex; gap:10px; margin-bottom:10px}\r\n .tour-booking-page .inclusion-list i{color:var(--tour-sage)}\r\n .tour-booking-page .exclusion-list i{color:#e74c3c}\r\n\r\n \/* ---------------- Additional Details Grid ---------------- *\/\r\n .tour-booking-page .additional-details-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}\r\n .tour-booking-page .detail-item{\r\n display:flex; \r\n align-items:center; \r\n gap:15px; \r\n padding:15px; \r\n background: rgba(230, 126, 34,.05); \r\n border-radius:10px; \r\n border-left:4px solid var(--tour-terra)\r\n }\r\n .tour-booking-page .detail-icon{\r\n background:var(--tour-terra); \r\n color:#fff; \r\n width:50px; \r\n height:50px; \r\n border-radius:50%; \r\n display:flex; \r\n align-items:center; \r\n justify-content:center; \r\n font-size:1.3rem\r\n }\r\n .tour-booking-page .detail-content h3{margin:0 0 5px; font-size:1.1rem}\r\n .tour-booking-page .detail-content p{margin:0; color:var(--tour-muted)}\r\n\r\n \/* ---------------- FAQ Accordion ---------------- *\/\r\n .tour-booking-page .faq-accordion-item {\r\n border: 1px solid var(--tour-border);\r\n border-radius: 10px;\r\n margin-bottom: 12px;\r\n overflow: hidden;\r\n background: var(--tour-card);\r\n }\r\n .tour-booking-page .faq-accordion-header {\r\n padding: 18px 20px;\r\n background: rgba(230, 126, 34, 0.05);\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-weight: 600;\r\n color: var(--tour-ink);\r\n transition: background 0.3s ease;\r\n }\r\n .tour-booking-page .faq-accordion-header:hover {\r\n background: rgba(230, 126, 34, 0.1);\r\n }\r\n .tour-booking-page .faq-accordion-header i {\r\n transition: transform 0.3s ease;\r\n color: var(--tour-terra);\r\n }\r\n .tour-booking-page .faq-accordion-item.active .faq-accordion-header i {\r\n transform: rotate(180deg);\r\n }\r\n .tour-booking-page .faq-accordion-content {\r\n padding: 0 20px;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease, padding 0.3s ease;\r\n color: var(--tour-muted);\r\n }\r\n .tour-booking-page .faq-accordion-item.active .faq-accordion-content {\r\n padding: 20px;\r\n max-height: 300px;\r\n }\r\n\r\n \/* ---------------- Sidebar ---------------- *\/\r\n .tour-booking-page .price-section{\r\n background:linear-gradient(180deg, var(--tour-terra), var(--tour-terra-700)); \r\n color:#fff; \r\n border:0\r\n }\r\n .tour-booking-page .price-section .section-title{color:#fff}\r\n .tour-booking-page .price-amount{font-size:clamp(2.1rem,4.2vw,3rem); font-weight:800; letter-spacing:.3px}\r\n .tour-booking-page .booking-form{position:sticky; top:18px}\r\n\r\n \/* ---------------- Form ---------------- *\/\r\n .tour-booking-page .form-group{margin-bottom:16px}\r\n .tour-booking-page label{display:block; margin-bottom:8px; font-weight:600; color:var(--tour-ink)}\r\n .tour-booking-page .form-control{\r\n width:100%; \r\n padding:12px 14px; \r\n border:1px solid var(--tour-border); \r\n border-radius:10px; \r\n font:inherit; \r\n background:#fff;\r\n font-size: 16px; \/* Prevent zoom on iOS *\/\r\n }\r\n .tour-booking-page .form-control:focus{\r\n outline:3px solid rgba(230, 126, 34,.25); \r\n border-color:rgba(230, 126, 34,.5)\r\n }\r\n .tour-booking-page .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}\r\n @media (max-width:700px){.tour-booking-page .form-row{grid-template-columns:1fr}}\r\n .tour-booking-page .btn-book{\r\n width:100%; \r\n display:inline-flex; \r\n align-items:center; \r\n justify-content:center; \r\n gap:.6rem; \r\n border:0; \r\n background:linear-gradient(180deg, var(--tour-terra), var(--tour-terra-700)); \r\n color:#fff; \r\n padding:14px 16px; \r\n border-radius:10px; \r\n font-weight:800; \r\n cursor:pointer; \r\n box-shadow:0 8px 22px rgba(230, 126, 34,.25); \r\n transition:.2s transform ease;\r\n font-size: 16px; \/* Prevent zoom on iOS *\/\r\n }\r\n .tour-booking-page .btn-book:hover{transform:translateY(-1px)}\r\n .tour-booking-page .btn-book:disabled {\r\n background: #cccccc;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* ---------------- Toast & Lightbox ---------------- *\/\r\n .tour-booking-page .toast{\r\n position:fixed; \r\n left:50%; \r\n transform:translateX(-50%); \r\n bottom:20px; \r\n padding:12px 16px; \r\n border-radius:12px; \r\n background:var(--tour-ink); \r\n color:#fff; \r\n box-shadow:var(--shadow); \r\n display:none;\r\n z-index: 100;\r\n }\r\n .tour-booking-page .toast.show{display:block}\r\n .tour-booking-page .toast.success {background: var(--tour-sage);}\r\n .tour-booking-page .toast.error {background: #e74c3c;}\r\n \r\n .tour-booking-page dialog#lightbox{\r\n border:0; \r\n padding:0; \r\n background:transparent;\r\n width: 100%;\r\n height: 100%;\r\n max-width: 100%;\r\n max-height: 100%;\r\n }\r\n .tour-booking-page .lb-wrap{\r\n position:fixed; \r\n inset:0; \r\n display:grid; \r\n place-items:center; \r\n background:rgba(0,0,0,.8); \r\n z-index: 100;\r\n padding: 20px;\r\n }\r\n .tour-booking-page .lb-img{\r\n max-width:90vw; \r\n max-height:80vh; \r\n border-radius:14px; \r\n border:1px solid rgba(255,255,255,.2); \r\n box-shadow:var(--shadow);\r\n cursor: zoom-in;\r\n transition: transform 0.3s ease;\r\n }\r\n .tour-booking-page .lb-img.zoomed {\r\n transform: scale(1.5);\r\n cursor: zoom-out;\r\n }\r\n .tour-booking-page .close-lightbox {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n background: rgba(0,0,0,0.7);\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n z-index: 101;\r\n }\r\n\r\n \/* ---------------- Tour Description Highlight ---------------- *\/\r\n .tour-booking-page .tour-highlight {\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n color: var(--tour-terra);\r\n text-align: center;\r\n margin: 0 0 20px 0;\r\n padding: 15px;\r\n background: rgba(230, 126, 34, 0.05);\r\n border-radius: 10px;\r\n border-left: 4px solid var(--tour-terra);\r\n }\r\n\r\n \/* ---------------- Mobile Bottom Booking Bar ---------------- *\/\r\n .tour-booking-page .mobile-booking-bar {\r\n display: none;\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: var(--tour-card);\r\n box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);\r\n padding: 12px 16px;\r\n z-index: 90;\r\n border-top: 1px solid var(--tour-border);\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .booking-bar-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n max-width: 1160px;\r\n margin: 0 auto;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .price-info {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .price-amount {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--tour-terra);\r\n line-height: 1.2;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .price-note {\r\n font-size: 0.8rem;\r\n color: var(--tour-muted);\r\n margin: 0;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .btn-book-mobile {\r\n background: linear-gradient(180deg, var(--tour-terra), var(--tour-terra-700));\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n padding: 12px 20px;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: transform 0.2s ease;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .btn-book-mobile:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ---------------- Mobile tweaks ---------------- *\/\r\n @media only screen and (max-width: 768px){\r\n html,\r\n body{\r\n width:100%;\r\n overflow-x:hidden;\r\n }\r\n \r\n .tour-booking-page .container {\r\n padding: 16px;\r\n width: 100%;\r\n margin: 0 auto;\r\n padding-bottom: 80px; \/* Add padding to prevent content from being hidden behind the fixed bar *\/\r\n }\r\n \r\n .tour-booking-page .content-wrapper {\r\n width: 100%;\r\n }\r\n \r\n .tour-booking-page .main-content, .tour-booking-page .booking-sidebar {\r\n width: 100%;\r\n }\r\n \r\n .tour-booking-page .section {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n \r\n .tour-booking-page .image-gallery {\r\n width: 100%;\r\n }\r\n \r\n .tour-booking-page .gallery-main{height:260px}\r\n .tour-booking-page .gallery-thumb{height:110px}\r\n .tour-booking-page .section{padding:18px}\r\n \r\n .tour-booking-page .inclusion-grid,\r\n .tour-booking-page .additional-details-grid {\r\n width: 100%;\r\n }\r\n \r\n \/* Fix for itinerary - remove centering on mobile *\/\r\n .tour-booking-page .itinerary-item {\r\n grid-template-columns: 80px 1fr;\r\n text-align: left;\r\n gap: 12px;\r\n }\r\n \r\n .tour-booking-page .tour-highlight {\r\n font-size: 1.2rem;\r\n text-align: center;\r\n }\r\n \r\n \/* Show mobile booking bar *\/\r\n .tour-booking-page .mobile-booking-bar {\r\n display: block;\r\n }\r\n \r\n \/* Hide sidebar on mobile *\/\r\n .tour-booking-page .booking-sidebar {\r\n display: none;\r\n }\r\n \r\n \/* Prevent zoom on mobile *\/\r\n .tour-booking-page input, .tour-booking-page select, .tour-booking-page textarea {\r\n font-size: 16px !important;\r\n }\r\n }\r\n \r\n \/* Center helper *\/\r\n .tour-booking-page .center{margin-inline:auto}\r\n .tour-booking-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"tour-booking-page\">\r\n <div class=\"container center\">\r\n \r\n <section class=\"image-gallery center\" aria-label=\"Image gallery\">\r\n <figure class=\"gallery-main\" id=\"main-image\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg')\">\r\n <span class=\"img-overlay\"><\/span>\r\n <button class=\"zoom-btn\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg\"><i class=\"fa-solid fa-magnifying-glass\"><\/i> View<\/button>\r\n <\/figure>\r\n <div class=\"gallery-row\">\r\n <figure class=\"gallery-thumb active\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg\" data-main=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg')\"><span class=\"img-overlay\"><\/span><\/figure>\r\n <figure class=\"gallery-thumb\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/ploshad-muhammeda.jpg\" data-main=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/ploshad-muhammeda.jpg\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/ploshad-muhammeda.jpg')\"><span class=\"img-overlay\"><\/span><\/figure>\r\n <figure class=\"gallery-thumb\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/morocco-itinerary-5-days.webp\" data-main=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/morocco-itinerary-5-days.webp\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/morocco-itinerary-5-days.webp')\"><span class=\"img-overlay\"><\/span><\/figure>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"content-wrapper\">\r\n \r\n <div class=\"main-content\">\r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-info-circle\"><\/i> Tour Description<\/h2>\r\n <div class=\"tour-highlight\">Day Trip to Casablanca - Morocco's Atlantic Capital<\/div>\r\n <div class=\"description\">\r\n <p>A full-day excursion from Marrakech to Casablanca, Morocco's bustling Atlantic capital of business and Art Deco flair. Highlights include the monumental Hassan II Mosque, the seaside A\u00efn Diab Corniche, elegant Habous (New Medina), and grand civic squares\u2014plus time for a classic seafood lunch.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-route\"><\/i> Itinerary<\/h2>\r\n <div class=\"itinerary\">\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">07:00\u201307:15<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Pickup in Marrakech<\/h4>\r\n <p>Meet your driver; route & safety briefing. Bottled water provided.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">07:15\u201310:00<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Drive Marrakech \u2192 Casablanca (A7)<\/h4>\r\n <p>Highway run with a short rest stop.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">10:00\u201312:00<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Hassan II Mosque & Seafront<\/h4>\r\n <p>Photo stop outside; optional interior guided tour (paid, subject to schedule & dress code). Walk the seafront promenade.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">12:00\u201313:15<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>A\u00efn Diab Corniche<\/h4>\r\n <p>Sea views, palm-lined promenade, and caf\u00e9s. Good spot for a quick espresso or beach photos.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">13:15\u201314:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Lunch (not included)<\/h4>\r\n <p>Seafood or Moroccan cuisine\u2014your driver suggests reliable options (e.g., Corniche or Central Market area).<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">14:30\u201315:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Mohammed V Square & Arab League Park<\/h4>\r\n <p>See grand colonial-era facades and civic buildings; stroll the renovated park.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">15:30\u201316:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Habous (New Medina) & Royal Palace Area (exterior)<\/h4>\r\n <p>Arched arcades, bookshops, pastry shops, and handicrafts. Palace is view from outside only.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">16:30\u201317:15<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Old Medina or Rick's Caf\u00e9 (photo\/coffee stop)<\/h4>\r\n <p>Choose a short Old Medina browse or a quick stop by Rick's Caf\u00e9 for the iconic fa\u00e7ade.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">17:15\u201320:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Return Drive to Marrakech<\/h4>\r\n <p>Drop-off at your accommodation in the evening.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-clipboard-list\"><\/i> What's Included<\/h2>\r\n <div class=\"inclusion-grid\">\r\n <div>\r\n <h3><i class=\"fas fa-check-circle\" style=\"color:var(--tour-sage)\"><\/i> Included<\/h3>\r\n <ul class=\"inclusion-list\">\r\n <li><i class=\"fas fa-check\"><\/i> Marrakech pickup & drop-off<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> A\/C modern vehicle with professional driver<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> Bottled water on board<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h3><i class=\"fas fa-times-circle\" style=\"color:#e74c3c\"><\/i> Not Included<\/h3>\r\n <ul class=\"exclusion-list\">\r\n <li><i class=\"fas fa-times\"><\/i> Lunch and drinks<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Hassan II Mosque interior tour ticket<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Local city guide (optional)<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Personal expenses, tips<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Travel insurance<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/section>\r\n\r\n \r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-list-alt\"><\/i> Additional Details<\/h2>\r\n <div class=\"additional-details-grid\">\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Departure Time<\/h3><p>7:00 AM from Marrakech<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-calendar-alt\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Duration<\/h3><p>Full Day (approx. 13 hours)<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Group Size<\/h3><p>Small groups<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-walking\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Fitness Level<\/h3><p>Easy city walking<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-sun\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Best Season<\/h3><p>Year-round<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-tshirt\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>What to Bring<\/h3><p>Comfortable <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" aria-label=\"Frequently Asked Questions\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-question-circle\"><\/i> Frequently Asked Questions<\/h2>\r\n <div class=\"faq-accordion\">\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Is the mosque interior visit guaranteed?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Not guaranteed\u2014it depends on the daily tour schedule and prayer times. We plan the day around the best available slot.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Can I skip the mosque interior?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Yes\u2014enjoy the esplanade, ocean views, and caf\u00e9 time instead.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Where's the best lunch spot?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Casual seafood along the Corniche or traditional Moroccan near the Central Market; we'll match your budget and taste.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>How long is the day?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>About 13 hours door-to-door, including highway time and city touring.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>What about shopping?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Habous is great for tasteful crafts, books, and pastries; the Old Medina has a more traditional souk feel.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Do I need a guide in Casablanca?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Not required, but a licensed guide adds context on architecture, history, and neighborhoods (add \u20ac70 per group).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <aside class=\"booking-sidebar\">\r\n <section class=\"section price-section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-tag\"><\/i> Tour Price<\/h2>\r\n <div class=\"price-amount\">$130<\/div>\r\n <p class=\"price-note\">Per person<\/p>\r\n <p><i class=\"fas fa-calendar-alt\"><\/i> Full Day Tour<\/p>\r\n <p><i class=\"fas fa-users\"><\/i> Small Groups<\/p>\r\n <\/section>\r\n <section class=\"section booking-form\" aria-labelledby=\"book-title\">\r\n <h2 id=\"book-title\" class=\"section-title\"><i class=\"fas fa-calendar-plus\"><\/i> Book This Tour<\/h2>\r\n <form id=\"booking-form\" novalidate action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"tour-date\">Select Tour Date<\/label>\r\n <input type=\"date\" id=\"tour-date\" class=\"form-control\" required aria-required=\"true\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"participants\">Number of Participants<\/label>\r\n <input type=\"number\" id=\"participants\" class=\"form-control\" min=\"1\" max=\"15\" value=\"1\" required aria-required=\"true\">\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"first-name\">First Name<\/label>\r\n <input type=\"text\" id=\"first-name\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"last-name\">Last Name<\/label>\r\n <input type=\"text\" id=\"last-name\" class=\"form-control\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email Address<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"phone\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"special-requests\">Special Requests<\/label>\r\n <textarea id=\"special-requests\" class=\"form-control\" rows=\"3\" placeholder=\"Dietary preferences, mobility concerns, etc.\"><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-book\" id=\"submit-btn\"><i class=\"fa-solid fa-paper-plane\"><\/i> Book Now<\/button>\r\n <p id=\"form-help\" class=\"sr-only\" aria-live=\"polite\"><\/p>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"hi\"\/><\/form>\r\n <\/section>\r\n <\/aside>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mobile-booking-bar\">\r\n <div class=\"booking-bar-content\">\r\n <div class=\"price-info\">\r\n <div class=\"price-amount\">$130<\/div>\r\n <p class=\"price-note\">Per person<\/p>\r\n <\/div>\r\n <button class=\"btn-book-mobile\" id=\"scroll-to-form\">\r\n <i class=\"fas fa-calendar-plus\"><\/i> Book Now\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <dialog id=\"lightbox\">\r\n <button class=\"close-lightbox\" aria-label=\"Close lightbox\"><i class=\"fas fa-times\"><\/i><\/button>\r\n <div class=\"lb-wrap\">\r\n <img class=\"lb-img\" id=\"lb-img\" alt=\"Gallery image\" \/>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize EmailJS\r\n (function() {\r\n emailjs.init(\"E_4V-SBuVJroXW_Q5\");\r\n })();\r\n\r\n \/\/ Interactive Gallery\r\n const mainImage = document.getElementById('main-image');\r\n const galleryThumbs = document.querySelectorAll('.gallery-thumb');\r\n \r\n galleryThumbs.forEach(thumb => {\r\n thumb.addEventListener('click', () => {\r\n \/\/ Update main image\r\n const mainSrc = thumb.getAttribute('data-main');\r\n const fullSrc = thumb.getAttribute('data-full');\r\n \r\n mainImage.style.backgroundImage = `url('${mainSrc}')`;\r\n mainImage.querySelector('.zoom-btn').setAttribute('data-full', fullSrc);\r\n \r\n \/\/ Update active state\r\n galleryThumbs.forEach(t => t.classList.remove('active'));\r\n thumb.classList.add('active');\r\n });\r\n });\r\n\r\n \/\/ Lightbox for gallery with zoom functionality\r\n const lightbox = document.getElementById('lightbox');\r\n const lbImg = document.getElementById('lb-img');\r\n const closeLightbox = document.querySelector('.close-lightbox');\r\n \r\n function openLightbox(src) {\r\n lbImg.src = src;\r\n lbImg.classList.remove('zoomed');\r\n lightbox.showModal();\r\n }\r\n \r\n \/\/ Main image click\r\n mainImage.addEventListener('click', () => {\r\n const fullSrc = mainImage.querySelector('.zoom-btn').getAttribute('data-full');\r\n openLightbox(fullSrc);\r\n });\r\n \r\n \/\/ Thumbnail zoom buttons\r\n document.querySelectorAll('.zoom-btn').forEach(btn => {\r\n btn.addEventListener('click', e => {\r\n e.stopPropagation();\r\n const src = btn.getAttribute('data-full');\r\n openLightbox(src);\r\n });\r\n });\r\n \r\n \/\/ Close lightbox\r\n closeLightbox.addEventListener('click', () => {\r\n lightbox.close();\r\n });\r\n \r\n \/\/ Zoom functionality\r\n lbImg.addEventListener('click', () => {\r\n lbImg.classList.toggle('zoomed');\r\n });\r\n\r\n \/\/ Min date = tomorrow\r\n (function(){\r\n const d = new Date(); \r\n d.setDate(d.getDate() + 1);\r\n const min = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;\r\n const input = document.getElementById('tour-date'); \r\n if(input) input.min = min;\r\n })();\r\n\r\n \/\/ FAQ Accordion functionality\r\n document.querySelectorAll('.faq-accordion-header').forEach(header => {\r\n header.addEventListener('click', () => {\r\n const item = header.parentElement;\r\n const isActive = item.classList.contains('active');\r\n \r\n \/\/ Close all accordion items\r\n document.querySelectorAll('.faq-accordion-item').forEach(i => {\r\n i.classList.remove('active');\r\n });\r\n \r\n \/\/ If the clicked item wasn't active, open it\r\n if (!isActive) {\r\n item.classList.add('active');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Form submission with EmailJS\r\n const form = document.getElementById('booking-form');\r\n const toast = document.getElementById('toast');\r\n const submitBtn = document.getElementById('submit-btn');\r\n \r\n function showToast(text, type = 'success') {\r\n toast.textContent = text;\r\n toast.className = 'toast show ' + type;\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 5000);\r\n }\r\n \r\n if(form) {\r\n form.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n \r\n \/\/ Basic validation\r\n const email = document.getElementById('email').value;\r\n const emailValid = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n \r\n if(!emailValid) { \r\n showToast('Please enter a valid email.', 'error'); \r\n return; \r\n }\r\n \r\n \/\/ Disable submit button\r\n submitBtn.disabled = true;\r\n submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Sending...';\r\n \r\n try {\r\n \/\/ Prepare form data\r\n const formData = {\r\n tour_date: document.getElementById('tour-date').value,\r\n participants: document.getElementById('participants').value,\r\n first_name: document.getElementById('first-name').value,\r\n last_name: document.getElementById('last-name').value,\r\n email: email,\r\n phone: document.getElementById('phone').value,\r\n special_requests: document.getElementById('special-requests').value,\r\n tour_name: 'Day Trip to Casablanca - Morocco\\'s Atlantic Capital'\r\n };\r\n \r\n \/\/ Send email via EmailJS\r\n const response = await emailjs.send(\r\n 'service_5pdqt1e', \r\n 'template_a1lx7on', \r\n formData\r\n );\r\n \r\n \/\/ Success\r\n showToast('Thanks! Your booking request has been received. We will contact you shortly.');\r\n form.reset();\r\n \r\n } catch (error) {\r\n \/\/ Error\r\n console.error('EmailJS error:', error);\r\n showToast('Sorry, there was an error sending your request. Please try again.', 'error');\r\n } finally {\r\n \/\/ Re-enable submit button\r\n submitBtn.disabled = false;\r\n submitBtn.innerHTML = '<i class=\"fa-solid fa-paper-plane\"><\/i> Book Now';\r\n }\r\n });\r\n }\r\n\r\n \/\/ Mobile booking bar scroll to form functionality\r\n const scrollToFormBtn = document.getElementById('scroll-to-form');\r\n if (scrollToFormBtn) {\r\n scrollToFormBtn.addEventListener('click', () => {\r\n \/\/ Show the booking form section\r\n document.querySelector('.booking-sidebar').style.display = 'block';\r\n \r\n \/\/ Scroll to the form\r\n document.querySelector('.booking-form').scrollIntoView({ \r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Day Trip to Casablanca | Morocco’s Atlantic Capital View Tour Description Day Trip to Casablanca – Morocco’s Atlantic Capital A full-day excursion from Marrakech to Casablanca, Morocco’s bustling Atlantic capital of business and Art Deco flair. Highlights include the monumental Hassan II Mosque, the seaside A\u00efn Diab Corniche, elegant Habous (New Medina), and grand civic […]<\/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-330","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages\/330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/comments?post=330"}],"version-history":[{"count":7,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages\/330\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages\/330\/revisions\/337"}],"wp:attachment":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/media?parent=330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Day Trip to Casablanca | Morocco's Atlantic Capital<\/title>\r\n <meta name=\"description\" content=\"Full-day excursion from Marrakech to Casablanca. Visit Hassan II Mosque, A\u00efn Diab Corniche, Habous Quarter, and enjoy a classic seafood lunch.\">\r\n <meta name=\"keywords\" content=\"Casablanca day trip, Marrakech excursion, Hassan II Mosque, Morocco tours\">\r\n <meta property=\"og:title\" content=\"Day Trip to Casablanca - Morocco's Atlantic Capital\">\r\n <meta property=\"og:description\" content=\"Experience Casablanca's highlights: Hassan II Mosque, seaside Corniche, Habous Quarter, and grand civic squares.\">\r\n <meta property=\"og:type\" content=\"website\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\r\n <style>\r\n \/* Tour Booking Page Styles - Self-contained *\/\r\n .tour-booking-page {\r\n \/* earthy palette - similar to Shaka *\/\r\n --tour-bg:#f5efe6; \/* sand background *\/\r\n --tour-ink:#2d2a26; \/* deep ink text *\/\r\n --tour-muted:#6b6a66; \/* muted text *\/\r\n --tour-card:#ffffff; \/* card bg *\/\r\n --tour-border:#e6dfd4; \/* soft border *\/\r\n --tour-sage:#647a68; \/* green accent *\/\r\n --tour-sage-700:#4f6254; \/* darker green *\/\r\n --tour-terra:#e67e22; \/* orange accent *\/\r\n --tour-terra-700:#d35400; \/* darker orange *\/\r\n --tour-cream:#fffaf2; \/* soft cream *\/\r\n\r\n --radius:14px; \r\n --shadow:0 10px 30px rgba(2,6,23,.08);\r\n \r\n box-sizing: border-box;\r\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n background: linear-gradient(180deg, var(--tour-cream), var(--tour-bg));\r\n color: var(--tour-ink);\r\n line-height: 1.6;\r\n -webkit-text-size-adjust: 100%;\r\n }\r\n \r\n .tour-booking-page * {\r\n box-sizing: border-box;\r\n }\r\n \r\n .tour-booking-page .container{\r\n max-width:1160px; \r\n margin-inline:auto; \r\n padding:24px;\r\n }\r\n\r\n \/* ---------------- Content Layout ---------------- *\/\r\n .tour-booking-page .content-wrapper{display:grid; grid-template-columns:1.6fr .9fr; gap:26px}\r\n @media (max-width:980px){.tour-booking-page .content-wrapper{grid-template-columns:1fr}}\r\n\r\n .tour-booking-page .section{\r\n background:var(--tour-card); \r\n border-radius:var(--radius); \r\n padding:24px; \r\n margin-bottom:22px; \r\n box-shadow:var(--shadow); \r\n border:1px solid var(--tour-border)\r\n }\r\n .tour-booking-page .section-title{\r\n display:flex; \r\n align-items:center; \r\n gap:10px; \r\n font-size:1.35rem; \r\n margin:0 0 16px;\r\n color: var(--tour-ink);\r\n }\r\n .tour-booking-page .section-title i{color:var(--tour-terra)}\r\n .tour-booking-page .description{color:var(--tour-muted); font-size:1.05rem}\r\n\r\n \/* ---------------- Interactive Gallery ---------------- *\/\r\n .tour-booking-page .image-gallery{display:grid; gap:12px; margin:22px 0 34px}\r\n .tour-booking-page .gallery-main{height:380px; border-radius:16px; background-size:cover; background-position:center; position:relative; overflow:hidden; cursor: pointer;}\r\n .tour-booking-page .gallery-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}\r\n .tour-booking-page .gallery-thumb{height:140px; border-radius:12px; background-size:cover; background-position:center; position:relative; overflow:hidden; cursor: pointer;}\r\n .tour-booking-page .gallery-thumb.active {border: 3px solid var(--tour-terra);}\r\n .tour-booking-page .img-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); opacity:0; transition:.25s}\r\n .tour-booking-page .zoom-btn{\r\n position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.9); border:1px solid var(--tour-border);\r\n padding:8px 10px; border-radius:999px; display:flex; gap:8px; align-items:center; font-weight:600; color:#111; box-shadow:var(--shadow); cursor:pointer\r\n }\r\n .tour-booking-page .gallery-main:hover .img-overlay, .tour-booking-page .gallery-thumb:hover .img-overlay{opacity:1}\r\n\r\n \/* ---------------- Itinerary ---------------- *\/\r\n .tour-booking-page .itinerary-item{\r\n display:grid; \r\n grid-template-columns:120px 1fr; \r\n gap:16px; \r\n padding:16px 0; \r\n border-bottom:1px solid var(--tour-border)\r\n }\r\n .tour-booking-page .itinerary-item:last-child{border-bottom:0}\r\n .tour-booking-page .itinerary-day{font-weight:800; color:var(--tour-terra)}\r\n .tour-booking-page .itinerary-content h4{margin:.2rem 0 .25rem}\r\n\r\n \/* ---------------- Inclusions ---------------- *\/\r\n .tour-booking-page .inclusion-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}\r\n @media (max-width:700px){.tour-booking-page .inclusion-grid{grid-template-columns:1fr}}\r\n .tour-booking-page .inclusion-list,.tour-booking-page .exclusion-list{list-style:none; padding:0; margin:0}\r\n .tour-booking-page .inclusion-list li,.tour-booking-page .exclusion-list li{display:flex; gap:10px; margin-bottom:10px}\r\n .tour-booking-page .inclusion-list i{color:var(--tour-sage)}\r\n .tour-booking-page .exclusion-list i{color:#e74c3c}\r\n\r\n \/* ---------------- Additional Details Grid ---------------- *\/\r\n .tour-booking-page .additional-details-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}\r\n .tour-booking-page .detail-item{\r\n display:flex; \r\n align-items:center; \r\n gap:15px; \r\n padding:15px; \r\n background: rgba(230, 126, 34,.05); \r\n border-radius:10px; \r\n border-left:4px solid var(--tour-terra)\r\n }\r\n .tour-booking-page .detail-icon{\r\n background:var(--tour-terra); \r\n color:#fff; \r\n width:50px; \r\n height:50px; \r\n border-radius:50%; \r\n display:flex; \r\n align-items:center; \r\n justify-content:center; \r\n font-size:1.3rem\r\n }\r\n .tour-booking-page .detail-content h3{margin:0 0 5px; font-size:1.1rem}\r\n .tour-booking-page .detail-content p{margin:0; color:var(--tour-muted)}\r\n\r\n \/* ---------------- FAQ Accordion ---------------- *\/\r\n .tour-booking-page .faq-accordion-item {\r\n border: 1px solid var(--tour-border);\r\n border-radius: 10px;\r\n margin-bottom: 12px;\r\n overflow: hidden;\r\n background: var(--tour-card);\r\n }\r\n .tour-booking-page .faq-accordion-header {\r\n padding: 18px 20px;\r\n background: rgba(230, 126, 34, 0.05);\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-weight: 600;\r\n color: var(--tour-ink);\r\n transition: background 0.3s ease;\r\n }\r\n .tour-booking-page .faq-accordion-header:hover {\r\n background: rgba(230, 126, 34, 0.1);\r\n }\r\n .tour-booking-page .faq-accordion-header i {\r\n transition: transform 0.3s ease;\r\n color: var(--tour-terra);\r\n }\r\n .tour-booking-page .faq-accordion-item.active .faq-accordion-header i {\r\n transform: rotate(180deg);\r\n }\r\n .tour-booking-page .faq-accordion-content {\r\n padding: 0 20px;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease, padding 0.3s ease;\r\n color: var(--tour-muted);\r\n }\r\n .tour-booking-page .faq-accordion-item.active .faq-accordion-content {\r\n padding: 20px;\r\n max-height: 300px;\r\n }\r\n\r\n \/* ---------------- Sidebar ---------------- *\/\r\n .tour-booking-page .price-section{\r\n background:linear-gradient(180deg, var(--tour-terra), var(--tour-terra-700)); \r\n color:#fff; \r\n border:0\r\n }\r\n .tour-booking-page .price-section .section-title{color:#fff}\r\n .tour-booking-page .price-amount{font-size:clamp(2.1rem,4.2vw,3rem); font-weight:800; letter-spacing:.3px}\r\n .tour-booking-page .booking-form{position:sticky; top:18px}\r\n\r\n \/* ---------------- Form ---------------- *\/\r\n .tour-booking-page .form-group{margin-bottom:16px}\r\n .tour-booking-page label{display:block; margin-bottom:8px; font-weight:600; color:var(--tour-ink)}\r\n .tour-booking-page .form-control{\r\n width:100%; \r\n padding:12px 14px; \r\n border:1px solid var(--tour-border); \r\n border-radius:10px; \r\n font:inherit; \r\n background:#fff;\r\n font-size: 16px; \/* Prevent zoom on iOS *\/\r\n }\r\n .tour-booking-page .form-control:focus{\r\n outline:3px solid rgba(230, 126, 34,.25); \r\n border-color:rgba(230, 126, 34,.5)\r\n }\r\n .tour-booking-page .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}\r\n @media (max-width:700px){.tour-booking-page .form-row{grid-template-columns:1fr}}\r\n .tour-booking-page .btn-book{\r\n width:100%; \r\n display:inline-flex; \r\n align-items:center; \r\n justify-content:center; \r\n gap:.6rem; \r\n border:0; \r\n background:linear-gradient(180deg, var(--tour-terra), var(--tour-terra-700)); \r\n color:#fff; \r\n padding:14px 16px; \r\n border-radius:10px; \r\n font-weight:800; \r\n cursor:pointer; \r\n box-shadow:0 8px 22px rgba(230, 126, 34,.25); \r\n transition:.2s transform ease;\r\n font-size: 16px; \/* Prevent zoom on iOS *\/\r\n }\r\n .tour-booking-page .btn-book:hover{transform:translateY(-1px)}\r\n .tour-booking-page .btn-book:disabled {\r\n background: #cccccc;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* ---------------- Toast & Lightbox ---------------- *\/\r\n .tour-booking-page .toast{\r\n position:fixed; \r\n left:50%; \r\n transform:translateX(-50%); \r\n bottom:20px; \r\n padding:12px 16px; \r\n border-radius:12px; \r\n background:var(--tour-ink); \r\n color:#fff; \r\n box-shadow:var(--shadow); \r\n display:none;\r\n z-index: 100;\r\n }\r\n .tour-booking-page .toast.show{display:block}\r\n .tour-booking-page .toast.success {background: var(--tour-sage);}\r\n .tour-booking-page .toast.error {background: #e74c3c;}\r\n \r\n .tour-booking-page dialog#lightbox{\r\n border:0; \r\n padding:0; \r\n background:transparent;\r\n width: 100%;\r\n height: 100%;\r\n max-width: 100%;\r\n max-height: 100%;\r\n }\r\n .tour-booking-page .lb-wrap{\r\n position:fixed; \r\n inset:0; \r\n display:grid; \r\n place-items:center; \r\n background:rgba(0,0,0,.8); \r\n z-index: 100;\r\n padding: 20px;\r\n }\r\n .tour-booking-page .lb-img{\r\n max-width:90vw; \r\n max-height:80vh; \r\n border-radius:14px; \r\n border:1px solid rgba(255,255,255,.2); \r\n box-shadow:var(--shadow);\r\n cursor: zoom-in;\r\n transition: transform 0.3s ease;\r\n }\r\n .tour-booking-page .lb-img.zoomed {\r\n transform: scale(1.5);\r\n cursor: zoom-out;\r\n }\r\n .tour-booking-page .close-lightbox {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n background: rgba(0,0,0,0.7);\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n z-index: 101;\r\n }\r\n\r\n \/* ---------------- Tour Description Highlight ---------------- *\/\r\n .tour-booking-page .tour-highlight {\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n color: var(--tour-terra);\r\n text-align: center;\r\n margin: 0 0 20px 0;\r\n padding: 15px;\r\n background: rgba(230, 126, 34, 0.05);\r\n border-radius: 10px;\r\n border-left: 4px solid var(--tour-terra);\r\n }\r\n\r\n \/* ---------------- Mobile Bottom Booking Bar ---------------- *\/\r\n .tour-booking-page .mobile-booking-bar {\r\n display: none;\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: var(--tour-card);\r\n box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);\r\n padding: 12px 16px;\r\n z-index: 90;\r\n border-top: 1px solid var(--tour-border);\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .booking-bar-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n max-width: 1160px;\r\n margin: 0 auto;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .price-info {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .price-amount {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--tour-terra);\r\n line-height: 1.2;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .price-note {\r\n font-size: 0.8rem;\r\n color: var(--tour-muted);\r\n margin: 0;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .btn-book-mobile {\r\n background: linear-gradient(180deg, var(--tour-terra), var(--tour-terra-700));\r\n color: white;\r\n border: none;\r\n border-radius: 10px;\r\n padding: 12px 20px;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: transform 0.2s ease;\r\n }\r\n \r\n .tour-booking-page .mobile-booking-bar .btn-book-mobile:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ---------------- Mobile tweaks ---------------- *\/\r\n @media only screen and (max-width: 768px){\r\n html,\r\n body{\r\n width:100%;\r\n overflow-x:hidden;\r\n }\r\n \r\n .tour-booking-page .container {\r\n padding: 16px;\r\n width: 100%;\r\n margin: 0 auto;\r\n padding-bottom: 80px; \/* Add padding to prevent content from being hidden behind the fixed bar *\/\r\n }\r\n \r\n .tour-booking-page .content-wrapper {\r\n width: 100%;\r\n }\r\n \r\n .tour-booking-page .main-content, .tour-booking-page .booking-sidebar {\r\n width: 100%;\r\n }\r\n \r\n .tour-booking-page .section {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n \r\n .tour-booking-page .image-gallery {\r\n width: 100%;\r\n }\r\n \r\n .tour-booking-page .gallery-main{height:260px}\r\n .tour-booking-page .gallery-thumb{height:110px}\r\n .tour-booking-page .section{padding:18px}\r\n \r\n .tour-booking-page .inclusion-grid,\r\n .tour-booking-page .additional-details-grid {\r\n width: 100%;\r\n }\r\n \r\n \/* Fix for itinerary - remove centering on mobile *\/\r\n .tour-booking-page .itinerary-item {\r\n grid-template-columns: 80px 1fr;\r\n text-align: left;\r\n gap: 12px;\r\n }\r\n \r\n .tour-booking-page .tour-highlight {\r\n font-size: 1.2rem;\r\n text-align: center;\r\n }\r\n \r\n \/* Show mobile booking bar *\/\r\n .tour-booking-page .mobile-booking-bar {\r\n display: block;\r\n }\r\n \r\n \/* Hide sidebar on mobile *\/\r\n .tour-booking-page .booking-sidebar {\r\n display: none;\r\n }\r\n \r\n \/* Prevent zoom on mobile *\/\r\n .tour-booking-page input, .tour-booking-page select, .tour-booking-page textarea {\r\n font-size: 16px !important;\r\n }\r\n }\r\n \r\n \/* Center helper *\/\r\n .tour-booking-page .center{margin-inline:auto}\r\n .tour-booking-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"tour-booking-page\">\r\n <div class=\"container center\">\r\n \r\n <section class=\"image-gallery center\" aria-label=\"Image gallery\">\r\n <figure class=\"gallery-main\" id=\"main-image\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg')\">\r\n <span class=\"img-overlay\"><\/span>\r\n <button class=\"zoom-btn\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg\"><i class=\"fa-solid fa-magnifying-glass\"><\/i> View<\/button>\r\n <\/figure>\r\n <div class=\"gallery-row\">\r\n <figure class=\"gallery-thumb active\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg\" data-main=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/casablanca-day-tour_oi6L6.jpeg')\"><span class=\"img-overlay\"><\/span><\/figure>\r\n <figure class=\"gallery-thumb\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/ploshad-muhammeda.jpg\" data-main=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/ploshad-muhammeda.jpg\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/ploshad-muhammeda.jpg')\"><span class=\"img-overlay\"><\/span><\/figure>\r\n <figure class=\"gallery-thumb\" data-full=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/morocco-itinerary-5-days.webp\" data-main=\"https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/morocco-itinerary-5-days.webp\" style=\"background-image:url('https:\/\/experiencetoursmorocco.com\/wp-content\/uploads\/2025\/10\/morocco-itinerary-5-days.webp')\"><span class=\"img-overlay\"><\/span><\/figure>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"content-wrapper\">\r\n \r\n <div class=\"main-content\">\r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-info-circle\"><\/i> Tour Description<\/h2>\r\n <div class=\"tour-highlight\">Day Trip to Casablanca - Morocco's Atlantic Capital<\/div>\r\n <div class=\"description\">\r\n <p>A full-day excursion from Marrakech to Casablanca, Morocco's bustling Atlantic capital of business and Art Deco flair. Highlights include the monumental Hassan II Mosque, the seaside A\u00efn Diab Corniche, elegant Habous (New Medina), and grand civic squares\u2014plus time for a classic seafood lunch.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-route\"><\/i> Itinerary<\/h2>\r\n <div class=\"itinerary\">\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">07:00\u201307:15<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Pickup in Marrakech<\/h4>\r\n <p>Meet your driver; route & safety briefing. Bottled water provided.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">07:15\u201310:00<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Drive Marrakech \u2192 Casablanca (A7)<\/h4>\r\n <p>Highway run with a short rest stop.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">10:00\u201312:00<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Hassan II Mosque & Seafront<\/h4>\r\n <p>Photo stop outside; optional interior guided tour (paid, subject to schedule & dress code). Walk the seafront promenade.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">12:00\u201313:15<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>A\u00efn Diab Corniche<\/h4>\r\n <p>Sea views, palm-lined promenade, and caf\u00e9s. Good spot for a quick espresso or beach photos.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">13:15\u201314:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Lunch (not included)<\/h4>\r\n <p>Seafood or Moroccan cuisine\u2014your driver suggests reliable options (e.g., Corniche or Central Market area).<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">14:30\u201315:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Mohammed V Square & Arab League Park<\/h4>\r\n <p>See grand colonial-era facades and civic buildings; stroll the renovated park.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">15:30\u201316:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Habous (New Medina) & Royal Palace Area (exterior)<\/h4>\r\n <p>Arched arcades, bookshops, pastry shops, and handicrafts. Palace is view from outside only.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">16:30\u201317:15<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Old Medina or Rick's Caf\u00e9 (photo\/coffee stop)<\/h4>\r\n <p>Choose a short Old Medina browse or a quick stop by Rick's Caf\u00e9 for the iconic fa\u00e7ade.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"itinerary-item\">\r\n <div class=\"itinerary-day\">17:15\u201320:30<\/div>\r\n <div class=\"itinerary-content\">\r\n <h4>Return Drive to Marrakech<\/h4>\r\n <p>Drop-off at your accommodation in the evening.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-clipboard-list\"><\/i> What's Included<\/h2>\r\n <div class=\"inclusion-grid\">\r\n <div>\r\n <h3><i class=\"fas fa-check-circle\" style=\"color:var(--tour-sage)\"><\/i> Included<\/h3>\r\n <ul class=\"inclusion-list\">\r\n <li><i class=\"fas fa-check\"><\/i> Marrakech pickup & drop-off<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> A\/C modern vehicle with professional driver<\/li>\r\n <li><i class=\"fas fa-check\"><\/i> Bottled water on board<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h3><i class=\"fas fa-times-circle\" style=\"color:#e74c3c\"><\/i> Not Included<\/h3>\r\n <ul class=\"exclusion-list\">\r\n <li><i class=\"fas fa-times\"><\/i> Lunch and drinks<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Hassan II Mosque interior tour ticket<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Local city guide (optional)<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Personal expenses, tips<\/li>\r\n <li><i class=\"fas fa-times\"><\/i> Travel insurance<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/section>\r\n\r\n \r\n <section class=\"section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-list-alt\"><\/i> Additional Details<\/h2>\r\n <div class=\"additional-details-grid\">\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Departure Time<\/h3><p>7:00 AM from Marrakech<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-calendar-alt\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Duration<\/h3><p>Full Day (approx. 13 hours)<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Group Size<\/h3><p>Small groups<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-walking\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Fitness Level<\/h3><p>Easy city walking<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-sun\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>Best Season<\/h3><p>Year-round<\/p><\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <div class=\"detail-icon\"><i class=\"fas fa-tshirt\"><\/i><\/div>\r\n <div class=\"detail-content\"><h3>What to Bring<\/h3><p>Comfortable <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" aria-label=\"Frequently Asked Questions\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-question-circle\"><\/i> Frequently Asked Questions<\/h2>\r\n <div class=\"faq-accordion\">\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Is the mosque interior visit guaranteed?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Not guaranteed\u2014it depends on the daily tour schedule and prayer times. We plan the day around the best available slot.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Can I skip the mosque interior?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Yes\u2014enjoy the esplanade, ocean views, and caf\u00e9 time instead.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Where's the best lunch spot?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Casual seafood along the Corniche or traditional Moroccan near the Central Market; we'll match your budget and taste.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>How long is the day?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>About 13 hours door-to-door, including highway time and city touring.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>What about shopping?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Habous is great for tasteful crafts, books, and pastries; the Old Medina has a more traditional souk feel.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-accordion-item\">\r\n <div class=\"faq-accordion-header\">\r\n <span>Do I need a guide in Casablanca?<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"faq-accordion-content\">\r\n <p>Not required, but a licensed guide adds context on architecture, history, and neighborhoods (add \u20ac70 per group).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <aside class=\"booking-sidebar\">\r\n <section class=\"section price-section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-tag\"><\/i> Tour Price<\/h2>\r\n <div class=\"price-amount\">$130<\/div>\r\n <p class=\"price-note\">Per person<\/p>\r\n <p><i class=\"fas fa-calendar-alt\"><\/i> Full Day Tour<\/p>\r\n <p><i class=\"fas fa-users\"><\/i> Small Groups<\/p>\r\n <\/section>\r\n <section class=\"section booking-form\" aria-labelledby=\"book-title\">\r\n <h2 id=\"book-title\" class=\"section-title\"><i class=\"fas fa-calendar-plus\"><\/i> Book This Tour<\/h2>\r\n <form id=\"booking-form\" novalidate action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"tour-date\">Select Tour Date<\/label>\r\n <input type=\"date\" id=\"tour-date\" class=\"form-control\" required aria-required=\"true\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"participants\">Number of Participants<\/label>\r\n <input type=\"number\" id=\"participants\" class=\"form-control\" min=\"1\" max=\"15\" value=\"1\" required aria-required=\"true\">\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"first-name\">First Name<\/label>\r\n <input type=\"text\" id=\"first-name\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"last-name\">Last Name<\/label>\r\n <input type=\"text\" id=\"last-name\" class=\"form-control\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email Address<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"phone\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"special-requests\">Special Requests<\/label>\r\n <textarea id=\"special-requests\" class=\"form-control\" rows=\"3\" placeholder=\"Dietary preferences, mobility concerns, etc.\"><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-book\" id=\"submit-btn\"><i class=\"fa-solid fa-paper-plane\"><\/i> Book Now<\/button>\r\n <p id=\"form-help\" class=\"sr-only\" aria-live=\"polite\"><\/p>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"hi\"\/><\/form>\r\n <\/section>\r\n <\/aside>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mobile-booking-bar\">\r\n <div class=\"booking-bar-content\">\r\n <div class=\"price-info\">\r\n <div class=\"price-amount\">$130<\/div>\r\n <p class=\"price-note\">Per person<\/p>\r\n <\/div>\r\n <button class=\"btn-book-mobile\" id=\"scroll-to-form\">\r\n <i class=\"fas fa-calendar-plus\"><\/i> Book Now\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <dialog id=\"lightbox\">\r\n <button class=\"close-lightbox\" aria-label=\"Close lightbox\"><i class=\"fas fa-times\"><\/i><\/button>\r\n <div class=\"lb-wrap\">\r\n <img class=\"lb-img\" id=\"lb-img\" alt=\"Gallery image\" \/>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize EmailJS\r\n (function() {\r\n emailjs.init(\"E_4V-SBuVJroXW_Q5\");\r\n })();\r\n\r\n \/\/ Interactive Gallery\r\n const mainImage = document.getElementById('main-image');\r\n const galleryThumbs = document.querySelectorAll('.gallery-thumb');\r\n \r\n galleryThumbs.forEach(thumb => {\r\n thumb.addEventListener('click', () => {\r\n \/\/ Update main image\r\n const mainSrc = thumb.getAttribute('data-main');\r\n const fullSrc = thumb.getAttribute('data-full');\r\n \r\n mainImage.style.backgroundImage = `url('${mainSrc}')`;\r\n mainImage.querySelector('.zoom-btn').setAttribute('data-full', fullSrc);\r\n \r\n \/\/ Update active state\r\n galleryThumbs.forEach(t => t.classList.remove('active'));\r\n thumb.classList.add('active');\r\n });\r\n });\r\n\r\n \/\/ Lightbox for gallery with zoom functionality\r\n const lightbox = document.getElementById('lightbox');\r\n const lbImg = document.getElementById('lb-img');\r\n const closeLightbox = document.querySelector('.close-lightbox');\r\n \r\n function openLightbox(src) {\r\n lbImg.src = src;\r\n lbImg.classList.remove('zoomed');\r\n lightbox.showModal();\r\n }\r\n \r\n \/\/ Main image click\r\n mainImage.addEventListener('click', () => {\r\n const fullSrc = mainImage.querySelector('.zoom-btn').getAttribute('data-full');\r\n openLightbox(fullSrc);\r\n });\r\n \r\n \/\/ Thumbnail zoom buttons\r\n document.querySelectorAll('.zoom-btn').forEach(btn => {\r\n btn.addEventListener('click', e => {\r\n e.stopPropagation();\r\n const src = btn.getAttribute('data-full');\r\n openLightbox(src);\r\n });\r\n });\r\n \r\n \/\/ Close lightbox\r\n closeLightbox.addEventListener('click', () => {\r\n lightbox.close();\r\n });\r\n \r\n \/\/ Zoom functionality\r\n lbImg.addEventListener('click', () => {\r\n lbImg.classList.toggle('zoomed');\r\n });\r\n\r\n \/\/ Min date = tomorrow\r\n (function(){\r\n const d = new Date(); \r\n d.setDate(d.getDate() + 1);\r\n const min = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;\r\n const input = document.getElementById('tour-date'); \r\n if(input) input.min = min;\r\n })();\r\n\r\n \/\/ FAQ Accordion functionality\r\n document.querySelectorAll('.faq-accordion-header').forEach(header => {\r\n header.addEventListener('click', () => {\r\n const item = header.parentElement;\r\n const isActive = item.classList.contains('active');\r\n \r\n \/\/ Close all accordion items\r\n document.querySelectorAll('.faq-accordion-item').forEach(i => {\r\n i.classList.remove('active');\r\n });\r\n \r\n \/\/ If the clicked item wasn't active, open it\r\n if (!isActive) {\r\n item.classList.add('active');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Form submission with EmailJS\r\n const form = document.getElementById('booking-form');\r\n const toast = document.getElementById('toast');\r\n const submitBtn = document.getElementById('submit-btn');\r\n \r\n function showToast(text, type = 'success') {\r\n toast.textContent = text;\r\n toast.className = 'toast show ' + type;\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 5000);\r\n }\r\n \r\n if(form) {\r\n form.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n \r\n \/\/ Basic validation\r\n const email = document.getElementById('email').value;\r\n const emailValid = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n \r\n if(!emailValid) { \r\n showToast('Please enter a valid email.', 'error'); \r\n return; \r\n }\r\n \r\n \/\/ Disable submit button\r\n submitBtn.disabled = true;\r\n submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Sending...';\r\n \r\n try {\r\n \/\/ Prepare form data\r\n const formData = {\r\n tour_date: document.getElementById('tour-date').value,\r\n participants: document.getElementById('participants').value,\r\n first_name: document.getElementById('first-name').value,\r\n last_name: document.getElementById('last-name').value,\r\n email: email,\r\n phone: document.getElementById('phone').value,\r\n special_requests: document.getElementById('special-requests').value,\r\n tour_name: 'Day Trip to Casablanca - Morocco\\'s Atlantic Capital'\r\n };\r\n \r\n \/\/ Send email via EmailJS\r\n const response = await emailjs.send(\r\n 'service_5pdqt1e', \r\n 'template_a1lx7on', \r\n formData\r\n );\r\n \r\n \/\/ Success\r\n showToast('Thanks! Your booking request has been received. We will contact you shortly.');\r\n form.reset();\r\n \r\n } catch (error) {\r\n \/\/ Error\r\n console.error('EmailJS error:', error);\r\n showToast('Sorry, there was an error sending your request. Please try again.', 'error');\r\n } finally {\r\n \/\/ Re-enable submit button\r\n submitBtn.disabled = false;\r\n submitBtn.innerHTML = '<i class=\"fa-solid fa-paper-plane\"><\/i> Book Now';\r\n }\r\n });\r\n }\r\n\r\n \/\/ Mobile booking bar scroll to form functionality\r\n const scrollToFormBtn = document.getElementById('scroll-to-form');\r\n if (scrollToFormBtn) {\r\n scrollToFormBtn.addEventListener('click', () => {\r\n \/\/ Show the booking form section\r\n document.querySelector('.booking-sidebar').style.display = 'block';\r\n \r\n \/\/ Scroll to the form\r\n document.querySelector('.booking-form').scrollIntoView({ \r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Day Trip to Casablanca | Morocco’s Atlantic Capital View Tour Description Day Trip to Casablanca – Morocco’s Atlantic Capital A full-day excursion from Marrakech to Casablanca, Morocco’s bustling Atlantic capital of business and Art Deco flair. Highlights include the monumental Hassan II Mosque, the seaside A\u00efn Diab Corniche, elegant Habous (New Medina), and grand civic […]<\/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-330","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages\/330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/comments?post=330"}],"version-history":[{"count":7,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages\/330\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/pages\/330\/revisions\/337"}],"wp:attachment":[{"href":"https:\/\/experiencetoursmorocco.com\/hi\/wp-json\/wp\/v2\/media?parent=330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}