{{ template "headersMenu.html" . }}



<!-- Start -->
<section class="relative mt-20 py-36 bg-[url('../../assets/images/food/menu.jpg')] bg-no-repeat bg-fixed bg-top bg-cover">
    <div class="absolute inset-0 via-black/50"></div>
    <div class="absolute right-0 bottom-0 left-0 px-3 text-center">
        <h5 class="text-xl font-semibold leading-normal text-slate-400">Our Menu</h5>
        <h4 class="mb-5 text-2xl font-semibold leading-normal text-white md:text-3xl md:leading-normal">Choose your mixture & order now!</h4>
    </div>
</section><!--end section-->
<!-- End -->

<!-- Start -->
<section class="relative md:py-24 py-16 md:pt-12 bg-[url('../../assets/images/food/food-menu.png')] bg-no-repeat bg-top bg-cover">
    <div class="container">
        <div class="grid grid-cols-1 items-center gap-[30px]">
            <div class="text-center filters-group-wrap">
                <div class="filters-group">
                    <ul class="mb-0 list-none container-filter-border-bottom filter-options">
                        <li class="inline-block relative mx-2 mb-3 text-sm font-semibold uppercase border-b border-transparent transition duration-500 cursor-pointer text-slate-400 active" data-group="all">All</li>
                        <li class="inline-block relative mx-2 mb-3 text-sm font-semibold uppercase border-b border-transparent transition duration-500 cursor-pointer text-slate-400" data-group="break">Breakfast</li>
                        <li class="inline-block relative mx-2 mb-3 text-sm font-semibold uppercase border-b border-transparent transition duration-500 cursor-pointer text-slate-400" data-group="lunch">Lunch</li>
                        <li class="inline-block relative mx-2 mb-3 text-sm font-semibold uppercase border-b border-transparent transition duration-500 cursor-pointer text-slate-400" data-group="dinner">Dinner</li>
                        <li class="inline-block relative mx-2 mb-3 text-sm font-semibold uppercase border-b border-transparent transition duration-500 cursor-pointer text-slate-400" data-group="tea">Tea & Coffee</li>
                    </ul>
                </div>
            </div>
        </div><!--grid-->
    </div><!--end container-->

    <div class="container mt-8">   
        <div id="grid" class="justify-center md:flex">
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["break"]'>
                <img src="/cdn/gui/assets/images/food/1.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Black bean dip</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["lunch"]'>
                <img src="/cdn/gui/assets/images/food/2.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Onion Pizza</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["break"]'>
                <img src="/cdn/gui/assets/images/food/3.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Chicken Breast</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["dinner"]'>
                <img src="/cdn/gui/assets/images/food/4.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Veg Pizza</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["break"]'>
                <img src="/cdn/gui/assets/images/food/5.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Cordon Bleu</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["lunch"]'>
                <img src="/cdn/gui/assets/images/food/6.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Boerewors</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["break"]'>
                <img src="/cdn/gui/assets/images/food/7.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Tarte Tatin</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["tea"]'>
                <img src="/cdn/gui/assets/images/food/8.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Green Tea</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["lunch"]'>
                <img src="/cdn/gui/assets/images/food/9.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Special Coffee</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["dinner"]'>
                <img src="/cdn/gui/assets/images/food/10.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Lemon Tea</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["tea"]'>
                <img src="/cdn/gui/assets/images/food/11.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Pancakes</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["lunch"]'>
                <img src="/cdn/gui/assets/images/food/12.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">American Item</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["tea"]'>
                <img src="/cdn/gui/assets/images/food/13.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Country side pizza</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["dinner"]'>
                <img src="/cdn/gui/assets/images/food/14.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Chilly garlic potato</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
            
            <div class="p-3 mt-6 group lg:w-1/5 md:w-1/3 picture-item" data-groups='["tea"]'>
                <img src="/cdn/gui/assets/images/food/15.jpg" class="rounded-full h-32 w-32 mx-auto group-hover:animate-[spin_10s_linear_infinite]" alt="">

                <div class="mt-4 text-center">
                    <a href="" class="block text-lg font-medium transition-all duration-500 ease-in-out hover:text-indigo-600">Brownie with vanilla</a>
                    <span class="block mt-2 text-slate-400">A reader will be distracted by the readable</span>

                    <h5 class="mt-4 font-medium text-indigo-600">$25.00</h5>
                </div>
            </div><!--end col-->
        </div>
    </div><!--end container-->
</section><!--end section-->
<!-- End -->

