.photo-gallery {
    columns: 3 200px; /* Atur jumlah kolom dan lebar minimal */
    column-gap: 1rem; /* Jarak antar kolom */
}

/* Agar gambar responsif di dalam kolom */
.photo-gallery img {
    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 1rem;
    border-radius: 8px;
    transition: transform 0.3s, filter 0.3s;
}

/* Blur gambar lainnya saat ada gambar yang di-hover */
.photo-gallery:hover img {
    filter: blur(3px) brightness(0.8);
}

/* Efek menonjol pada gambar yang di-hover dan hilangkan blur */
.photo-gallery img:hover {
    transform: scale(1.05);
    filter: none; /* Hilangkan blur pada gambar yang di-hover */
    z-index: 10; /* Membuat gambar yang di-hover berada di atas */
}

/* Atur ulang kolom pada layar kecil */
@media (max-width: 768px) {
    .photo-gallery {
        columns: 2 150px;
    }
}

@media (max-width: 576px) {
    .photo-gallery {
        columns: 1 100%;
    }
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-primary);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-primary);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-tertiary);
    --bs-nav-tabs-link-active-border-color: var(--bs-primary) var(--bs-primary) var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

.nav-tabs .nav-link.active {
    border-bottom-color: white !important;
}