/* Button */
.button {
    font-family: 'Manrope', serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 134px;
    text-decoration: none;
    line-height: 1;
    border: 0;
    box-sizing: border-box;
    transition: all 300ms ease-out 0s;
}

.button:hover {
    text-decoration: none;
}

.button span {
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Primary Button */
.button-primary {
    color: var(--primary-dark);
    background: var(--primary-sun);
    border: 1px solid var(--primary-sun);
    min-height: 58px;
    padding: 18px 32px;
}

.button-primary span {
    font-size: 16px;
    letter-spacing: 0.64px;
}

.button-primary:hover {
    background: #FFD041;
}

.button-primary:focus {
    background: #FFD041;
    outline: 1px solid #2D8CFF;
    border: 1px solid #2D8CFF;
    text-decoration: none;
}

/* Secondary Button */
.button-secondary {
    color: var(--primary-dark);
    background: var(--primary-sun);
    border: 1px solid var(--primary-sun);
    min-height: 45px;
    padding: 13px 32px;
}

.button-secondary span {
    font-size: 14px;
    letter-spacing: 0.56px;
}

.button-secondary:hover {
    background: #FFD041;
}

.button-secondary:focus {
    outline: 1px solid #2D8CFF;
    border: 1px solid #2D8CFF;
    background: #FFD041;
    text-decoration: none;
}

/* Tetriary Button */
.button-tetriary {
    color: var(--primary-white);
    background: var(--primary-green);
    border: 2px solid var(--primary-green);
    min-height: 45px;
    padding: 13px 32px;
}

.button-tetriary span {
    font-size: 14px;
    letter-spacing: 0.56px;
}

.button-tetriary:hover {
    color: var(--primary-white);
    background: var(--primary-green-light);
    border: 2px solid var(--primary-green-light);
}

.button-tetriary:focus {
    outline: 1px solid #2D8CFF;
    border: 1px solid #2D8CFF;
    text-decoration: none;
}

/* Quinary Button */
.button-quinary {
    color: var(--primary-green);
    background: transparent;
    border: 1px solid var(--primary-green);
    min-height: 45px;
    padding: 12px 32px;
}

.button-quinary span {
    font-size: 14px;
    letter-spacing: 0.56px;
}

.button-quinary:hover {
    color: var(--primary-green-light);
    border: 1px solid var(--primary-green-light);
}

.button-quinary:focus {
    color: var(--primary-green-light);
    outline: 1px solid #2D8CFF;
    border: 1px solid #2D8CFF;
    text-decoration: none;
}

/* Quaternary Button */
.button-quaternary {
    color: var(--primary-beige);
    background: transparent;
    border: 1px solid var(--primary-beige);
    min-height: 45px;
    padding: 12px 32px;
}

.button-quaternary span {
    font-size: 16px;
    letter-spacing: 0.64px;
}

.button-quaternary:hover {
    color: var(--primary-white);
    border: 1px solid var(--primary-white);
}

.button-quaternary:focus {
    color: var(--primary-white);
    outline: 1px solid #2D8CFF;
    border: 1px solid #2D8CFF;
    text-decoration: none;
}

/*Link Button */
.button-link {
    min-width: auto;
}

.button-link span {
    text-transform: none;
}

.button-link img,
.button-link svg {
    position: relative;
    transition: all 250ms ease-out 0s;
}

.button-link.arrow-down img,
.button-link.arrow-down svg {
    position: relative;
    top: 0;
    transition: top 250ms ease-out;
    transform: rotate(90deg);
}

.button-link:hover img,
.button-link:hover svg {
    margin-left: 4px;
}

.button-link.arrow-down:hover img,
.button-link.arrow-down:hover svg {
    top: 2px;
    margin-left: 0;
}

.button-link:focus {
    outline: 1px solid #2D8CFF;
    text-decoration: none;
}

.button-mw {
    min-width: 305px;
}

@media (max-width: 768px) {
    .button-primary {
        font-size: 14px;
        min-height: 45px;
        padding: 13px 32px;
    }

    .button-primary span {
        font-size: 14px;
    }

    .button-link span {
        font-size: 14px;
    }

    .button-link svg,
    .button-link img {
        width: auto;
        max-height: 16px;
    }

    .button-quaternary span {
        font-size: 14px;
    }
}