/* Gaya tambahan untuk memastikan gambar memenuhi area hero */
.carousel-item img {
    height: 500px; /* Sesuaikan tinggi sesuai kebutuhan Anda */
    object-fit: cover; /* Memastikan gambar menutupi area tanpa terdistorsi */
    width: 100%;
}
/* Menyesuaikan teks agar terlihat lebih baik di atas gambar */
.carousel-caption {
    /* background: rgba(0, 0, 0, 0.5); jika ada text pake ini */
    border-radius: 5px;
    padding: 10px;
}

/* Mengubah indikator menjadi bulat */
.carousel-indicators [data-bs-target] {
    width: 12px;        /* Atur lebar bulatan */
    height: 12px;       /* Atur tinggi yang sama agar bulat sempurna */
    border-radius: 50%; /* Membuat bentuk lingkaran */
    background-color: #ffffffa0; /* Warna indikator */
    border: none;       /* Menghapus border default */
    margin: 0 5px;      /*  jarak antar bulatan */
}

.carousel-indicators .active {
    background-color: #f6f7f7; 
    width: 4vw;
    height: auto;
    border-radius: 25px;
}
.profile-user{
    width: 15em;
}
/* Efek hover pada nama user di navbar */
.hover-bg-light:hover {
    background-color: #f8f9fa; /* Warna abu-abu muda */
    transition: background-color 0.3s;
}

/* Mempercantik font navbar link */
.nav-link {
    font-weight: 500;
    color: #333;
}

.nav-link:hover {
    color: #000;
}

/* Efek Hover Kategori */
.category-item:hover {
    background-color: #f8f9fa;
    padding-left: 15px; /* Sedikit geser ke kanan */
    transition: all 0.3s ease;
}

.category-item:hover .transition-icon {
    transform: translate(5px, -5px); /* Ikon panah ikut bergerak */
    transition: transform 0.3s ease;
}

.category-item {
    transition: all 0.3s ease;
}
/* .title-popular {
    border-width: 2px;
} */