\n \n

\n Welcome
To Our Cuisine
\n Restaurant\n

\n \n \n

\n \n \n \n

\n\n

\n \n 252k\n
\n \n 62k\n
\n \n 55k\n

About us

\n Discover Our Restaurant Story\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Adipisci neque cupiditate consequatur non, eligendi rerum!\n Illum quibusdam aperiam libero ut voluptatum voluptas vero\n sunt hic commodi, culpa quia inventore sequi.\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Doloremque dolores, corrupti, provident maiores vitae\n distinctio aspernatur non blanditiis repudiandae!\n

\n \n \n

\n \n\n

Book Table

Opening Hours

\n \n Call Now\n +12345 67890\n

\n Monday to Tuesday\n 09:00 am - 22:00 pm\n

\n Friday to Sunday\n 11:00 am - 20:00 pm\n

\n\n

\n \n

\n \n
\n
\n \n Your browser does not support the video tag.\n \n \n
\n
\n \n

\n\n \n \n

Testimonials

Customers Say

\n \n

\n \n
1Mr John Smith
\n
Art Director
\n \n \n \n \n \n \n \n
\n Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n Maxime repellendus ipsum blanditiis aspernatur. Autem\n dolorem veritatis blanditiis vel in possimus fugiat ex\n necessitatibus error molestiae, odit id, minus fuga\n laudantium!\n
\n
\n \n
2Mr John Smith
\n
Art Director
\n \n \n \n \n \n \n \n
\n Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n Maxime repellendus ipsum blanditiis aspernatur. Autem\n dolorem veritatis blanditiis vel in possimus fugiat ex\n necessitatibus error molestiae, odit id, minus fuga\n laudantium!\n
\n
\n \n
3Mr John Smith
\n
Art Director
\n \n \n \n \n \n \n \n
\n Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n Maxime repellendus ipsum blanditiis aspernatur. Autem\n dolorem veritatis blanditiis vel in possimus fugiat ex\n necessitatibus error molestiae, odit id, minus fuga\n laudantium!\n
\n
\n \n
4Mr John Smith
\n
Art Director
\n \n \n \n \n \n \n \n
\n Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n Maxime repellendus ipsum blanditiis aspernatur. Autem\n dolorem veritatis blanditiis vel in possimus fugiat ex\n necessitatibus error molestiae, odit id, minus fuga\n laudantium!\n
\n
\n \n
5Mr John Smith
\n
Art Director
\n \n \n \n \n \n \n \n
\n Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n Maxime repellendus ipsum blanditiis aspernatur. Autem\n dolorem veritatis blanditiis vel in possimus fugiat ex\n necessitatibus error molestiae, odit id, minus fuga\n laudantium!\n
\n

\n\n \n \n