<!-- Start Booking Table -->
<section class="relative md:py-24 py-16 bg-[url('../../assets/images/food/cta.jpg')] bg-no-repeat bg-fixed bg-top bg-cover">
    <div class="absolute inset-0 bg-black/50"></div>
    <div class="container">
        <div class="flex justify-end">
            <div class="lg:w-1/2 md:w-2/3">
                <div class="p-6 bg-white rounded-md shadow-md dark:bg-slate-900 dark:shadow-gray-800 lg:p-12 ltr:lg:ml-12 rtl:lg:mr-12">
                    <div class="mb-4 section-title">
                        <span class="px-2.5 py-0.5 h-5 text-xs font-bold text-indigo-600 rounded bg-indigo-600/5">Reservation</span>
                        <h4 class="my-4 text-4xl font-bold uppercase">Book A Table</h4>
                        <p class="mx-auto text-slate-400 para-desc">We make it a priority to offer flexible services to accomodate your needs</p>
                    </div>

                    <form>
                        <div class="grid gap-4 mt-6 md:grid-cols-2">
                            <div>
                                <label class="font-semibold">Your Name</label>
                                <input name="name" id="name" type="text" class="mt-2 form-input" placeholder="First Name :">
                            </div>

                            <div>
                                <label class="font-semibold">Your Email</label>
                                <input name="email" id="email" type="email" class="mt-2 form-input" placeholder="Your email :">
                            </div> 

                            <div>
                                <label class="font-semibold">Phone no.</label>
                                <input name="number" type="number" id="phone-number" class="mt-2 form-input" placeholder="Phone no. :">
                            </div> 

                            <div>
                                <label class="font-semibold">Person</label>
                                <input type="number" min="0" autocomplete="off" id="adult" class="mt-2 form-input" required="" placeholder="Person :">
                            </div> 

                            <div>
                                <label class="font-semibold">Date</label>
                                <input name="date" type="text" class="mt-2 form-input start" placeholder="(ex: mm/ dd/ yy)">
                            </div> 

                            <div>
                                <label class="font-semibold">Time</label>
                                <input name="time" type="text" id="input-time" class="mt-2 form-input timepicker" placeholder="(ex: 8:00 p.m)">
                            </div> 
                        </div><!--end grid-->

                        <div class="grid grid-cols-1 mt-4">
                            <input type="submit" id="submit" name="send" class="w-full text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700" value="Book a table">
                        </div><!--end grid-->
                    </form><!--end form-->
                </div>
            </div><!--end col-->
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End Booking Table -->

<!-- Start -->
<section class="relative py-16 md:py-24 bg-indigo-600/5">
    <div class="container">
        <div class="grid grid-cols-1 pb-8 text-center">
            <h3 class="mb-4 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Happy Client's</h3>

            <p class="mx-auto max-w-xl text-slate-400">Splash your dream color Bring your home to lively Colors. We make it a priority to offer flexible services to accomodate your needs</p>
        </div><!--end grid-->

        <div class="grid grid-cols-1 mt-8">
            <div class="tiny-three-item">
                <div class="text-center tiny-slide">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-slate-400">" It seems that only fragments of the original text remain in the Lorem Ipsum texts used today. "</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <img src="/cdn/gui/assets/images/client/01.jpg" class="mx-auto w-14 h-14 rounded-full shadow-md" alt="">
                            <h6 class="mt-2 font-semibold">Calvin Carlo</h6>
                            <span class="text-sm text-slate-400">Manager</span>
                        </div>
                    </div>
                </div>

                <div class="text-center tiny-slide">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-slate-400">" The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. "</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <img src="/cdn/gui/assets/images/client/02.jpg" class="mx-auto w-14 h-14 rounded-full shadow-md" alt="">
                            <h6 class="mt-2 font-semibold">Christa Smith</h6>
                            <span class="text-sm text-slate-400">Manager</span>
                        </div>
                    </div>
                </div>

                <div class="text-center tiny-slide">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-slate-400">" One disadvantage of Lorum Ipsum is that in Latin certain letters appear more frequently than others. "</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <img src="/cdn/gui/assets/images/client/03.jpg" class="mx-auto w-14 h-14 rounded-full shadow-md" alt="">
                            <h6 class="mt-2 font-semibold">Jemina CLone</h6>
                            <span class="text-sm text-slate-400">Manager</span>
                        </div>
                    </div>
                </div>

                <div class="text-center tiny-slide">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-slate-400">" Thus, Lorem Ipsum has only limited suitability as a visual filler for German texts. "</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <img src="/cdn/gui/assets/images/client/04.jpg" class="mx-auto w-14 h-14 rounded-full shadow-md" alt="">
                            <h6 class="mt-2 font-semibold">Smith Vodka</h6>
                            <span class="text-sm text-slate-400">Manager</span>
                        </div>
                    </div>
                </div>

                <div class="text-center tiny-slide">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-slate-400">" There is now an abundance of readable dummy texts. These are usually used when a text is required. "</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <img src="/cdn/gui/assets/images/client/05.jpg" class="mx-auto w-14 h-14 rounded-full shadow-md" alt="">
                            <h6 class="mt-2 font-semibold">Cristino Murfi</h6>
                            <span class="text-sm text-slate-400">Manager</span>
                        </div>
                    </div>
                </div>

                <div class="text-center tiny-slide">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-slate-400">" According to most sources, Lorum Ipsum can be traced back to a text composed by Cicero. "</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <img src="/cdn/gui/assets/images/client/06.jpg" class="mx-auto w-14 h-14 rounded-full shadow-md" alt="">
                            <h6 class="mt-2 font-semibold">Cristino Murfi</h6>
                            <span class="text-sm text-slate-400">Manager</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End -->

