<div class="py-[80px] md:py-[100px] px-4 bg-cover bg-center" style="background-image: url('{{ asset('./images/background/footer1.png') }}');">
    <div class="max-w-7xl mx-auto space-y-20"> @php
            $cabang = [
                ['img' => 'sambutan.png', 'desc' => '
                STEI YPAM hadir sebagai kampus inklusif yang menghargai keberagaman dan mendorong setiap mahasiswa untuk tumbuh bersama. Kami percaya bahwa setiap individu memiliki potensi unik yang dapat berkembang dalam lingkungan yang saling menghargai dan mendukung. Melalui budaya kolaboratif, inklusif, serta berbagai kegiatan lintas bidang dan latar belakang. STEI YPAM menciptakan ruang belajar yang terbuka bagi semua. Di sini, kita tidak hanya belajar untuk sukses secara pribadi, tetapi juga tumbuh bersama untuk membangun masa depan yang lebih baik
                '],


            ];
        @endphp

        @foreach($cabang as $item)
        <div class="flex flex-col md:flex-row items-center justify-center gap-10 md:gap-20" data-aos="fade-up">
            <div class="w-full md:w-1/2 flex justify-center md:justify-end">
                <div class="relative group">
                    <img src="{{ asset('./images/sambutan/' . $item['img']) }}" 
                         class="w-[300px] md:w-[450px] h-auto object-cover shadow-2xl transition-transform duration-300 group-hover:scale-105" 
                         style="border-radius:25px;" 
                         alt="Sambutan">
                    </div>
            </div>

            <div class="w-full md:w-1/2 flex flex-col items-center md:items-start text-start md:text-left ml-12">
                <x-header-section 
                    subtext="SAMBUTAN KETUA {{ $settings['nama kampus'] ?? '' }} " 
                    subtext-color="#fff" 
                    title="" 
                    title-color="#fff" />
                
                    <p class="font-inter text-sm md:text-base leading-relaxed mb-6 max-w-lg" style="color: white !important;">
                        {{ $item['desc'] }}
                    </p>
                
                <a href="/sejarah-singkat" class="inline-block bg-yellow-400 hover:bg-white hover:text-yellow-500 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:-translate-y-1 shadow-lg">
                    BACA SELENGKAPNYA
                </a>
            </div>

        </div>
        
        @if(!$loop->last)
            <br>
        @endif
        @endforeach

    </div>
</div>