.cloudAnimationbt{
    animation: cloudbt 3s ease-in-out infinite;
}

@keyframes cloudbt{
    0% {
        transform: translateY(0px);
    }
    50%{
        transform: translateY(30px);
    }
    100%{
        transform: translateY(0px);
    }
}

.cloudAnimationtb{
    animation: cloudtb 3s ease-out infinite;
}

@keyframes cloudtb{
    0%{
        transform: translateY(0px);
    }50%{
        transform: translateY(-30px);
    }100%{
        transform: translateY(0px);
    }
}

.iconAnimation {
    animation: icon 3s ease-in-out infinite;
}

@keyframes icon{
    0%{
        transform: translateY(0px);        
    }
    50%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(0px);
    }
}


.cloudanimationx{
    animation: icon 2s ease-in-out infinite;
}

@keyframes icon{
    0%{
        transform: translateX(0px);
    }
    50%{
        transform: translateX(5px);        
    }
    100%{
        transform: translateX(0px);
    }

}

.material-symbols-rounded {
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
  }

::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track{
    background-color: white;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, #7182ED, #F598FE); /* biru ke pink, dari atas ke bawah */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background:  linear-gradient(180deg, #5c6cd0, #e67bed); /* versi lebih gelap saat hover */
  }