<section id="about" class="container mx-auto py-20 px-6">
  <div class="text-center mb-12">
    <h2 class="text-4xl md:text-5xl font-extrabold text-blue-900 mb-4 animate-fade-in">
      Tentang <span class="text-yellow-400">Kampus</span>
    </h2>
    <div class="w-24 h-1 bg-yellow-400 mx-auto rounded-full"></div>
  </div>

  <div class="grid md:grid-cols-2 gap-12 items-center">
    <!-- Gambar ilustrasi dari Unsplash -->
    <div class="flex justify-center">
      <img src="https://images.unsplash.com/photo-1577985043696-8bd54d9f093f?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
           alt="Kampus AMPJ" 
           class="rounded-2xl shadow-lg transform hover:scale-105 transition duration-500">
    </div>

    <!-- Deskripsi -->
    <div class="text-gray-700 leading-relaxed animate-slide-up">
      <p class="mb-6 text-lg">
        <span class="font-semibold text-blue-900">AMPJ Yogyakarta</span> adalah kampus 
        yang berdedikasi mencetak lulusan berkualitas, dengan fokus pada pengembangan 
        <span class="text-yellow-500 font-medium">akademik</span> dan 
        <span class="text-yellow-500 font-medium">keterampilan profesional</span>.
      </p>
      <p class="text-lg">
        Dengan lingkungan belajar yang inspiratif dan fasilitas modern, AMPJ 
        berkomitmen membangun <span class="font-semibold text-blue-900">generasi masa depan</span> 
        yang siap bersaing di tingkat nasional maupun internasional.
      </p>
    </div>
  </div>
</section>
