.btn-primary,
.btn-secondary {
    border-width: 3px;
    padding: 10px 20px;
    border-radius: 10px;
     transition: background-color 100ms, color 100ms, box-shadow 100ms, border-color 100ms, transform 100ms;
}

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

.btn-secondary {
    background-color: white;
    color: var(--color-brand-primary);
    border: 2px solid var(--color-brand-primary);
}

.btn-primary:hover {
    background-color: var(--color-brand-accent);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.btn-secondary:hover {
    border-color: var(--color-brand-accent);
    color: var(--color-brand-accent);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.btn-secondary:hover img {
    filter: invert(60%) sepia(80%) saturate(400%) hue-rotate(170deg);
}

.btn-back {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back:hover {
    transform: scale(1.2);
    background-color: var(--color-neutral-400);
}

.link-hover:hover {
    font-weight: 700;
    color: var(--color-brand-accent);
}

.btn-close {
    color: var(--color-brand-primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-image: url("../assets/general/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

.btn-close:hover {
    background-color: var(--color-neutral-400);
    transform: scale(1.04);
}