.hidden {
    display: none;
}

.block {
    display: block;
}

body {
    margin: 0;
}

.content {
    padding-top: 80px; /* Memberi ruang untuk header yang tetap di atas */
}

/* Styling untuk header */
.header {
    background-color: rgba(0, 150, 136, 1); /* Warna tosca untuk header */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Styling untuk subheader */
.subheader {
    background-color: #9df4e3; /* Warna latar subheader */
    position: fixed;
    top: 70px; /* Menyesuaikan dengan tinggi header yang diinginkan */
    left: 0;
    right: 0;
    z-index: 10;
    color: black; /* Font berwarna hitam */
    text-shadow: 1px 1px 0px white; /* Bayangan putih */
}

/* Styling untuk navbar */
.navbar {
    transition: all 0.3s; /* Animasi saat navbar muncul */
}

/* Menambahkan spasi antara navbar dan menu */
.menu-spacing {
    margin-top: 2rem; /* Memberikan jarak antara navbar dan menu untuk menghindari tabrakan dengan subheader */
}

/* Styling untuk tombol tutup */
.close-button {
    background-color: yellow; /* Warna kuning untuk tombol tutup */
    text-align: center; /* Center text */
    font-weight: bold; /* Bold text */
    display: flex; /* Flex display untuk men-center isi */
    justify-content: center; /* Center secara horizontal */
}

/* Styling untuk papan informasi */
.info-popup {
    position: fixed;
    top: 100px;
    right: 20px; /* Jarak dari sebelah kanan */
    background-color: rgba(255, 255, 255, 0.6); /* Transparan 40% */
    border: 2px solid #009688;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 30;
    display: none; /* Tersembunyi secara default */
}

/* Mengubah font untuk info popup */
.info-popup p {
    font-size: 14px; /* Ukuran font lebih kecil */
}

/* Styling untuk tombol informasi */
.info-button {
    background-color: #009688; /* Warna untuk tombol */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
}

/* Styling untuk tombol play */
.play-button {
    background-color: #009688; /* Warna untuk tombol */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s ease; /* Tambahkan transisi untuk efek scaling */
}

.play-button.active {
    transform: scale(1.1); /* Slightly increase the size when active */
}

/* Posisi tombol informasi dan play */
.info-play-container {
    display: flex;
    position: fixed;
    top: 120px; /* Jarak di bawah navbar */
    right: 20px; /* Jarak dari kanan */
    z-index: 20;
}

/* Styling untuk tutup pop-up (icon X) */
.close-info {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    color: #ff0000;
    cursor: pointer;
    font-size: 18px;
}