@keyframes slideBackground {
    0% {
        background-position: 50% 0%; /* Starting position */
    }
    100% {
        background-position: 100% 50%; /* Ending position */
    }
}
body {
    background-image: url('bg.png');
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container-fluid{
    background-image: url('pngwing.png');
    padding:0;
    animation: slideBackground 10s linear infinite alternate; 
}
.wrappers{
    position: relative;
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(to top, rgba(3, 117, 183, 1), rgba(9, 64, 146, 0.2));
    justify-content: center;
    align-items: center;
    margin:0;
}
.top {
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-container {
    position: relative; /* Kunci untuk penempatan tombol kecil */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:150px;
    z-index: 100;
}
@keyframes colorChange {
    0% {
        transform: scale(0);
        background-color: rgba(255,255,255,0.2);
    }
    100% {
        transform: scale(1);
        background-color: rgba(255,255,255,0.2);
    }
}
@keyframes colorChangeText {
    0% {
        transform: scale(0.6);
        color: rgba(255,255,255,0.5);
    }
    100% {
        transform: scale(1);
        color: rgba(255,255,255,1);
    }
}
/* Tombol utama di tengah */
#main-button {
    width: 180px;
    height: 180px;
    border: 2px solid rgba(23, 105, 236, 0.8);
    background: rgba(255, 255, 255, 0.5);
    background-image: url('logo-kab.png'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%; 
    border-radius: 50%; /* Membuat bentuk lingkaran */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    cursor: pointer;
    position: relative; /* Harus punya posisi agar z-index berfungsi */
    z-index: 10; /* Pastikan tombol utama di atas tombol kecil */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0px 1px 55px -3px rgba(22, 149, 253, 0.63);
    -webkit-box-shadow: 0px 1px 55px -3px rgba(8, 124, 248, 0.63);
    -moz-box-shadow: 0px 1px 55px -3px rgba(6, 75, 194, 0.63);
}
#btnbg {
    width: 140px;
    height: 140px;
    animation: colorChange 1s infinite normal;
    border-radius: 50%; /* Membuat bentuk lingkaran */
    display: flex;
    position: relative; /* Harus punya posisi agar z-index berfungsi */
    z-index: 12; /* Pastikan tombol utama di atas tombol kecil */
}
/* Tombol kecil yang akan muncul */
.sub-button {
    position: absolute;
    width: 120px;
    height: 120px;
    background:  rgba(255, 255, 255, 0.63);;
    border-radius: 50%;
    color: rgba(8, 124, 248, 0.63);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    text-decoration: none;
    
    /* Sembunyikan tombol kecil di awal (di belakang tombol utama) */
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 5;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0px 1px 55px -3px rgba(22, 149, 253, 0.63);
    -webkit-box-shadow: 0px 1px 55px -3px rgba(8, 124, 248, 0.63);
    -moz-box-shadow: 0px 1px 55px -3px rgba(6, 75, 194, 0.63);
}
.sub_button:hover{
    text-decoration: none;
}

/* -- STATE AKTIF KETIKA DI-HOVER -- */

/* Saat .menu-container di-hover, putar tombol utama */
.menu-container:hover #main-button {
    transform: scale(1.25); /* Mengubah '+' menjadi 'x' */
}

/* Tampilkan dan posisikan tombol-tombol kecil */
.menu-container:hover .sub-button {
    opacity: 1;
    transform: scale(0.5);
}

/* Atur posisi menyebar untuk setiap tombol kecil */
.menu-container:hover .sub-button:nth-child(1) {
    transform: translate(-5px, -240px) scale(1.5); /* Atas */
    transition-duration: 0.5s;
}
.menu-container:hover .sub-button:nth-child(2) {
    transform: translate(220px, -80px) scale(1.5); /* Kanan-atas */
    transition-duration: 0.5s;
}
.menu-container:hover .sub-button:nth-child(3) {
    transform: translate(160px, 160px) scale(1.5); /* Kanan-bawah */
    transition-duration: 0.5s;
}
.menu-container:hover .sub-button:nth-child(4) {
    transform: translate(-160px, 160px) scale(1.5); /* Kiri-bawah */
    transition-duration: 0.5s;
}
.menu-container:hover .sub-button:nth-child(5) {
    transform: translate(-220px, -80px) scale(1.5); /* Kiri-atas */
    transition-duration: 0.5s;
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.head{
    display: flex;
    width: 100%;
    min-height: 100px;
    justify-content: center;
    align-items: center;
    top:0;
    position: absolute;
    z-index: 100;
    color:#fff;
}
.footer{
    display: flex;
    width: 100%;
    min-height: 100px;
    justify-content: center;
    align-items: center;
    bottom:0;
    position: absolute;
    z-index: 100;
    color:#fff;
}