<!-- Header Search -->
<div class="hidden lg:block absolute left-1/2 rtl:right-1/2 rtl:left-auto transform -translate-x-1/2 rtl:translate-x-1/2 w-96">
    <div class="relative">

        <svg class="absolute start-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m21 21-4.34-4.34"></path>
            <circle cx="11" cy="11" r="8"></circle>
        </svg>

        <input type="text" id="navbar-search-ecommerce" name="product_search" class="w-full ps-10 pe-12 py-3 text-sm border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400 focus:border-primary-200 dark:focus:border-gray-500 focus:ring-3 focus:ring-primary-200 dark:focus:ring-primary-800 focus:outline-none" placeholder="Search products..." autocomplete="off" aria-label="Search products">

        <button class="absolute end-2 top-1/2 transform -translate-y-1/2 p-2 bg-primary-200 hover:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-300 text-white rounded-lg  transition-colors duration-200" aria-label="Search">
            <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="m21 21-4.34-4.34"></path>
                <circle cx="11" cy="11" r="8"></circle>
            </svg>
        </button>

    </div>
</div>