/*
|--------------------------------------------------------------------------
| MAKKY B2B
| Navigation
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   DESKTOP NAVIGATION
========================================================================== */

.mb2b-header__nav{

    margin-left:auto;

    margin-right:44px;

}

.mb2b-header__nav ul{

    display:flex;

    align-items:center;

    gap:40px;

    margin:0;

    padding:0;

    list-style:none;

}

.mb2b-header__nav li{

    margin:0;

    padding:0;

}

.mb2b-header__nav a{

    display:inline-flex;

    align-items:center;

    color:var(--mb2b-text-light);

    font-size:15px;

    font-weight:600;

    letter-spacing:.2px;

    text-decoration:none;

    transition:color var(--transition-fast);

}

.mb2b-header__nav a:hover{

    color:var(--mb2b-secondary);

}

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

.mb2b-mobile-menu{

    margin:0;

    padding:0;

    list-style:none;

}

.mb2b-mobile-menu li{

    border-bottom:1px solid var(--mb2b-border-light);

}

.mb2b-mobile-menu__link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:28px 32px;

    color:var(--mb2b-text-light);

    font-size:20px;

    font-weight:600;

    text-decoration:none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);

}

.mb2b-mobile-menu__link span{

    flex:1;

    transition:color var(--transition-fast);

}

.mb2b-mobile-menu__link:hover{

    background:color-mix(
        in srgb,
        var(--mb2b-secondary) 8%,
        transparent
    );

}

.mb2b-mobile-menu__link:hover span{

    color:var(--mb2b-secondary);

}

.mb2b-mobile-menu__link:hover svg{

    transform:translateX(6px);

}

/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width:1200px){

    .mb2b-header__nav{

        margin-right:28px;

    }

    .mb2b-header__nav ul{

        gap:28px;

    }

}

@media (max-width:1024px){

    .mb2b-header__nav{

        display:none;

    }

}