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

.btn {
    display: inline-block;
    font-family: var(--font-accent);
    padding: 10px 30px;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

/* Outline button (used in hero) */
.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white);
    margin-top: 42px;
}

.btn-outline:hover {
    background: #1abc9c;
    border-color: #1abc9c;
    color: var(--color-white);
}

/* Filled button */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}