.primary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    gap: 8px;

    padding: 15px 30px;

    border: 1px solid var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    color: var(--base-text-color) !important;

    font-family: inherit;
    font-weight: 500;
    font-size: var(--button-font-size);

    transition: 0.25s ease;
    cursor: pointer;

    white-space: nowrap;

    width: fit-content;
}

.primary-button svg {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    .primary-button:hover {
        background-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
        border-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(174, 4, 59, 0.35);
    }
}