/* Menentukan ukuran gambar dan bingkai */
.imgbox img {
    width: 262.5px;
    /* Lebar gambar */
    height: 420px;
    /* Tinggi gambar */
    object-fit: cover;
    /* Menjaga proporsi gambar */
}

/* Menentukan ukuran kontainer (bingkai) */
.flip-container {
    width: 262.5px;
    /* Lebar kontainer */
    height: 420px;
    /* Tinggi kontainer */
    overflow: hidden;
    /* Menyembunyikan bagian gambar yang keluar dari bingkai */
}

.custom-card {
    max-width: 80%;
    /* Ubah persentase sesuai dengan ukuran yang diinginkan */
    margin: 20px auto;
    /* Menambahkan margin supaya card tidak menempel ke kiri atau kanan */
    border-radius: 10px;
    /* Menambahkan border-radius untuk memperhalus sudut card */
    overflow: hidden;
    /* Menyembunyikan bagian card yang meluber */
}

#service-description {
    white-space: normal;
    /* Membolehkan teks untuk wrap ke baris baru */
    word-wrap: break-word;
    /* Menangani kata-kata panjang yang tidak terputus */
    line-height: 1.6;
    /* Menambahkan jarak antar baris agar lebih mudah dibaca */
}

#service-image {
    max-width: 100%;
    /* Membuat gambar mengikuti ukuran lebar card */
    height: auto;
    /* Memastikan proporsi gambar tetap terjaga */
}

/* Menambahkan padding pada konten card agar lebih terstruktur */
.card-body {
    padding: 20px;
    /* Memberikan padding pada isi card agar tidak terlalu rapat */
}

/* Untuk membuat tampilan responsif */
@media (max-width: 768px) {
    .custom-card {
        max-width: 100%;
        /* Agar card menyesuaikan di layar lebih kecil */
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#service-card {
    animation: slide-up 0.5s ease-in-out;
}



/* Mengatur teks di dalam card agar rata kiri */
.custom-card .card-body {
    text-align: center;
    /* Pastikan teks mulai dari kiri */
    padding: 20px;
    /* Menambahkan padding agar tidak menempel */
    line-height: 1.6;
    /* Jarak antar baris untuk kenyamanan baca */
}

/* Pastikan elemen deskripsi juga rata kiri */
#service-description {
    text-align: justify;
    /* Rata kiri */
    white-space: normal;
    /* Memungkinkan teks wrapping */
    word-wrap: break-word;
    /* Memastikan kata panjang tidak keluar area card */
    line-height: 1.6;
    /* Jarak antar baris */
    margin: 10px 0;
    /* Memberikan jarak dengan elemen lain */
}

/* Menambahkan padding pada card secara keseluruhan */
#service-card {
    padding: 10px;
}

/* Untuk bullet dan numbered list tetap rata kiri */
#service-description ol, #service-description ul {
    margin-left: 20px;
    /* Memberikan jarak untuk bullet atau angka */
    padding-left: 0;
    /* Pastikan tidak ada padding tambahan */
    text-align: left;
    /* Rata kiri */
}

#service-description ol li, #service-description ul li {
    list-style-position: inside;
    /* Menampilkan angka/huruf di dalam list */
}

#service-link {
    cursor: pointer;
}

.card-text {
    font-size: larger;
}

.card-title {
    font-size: xx-large;
}

#service-description ol, #service-description ul {
    margin-left: 20px;
    /* Jarak antara angka dan konten */
}

#service-description ol li, #service-description ul li {
    list-style-position: inside;
    /* Menampilkan angka/huruf di dalam item */
}

#service-description ol {
    list-style-type: decimal;
    /* Untuk numbered list 1, 2, 3, ... */
}

#service-description ul {
    list-style-type: disc;
    /* Untuk bullet list */
}

#service-description ol li {
    margin-bottom: 10px;
    /* Jarak antar item list */
}

#service-description ol {
    list-style-type: lower-alpha;
    /* Menampilkan a., b., c., ... */
}

#service-description ol li {
    list-style-type: decimal;
    /* Untuk 1., 2., 3., ... */
}

#service-description a, #service-description li {
    pointer-events: auto;
    /* Pastikan pointer events diizinkan */
}