/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.navigation {

    position: sticky;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;
    
    padding: 2rem 0;

    background: var(--color-white);    
    
    box-shadow: 0 4px 20px rgba(15,23,42,.06);

}


.navigation__brand {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

}

.navigation__brand a {

    display: inline-flex;

    text-decoration: none;

}

.navigation__brand-image {

    height: 110px;

    width: auto;

    display: block;

}

.navigation__brand-text {

    font-size: 2rem;

    font-weight: 800;

    color: var(--color-navy);

}

.navigation__brand-link {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

}

.navigation__inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:3rem;

}


.navigation__center{

    flex:1;

    display:flex;

    justify-content:center;

}

.navigation__actions{

    flex:0 0 auto;

}

/*
|--------------------------------------------------------------------------
| Menu
|--------------------------------------------------------------------------
*/

.navigation__menu {

    display: flex;

    align-items: center;

    gap: 3rem;

    list-style: none;

    margin: 0;

    padding: 0;

}

.navigation__item {

    margin: 0;

}

.navigation__link {

    display: inline-block;

    color: var(--color-navy);

    text-decoration: none;

    font-size: 1.05rem;

    font-weight: 600;

    padding: .75rem 1.25rem;

    border-radius: 12px;

    transition: all .25s ease;

}

.navigation__link:hover {

    background: var(--color-primary);

    color: var(--color-white);

    box-shadow: 0 8px 20px rgba(212,158,13,.25);

    transform: translateY(-2px);

}

.navigation__link--active {

    color: var(--color-primary);

}

/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.navigation__cta {

    background: var(--color-primary);

    color: var(--color-white);

    border: none;

    padding: .9rem 2rem;

    border-radius: var(--border-radius);

    font-weight: 700;

    transition:

    background-color var(--transition),

    transform var(--transition),

    color var(--transition);

}

.navigation__cta:hover {

    background: var(--color-primary-dark);

    color: var(--color-white);

    transform: translateY(-2px);

}