.btn-nav {
    display: block;
    background-color: transparent;
    padding: .5rem 1.25rem;
    border: none;
    color: #FFF;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: color .3s ease, transform .3s ease;

    &:hover {
        color: var(--text-light);
        transform: translateY(-0.125rem);
    }

    &>i {
        margin-left: .5rem;
        transition: transform .3s ease;
    }
}

.sublink-btn-nav {
    display: block;
    padding: .125rem;
    padding-bottom: .25rem;
    color: #FFF;

    &:hover {
        color: var(--text-light);
    }
}

.btn-teste-gratis {
    display: inline-block;
    padding: 1.25rem 3.5rem;
    white-space: nowrap;
    background-image: linear-gradient(320deg, var(--primary) 50%, var(--secondary));
    color: var(--light-primary);
    box-shadow: var(--shadow);
    border-radius: 4rem;
    font-size: 1em;
    font-weight: 600;
    transition: background-image .7s ease, color .7s ease, transform .7s ease;

    &:hover {
        background-image: linear-gradient(-10deg, var(--light-primary) 40%, #FFF);
        color: var(--primary);
        transform: translateY(-0.25rem);
        z-index: 10;
        box-shadow: 0 .25rem .5rem #00000033;
    }
}

.btn-acessar-sistema {
    padding: .5rem 1.5rem;
    white-space: nowrap;
    background: var(--primary);
    color: var(--light-primary);
    font-size: .9em;
    font-weight: 600;
    border-radius: 4rem;
    transition: all .7s ease;

    &:hover {
        background-color: var(--light-primary);
        color: var(--primary);
        transform: translateY(-0.25rem);
        box-shadow: 0 .25rem .5rem #00000033;
    }
}