/* Reset margin dan padding untuk semua elemen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Gaya untuk body */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Warna latar belakang yang cerah */
}

/* Gaya untuk header */
header {
    position: sticky; /* Menjadikan header sticky */
    top: 0; /* Posisi dari atas */
    z-index: 1000; /* Memastikan header di atas elemen lainnya */
}

.navbar-custom {
    background-color: orange; /* Ganti warna latar belakang navbar menjadi orange */
}

nav.navbar a.nav-link {
    color: white; /* Warna teks putih untuk tautan */
}

nav.navbar a.nav-link:hover {
    color: #ffcc00; /* Warna teks kuning saat hover */
}

/* Gaya untuk footer */
.footer {
    background-color: #343a40; /* Warna gelap untuk footer */
    color: white; /* Warna teks putih di footer */
    text-align: center; /* Rata tengah untuk teks */
    padding: 10px 0; /* Padding atas dan bawah */
    position: relative; /* Posisi footer relatif */
    bottom: 0; /* Menempatkan footer di bawah */
    width: 100%; /* Lebar penuh untuk footer */
}

/* Gaya untuk kontainer */
.container {
    margin-top: 30px; /* Jarak atas kontainer */
    padding: 20px; /* Padding dalam kontainer */
    background-color: white; /* Latar belakang putih untuk kontainer */
    border-radius: 8px; /* Sudut bulat untuk kontainer */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
}

/* Gaya untuk tombol */
.btn-primary {
    background-color: #007bff; /* Warna tombol biru */
    border-color: #007bff; /* Warna border tombol */
}

.btn-primary:hover {
    background-color: #0056b3; /* Warna tombol saat hover */
    border-color: #0056b3; /* Warna border saat hover */
}

/* Gaya untuk alert */
.alert {
    margin-top: 20px; /* Jarak atas untuk alert */
}

/* Gaya untuk form input */
.form-control {
    border-radius: 4px; /* Sudut bulat untuk input */
}

/* Gaya untuk judul */
h1, h2 {
    color: #343a40; /* Warna teks gelap untuk judul */
}

/* Gaya tambahan untuk paragraf dan teks */
p {
    color: #495057; /* Warna teks abu-abu untuk paragraf */
}

/* Gaya untuk link */
a {
    color: orange; /* Warna link default */
}

a:hover {
    color: #ffcc00; /* Warna link saat hover */
}

/* Gaya untuk responsive */
@media (max-width: 768px) {
    .container {
        padding: 10px; /* Padding lebih kecil pada perangkat kecil */
    }

    h1, h2 {
        font-size: 1.5em; /* Ukuran font lebih kecil pada perangkat kecil */
    }
}