/* =============================================================================
   Primary Button
============================================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    min-width: 180px;

    padding: 1rem 2rem;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 600;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


/* Primary */

.btn--primary {

    background: var(--color-primary);

    color: #ffffff;

    border: 1px solid transparent;
}

.btn--primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(20, 83, 45, .22);
}


/* Secondary */

.btn--secondary {

    background: transparent;

    border: 1px solid rgba(24,24,27,.12);

    color: var(--color-heading);
}

.btn--secondary:hover {

    background: rgba(255,255,255,.65);

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}

/* Hero BUtton  */
.btn__icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1.125rem;

    height: 1.125rem;

    flex-shrink: 0;

}

.btn__icon svg {

    width: 100%;

    height: 100%;

    transition: transform .35s ease;

}

.btn:hover .btn__icon svg {

    transform: translate(2px, -2px);

}