\n\n \n \n \n",[],[171],{"_102":179,"_95":180,"_151":181,"_153":-5,"_154":136,"_155":182,"_157":158,"_104":183,"_99":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_166":187,"_98":188},"f607f1a8-5b2e-11f0-91b2-f69ea79377d9","main.js","0103ead2-5b2d-11f0-9118-f69ea79377d9",17,["D",1751891770275],2,"script","/* Video Explanation - https://youtu.be/-0VuZEYIYuI */\ndocument.querySelectorAll(\".custom-select\").forEach(setupSelector);\n\nfunction setupSelector(selector) {\n selector.addEventListener(\"change\", (e) => {\n console.log(\"changed\", e.target.value);\n });\n\n selector.addEventListener(\"mousedown\", (e) => {\n if (window.innerWidth >= 420) {\n // override look for non mobile\n e.preventDefault();\n\n const select = selector.children[0];\n const dropDown = document.createElement(\"ul\");\n dropDown.className = \"selector-options\";\n\n [...select.children].forEach((option) => {\n const dropDownOption = document.createElement(\"li\");\n dropDownOption.textContent = option.textContent;\n\n dropDownOption.addEventListener(\"mousedown\", (e) => {\n e.stopPropagation();\n select.value = option.value;\n selector.value = option.value;\n select.dispatchEvent(new Event(\"change\"));\n selector.dispatchEvent(new Event(\"change\"));\n dropDown.remove();\n });\n\n dropDown.appendChild(dropDownOption);\n });\n\n selector.appendChild(dropDown);\n\n // handle click out\n document.addEventListener(\"click\", (e) => {\n if (!selector.contains(e.target)) {\n dropDown.remove();\n }\n });\n }\n });\n}\n\n// Adding functionality to video play and pause button\nconst videos = document.getElementsByClassName(\"video\");\nlet i;\n\nfor (i = 0; i < videos.length; i++) {\n const video = videos[i];\n const controlButton = video.nextElementSibling;\n\n // Handle clicks on the video\n video.addEventListener(\"click\", function() {\n if (video.paused) {\n controlButton.innerHTML = \"| |\";\n video.play();\n } else {\n controlButton.innerHTML = \"▶\";\n video.pause();\n }\n });\n\n // Handle clicks on the control button\n controlButton.addEventListener(\"click\", function(event) {\n event.stopPropagation(); // Prevent event from bubbling to the video\n if (video.paused) {\n controlButton.innerHTML = \"| |\";\n video.play();\n } else {\n controlButton.innerHTML = \"▶\";\n video.pause();\n }\n });\n\n // Handle mouseout to hide the control button if the video is playing\n video.addEventListener(\"mouseout\", function() {\n if (!video.paused) {\n controlButton.style.display = \"none\";\n }\n });\n\n // Handle mouseover to show the control button\n video.addEventListener(\"mouseover\", function() {\n controlButton.style.display = \"flex\";\n });\n\n // Reset the control button when the video ends\n video.addEventListener(\"ended\", function() {\n controlButton.style.display = \"flex\";\n controlButton.innerHTML = \"▶\";\n });\n}\n\ndocument.querySelectorAll(\".carousel\").forEach((carousel) => {\n const track = carousel.querySelector(\".carousel__track\");\n const slides = Array.from(track.children);\n const nextButton = carousel.querySelector(\".carousel__button--right\");\n const prevButton = carousel.querySelector(\".carousel__button--left\");\n const dotsNav = carousel.querySelector(\".carousel__nav\");\n const dots = Array.from(dotsNav.children);\n\n let slideWidth = slides[0].getBoundingClientRect().width;\n\n // Arrange slides next to each other\n const setSlidePosition = (slide, index) => {\n slide.style.left = slideWidth * index + \"px\";\n };\n slides.forEach(setSlidePosition);\n\n const moveToSlide = (track, currentSlide, targetSlide) => {\n track.style.transform = \"translateX(-\" + targetSlide.style.left + \")\";\n currentSlide.classList.remove(\"current-slide\");\n targetSlide.classList.add(\"current-slide\");\n };\n\n const updateDots = (currentDot, targetDot) => {\n currentDot.classList.remove(\"current-slide\");\n targetDot.classList.add(\"current-slide\");\n };\n\n const hideShowArrows = (slides, prevButton, nextButton, targetIndex) => {\n if (targetIndex === 0) {\n prevButton.classList.add(\"is-hidden\");\n nextButton.classList.remove(\"is-hidden\");\n } else if (targetIndex === slides.length - 1) {\n prevButton.classList.remove(\"is-hidden\");\n nextButton.classList.add(\"is-hidden\");\n } else {\n prevButton.classList.remove(\"is-hidden\");\n nextButton.classList.remove(\"is-hidden\");\n }\n };\n\n // Handle resize event\n window.addEventListener(\"resize\", () => {\n slideWidth = slides[0].getBoundingClientRect().width;\n slides.forEach((slide, index) => {\n slide.style.left = slideWidth * index + \"px\";\n });\n\n // Re-center the track based on the current slide\n const currentSlide = track.querySelector(\".current-slide\");\n if (currentSlide) {\n track.style.transform = `translateX(-${currentSlide.style.left})`;\n }\n });\n\n // Event Listeners for navigation\n prevButton.addEventListener(\"click\", () => {\n const currentSlide = track.querySelector(\".current-slide\");\n const prevSlide = currentSlide.previousElementSibling;\n const currentDot = dotsNav.querySelector(\".current-slide\");\n const prevDot = currentDot.previousElementSibling;\n const prevIndex = slides.findIndex((slide) => slide === prevSlide);\n\n if (prevSlide) {\n moveToSlide(track, currentSlide, prevSlide);\n updateDots(currentDot, prevDot);\n hideShowArrows(slides, prevButton, nextButton, prevIndex);\n }\n });\n\n nextButton.addEventListener(\"click\", () => {\n const currentSlide = track.querySelector(\".current-slide\");\n const nextSlide = currentSlide.nextElementSibling;\n const currentDot = dotsNav.querySelector(\".current-slide\");\n const nextDot = currentDot.nextElementSibling;\n const nextIndex = slides.findIndex((slide) => slide === nextSlide);\n\n if (nextSlide) {\n moveToSlide(track, currentSlide, nextSlide);\n updateDots(currentDot, nextDot);\n hideShowArrows(slides, prevButton, nextButton, nextIndex);\n }\n });\n\n dotsNav.addEventListener(\"click\", (e) => {\n const targetDot = e.target.closest(\"button\");\n\n if (!targetDot) return;\n\n const currentSlide = track.querySelector(\".current-slide\");\n const currentDot = dotsNav.querySelector(\".current-slide\");\n const targetIndex = dots.findIndex((dot) => dot === targetDot);\n const targetSlide = slides[targetIndex];\n\n moveToSlide(track, currentSlide, targetSlide);\n updateDots(currentDot, targetDot);\n hideShowArrows(slides, prevButton, nextButton, targetIndex);\n });\n});\n\n// Define menu categories and their items\nconst categories = {\n breakfast: [\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast1.jpg?v=1732709091470\",\n price: \"$14.99\",\n rating: 5,\n name: \"Contadina\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/food2.jpg?v=1732672166692\",\n price: \"$14.99\",\n rating: 5,\n name: \"Egg Salad\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/food4.jpg?v=1732672451222\",\n price: \"$14.99\",\n rating: 5,\n name: \"Avocado Toast\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/food1.jpg?v=1732672161545\",\n price: \"$14.99\",\n rating: 5,\n name: \"Fried Toast\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast5.webp?v=1732672897363\",\n price: \"$14.99\",\n rating: 5,\n name: \"Egg Bowl\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast6.jpg?v=1732672995804\",\n price: \"$14.99\",\n rating: 5,\n name: \"Breakfast Plate\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast7.jpg?v=1732673088461\",\n price: \"$14.99\",\n rating: 5,\n name: \"Hotel Breakfast\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast8.jpg?v=1732673588469\",\n price: \"$14.99\",\n rating: 5,\n name: \"English Breakfast\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast9.jpg?v=1732709633660\",\n price: \"$14.99\",\n rating: 5,\n name: \"Chia Smoothie\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast10.jpg?v=1732709635999\",\n price: \"$14.99\",\n rating: 5,\n name: \"Egg Avocado Toast\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast11.jpg?v=1732709638463\",\n price: \"$14.99\",\n rating: 5,\n name: \"Egg Bowl Mix\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast12.webp?v=1732709812088\",\n price: \"$14.99\",\n rating: 5,\n name: \"French Toast\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/breakfast12.webp?v=1732709812088\",\n price: \"$14.99\",\n rating: 5,\n name: \"French Toast\",\n },\n ],\n lunch: [\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch1.jpg?v=1732673598644\",\n price: \"$14.99\",\n rating: 5,\n name: \"Salmon Salad\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch2.jpg?v=1732673594650\",\n price: \"$14.99\",\n rating: 5,\n name: \"Steak Salad\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch3.jpg?v=1732708099307\",\n price: \"$14.99\",\n rating: 5,\n name: \"Quinoa Salad\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch4.jpg?v=1732709139734\",\n price: \"$14.99\",\n rating: 5,\n name: \"Chickpea Noodles\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch5.jpg?v=1732708919267\",\n price: \"$14.99\",\n rating: 5,\n name: \"Pasta Salad\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch6.jpg?v=1732709297522\",\n price: \"$14.99\",\n rating: 5,\n name: \"Soup Salad\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch7.jpg?v=1732709327444\",\n price: \"$14.99\",\n rating: 5,\n name: \"Falafels\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/lunch8.jpg?v=1732709494211\",\n price: \"$14.99\",\n rating: 5,\n name: \"Leafy Kale Salad\",\n },\n ],\n dinner: [\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner1.jpg?v=1732673590209\",\n price: \"$14.99\",\n rating: 5,\n name: \"Steak Tartare\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner2.jpg?v=1732708385007\",\n price: \"$14.99\",\n rating: 5,\n name: \"Chicken Poutine\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner3.jpeg?v=1732708779016\",\n price: \"$14.99\",\n rating: 5,\n name: \"Potato Dauphinoise\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner4.jpeg?v=1732708775095\",\n price: \"$14.99\",\n rating: 5,\n name: \"Steak Frites\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner5.jpeg?v=1732708781600\",\n price: \"$14.99\",\n rating: 5,\n name: \"Slow-Cooked Chicken\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner6.jpg?v=1732708923772\",\n price: \"$14.99\",\n rating: 5,\n name: \"Chickpea Lentils\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner7.jpg?v=1732709376024\",\n price: \"$14.99\",\n rating: 5,\n name: \"Tofu Curry\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dinner8.jpeg?v=1732709222265\",\n price: \"$14.99\",\n rating: 5,\n name: \"Salmon Curry\",\n },\n ],\n dessert: [\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dessert1.webp?v=1732707655427\",\n price: \"$14.99\",\n rating: 5,\n name: \"Crepes\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dessert2.webp?v=1732707654198\",\n price: \"$14.99\",\n rating: 5,\n name: \"Blueberry Pancakes\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/dessert3.jpeg?v=1732708574926\",\n price: \"$14.99\",\n rating: 5,\n name: \"Swiss Roll Cake\",\n },\n ],\n shake: [\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/shake1.webp?v=1732710080216\",\n price: \"$14.99\",\n rating: 5,\n name: \"Banana Shake\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/shake2.jpg?v=1732710084526\",\n price: \"$14.99\",\n rating: 5,\n name: \"Strawberry Shake\",\n },\n {\n img: \"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/shake3.jpg?v=1732710081491\",\n price: \"$14.99\",\n rating: 5,\n name: \"Chocolate Shake\",\n },\n ],\n};\n\n// Select DOM elements\nconst categoryBtns = document.querySelectorAll(\".menu__category-btn\");\nconst carouselItemsContainer = document.querySelector(\".menu__carousel-items\");\nconst indicatorsContainer = document.querySelector(\n \".menu__carousel-indicators\",\n);\n\nlet currentCategory = \"breakfast\"; // Default category\nlet currentSlide = 0; // Current slide index\nlet touchStartX = 0;\nlet touchEndX = 0;\n\n// Load the default category on page load\nloadCategory(currentCategory);\n\n// Event listener for category buttons\ncategoryBtns.forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n categoryBtns.forEach((b) => b.classList.remove(\"active\"));\n btn.classList.add(\"active\");\n\n currentCategory = btn.getAttribute(\"data-category\");\n currentSlide = 0;\n\n loadCategory(currentCategory);\n });\n});\n\n// Load category function\nfunction loadCategory(category) {\n const items = categories[category];\n const slides = [];\n const isMobile = window.innerWidth <= 768; // Example breakpoint for mobile\n const itemsPerSlide = isMobile ? 4 : 8; // 4 items for mobile, 8 for larger screens\n\n // Create slides dynamically\n for (let i = 0; i < items.length; i += itemsPerSlide) {\n const slideItems = items\n .slice(i, i + itemsPerSlide)\n .map(\n (item) => `\n

