/* ==================================================
   BUTTONS
================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 20px;

    min-height: 46px;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;

    border: 2px solid transparent;
    border-radius: 6px;

    text-decoration: none;
    white-space: nowrap;

    transition: all .25s ease;

    cursor: pointer;
}

.btn span {
    transition: transform .25s ease;
}

.btn:hover span {
    transform: translateX(5px);
}


/* ==================================================
   PRIMARY BUTTON
================================================== */

.btn-primary {
    color: var(--accent-color);

    background: var(--white);

    border-color: var(--accent-color);

    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    color: var(--white);

    background: var(--accent-color);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}

.btn-primary span {
    color: var(--accent-color);
}

.btn-primary:hover span {
    color: var(--white);
}


.btn-primary::after{
    content:"→";
    margin-left:10px;
    transition:.25s;
}

.btn-primary:hover::after{
    transform:translateX(5px);
}


/* ==================================================
   SECONDARY BUTTON
================================================== */

.btn-secondary {
    color: var(--primary-color);

    background: transparent;

    border-color: var(--primary-color);
}

.btn-secondary:hover {
    color: var(--white);

    background: var(--primary-color);

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);
}


/* ==================================================
   OUTLINE LIGHT
================================================== */

.btn-outline-light {
    color: var(--white);

    background: transparent;

    border-color: var(--white);
}

.btn-outline-light:hover {
    color: var(--primary-color);

    background: var(--white);

    transform: translateY(-2px);
}


/* ==================================================
   FULL WIDTH
================================================== */

.btn-block {
    width: 100%;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .btn {

        display: flex;

        justify-content: center;
        align-items: center;

        width: calc(100% - 16px);
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        padding: 12px 20px;
    }

}