/* custom.css */

/* Jumbotron */
.jumbotron {
    background-color: #f8f9fa; /* Warna latar belakang jumbotron */
    padding: 2rem 1rem; /* Padding jumbotron */
    border-radius: 0.5rem; /* Sudut jumbotron */
}

/* Kartu */
.card {
    margin-bottom: 1.5rem; /* Jarak antara kartu */
    transition: transform 0.2s; /* Efek transisi saat hover */
}

.card:hover {
    transform: scale(1.05); /* Efek zoom saat hover */
}

/* Gambar */
.img-fluid {
    border-radius: 0.5rem; /* Sudut gambar */
    margin-bottom: 0.5rem; /* Jarak bawah gambar */
}

/* Tombol Toggle */
.toggle-button {
    display: block; /* Membuat tautan menjadi blok */
    text-align: center; /* Rata tengah teks */
    margin-bottom: 0.5rem; /* Jarak bawah tautan */
    padding: 0.5rem; /* Padding tautan */
    background-color: #007bff; /* Warna latar belakang tombol */
    color: white; /* Warna teks */
    border-radius: 0.25rem; /* Sudut tombol */
    text-decoration: none; /* Menghilangkan garis bawah */
}

.toggle-button:hover {
    background-color: #0056b3; /* Warna latar belakang saat hover */
}

/* Modal */
.modal-header {
    background-color: #007bff; /* Warna latar belakang header modal */
    color: white; /* Warna teks header modal */
}

.modal-footer {
    background-color: #f8f9fa; /* Warna latar belakang footer modal */
}

/* Responsif */
@media (max-width: 500px) {
    .card {
        margin-bottom: 1rem; /* Jarak antara kartu pada layar kecil */
    }
}

/* Menu Item */
.menu-item {
    display: flex; /* Menggunakan flexbox untuk tata letak horizontal */
    justify-content: center; /* Rata tengah secara horizontal */
    flex-wrap: wrap; /* Membungkus gambar jika terlalu banyak */
    padding: 20px; /* Padding di sekitar menu item */
    background-color: #fff; /* Warna latar belakang untuk menu item */
    border-radius: 0.5rem; /* Sudut melengkung */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Bayangan untuk efek kedalaman */
}

.menu-item img {
    margin: 10px; /* Margin di sekitar setiap gambar */
    transition: transform 0.2s; /* Efek transisi saat hover */
}

.menu-item img:hover {
    transform: scale(1.1); /* Efek zoom saat hover pada gambar */
}