:root{
    --blue:#2C6CCB;
    --black:#333333;
    --grey:#B7B7B7;
    --yellow:#F8F02E;
}
body {
    height: 100vh;
    overflow-y: hidden;
    font-family: 'Poppins', sans-serif;
    background-image: url('/assets/images/login/bg-login2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background-color: #205cb6 !important;
    border-color: #205cb6 !important;
}

.wrapper-card{
    width: 30%;
}
.text-blue{
    color: var(--blue);
}
.text-secondary{
    color: var(--grey)
}


@media (max-width:768px){
    .wrapper-card{
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
}

#bulat{
    animation: scale 2s ease-in-out infinite alternate;
    transform-origin: center;
    transform-box: fill-box;
    position: fixed;
    top: 35%;
    left: 20%;
}
#bulat_2{
    animation: scale 2s ease-in-out infinite alternate;
    animation-delay: .5s;
    transform-origin: center;
    transform-box: fill-box;
    position: fixed;
    top: 50%;
    right: 20%;
}
#bulat_3{
    animation: scale 2s ease-in-out infinite alternate;
    animation-delay: 1s;
    transform-origin: center;
    transform-box: fill-box;
    position: fixed;
    bottom: 20%;
    right: 50%;
}
#bulat_4{
    animation: scale 2s ease-in-out infinite alternate;
    animation-delay: .3s;
    transform-origin: center;
    transform-box: fill-box;
}
#bulat_5{
    animation: scale 2s ease-in-out infinite alternate;
    animation-delay: .7s;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes scale{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}