<!-- Program Section -->
<section class="py-20 px-5 bg-white">
    <div class="max-w-7xl mx-auto">
        <!-- Header Features Section -->
        <div class="text-center mb-8">
            <h2 class="text-4xl font-semibold text-gray-800 pb-6 inline-block relative">
                Program Desa Kami
                <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-[0.20rem] bg-gray-300"></span>
            </h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">
            <!-- Program Cards -->
            <div class="grid gap-5">
                <!-- Card 1 - Light Blue -->
                <div
                    class="bg-[#E9F1FC] text-gray-800 p-6 rounded-3xl shadow-lg flex flex-col justify-center items-center">
                    <h3 class="text-3xl font-bold mb-3 leading-tight">
                        Visi
                    </h3>
                    <p class="text-lg leading-tight mb-4 text-center">
                        Visi kami adalah menjadi kawasan wisata pedesaan yang menjadi percontohan dalam pembangunan
                        pariwisata berkelanjutan,
                        dengan fokus pada konservasi alam, pelestarian seni budaya, dan peningkatan kesejahteraan
                        masyarakat
                    </p>
                </div>

                <!-- Card 2 - Blue -->
                <div
                    class="bg-[#003d82] text-white p-6 rounded-3xl shadow-lg flex flex-col justify-center items-center">
                    <h3 class="text-3xl font-bold mb-3 leading-tight">
                        Misi
                    </h3>
                    <ol class="text-lg leading-tight mb-4 px-4 list-decimal space-y-2">
                        <li class="pl-2">
                            Memaksimalkan sistem Kerja Aparatur Pemerintah Desa Sesuai Tugas, Fungsi dan Wewenang.
                        </li>
                        <li class="pl-2">
                            Menyelenggarakan Program Desa Berdasarkan Musyawarah Yang Termuat Dalam RPJMDesa, RKPDes dan
                            APBDesa.
                        </li>
                        <li class="pl-2">
                            Melaksanakan Program Desa Dengan Transparan Terbuka dan Bertanggungjawab.
                        </li>
                        <li class="pl-2">
                            Meningkatkan Pelayanan Kepada Masyarakat dari Yang Tidak Tahu Sampai Mengerti dan Dari Yang
                            Tidak Mampu Menjadi Mandiri Dengan Baik.
                        </li>
                    </ol>
                </div>
            </div>

            <!-- Program Details -->
            <div class="bg-gray-50 p-10 rounded-3xl">
                <span class="inline-block bg-[#FDB913] text-gray-800 px-4 py-1 rounded-2xl text-sm font-semibold mb-4">
                    Desa Wisata
                </span>
                <h2 class="text-2xl lg:text-3xl font-bold mb-5 text-gray-800 leading-tight">
                    Harmoni Alam dan Budaya di Kaki Gunung Baung
                </h2>
                <p class="text-base leading-tight text-gray-600 mb-6">
                    Visi kami adalah menjadi kawasan wisata
                    pedesaan yang menjadi percontohan dalam pembangunan pariwisata berkelanjutan, dengan fokus pada
                    konservasi alam, pelestarian seni budaya, dan peningkatan kesejahteraan masyarakat
                </p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>Peraih Indonesia Sustainable Tourism Award (ISTA) 2019</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>300 Besar Anugerah Desa Wisata Indonesia (ADWI)</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>Green Rafting / Arung Jeram</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>Air Terjun Coban Baung</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3 mt-1">●</span>
                        <span>Baung Camp & Camping Ground</span>
                    </li>
                </ul>
                <div class="relative h-48 md:h-60 mb-4">
                    <div
                        class="absolute z-20 left-6 md:left-12 top-8 md:top-16 w-40 md:w-60 h-36 md:h-48 rounded-2xl overflow-hidden shadow-2xl transform hover:scale-105 transition-transform duration-300">
                        <img src="{{ asset('assets/program-1.png') }}" alt="program-1"
                            class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-linear-to-t from-black/10 to-transparent"></div>
                    </div>
                    <div
                        class="absolute z-10 right-6 md:right-12 top-0 w-40 md:w-60 h-36 md:h-48 rounded-2xl overflow-hidden shadow-2xl transform hover:scale-105 transition-transform duration-300">
                        <img src="{{ asset('assets/program-2.png') }}" alt="program-2"
                            class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-linear-to-t from-black/10 to-transparent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
