<!-- Features -->
<div class="py-5 bg-white">
    <div class="container-xl py-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-dark">Layanan Unggulan</h2>
            <p class="text-muted">Mendukung karir dan profesionalitas guru Indonesia</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 p-4 border-0 shadow-sm bg-light hover-card border-top border-4 border-primary">
                    <div class="card-body text-center">
                        <div class="d-inline-flex p-3 rounded-circle bg-primary bg-opacity-10 text-primary mb-3">
                            <i data-lucide="award" width="32" height="32"></i>
                        </div>
                        <h5 class="card-title fw-bold">Sertifikat Digital</h5>
                        <p class="card-text text-muted">Sertifikat resmi dengan QR Code validasi untuk keperluan administrasi dan kenaikan pangkat.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4 border-0 shadow-sm bg-light hover-card border-top border-4 border-primary">
                    <div class="card-body text-center">
                        <div class="d-inline-flex p-3 rounded-circle bg-primary bg-opacity-10 text-primary mb-3">
                            <i data-lucide="users" width="32" height="32"></i>
                        </div>
                        <h5 class="card-title fw-bold">Jejaring Luas</h5>
                        <p class="card-text text-muted">Terhubung dengan komunitas pengajar profesional dari Sabang sampai Merauke.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4 border-0 shadow-sm bg-light hover-card border-top border-4 border-primary">
                    <div class="card-body text-center">
                        <div class="d-inline-flex p-3 rounded-circle bg-primary bg-opacity-10 text-primary mb-3">
                            <i data-lucide="video" width="32" height="32"></i>
                        </div>
                        <h5 class="card-title fw-bold">Webinar Berkualitas</h5>
                        <p class="card-text text-muted">Materi terkini dari narasumber ahli di bidang pendidikan dan teknologi.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>