<!-- SERVICE (KRITERIA) -->
<section class="section service" id="kriteria" aria-label="kriteria">
<div class="container">
    <p class="section-subtitle has-before text-center">Kriteria Penilaian</p>
    <h2 class="h2 section-title text-center">Penilaian didasarkan pada <span class="has-before">4 Kriteria Utama</span></h2>
          
    <ul class="grid-list">
    <li>
    <div class="service-card" style="--color: 174, 77%, 50%">
    <div class="card-icon">
        <i class="fas fa-bullseye" style="font-size: 30px; color: hsl(174, 77%, 50%)" aria-hidden="true"></i>
    </div>
        <h3 class="h3 card-title">Angket Cita-Cita</h3>
        <p class="card-description">Berdasarkan aspirasi karir siswa untuk menentukan jalur akademik yang tepat.</p>
    </div>
    </li>
    <li>
    <div class="service-card" style="--color: 267, 76%, 57%">
    <div class="card-icon">
        <i class="fas fa-chart-pie" style="font-size: 28px; color: hsl(267, 76%, 57%)" aria-hidden="true"></i>
    </div>
        <h3 class="h3 card-title">Hasil Psikotes</h3>
        <p class="card-description">Diperoleh dari tes psikologis untuk memahami kecenderungan minat dan bakat siswa.</p>
    </div>
    </li>
    <li>
    <div class="service-card" style="--color: 17, 100%, 68%">
    <div class="card-icon">
        <i class="fas fa-comments" style="font-size: 28px; color: hsl(17, 100%, 68%)" aria-hidden="true"></i>
    </div>
        <h3 class="h3 card-title">Bimbingan BK</h3>
        <p class="card-description">Hasil bimbingan BK yang memberikan wawasan tentang pengembangan pribadi siswa.</p>
    </div>
    </li>
    <li>
    <div class="service-card" style="--color: 343, 98%, 60%">
    <div class="card-icon">
        <i class="fas fa-book" style="font-size: 28px; color: hsl(343, 98%, 60%)" aria-hidden="true"></i>
    </div>
        <h3 class="h3 card-title">Nilai Semester 1</h3>
        <p class="card-description">Nilai akademik siswa pada semester pertama sebagai acuan kemampuan dasar.</p>
    </div>
    </li>
    </ul>
</div>
</section>