.button {
    border: none;
    outline: none;
    background-color: white;
    color: black;
    border-radius: 10px;
    font-family: 'Poppins-Bold';
    cursor: pointer;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 2vw, 1.5rem);

}

.button:hover{
    background-color: rgba(161, 161, 245, 0.358);
    color: white;
}

.sm {
    padding: 0.5rem 1.5rem;
    font-size: 12px;
    font-size: clamp(0.5rem, 2vw, 1rem);

}

.md {
    padding: 0.7rem 1.5rem;
    font-size: 16px;
    font-size: clamp(1rem, 2vw, 1.5rem);

}

.lg {
    padding: 0.9rem 2.5rem;
    font-size: 20px;
    font-size: clamp(1.5rem, 2vw, 2rem);

}


.loader {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 2px solid rgba(159, 159, 159, 0.582);
    border-radius: 50%;
    border-top: 2px solid rgb(51, 51, 221);
    animation: rotate 0.5s linear infinite;
}

.loader-sm {
    width: 10px;
    height: 10px;
}

.loader-md {
    width: 15px;
    height: 15px;
}

.loader-lg {
    width: 20px;
    height: 20px;
}

.disabled {
    background-color: rgb(168, 166, 166);
    opacity: 0.5;
    color: white;
    cursor: not-allowed;
}

.disabled:hover{
     background-color: rgba(168, 166, 166, 0.214);
}


@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}