.header {
    background-color: rgba(0, 0, 0, 0.8); /* Warna latar belakang header saat di-scroll */
    background-color: #333; /* Fallback for browsers that do not support RGBA */
    transition: background-color 0.3s ease; /* Transition effect for background color */
    width: 100%;
    z-index: 1000; /* Ensure adequate z-index to keep header above other content */
}



/* Jika diperlukan, atur ulang gaya untuk header ketika belum di-scroll */
.header.top-nav-collapse {
    background-color: transparent; /* Warna latar belakang header sebelum di-scroll */
}
#maps {
    padding: 60px 0;
}

#maps .container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#maps .section-title {
    margin-bottom: 10px;
}

#maps iframe {
    width: 100%;
    height: 450px;
    border: none;
    margin-top: 10px;
}

.info-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.info-icon {
    font-size: 50px;
    color: green;
    margin-bottom: 10px;
}

.info-content h4 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.info-content p {
    font-size: 16px;
    margin-bottom: 5px;
}

.info-content a {
    color: #007bff;
    text-decoration: none;
}

.statistik {
    background: linear-gradient(135deg, #37517e, #a7c5eb);
    padding: 50px 0;
}

.santri-tetap {
    background: linear-gradient(135deg, #37517e, #a7c5eb);
    padding: 50px 0;
}

.data-box {
    background: #add8e6; /* Fallback background color */
    background: rgba(173, 216, 230, 0.9); /* RGBA background color for light blue */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kegiatan .card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s;
}

.kegiatan .card:hover {
    transform: translateY(-10px);
}




.kegiatan .card-body {
    padding: 15px;
}

.kegiatan .card-title {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 20px;
}

.kegiatan .card-text {
    display: block;
    font-size: 15px;
    padding-bottom: 10px;
    position: relative;
    font-weight: 500;
}

.kegiatan .card-text p {
    margin-bottom: 5px;
}

.hero h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #ffffff;
    text-align: center;
}

#animated-text {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}