@@include('../components/header-1.html')
<div class="header-bg absolute top-0 left-0 right-0 -z-50 w-full h-[1100px] bg-gradient-to-b from-primary-light-950/15 to-transparent max-h-[1100px] overflow-hidden"></div>

<section class="py-32">
    <div class="container px-4">
        <div class="flex flex-col lg:flex-row gap-8 items-center">
           <div class="lg:pr-8 w-1/2">
                <img src="assets/imgs/template/404.png" alt="">
           </div>
           <div class="lg:pl-8  lg:w-1/2">
                <h1 class="text-9xl text-neutral-950 dark:text-neutral-dark-950 font-bold mb-2">404</h1>
                <h6 class="text-5xl text-neutral-950 dark:text-neutral-dark-950 font-bold mb-2">Oops! We Can’t find that page</h6>
                <p class="text-lg text-neutral-700 dark:text-neutral-dark-700 font-bold mb-12">Sorry, the page you are looking for doesn’t exits or has been moved. Try searching our site or <a href="index.html" class="text-neutral-950 dark:text-neutral-dark-950">Back to Home</a></p>

                <div class="relative mb-8 lg:max-w-[400px]">
                    <form action="">
                        <div class="flex gap-4 mb-4 bg-neutral-0 dark:bg-neutral-dark-200 rounded-full p-1 pl-9 border border-neutral-300 dark:border-neutral-dark-300">
                            <input class="flex-1 focus:outline-none transition duration-200 bg-transparent max-w-[175px] md:max-w-none" type="text" placeholder="Enter your key words">
                            <button class="min-w-12 size-12 rounded-full bg-primary-light-950 transition duration-200 flex items-center justify-center gap-2" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                                    <g clip-path="url(#clip0_135_1647)">
                                        <path d="M15.4202 17.2452L19.8183 21.6443C20.0585 21.8716 20.3775 22 20.7093 22C21.417 21.999 21.9991 21.416 21.9991 20.7084C21.9991 20.3775 21.8717 20.0585 21.6443 19.8183L17.2452 15.421C20.1162 11.6554 19.8321 6.24979 16.3946 2.81137L16.3882 2.80496L16.1333 2.55012C16.0977 2.51274 16.0577 2.47981 16.0142 2.45204C12.2467 -0.932293 6.43592 -0.814043 2.8105 2.81137C-0.936833 6.55962 -0.936833 12.6463 2.8105 16.3927C6.24983 19.832 11.6563 20.1171 15.4202 17.2452ZM14.5356 4.66946C17.2397 7.37637 17.2397 11.8286 14.5356 14.5355C11.8287 17.2388 7.37733 17.2388 4.67042 14.5355C1.96533 11.8286 1.96533 7.37637 4.67042 4.66946C7.37733 1.96529 11.8287 1.96529 14.5356 4.66946Z" fill="#151618" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_135_1647">
                                            <rect width="22" height="22" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>
                            </button>
                        </div>
                    </form>
                    <div class="flex-col justify-start items-start gap-3 inline-flex mt-8">
                        <div class="text-neutral-950 dark:text-neutral-dark-950 text-base font-bold">Suggested</div>
                        <div class="flex flex-wrap gap-4">
                            <a href="#" class="font-regular text-base text-neutral-700 link-hover hover:text-neutral-950 dark:text-neutral-0 dark:hover:text-neutral-dark-600">Events</a>
                            <a href="#" class="font-regular text-base text-neutral-700 link-hover hover:text-neutral-950 dark:text-neutral-0 dark:hover:text-neutral-dark-600">Shop</a>
                            <a href="#" class="font-regular text-base text-neutral-700 link-hover hover:text-neutral-950 dark:text-neutral-0 dark:hover:text-neutral-dark-600">Tech</a>
                            <a href="#" class="font-regular text-base text-neutral-700 link-hover hover:text-neutral-950 dark:text-neutral-0 dark:hover:text-neutral-dark-600">Fashion</a>
                            <a href="#" class="font-regular text-base text-neutral-700 link-hover hover:text-neutral-950 dark:text-neutral-0 dark:hover:text-neutral-dark-600">Books</a>
                            <a href="#" class="font-regular text-base text-neutral-700 link-hover hover:text-neutral-950 dark:text-neutral-0 dark:hover:text-neutral-dark-600">Travel</a>
                        </div>
                    </div>
                </div>
           </div>
        </div>
    </div>
</section>







@@include('../components/footer-2.html')