\n $\"${item.name}\"$ \n

${item.price}

${\"★\".repeat(item.rating)}

${item.name}

\n \n

\n `,\n )\n .join(\"\");\n\n slides.push(`

${slideItems}

`);\n }\n\n // Handle case where there are no slides\n if (slides.length === 0) {\n console.error(`No slides created for category: ${category}`);\n return;\n }\n\n // Populate carousel items container\n carouselItemsContainer.innerHTML = slides.join(\"\");\n\n updateIndicators(slides.length);\n updateActiveSlide();\n carouselItemsContainer.style.width = `${slides.length * 100}%`;\n\n // Populate indicators dynamically\n indicatorsContainer.innerHTML = slides\n .map(\n (_, index) =>\n ``,\n )\n .join(\"\");\n\n // Add event listeners to indicators\n const indicators = document.querySelectorAll(\".menu__carousel-indicator\");\n indicators.forEach((indicator) => {\n indicator.addEventListener(\"click\", () => {\n currentSlide = parseInt(indicator.getAttribute(\"data-slide\"));\n updateCarousel();\n });\n });\n\n // Update the carousel to show the current slide\n updateCarousel();\n}\n\n// Function to update the carousel to show the current slide\nfunction updateCarousel() {\n const slides = document.querySelectorAll(\".menu__carousel-slide\");\n const indicators = document.querySelectorAll(\".menu__carousel-indicator\");\n\n slides.forEach((slide, index) => {\n slide.style.transform = `translateX(${(index - currentSlide) * 100}%)`;\n });\n\n indicators.forEach((indicator, index) => {\n indicator.classList.toggle(\"active\", index === currentSlide);\n });\n}\n\n// Update indicators\nfunction updateIndicators(slideCount) {\n indicatorsContainer.innerHTML = Array(slideCount)\n .fill(0)\n .map(\n (_, index) => ``,\n )\n .join(\"\");\n\n const indicators = indicatorsContainer.querySelectorAll(\n \".carousel__indicator\",\n );\n indicators.forEach((indicator) => {\n indicator.addEventListener(\"click\", () => {\n currentSlide = parseInt(indicator.getAttribute(\"data-slide\"));\n updateActiveSlide();\n });\n });\n}\n\n// Update active slide and indicator\nfunction updateActiveSlide() {\n const slides = carouselItemsContainer.querySelectorAll(\".carousel__slide\");\n const indicators = indicatorsContainer.querySelectorAll(\n \".carousel__indicator\",\n );\n\n slides.forEach((slide, index) => {\n slide.style.transform = `translateX(${(index - currentSlide) * 100}%)`;\n });\n\n indicators.forEach((indicator, index) => {\n indicator.classList.toggle(\"active\", index === currentSlide);\n });\n}\n\n// Add swipe event listeners for mobile\ncarouselItemsContainer.addEventListener(\"touchstart\", (e) => {\n touchStartX = e.changedTouches[0].screenX;\n});\n\ncarouselItemsContainer.addEventListener(\"touchend\", (e) => {\n touchEndX = e.changedTouches[0].screenX;\n handleSwipeGesture();\n});\n\n// Function to update the carousel position and active indicator\nfunction updateCarousel() {\n const slideCount = indicatorsContainer.querySelectorAll(\".menu__indicator\").length;\n if (currentSlide < 0) currentSlide = 0;\n if (currentSlide >= slideCount) currentSlide = slideCount - 1;\n\n // Determine if it's mobile or not\n const isMobile = window.innerWidth <= 768; // Example breakpoint for mobile\n\n // Set offset based on screen size\n const offset = isMobile ? -25 * currentSlide : -50 * currentSlide;\n\n carouselItemsContainer.style.transform = `translateX(${offset}%)`;\n\n const indicators = indicatorsContainer.querySelectorAll(\".menu__indicator\");\n indicators.forEach((indicator, index) => {\n indicator.classList.toggle(\"active\", index === currentSlide);\n });\n}\n\n// Event listener for carousel indicators\nindicatorsContainer.addEventListener(\"click\", (e) => {\n if (e.target.classList.contains(\"menu__indicator\")) {\n currentSlide = parseInt(e.target.getAttribute(\"data-slide\"), 10);\n updateCarousel();\n }\n});\n// Add swipe event listeners to the carousel container\ncarouselItemsContainer.addEventListener(\"touchstart\", (e) => {\n touchStartX = e.changedTouches[0].screenX; // Record the starting X position\n});\n\ncarouselItemsContainer.addEventListener(\"touchend\", (e) => {\n touchEndX = e.changedTouches[0].screenX; // Record the ending X position\n handleSwipe(); // Handle the swipe gesture\n});\n\n// Handle swipe gestures\nfunction handleSwipe() {\n const swipeThreshold = 50; // Minimum distance for a valid swipe\n if (touchEndX < touchStartX - swipeThreshold) {\n // Swipe left\n goToNextSlide();\n } else if (touchEndX > touchStartX + swipeThreshold) {\n // Swipe right\n goToPreviousSlide();\n }\n}\n\n// Navigate to the next slide\nfunction goToNextSlide() {\n const slidesCount = Math.ceil(categories[currentCategory].length / 4); // Adjust based on items per slide\n currentSlide = (currentSlide + 1) % slidesCount; // Loop back to the first slide\n updateCarousel();\n}\n\n// Navigate to the previous slide\nfunction goToPreviousSlide() {\n const slidesCount = Math.ceil(categories[currentCategory].length / 4); // Adjust based on items per slide\n currentSlide = (currentSlide - 1 + slidesCount) % slidesCount; // Loop back to the last slide\n updateCarousel();\n}\n\nwindow.addEventListener(\"resize\", () => {\n loadCategory(currentCategory);\n});",[],[180],{"_102":190,"_95":191,"_151":192,"_153":-5,"_154":136,"_155":193,"_157":158,"_104":194,"_99":195,"_161":196,"_163":197,"_164":22,"_165":96,"_166":198,"_98":199},"5fa4d1f2-5b30-11f0-be21-f69ea79377d9","main.tsx","d9a6495a-5b2f-11f0-a73e-f69ea79377d9",23,["D",1751892376956],3,"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[191],{"_102":201,"_95":202,"_151":203,"_153":-5,"_154":136,"_155":204,"_157":158,"_104":205,"_99":195,"_161":174,"_163":206,"_164":22,"_165":-5,"_166":207,"_98":208},"f717a03e-5b2e-11f0-9c07-f69ea79377d9","reset.css","06314e50-5b2d-11f0-bb3f-f69ea79377d9",18,["D",1751891772052],"/* http://meyerweb.com/eric/tools/css/reset/\n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n\nbody {\n line-height: 1;\n}\nol, ul {\n list-style: none;\n}\nblockquote, q {\n quotes: none;\n}\nblockquote:before, blockquote:after, q:before, q:after {\n content: \"\";\n content: none;\n}\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\nimg,\npicture,\nsvg {\n max-width: 100%;\n display: block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n html:focus-within {\n scroll-behavior: auto;\n }\n\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}",[],[202],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":213,"_157":158,"_104":214,"_99":195,"_161":174,"_163":215,"_164":22,"_165":-5,"_166":216,"_98":217},"f82c3b60-5b2e-11f0-811d-f69ea79377d9","style.css","0aafacb0-5b2d-11f0-a9ce-f69ea79377d9",19,["D",1751891773867],":root {\n --clr-neutral-100: white;\n --clr-neutral-300: #f2f8f8;\n --clr-neutral-400: #f2f6f7;\n --clr-neutral-500: #f5f9fa;\n --clr-neutral-600: gray;\n --clr-neutral-900: black;\n\n --clr-primary-300: #ffac51;\n --clr-primary-500: #ff8800;\n\n --ff-primary: \"Playfair Display\", serif;\n --ff-secondary: \"Roboto\", system-ui;\n\n --ff-body: var(--ff-secondary);\n --ff-heading: var(--ff-primary);\n --ff-p: var(--ff-secondary);\n\n --fw-regular: 400;\n --fw-semi-bold: 500;\n --fw-bold: 700;\n\n --fs-300: 0.625rem;\n --fs-400: 0.75rem;\n --fs-500: 0.875rem;\n --fs-600: 1.5rem;\n --fs-700: 1.875rem;\n --fs-800: 3.25rem;\n --fs-900: 4rem;\n\n --fs-body: var(--fs-500);\n\n --fs-nav: var(--fs-400);\n --fs-button: var(--fs-300);\n\n --fs-primary-heading: var(--fs-900);\n --fs-secondary-heading: var(--fs-800);\n\n --size-100: 0.25rem;\n --size-200: 0.5rem;\n --size-300: 0.75rem;\n --size-400: 1rem;\n --size-500: 1.5rem;\n --size-600: 2rem;\n --size-700: 3rem;\n --size-800: 4rem;\n --size-900: 6.5rem;\n}\n\n@media (max-width: 40em) {\n :root {\n --fs-400: 0.8rem;\n --fs-600: 1.625rem;\n --fs-700: 2rem;\n --fs-800: 2.25rem;\n --fs-primary-heading: var(--fs-800);\n }\n}\n\n*/\n\n/* @media (min-width: 50em) {\n :root {\n --fs-300: ;\n --fs-400: 0.6875rem;\n --fs-500: 0.75rem;\n --fs-600: 1rem;\n --fs-700: 2rem;\n \n --fs-body: var(--fs-600);\n --fs-primary-heading: var(--fs-700);\n --fs-secondary-heading: ;\n --fs-nav: var(--fs-500);\n --fs-button: var(--fs-500);\n --fs-footer: var(--fs-400);\n \n }\n }\n \n /* Box Model Hack */\n* {\n box-sizing: border-box;\n}\n\n/* Clear fix hack */\n.clearfix:after {\n content: \".\";\n display: block;\n clear: both;\n visibility: hidden;\n line-height: 0;\n height: 0;\n}\n\n.clear {\n clear: both;\n}\n\n/* general styling */\n\n/* body {\n width: 100vw;\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n font-family: sans-serif;\n } */\n\np {\n margin-block: var(--size-500);\n line-height: 2rem;\n}\n\n* {\n box-sizing: border-box;\n}\n\na {\n text-decoration: none;\n color: var(--clr-neutral-900);\n}\n\nh2 {\n color: var(--clr-primary-300);\n font-weight: var(--fw-bold);\n}\n\nh3 {\n font-weight: var(--fw-bold);\n}\n\nsection {\n padding-block: var(--size-700);\n}\n\ninput {\n caret-color: var(--clr-primary-500);\n}\n\n/* component - when there is obviously a default style for a component */\n\n/* video */\n\n.video-container {\n width: 100%;\n max-width: 100%;\n aspect-ratio: 16 / 9; /* Enforces 16:9 aspect ratio */\n overflow: hidden;\n display: flex; /* Ensures child elements stretch to fit */\n justify-content: center;\n align-items: center;\n}\n\nvideo {\n width: 100%;\n height: 100%;\n object-fit: cover; /* Ensures the video covers the container while preserving aspect ratio */\n}\n\n.video-control {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: transparent;\n border-radius: 50%;\n border-color: var(--clr-primary-500);\n padding: 1em;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--clr-primary-500);\n font-size: var(--fs-700);\n font-weight: 400;\n width: 3em;\n height: 3em;\n white-space: nowrap;\n line-height: 0;\n cursor: pointer;\n border: solid;\n}\n\n@media (max-width: 40em) {\n .video-control {\n font-size: 1rem;\n }\n}\n\nvideo::-webkit-media-controls {\n position: relative;\n z-index: 1;\n}\n\n/* button */\n\n/* navigation */\n\n.primary-header {\n height: var(--size-800);\n position: relative;\n}\n\n.primary-header::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n\n background-color: var(--clr-neutral-500);\n z-index: -1;\n mask-image: linear-gradient(to bottom, black 70%, transparent 100%);\n}\n\n.header-container {\n --max-width: 750px;\n --padding: 1rem;\n padding-inline: var(--padding);\n width: min(var(--max-width), 100% - (var(--padding) * 2));\n margin-inline: auto;\n}\n\n.logo {\n float: left;\n}\n\n.logo img {\n height: var(--size-600);\n}\n\n.primary-navigation {\n float: right;\n --max-width: 750px;\n --padding: 1rem;\n padding: var(--padding);\n}\n\n.nav-toggle {\n position: absolute;\n right: 0;\n margin: 0 1rem;\n cursor: pointer;\n}\n\n.nav-list {\n}\n\n.nav-close-icon {\n display: none;\n position: fixed;\n top: 1rem;\n right: 1rem;\n z-index: 2;\n}\n\n.nav-menu-icon {\n margin-top: 0.2rem;\n}\n\n.nav-list li {\n float: left;\n display: inline;\n margin-inline: var(--size-200);\n}\n\n@media (max-width: 50em) {\n .nav-list li {\n font-size: var(--fs-500);\n }\n}\n\n.nav-list li a:hover {\n color: var(--clr-primary-300);\n cursor: pointer;\n}\n\n.nav-list button {\n border: none;\n background-color: transparent;\n}\n\n.nav-list button:hover {\n color: var(--clr-primary-300);\n cursor: pointer;\n}\n\n@media (max-width: 40em) {\n .primary-navigation {\n float: none;\n }\n .nav-menu-icon {\n display: block !important;\n }\n .nav-list {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n align-items: center;\n text-align: center;\n padding-block: 2rem;\n }\n .nav-list li {\n display: none !important;\n font-size: var(--fs-800);\n margin: auto;\n }\n .nav-list li:first-child {\n display: block;\n }\n\n #nav-checkbox:checked ~ ul.nav-list li {\n display: block !important;\n }\n #nav-checkbox:checked ~ ul.nav-list {\n background-color: var(--clr-neutral-400);\n position: fixed;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n display: flex !important;\n margin: 0;\n }\n\n #nav-checkbox:checked ~ label.nav-toggle .nav-close-icon {\n display: block !important;\n }\n\n #nav-checkbox:checked ~ label.nav-toggle .nav-menu-icon {\n display: none !important;\n }\n}\n\n/* largest screen size */\n\n@media (min-width: 60em) {\n}\n\n/* small and big laptops */\n\n@media (min-width: 50em) {\n}\n\n/* small laptops */\n\n@media (min-width: 50em) and (max-width: 60em) {\n}\n\n/* tablets and mobile */\n\n@media (max-width: 50em) {\n}\n\n/* HeRO */\n\n.hero {\n position: relative;\n}\n\n.hero::before {\n --overlap-amount: 4rem;\n\n content: \"\";\n position: absolute;\n top: calc(var(--overlap-amount) * -1);\n /* Overlap amount onto the header */\n right: 0;\n /* Stick to the right edge */\n left: auto;\n /* Prevent from extending to the left */\n bottom: 0;\n background: url(\"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/food6.jpg?v=1732672460728\")\n no-repeat;\n z-index: -1;\n /* Ensures it stays behind the hero content */\n background-size: cover;\n transform: scaleX(-1);\n height: calc(100% + var(--overlap-amount));\n background-position: top right;\n width: 70vw;\n /* Make the pseudo-element span the viewport width */\n background-color: var(--clr-neutral-500);\n mask-image: linear-gradient(to right, black 90%, transparent 100%);\n}\n\n@media (max-width: 50em) {\n .hero h1 {\n }\n}\n\n/* search bar */\n\n.search-container {\n display: inline-block;\n margin-block: var(--size-600);\n}\n\n.search-container i {\n padding-left: var(--size-400);\n}\n\n.search-input-container {\n float: left;\n border-left: solid;\n border-top: solid;\n border-bottom: solid;\n border-color: var(--clr-neutral-600);\n border-top-left-radius: 1px;\n border-bottom-left-radius: 3px;\n}\n\n.search-input {\n border: none;\n padding: var(--size-400);\n padding-left: var(--size-100);\n padding-right: var(--size-900);\n outline: none;\n background: none;\n padding-right: 0;\n}\n\n@media (max-width: 50em) {\n .search-container {\n display: block;\n width: 50%;\n }\n\n .search-input-container {\n float: none;\n border-right: solid var(--clr-neutral-600);\n }\n}\n@media (max-width: 35em) {\n .search-container {\n display: block;\n width: 100%;\n }\n}\n\n/* select */\n\n/* Video Explanation - https://youtu.be/-0VuZEYIYuI */\n\n.custom-select {\n position: relative;\n display: inline-block;\n border: 3px solid var(--clr-primary-500);\n}\n\n.custom-select select {\n display: block;\n width: var(--size-900);\n min-height: var(--size-300);\n background: var(--clr-primary-500);\n border: none;\n outline: none;\n padding: var(--size-400);\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n -ms-appearance: none;\n}\n\n.custom-select::after {\n content: \"\";\n border-width: 5px;\n border-style: solid;\n border-color: transparent;\n border-top-color: var(--clr-neutral-100);\n display: inline-block;\n border-radius: 2px;\n position: absolute;\n right: var(--size-400);\n bottom: var(--size-400);\n}\n\n.custom-select .selector-options {\n list-style: none;\n padding: 5px 0;\n margin: 0;\n background: var(--clr-primary-500);\n color: var(--clr-neutral-100);\n border-radius: 4px;\n z-index: 1;\n width: 100%;\n position: absolute;\n top: 1%;\n}\n\n.custom-select .selector-options li {\n height: var(--size-600);\n display: flex;\n align-items: center;\n padding: 0 var(--size-400);\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.custom-select .selector-options li:hover {\n background: var(--clr-primary-300);\n}\n\n.select:hover {\n background-color: var(--clr-primary-300);\n}\n\n@media (max-width: 50em) {\n .custom-select {\n width: 100%;\n }\n\n .custom-select select {\n width: 100%;\n }\n}\n\n/* socials */\n.socials li {\n float: left;\n margin-right: var(--size-700);\n}\n\n.socials a:hover {\n color: var(--clr-primary-300);\n}\n\n/* ABOUT */\n.about {\n padding-bottom: 0;\n}\n\n/* Main container setup */\n.about-container {\n display: table;\n width: 100%;\n}\n\n/* Column for the background image */\n.background-img-container {\n display: table-cell;\n background-image: url(\"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/food5.jpg?v=1732672457001\");\n /* Replace with your image path */\n background-size: cover;\n background-repeat: no-repeat;\n background-position: right -2rem top;\n width: 40%;\n /* Adjust for your layout */\n mask-image: linear-gradient(\n to bottom,\n transparent 0%,\n /* Fully transparent at the top */ black 20%,\n /* Fully visible after 20% */ black 80%,\n /* Fully visible until 80% */ transparent 100%\n /* Fully transparent at the bottom */\n ),\n linear-gradient(\n to left,\n transparent 0%,\n /* Fully transparent at the top */ black 40%\n );\n mask-composite: intersect;\n -webkit-mask-image: linear-gradient(\n to bottom,\n transparent 0%,\n /* Fully transparent at the top */ black 20%,\n /* Fully visible after 20% */ black 80%,\n /* Fully visible until 80% */ transparent 100%\n /* Fully transparent at the bottom */\n ),\n linear-gradient(\n to left,\n transparent 0%,\n /* Fully transparent at the top */ black 40%,\n black 80%,\n transparent 100% /* Fully visible after 20% */\n );\n -webkit-mask-composite: intersect;\n\n /* mask-repeat: no-repeat;\n mask-size: cover; */\n}\n\n/* Column for the text content */\n.about-text-container {\n display: table-cell;\n vertical-align: middle;\n padding-bottom: 5rem;\n position: relative;\n}\n\n.about-text-container::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: -20%;\n left: 0;\n background-image: url(\"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/food7.jpg?v=1732672463748\");\n background-size: 60%;\n /* Make the image smaller (adjust as needed) */\n background-position: bottom 30% right -15%;\n /* Align it to the bottom-right */\n background-repeat: no-repeat;\n mask-image: linear-gradient(\n to left,\n black 0%,\n black 30%,\n transparent 55%,\n transparent 100%\n ),\n linear-gradient(to top, black 0%, black 40%, transparent 100%);\n mask-composite: intersect;\n /* Ensure the mask layers intersect */\n z-index: -1;\n}\n\n.about-text {\n --width: 0.8;\n\n width: 80%;\n max-width: calc(750px * (var(--width)));\n position: relative;\n /* make sure content stays on top*/\n}\n\n.about button {\n background-color: var(--clr-primary-500);\n border-radius: 3px;\n color: var(--clr-neutral-100);\n padding: var(--size-400);\n border: none;\n}\n\n.about button:hover {\n cursor: pointer;\n background-color: var(--clr-primary-300);\n}\n\n.about .button-container {\n background-color: var(--clr-primary-300);\n width: 10rem;\n border-radius: 3px;\n}\n\n.about .button-container i {\n color: var(--clr-neutral-100);\n padding-left: var(--size-200);\n}\n\n@media (max-width: 50em) {\n .background-img-container {\n display: none;\n }\n\n .about-text {\n width: auto;\n }\n\n .about-text-container::before {\n opacity: 0.25;\n }\n}\n\n/* MENU */\n\n.menu {\n background-color: var(--clr-neutral-400);\n}\n\n.menu h2 {\n text-align: center;\n}\n\n.menu h3 {\n text-align: center;\n}\n\n.menu__categories {\n text-align: center;\n font-size: 0;\n}\n\n.menu__category-btn {\n margin: 0;\n padding-inline: var(--size-600);\n padding-block: var(--size-200);\n border: none;\n border-bottom: 2px solid gray;\n cursor: pointer;\n}\n\n.menu__category-btn:hover {\n color: var(--clr-primary-300);\n border-color: var(--clr-primary-300);\n}\n\n.menu__category-btn.active {\n border-bottom: 2px solid var(--clr-primary-300);\n color: var(--clr-primary-500);\n}\n\n/* Carousel container styling */\n.menu__carousel {\n overflow: hidden;\n width: 100%;\n position: relative;\n padding: 20px 0;\n}\n\n.menu__carousel-items {\n display: flex;\n transition: transform 0.3s ease-in-out;\n height: 100%;\n}\n\n.menu__carousel-slide {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n width: 100%;\n}\n\n/* Position the container */\n.menu__carousel-item {\n position: relative;\n flex: 0 0 calc(25% - 2%);\n /* Four items per row */\n margin: 1%;\n text-align: center;\n cursor: pointer;\n height: 50%;\n overflow: hidden;\n height: 15rem;\n gap: 0;\n}\n\n.menu__carousel-item img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n border-radius: 8px;\n transition: transform 0.3s ease;\n}\n\n.menu__carousel-item:hover img {\n transform: scale(1.05);\n /* Slight zoom effect */\n}\n\n/* Details overlay */\n.menu__details {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n /* Dark overlay */\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: top;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n padding-top: 25%;\n}\n\n.menu__price,\n.menu__stars,\n.menu__name {\n margin: 0;\n padding: 0;\n}\n\n.menu__price {\n font-family: var(--ff-primary);\n line-height: 140%;\n font-weight: var(--fw-bold);\n}\n\n.menu__stars {\n color: var(--clr-primary-300);\n line-height: 150%;\n}\n\n.menu__name {\n line-height: 100%;\n margin-inline: var(--size-100);\n}\n\n.menu__price,\n.menu__name {\n font-size: var(--fs-600);\n}\n\n.menu__order-btn {\n background: var(--clr-primary-500);\n color: var(--clr-neutral-100);\n border: none;\n border-radius: 5px;\n cursor: pointer;\n margin-top: 10px;\n transition: background 0.3s ease;\n position: absolute;\n bottom: 20%;\n left: 50%;\n transform: translateX(-50%);\n color: var(--clr-neutral-100);\n padding: var(--size-200);\n cursor: pointer;\n display: none;\n}\n\n.menu__order-btn:hover {\n background: var(--clr-primary-300);\n /* Slightly darker orange on hover */\n}\n\n/* Hover effect to show the overlay */\n.menu__carousel-item:hover .menu__details {\n opacity: 1;\n}\n\n.menu__carousel-item:hover .menu__order-btn {\n display: block;\n}\n\n.menu__carousel-indicators {\n text-align: center;\n margin-top: var(--size-700);\n}\n\n.menu__indicator {\n border: 0;\n margin: 0;\n padding: 0;\n display: inline-block;\n width: var(--size-200);\n height: var(--size-200);\n margin-inline: 0.75%;\n background: var(--clr-primary-300);\n border-radius: 50%;\n cursor: pointer;\n}\n\n.menu__indicator.active {\n background: var(--clr-primary-500);\n scale: 175%;\n}\n\n@media (max-width: 50em) {\n .menu__carousel-item {\n flex: 0 0 calc(50% - 5%);\n /* Two items per row */\n /* margin: 2.5%; */\n }\n}\n\n/* HOURS */\n\n.hours {\n text-align: center;\n position: relative;\n}\n\n.hours::before {\n content: \"\";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n background-image: url(\"https://cdn.glitch.global/7cc1e44e-4df5-4624-a9fd-cc6ab77cde75/cups.jpg?v=1732672127939\");\n background-size: cover;\n background-repeat: no-repeat;\n z-index: -1;\n opacity: 30%;\n mask-image: linear-gradient(to top, black 75%, transparent 90%),\n linear-gradient(\n to right,\n transparent 10%,\n black 25%,\n black 75%,\n transparent 90%\n );\n mask-composite: intersect;\n}\n\n.hours h2 {\n text-align: center;\n}\n\n.hours h3 {\n text-align: center;\n margin-bottom: var(--size-500);\n}\n\n.hours i {\n margin-block: var(--size-400);\n border-style: solid;\n border-color: #ff8800;\n border-width: 0.2rem;\n display: inline-block;\n padding: 1rem;\n border-radius: 50%;\n}\n\n.hours span {\n text-align: center;\n display: block;\n margin-top: var(--size-300);\n}\n\n.hours-details {\n float: left;\n width: 50%;\n margin-top: var(--size-400);\n margin-bottom: var(--size-600);\n}\n\n.hours .carousel {\n height: 21rem;\n margin-top: 8rem;\n}\n\n@media (max-width: 30em) {\n .hours .carousel {\n height: 12rem;\n }\n}\n\n.hours .carousel__track {\n display: flex;\n transition: transform 250ms ease-in; /* Smooth slide transition */\n}\n\n.hours .carousel__track-container {\n position: relative;\n width: 100%;\n}\n\n.hours .carousel__track {\n position: absolute;\n width: 100%;\n transition: transform 1000ms ease-in-out;\n}\n\n.hours .carousel__slide {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 100%;\n display: flex; /* Enables flexbox for centering */\n justify-content: center; /* Centers horizontally */\n align-items: center; /* Centers vertically */\n}\n\n.hours .carousel__image {\n margin-block: 0;\n padding-block: 0;\n margin-inline: auto;\n border-radius: 0;\n width: 100%;\n height: auto;\n aspect-ratio: 16/9;\n}\n\n/* TeSTIMONIALS */\n.testimonials {\n}\n\n.testimonials h2 {\n text-align: center;\n}\n\n.testimonials h3 {\n text-align: center;\n}\n\n.testimonials .carousel {\n height: 22rem;\n}\n\n@media (max-width: 35em) {\n .testimonials .carousel {\n height: 22rem;\n }\n .testimonials .carousel__image {\n height: 25%;\n }\n}\n\n@media (max-width: 25em) {\n .testimonials .carousel {\n height: 26rem;\n }\n}\n\n.testimonials p {\n line-height: var(--size-500);\n align-items: center;\n}\n\n@media (max-width: 40em) {\n .testimonials p {\n font-size: var(--fs-500);\n }\n}\n\n.carousel {\n position: relative;\n width: 80%;\n margin-inline: auto;\n}\n\n.carousel__button {\n position: absolute;\n top: 50%; /* Positions the button halfway down the track container */\n transform: translateY(-50%); /* Centers the button vertically */\n border-color: #ff8800;\n padding: 1rem;\n border-radius: 50%;\n border-style: solid;\n background: transparent;\n z-index: 1;\n cursor: pointer;\n}\n@media (max-width: 50em) {\n .carousel__button {\n padding: 0.5rem;\n }\n}\n.carousel__button:hover {\n color: var(--clr-primary-300);\n cursor: pointer;\n}\n\n.carousel__button:hover::after {\n color: var(--clr-primary-300);\n}\n\n.carousel__button--left {\n left: -3rem; /* Adjust dynamically based on your design */\n}\n\n.carousel__button--left::after {\n content: \"\";\n display: inline-block;\n /* By using an em scale, the arrows will size with the font */\n width: var(--size-300);\n height: var(--size-300);\n border-left: var(--size-100) solid var(--clr-primary-500);\n border-bottom: var(--size-100) solid var(--clr-primary-500);\n transform: rotate(45deg);\n margin-left: var(--size-100);\n}\n\n.carousel__button--right {\n right: -3rem;\n}\n\n.carousel__button--right::after {\n content: \"\";\n display: inline-block;\n /* By using an em scale, the arrows will size with the font */\n width: var(--size-300);\n height: var(--size-300);\n border-right: var(--size-100) solid var(--clr-primary-500);\n border-top: var(--size-100) solid var(--clr-primary-500);\n transform: rotate(45deg);\n margin-right: var(--size-100);\n}\n\n.carousel__track-container {\n position: relative;\n overflow: hidden; /* Hides overflow of slides outside the container */\n height: 100%; /* Ensures the container height is maintained */\n}\n\n.carousel__track {\n position: relative;\n height: 100%;\n transition: transform 250ms ease-in;\n}\n\n.carousel__slide {\n position: absolute;\n /* so they can stack on top of each other*/\n top: 0;\n bottom: 0;\n width: 100%;\n}\n\n.carousel__image {\n margin-inline: auto;\n border-radius: 50%;\n padding-block: var(--size-300);\n height: 35%;\n object-fit: cover;\n margin-top: var(--size-500);\n}\n\n.carousel h4 {\n text-align: center;\n font-size: var(--fs-600);\n font-weight: var(--fw-bold);\n}\n\n.carousel h5 {\n text-align: center;\n font-size: var(--fs-400);\n}\n\n.carousel span {\n padding-block: var(--size-100);\n color: gold;\n display: block;\n margin-inline: auto;\n text-align: center;\n margin-block: var(--size-300);\n}\n\n.carousel span i {\n margin-inline: auto;\n text-align: center;\n}\n\n.carousel p {\n text-align: center;\n font-style: italic;\n}\n\n.carousel__nav {\n padding-block: var(--size-200);\n padding-inline: 0;\n text-align: center;\n margin-block: var(--size-100);\n}\n\n.carousel__indicator {\n border: 0;\n border-radius: 50%;\n padding: var(--size-100);\n background: var(--clr-primary-300);\n margin-inline: var(--size-200);\n cursor: pointer;\n}\n\n.carousel__indicator.current-slide {\n background-color: var(--clr-primary-500);\n padding: var(--size-200);\n}\n\n/******************************************\n /* Utility classes (deco) - word editor basically to put into index\n /*******************************************/\n\n.visually-hidden {\n position: absolute;\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.is-hidden {\n display: none !important;\n}\n\n.mobile-view-40 {\n display: none !important;\n}\n\n@media (max-width: 40em) {\n .mobile-view-40 {\n display: block !important;\n }\n}\n.text-neutral-100 {\n color: var(--clr-neutral-100);\n}\n\n.text-neutral-300 {\n color: var(--clr-neutral-300);\n}\n\n.text-neutral-500 {\n color: var(--clr-neutral-600);\n}\n\n.text-neutral-900 {\n color: var(--clr-neutral-900);\n}\n\n.text-primary-300 {\n color: var(--clr-primary-300);\n}\n\n.text-primary-500 {\n color: var(--clr-primary-500);\n}\n\n.bg-neutral-100 {\n background-color: var(--clr-neutral-100);\n}\n\n.bg-neutral-300 {\n background-color: var(--clr-neutral-300);\n}\n\n.bg-neutral-900 {\n background-color: var(--clr-neutral-900);\n}\n\n.bg-primary-500 {\n background-color: var(--clr-primary-500);\n}\n\n.bg-primary-300 {\n background-color: var(--clr-primary-300);\n}\n\n.fw-bold {\n font-weight: var(--fw-bold);\n}\n\n.fw-regular {\n font-weight: var(--fw-regular);\n}\n\n.fs-primary-heading {\n font-size: var(--fs-primary-heading);\n}\n\n.fs-secondary-heading {\n font-size: var(--fs-secondary-heading);\n line-height: 1.2;\n}\n\n.fs-nav {\n font-size: var(--fs-nav);\n}\n\n.fs-button {\n font-size: var(--fs-button);\n}\n\n.fs-body {\n font-size: var(--fs-body);\n}\n\n.fs-300 {\n font-size: var(--fs-300);\n}\n\n.fs-400 {\n font-size: var(--fs-400);\n}\n\n.fs-500 {\n font-size: var(--fs-500);\n}\n\n.fs-600 {\n font-size: var(--fs-600);\n}\n\n.fs-700 {\n font-size: var(--fs-700);\n}\n\n.fs-800 {\n font-size: var(--fs-800);\n}\n\n.fs-900 {\n font-size: var(--fs-700);\n}\n\n.ff-primary {\n font-family: var(--ff-primary);\n}\n\n.ff-secondary {\n font-family: var(--ff-secondary);\n}\n\n/* utiility class size */\n\n.padding-block-400 {\n padding-block: var(--size-400);\n}\n\n.padding-block-900 {\n padding-block: var(--size-900);\n}\n\n.padding-block-700 {\n padding-block: var(--size-700);\n}\n\n.margin-block-300 {\n margin-block: var(--size-300);\n}\n\n.margin-block-400 {\n margin-block: var(--size-400);\n}\n\n.margin-block-500 {\n margin-block: var(--size-500);\n}\n\n.container {\n --max-width: 750px;\n --padding: 1rem;\n padding: var(--padding);\n\n width: min(var(--max-width), 100% - (var(--padding) * 2));\n margin-inline: auto;\n}\n\n/* .double-columns {\n display: grid;\n gap: 1rem;\n \n } */\n@media (min-width: 50em) {\n .double-columns {\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n }\n}\n\n/* @media (min-width: 40em) {\n .double-column {\n \n width: 50%;\n float: left;\n }\n \n \n }\n \n .double-column {\n --padding: 2.5%;\n \n padding: var(--padding);\n margin-inline: auto;\n }\n \n .triple-column {\n text-align: center;\n line-height: var(--size-400);\n margin-block: var(--size-700)\n \n }\n \n @media (min-width:40em) {\n .triple-column-1,\n .triple-column-2,\n .triple-column-3 {\n width: calc(100%/3 - 0.67rem);\n float: left;\n \n }\n .triple-column-1 {\n margin-right: 1rem;\n }\n .triple-column-3 {\n margin-left: 1rem;\n }\n }\n \n \n .vertical-align-center {\n align-items: center;\n }\n \n .width-25-percent {\n width: 25%;\n }\n \n .width-50-percent {\n width: 50%;\n }\n \n .width-60-percent {\n width: 60%;\n }\n \n .max-width-500px {\n max-width: 600px;\n }\n \n .width-35-percent {\n width: 35%;\n }\n \n .width-15rem {\n width: 15rem;\n }\n \n .width-900 {\n width: var(--size-900)\n }\n \n .margin-block-700 {\n margin-block: var(--size-700)\n }\n \n \n \n \n .margin-inline-0 {\n margin-inline: 0;\n }\n \n .margin-inline-100 {\n margin-inline: var(--size-100);\n }\n \n .margin-inline-700 {\n margin-inline: var(--size-600);\n }\n \n .margin-top-400 {\n margin-top: var(--size-400);\n }\n \n .padding-top-900 {\n padding-top: var(--size-900);\n }\n \n .margin-left-300 {\n margin-left: var(--size-300)\n }\n .margin-right-300 {\n margin-right: var(--size-300)\n }\n \n .display-inline {\n display: inline;\n }\n \n .display-block {\n display: block;\n }\n \n \n \n .line-height-700 {\n line-height: var(--size-700);\n }\n .line-height-400 {\n line-height: var(--size-400);\n }\n */",[],[211],"files",[148,169,178,189,200,209],"counts",{"_222":32,"_223":160,"_224":32,"_225":226},"pulls","branches","forks","envVars",{"_227":32,"_228":32},"count","emptyCount","contents",[231,234,237,240,243,246],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":232,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":233},["D",1751890926642],[150],{"_102":170,"_95":171,"_151":172,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":235,"_99":156,"_161":174,"_163":175,"_164":22,"_165":-5,"_98":236},["D",1751892518986],[171],{"_102":179,"_95":180,"_151":181,"_153":-5,"_154":136,"_155":182,"_157":158,"_104":238,"_99":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_98":239},["D",1751891770275],[180],{"_102":190,"_95":191,"_151":192,"_153":-5,"_154":136,"_155":193,"_157":158,"_104":241,"_99":195,"_161":196,"_163":197,"_164":22,"_165":96,"_98":242},["D",1751892376956],[191],{"_102":201,"_95":202,"_151":203,"_153":-5,"_154":136,"_155":204,"_157":158,"_104":244,"_99":195,"_161":174,"_163":206,"_164":22,"_165":-5,"_98":245},["D",1751891772052],[202],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":213,"_157":158,"_104":247,"_99":195,"_161":174,"_163":215,"_164":22,"_165":-5,"_98":248},["D",1751891773867],[211],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":257,"_229":262,"_275":-7,"_276":-5,"_277":-5,"_218":278,"_297":298,"_299":-5,"_300":-5},{"_102":103,"_95":96,"_104":258,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":259,"_130":260,"_133":261,"_145":22},["D",1751890145670],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[263,265,267,269,271,273],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":232,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":264},[150],{"_102":170,"_95":171,"_151":172,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":235,"_99":156,"_161":174,"_163":175,"_164":22,"_165":-5,"_98":266},[171],{"_102":179,"_95":180,"_151":181,"_153":-5,"_154":136,"_155":182,"_157":158,"_104":238,"_99":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_98":268},[180],{"_102":190,"_95":191,"_151":192,"_153":-5,"_154":136,"_155":193,"_157":158,"_104":241,"_99":195,"_161":196,"_163":197,"_164":22,"_165":96,"_98":270},[191],{"_102":201,"_95":202,"_151":203,"_153":-5,"_154":136,"_155":204,"_157":158,"_104":244,"_99":195,"_161":174,"_163":206,"_164":22,"_165":-5,"_98":272},[202],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":213,"_157":158,"_104":247,"_99":195,"_161":174,"_163":215,"_164":22,"_165":-5,"_98":274},[211],"readme","upstream","pull",[279,282,285,288,291,294],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":159,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":280,"_98":281},[],[150],{"_102":170,"_95":171,"_151":172,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":173,"_99":156,"_161":174,"_163":175,"_164":22,"_165":-5,"_166":283,"_98":284},[],[171],{"_102":179,"_95":180,"_151":181,"_153":-5,"_154":136,"_155":182,"_157":158,"_104":183,"_99":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_166":286,"_98":287},[],[180],{"_102":190,"_95":191,"_151":192,"_153":-5,"_154":136,"_155":193,"_157":158,"_104":194,"_99":195,"_161":196,"_163":197,"_164":22,"_165":96,"_166":289,"_98":290},[],[191],{"_102":201,"_95":202,"_151":203,"_153":-5,"_154":136,"_155":204,"_157":158,"_104":205,"_99":195,"_161":174,"_163":206,"_164":22,"_165":-5,"_166":292,"_98":293},[],[202],{"_102":210,"_95":211,"_151":212,"_153":-5,"_154":136,"_155":213,"_157":158,"_104":214,"_99":195,"_161":174,"_163":215,"_164":22,"_165":-5,"_166":295,"_98":296},[],[211],"previews",[288],"ahead","behind","actionData","errors"]

\n Welcome
To Our Cuisine
\n Restaurant\n

About us

\n Discover Our Restaurant Story\n

Order Online Now

\n Our Speciality Cuisine\n

Book Table

Opening Hours

Testimonials

Customers Say

1Mr John Smith

Art Director

2Mr John Smith

Art Director

3Mr John Smith

Art Director

4Mr John Smith

Art Director

5Mr John Smith

Art Director

\n Welcome To Our Cuisine \n Restaurant\n

About us

\n Discover Our Restaurant Story\n

Order Online Now

\n Our Speciality Cuisine\n

Book Table

Opening Hours

Testimonials

Customers Say

1Mr John Smith

Art Director

2Mr John Smith

Art Director

3Mr John Smith

Art Director

4Mr John Smith

Art Director

5Mr John Smith

Art Director

\n Welcome
To Our Cuisine
\n Restaurant\n

yasminrei

restaurant