.btn {
    border-radius: var(--radius-lg);
    font-weight: bolder;
    color: #fff !important;
    transition: all .3s ease !important;
}

.btn-sm {
    border-radius: var(--radius-md);
}

.btn-primary {
    border: none;
    background: linear-gradient(100deg, var(--brand-1), var(--brand-3));
    color: #ffffff;
    box-shadow: 0 8px 24px -8px rgba(var(--brand-1-rgb), 0.55);

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -6px rgba(var(--brand-1-rgb), 0.65);
        color: #ffffff;
    }
}

.btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(var(--brand-2-rgb), 0.38);
    backdrop-filter: blur(20px);
    transition: all .3s ease !important;

    &:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(var(--brand-purple-rgb), 1);
        transform: translateY(-2px);
        color: #ffffff;
    }
}

.btn-success {
    color: white !important;
}

.btn-warning {
    color: black !important;
}