.navbar-container {
    position: fixed;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    padding-inline: 20px;
    padding-block: 15px;
}
.logo {
    height: 40px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 300;
    color: #F0F0F0;
}
.menu-item:hover {
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    color: #FFFFFF;
}
.menu-icon {
    width: 20px;
    height: 20px;
    filter: invert(0.8);
}

.lang-button{
    background:transparent;          /* no Bootstrap bg          */
    border:none;                     /* strip default border     */
    padding:0 22px 0 0;              /* room for divider & arrow */
    display:inline-flex;
    align-items:center;
    gap:6px;                         /* space before caret       */
    cursor:pointer;
    position:relative;               /* for divider pseudo       */

    color: var(--White, #FFF);

    /* Paragraph/Paragraph Small */
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: lighter;
}

/* white ▼ caret */
.lang-button::after{
    content:"";
    border:4px solid transparent;
    border-top-color:#FFFFFF;        /* ↓ arrow colour           */
    margin-top:2px;                  /* optically centre arrow   */
}

/* subtle right-hand divider */
.lang-button::before{
    content:"";
    position:absolute;
    right:10px;                      /* sits inside padding      */
    top:50%;
    transform:translateY(-50%);
    height:22px;
    border-right:1px solid rgba(255,255,255,0.35);
}

/* hover / focus */
.lang-button:hover,
.lang-button:focus{
    color:#E5E9F0;
}
.lang-button:focus{
    outline:none;
}