body {

    position: relative;

}


header {

    position: sticky;

    top: 0;

    z-index: 1000;

}


.menu {

    display: flex;

    justify-content: space-between;

    background-color: var(--basicColor2);

    border-bottom: 4px solid var(--basicColor1);

}


.menu a {

    transition: ease all .3s;

}


.menu a:hover {

    color: var(--basicColor1);

}


.menu .logoLink,
.menu .containerLink.container2 {

    width: 15%;

}


.menu .logoLink {

    display: flex;

    align-items: center;

}


.menu .logoLink img {

    height: 75%;

    width: auto;

    max-width: 100%;

}


.menu .containerLink {

    display: flex;

    gap: 1em;

}


.menu .containerLink div {

    display: flex;

    align-items: center;

    position: relative;

}


.menu .containerLink .menuElement {

    position: relative;

}


.menu .containerLink .menuElement a {

    display: flex;

    gap: .25em;

    align-items: center;

}


.menu .containerLink .menuElement.parentSubMenu span {

    display: flex;

}


.menu .containerLink .menuElement.parentSubMenu svg {

    width: 1em;

    height: 1em;

    transition: ease all .3s;

}


.menu .containerLink .menuElement .submenu {

    position: absolute;

    top: 100%;

    left: 0;

    display: flex;

    flex-direction: column;

    gap: .5em;

    background-color: var(--basicColor2);

    z-index: 1000;

    align-items: flex-start;

    width: max-content;

    transform: translateY(-10px);

    opacity: 0;

    pointer-events: none;

    transition: transform .3s ease, opacity .3s ease;

    padding: .5em 1em;

}


.menu .containerLink .menuElement.active .submenu {

    transform: translateY(0);

    opacity: 1;

    pointer-events: auto;

}


.menu .containerLink .menuElement.active svg {

    transform: rotate(90deg);

}


.menu .containerLink.container2 div {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


.menu .containerLink.container2 div a {

    color: var(--basicColor2) !important;

    height: 100%;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: var(--basicColor1);

    border-left: 4px solid var(--basicColor1);

    transition: ease all .3s;

}


.menu .openMenu,
.menu .closeMenu {

    display: none;

    cursor: pointer;

}


.menu .openMenu path,
.menu .closeMenu path {

    fill: var(--basicColor1);

}


@media screen and (max-width: 900px) {

    .menu {

        position: relative;

    }


    .menu .logoLink {

        padding: .5em;

        height: 3em;

    }


    .menu .logoLink img {

        height: 100%;

    }


    .menu .logoLink, .menu .containerLink.container2 {

        width: auto;

    }


    .menu .containerLink.container2 a {

        padding: 0 1.5em;

    }


    .menu .containerLink.container1 {

        position: absolute;

        top: 100%;

        left: -100%;

        width: 100%;

        padding: 2em 10%;

        transition: ease all .3s;

    }


    .menu.active .containerLink.container1 {

        left: 0;

    }


    .menu .openMenu {

        display: flex;

    }


    .menu.active .openMenu {

        display: none;

    }


    .menu.active .closeMenu {

        display: flex;

    }


    .menu .containerLink.container1 {

        flex-direction: column;

        background-color: var(--basicColor2);

    }


    .menu .containerLink .menuElement.active .submenu {

        transform: initial;

        pointer-events: auto;

        max-height: 500px; /* suffisamment grand */

        opacity: 1;

    }


    .menu .containerLink .menuElement.active svg {

        transform: rotate(90deg);

    }


    .menu .containerLink div {

        flex-direction: column;

        align-items: initial;

    }


    .menu .containerLink .menuElement .submenu {

        position: initial;

        transform: initial;

        display: flex;

        flex-direction: column;

        gap: .5em;

        align-items: flex-start;

        width: max-content;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        transition: max-height .3s ease, opacity .3s ease;

        padding: 0 1em;

    }

}