.program-dan-layanan-kemdikdasmen {
    width: 100%;
    background: linear-gradient(180deg, var(--program-layanan-utama) 0%, var(--program-layanan-utama-gradient) 50%, var(--program-layanan-utama-akhir) 100%);
    padding: 0;
}

.card-custom.active {
    display: none; /* Sembunyikan kartu default */
}

.highlight-card {
    display: flex; /* Tampilkan highlight */
}

.custom-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0;
    overflow: hidden; /* Horizontal scrolling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #888 #f1f1f1; /* For Firefox */
}

.custom-row::-webkit-scrollbar {
    height: 8px; /* Thin horizontal scrollbar */
}

.custom-row::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.card-custom {
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px 5px;
    max-width: 18%; /* Lebar maksimum kartu */
    margin: 5px;
    flex: 0 0 auto;
    width: 150px; /* Tetapkan lebar kartu */
    height: 150px; /* Tetapkan tinggi kartu */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Sembunyikan overflow */
    white-space: normal; /* Izinkan pembungkusan teks */
    word-break: break-word; /* Putuskan kata panjang ke baris berikutnya */
}

.full-height-border {
    border-right: 1px solid #ddd; /* Border vertikal antar kolom */
    display: flex; /* Pastikan elemen kolom fleksibel */
    flex-direction: column; /* Konten tersusun vertikal */
}

.full-height-border.last-column {
    border-right: none; /* Hilangkan border di kolom terakhir */
}

a.d-flex {
    text-decoration: none; /* Hilangkan garis bawah pada link */
    flex-grow: 1; /* Pastikan link memenuhi tinggi kolom */
}

a.d-flex:hover {
    background-color: #f8f9fa; /* Efek hover */
    transition: background-color 0.2s ease;
}

.card-custom.active {
    background-color: #0056b3;
    color: white;
}

.highlight-card {
    display: flex; /* Gunakan flexbox */
    flex-direction: column; /* Susun konten secara vertikal */
    background: var(--highlight-card);
    color: white;
    /*display: -webkit-box; !* Gunakan box fleksibel *!*/
    -webkit-line-clamp: 3;
    border-radius: 10px;
    max-height: 150px;
    padding: 15px;
    min-width: 30%;
}

.custom-scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer */
}

.custom-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, dan Edge */
}


.custom-row .col {
    flex: 0 0 auto;
    margin-right: 10px;
}

.custom-row .col:last-child {
    margin-right: 0;
}

.tab-navigation {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
}

.tab-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-item.active {
    border-bottom-color: #007bff;
    color: #007bff;
}

.tab-item:hover {
    background-color: #f8f9fa;
}

.tab-panel {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media(max-width:1024px){
    .highlight-card {
        min-width: 100%;
    }
    .card-custom {
        min-width: 100%;
    }

}