/* CSS untuk membuat footer tetap di bawah */
 html,
 body {
     height: 100%;
     /* Pastikan body dan html memiliki tinggi penuh */
    padding-top: 10px;
 }

 .wrapper {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     /* Tinggi minimum viewport */
 }

 .content {
     flex: 1;
     /* Konten mengambil sisa ruang */
 }

 footer {
     background-color: #e30613;
     /* Warna merah untuk footer */
     color: white;
     text-align: center;
     padding: 10px 0;
 }

/* Navbar customization */
.navbar {
    background-color: white !important;
}

.navbar .navbar-nav .nav-link {
    color: #b85454 !important;
}

.navbar .navbar-nav .nav-link:hover {
    color: #b85454 !important;
}

.navbar .navbar-brand img {
    border: 3px solid #b85454;
}

.navbar a {
    color: #b85454 !important;
}

.navbar-toggler {
    border-color: #b85454;
    /* Ubah warna border tombol */
    background-color: #b85454;
    /* Ubah warna latar belakang tombol */
}

/* Carousel image adjustments */
.carousel-item img {
    height: 500px;
    object-fit: cover;
    width: 100%;
}

/* Hero Section Customization */
#heroCarousel .carousel-inner {
    background-color: white !important;
}

#heroCarousel .carousel-item img {
    filter: brightness(100%);
}

/* Card Customization */
.card {
    background-color: white !important;
    border: 1px solid #e30613;
}

.card img {
    max-width: 100%;
    height: auto;
}

.card-title {
    color: #e30613 !important;
}

.card-text {
    color: #333;
}

/* Tambahan padding di bagian bawah agar konten tidak terlalu rapat */
.card-body {
    padding: 20px;
}

/* Efek bayangan pada gambar */
.card-body img {
    transition: transform 0.3s ease-in-out;
}

.card-body img:hover {
    transform: scale(1.05);
}

.btn-outline-danger {
    border-color: #e30613;
    color: #e30613;
}

.btn-outline-danger:hover {
    background-color: #e30613;
    color: white;
}



h3,
h4,
h5,
h6 {
    color: #e30613;
}



.btn-primary {
    background-color: #d32f2f;
    border: none;
}

.btn-primary:hover {
    background-color: #b71c1c;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .carousel-item img {
        height: 400px;
    }
}

@media (max-width: 992px) {
    .carousel-item img {
        height: 350px;
        /* Adjust height for medium tablets */
    }

    .navbar .navbar-nav {
        text-align: center;
    }

    /* .navbar .navbar-nav .nav-link {
                padding: 10px 15px;
            } */
}

@media (max-width: 768px) {
    body {
            padding-top: 90px;
            /* Tambahkan lebih banyak ruang untuk layar kecil */
        }
    .carousel-item img {
        height: 300px;
        /* Reduce carousel height on mobile screens */
    }

    .navbar .navbar-nav {
        text-align: center;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 15px;
        /* Adjust padding for better mobile usability */
    }

    /* Adjust button sizes on small screens */
    .btn-primary,
    .btn-outline-danger {
        width: 100%;
        /* Full width buttons on mobile */
        margin-top: 10px;
    }

    /* Make sure images are fluid */
    .container img,
    .carousel-item img {
        width: 100%;
        height: auto;
    }
}

/* Very small screens, for example, mobile phones in portrait mode */
@media (max-width: 480px) {
    .navbar .navbar-nav .nav-link {
        font-size: 14px;
        /* Reduce font size for very small screens */
    }
}

/* CSS untuk Menandai Menu yang Aktif  */
.navbar-nav .nav-link.active {
    color: #fff !important;
    /* Warna teks tombol aktif */
    background-color: #d32f2f !important;
    /* Warna latar belakang tombol aktif */
    border-radius: 5px;
    /* Tambahan untuk estetika */
}

/* Sesuaikan video supaya lebih responsif */
.embed-responsive-16by9 {
    margin-top: 20px;
}

/* Gaya untuk tabel suku bunga */
.table {
    border-collapse: collapse;
    width: 100%;
}

.table th,
.table td {
    padding: 12px;
    text-align: center;
}

.table th {
    background-color: #007bff;
    color: white;
}

.table td {
    background-color: #f8f9fa;
}

/* Gaya untuk alert box */
.alert-heading {
    font-weight: bold;
    font-size: 18px;
}

/* Banner */
.hero-banner {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 50px 0;
}

.hero-banner h1 {
    font-size: 3rem;
}

.testimonial-section .testimonial {
    border: 1px solid #f1f1f1;
    padding: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.testimonial-section .testimonial p {
    font-style: italic;
}

.map-section iframe {
    width: 100%;
    height: 400px;
    border: 0;
}
.form-control::placeholder {
    font-style: italic;
    color: #888;
}
 .card-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
 }

 .cardd {
     max-width: 300px;
     border: 1px solid #ddd;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     text-align: center;
 }

 .card-bodyy {
     padding: 20px;
 }

 .cardd h5 {
     color: #d32f2f;
     font-weight: bold;
 }

 .announcement-card {
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .announcement-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

  .history-card {
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
  }
   .highlight {
       background-color: #ffe082;
       padding: 2px 6px;
       border-radius: 4px;
   }