.menu-main-container #menu-main{
    margin-top: 30px;
}

/* alternative : space-around, if you don't want the left and right margins */
.menu-main-container #menu-main {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
}
/* to align arrows with text*/
#menu-main>li {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    cursor: default; /* for non-links items*/
    position:relative;
}

@media (max-width:768px){
    #menu-main>li{margin-top: 18px;}
}
/* default style */
#menu-main>li>a {
    text-transform: uppercase;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
}
/* black arrow if submenus. Implement in child theme */
#menu-main .menu-item-has-children>a:after {
    /*content: '▾';*/
    color: black;
    font-size: 24px;
    padding-left: 10px;
    display: inline-block;
}



/* Submenu : css magic with transition-delay to avoid hoverintent dependency. max-height is animated for a 'slide down' effect  */
#menu-main .menu-item-has-children ul {
    display: block;
    position: absolute;
    top:100%;
    box-shadow: 1px 1px 14px 0px gray;
    background: white;
    z-index: 2;
    text-align: left;
    overflow: hidden;
    max-height:0;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
    transition-delay: 0.25s;
    transition-property: max-height;
}
 #menu-main .menu-item:last-child ul{right:0;}


#menu-main .sub-menu li {
    color: black;
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
    padding: 10px 20px;
    text-wrap: nowrap;
}


/* Submenu Opening : css magic : 100vh, as we don't know what a 100% might refer to */
#menu-main :is(
    .menu-item-has-children:hover ul,
    .menu-item-has-children ul:hover
) {
    max-height: 100vh;
    transition-delay: 0.1s;
    transition-timing-function: ease-in;
     transition-property: max-height;
}

/* Active page */
#menu-main a:hover,#menu-main a:focus,#menu-main > .current-page-parent > a,#menu-main > .current-menu-item > a{
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* override foundation*/
.is-dropdown-submenu-parent a:after {
        position: static !important;
    margin-top: initial !important;
}


@media (max-width: 768px) {
    .menu-main-container #menu-main {
        flex-direction: column;
        text-align: left;
        display: none;
        height: 700px;
    }

    #menu-main .menu-item-has-children ul {
        /**/
    }

    #menu-main .menu-item-has-children ul {
       /**/
    }

    #menu-main .menu-item-has-children:hover ul,
    #menu-main .menu-item-has-children ul:hover {
        display: none;
    }
}