<footer id="contact"
    class="relative bg-[#06275A] py-0 md:py-0 w-screen flex justify-center object-cover items-center  bg-center"
    style="background-image: url('{{ asset('img/bg-footer.png') }}');">
    <div class="container">
        <div class=" py-6 lg:py-8 md:px-10">
            <div class="xl:flex space-y-10 xl:space-y-0 xl:justify-between">
                <div class="mb-6 md:mb-0 xl:pr-20 ">
                    <div class="flex justify-start text-center">

                        <a href="/" class=" flex flex-col leading-none">
                            <span
                                class="text-sm md:text-lg top-0.5 md:top-1.5 relative  whitespace-nowrap text-white poppins-bold font-bold">Adminduk</span>
                            <span
                                class="text-md md:text-xl bottom-0.5 md:bottom-1.5 text-white relative  whitespace-nowrap poppins-bold font-bold">PUGER</span>
                        </a>
                    </div>
                    <iframe class=""
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3947.307427942634!2d113.47551527575781!3d-8.371389484397636!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd683e286ad471b%3A0xe27ae7bce0e69a85!2sKantor%20Kecamatan%20Puger!5e0!3m2!1sid!2sid!4v1741025013037!5m2!1sid!2sid"
                        style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
                    <div>
                        <h2 class="mb-6 text-sm font-semibold text-white uppercase ">Halaman Lain</h2>
                        <ul class="text-gray-300  font-medium space-y-4">
                            <li>
                                <a href="https://flowbite.com/" class="hover:underline">Beranda</a>
                            </li>
                            <li>
                                <a href="https://tailwindcss.com/" class="hover:underline">Visi Misi</a>
                            </li>
                            <li>
                                <a href="https://tailwindcss.com/" class="hover:underline">Tentang</a>
                            </li>
                            <li>
                                <a href="https://tailwindcss.com/" class="hover:underline">Contact</a>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h2 class="mb-6 text-sm font-semibold text-white uppercase ">Hubungi Kami</h2>
                        <ul class="text-gray-300  font-medium space-y-4">
                            <li>
                                <a href="#" class="hover:underline">WhatsApp</a>
                            </li>
                            <li>
                                <a href="#" class="hover:underline">Instagram</a>
                            </li>
                            <li>
                                <a href="#" class="hover:underline">Email</a>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h2 class="mb-6 text-sm font-semibold text-white uppercase ">Alamat</h2>
                        <ul class="text-gray-300  font-medium">
                            <li class="mb-4">
                                <a href="https://github.com/themesberg/flowbite" class="hover:underline ">Jl. Pantai
                                    Tim. No.93, Puger Kulon, Puger, Kabupaten Jember, Jawa Timur 68164, Indonesia</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <hr class="my-6 border-gray-200 sm:mx-auto  lg:my-8" />
            <div class="flex justify-center items-center ">
                <span class="text-sm text-gray-300 sm:text-center ">@copyright 2025 admindukpuger.com
                </span>
            </div>
        </div>

    </div>
</footer>
