<!-- Hero -->
<div class="hero-section">
    <div class="container-xl">
        <div class="row align-items-center gy-5">
            <div class="col-lg-6">
                <span class="badge bg-white bg-opacity-25 border border-white border-opacity-25 text-warning mb-3 px-3 py-2 rounded-pill fw-normal">
                    <?= $set['tagline'] ?>
                </span>
                <h1 class="display-4 fw-bold mb-4 lh-sm">
                    <?= $set['subtagline'] ?>
                </h1>
                <p class="lead mb-4 opacity-75">
                    <?= $set['deskripsi'] ?>
                </p>
                <div class="d-flex gap-3">
                    <a href="membership.html" class="btn btn-warning btn-lg px-4 fw-bold text-dark shadow-sm">Daftar Anggota</a>
                    <a href="seminars.html" class="btn btn-outline-light btn-lg px-4 fw-medium">Lihat Seminar</a>
                </div>
            </div>
            <div class="col-lg-6 d-flex justify-content-center">
                <div class="position-relative">
                    <div class="position-absolute top-50 start-50 translate-middle bg-primary rounded-circle opacity-50 blur-xl" style="width: 300px; height: 300px; filter: blur(60px);"></div>
                    <img src="<?= $img . $set['gambar'] ?>" alt="Guru Indonesia" class="img-fluid rounded-4 shadow-lg position-relative border border-4 border-white border-opacity-25" style="transform: rotate(2deg);">
                </div>
            </div>
        </div>
    </div>
</div>