.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.btn-primary:hover {
    transition: background-color 0.3s ease !important;
    background-color: var(--blue-gradient-end);
    border-color: var(--blue-gradient-end);
}

.btn-primary:active {
    transition: background-color 0.3s ease !important;
    background-color: var(--blue-gradient-end) !important;
    border-color: var(--blue-gradient-end) !important;
}

.btn-secondary {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--bs-dark-hover) !important;
    border-color: var(--bs-dark-hover) !important;
    color: white;
}

.btn-category {
    background-color: transparent;
    color: #007CC8;
}

.btn-category.active {
    background-color: var(--bg-blue-transparent) !important;
    border-color: transparent !important;
    color: var(--bs-blue) !important;
}

.btn-category:hover {
    background-color: var(--bg-blue-transparent);
    color: var(--bs-blue);
}