<!-- Insta Post Start -->
<div class="relative container-fluid">
    <div class="grid relative grid-cols-1">
        <div class="tiny-twelve-item">
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/1.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/1.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/2.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/2.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/3.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/3.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/4.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/4.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/5.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/5.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/6.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/6.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/7.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/7.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/8.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/8.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/9.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/9.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/10.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/10.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/11.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/11.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/12.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/12.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/13.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/13.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/14.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/14.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="tiny-slide">
                <div class="border-0 card rounded-0">
                    <div class="p-0 card-body">
                        <a href="/cdn/gui/assets/images/food/15.jpg" class="lightbox d-inline-block" title="">
                            <img src="/cdn/gui/assets/images/food/15.jpg" class="" alt="Insta Post">
                            <div class="overlay bg-dark"></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="hidden absolute top-2/4 text-center -translate-y-2/4 ltr:left-2/4 rtl:right-2/4 ltr:-translate-x-2/4 rtl:translate-x-2/4 md:block">
            <a href="https://www.instagram.com/shreethemes/" target="_blank" class="text-white bg-indigo-600 rounded-md border-indigo-600 btn btn-sm hover:bg-indigo-700 hover:border-indigo-700">Follow Now</a>
        </div>
    </div><!--end grid-->
</div><!--end container-->
<!-- Insta Post End -->

<!-- Footer Start -->
<footer class="relative text-gray-200 footer bg-dark-footer dark:text-gray-200">    
    <div class="container">
        <div class="grid grid-cols-12">
            <div class="col-span-12">
                <div class="py-[60px] px-0">
                    <div class="grid lg:grid-cols-3 md:grid-cols-6 justify-center gap-[30px]">
                        <div class="text-center">
                            <h5 class="tracking-[1px] text-gray-100 font-semibold mb-4">Open Hours</h5>
                            <p class="mb-2">Monday - Friday: 10 AM - 11 PM</p>
                            <p class="mb-0">Saturday - Sunday: 9 AM - 1 PM</p>
                        </div>
            
                        <div class="text-center">
                            <h5 class="tracking-[1px] text-gray-100 font-semibold mb-4">Reservation</h5>
                            <p class="mb-2"><a href="tel:+152534-468-854" class="text-gray-200">+152 534-468-854</a></p>
                            <p class="mb-0"><a href="mailto:contact@example.com" class="text-gray-200">contact@example.com</a></p>
                        </div>

                        <div class="text-center">
                            <h5 class="tracking-[1px] text-gray-100 font-semibold mb-4">Address</h5>
                            <p class="mb-2">Techwind Restaurent</p>
                            <p class="mb-0">C/54 Northwest Freeway, Suite 558, USA 485</p>
                        </div>
                    </div><!--end grid-->

            
                    <div class="grid grid-cols-1 mt-12">
                        <div class="text-center">
                            <img src="/cdn/design/logos/datamix-white.png" class="block mx-auto h-8" alt="">
                            <p class="mx-auto mt-6 max-w-xl">Splash your dream color Bring your home to lively Colors. We make it a priority to offer flexible services to accomodate your needs</p>
                        </div>

                        <ul class="mt-6 list-none text-center">
                            <li class="inline"><a href="/login" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa fa-shopping-cart" title="Buy Now"></i></a></li>
                            <li class="inline"><a href="https://dribbble.com/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa-brands fa-dribbble" title="dribbble"></i></a></li>
                            <li class="inline"><a href="https://www.behance.net/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="fa-brands fa-behance" title="Behance"></i></a></li>
                            <li class="inline"><a href="http://linkedin.com/company/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="fa-brands fa-linkedin" title="Linkedin"></i></a></li>
                            <li class="inline"><a href="https://www.facebook.com/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa-brands fa-facebook-f" title="facebook"></i></a></li>
                            <li class="inline"><a href="https://www.instagram.com/shreethemes/" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa-brands fa-instagram" title="instagram"></i></a></li>
                            <li class="inline"><a href="https://twitter.com/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa-brands fa-twitter" title="twitter"></i></a></li>
                            <li class="inline"><a href="mailto:support@datamix.io" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa-brands fa-envelope" title="email"></i></a></li>
                            <li class="inline"><a href="https://forms.gle/QkTueCikDGqJnbky9" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle fa-brands fa-file" title="customization"></i></a></li>
                        </ul><!--end icon-->
                    </div><!--end grid-->
                </div>
            </div>
        </div><!--end grid-->
    </div><!--end container-->

</footer><!--end footer-->
<!-- Footer End -->


{{ template "footerMenuDetails.html" . }}