.menu {
    position: sticky;
    z-index: 100;
}

@media (min-width: 800px) {
    .menu {
        display: flex;
        background-color: rgb(30, 134, 182);
    }
}

.menu-banner {
    background-color: rgb(30, 134, 182);
    padding: 0.7em;
    display: flex;
    justify-content: space-between;
}


/* Burger menu button */

.open-menu {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
}

.open-button {
    display: block;
}

.open-button .icon {
    display: block;
    background-color: white;
    height: 2.5em;
    width: 2.5em;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='2' width='16' height='1.5' fill='%23FBFBFE'/%3E%3Crect y='7.25' width='16' height='1.5' fill='%23FBFBFE'/%3E%3Crect y='12.5' width='16' height='1.5' fill='%23FBFBFE'/%3E%3C/svg%3E");
}

@media (min-width: 800px) {
    .open-menu {
        display: none;
    }
}


/* Menu : navigation part */

nav.menu-nav {
    position: absolute;
    display: none;
    background: linear-gradient(rgb(30, 134, 182), rgb(20, 164, 189));
    width: 100%;
}

@media (min-width: 800px) {
    nav.menu-nav {
        background: transparent;
        display: flex;
        position: static;
        justify-content: right;
    }
}

nav.menu-nav.visible {
    display: block;
}

.menu-nav .menu-items {
    padding: 1.3rem;
    margin: 0;
    list-style-type: none;
}

@media (min-width: 800px) {
    .menu-nav .menu-items {
        display: flex;
        align-items: center;
    }
}

.menu-items .item {
    position: relative;
    padding: 0.3em;
    border-bottom: 1px solid rgb(255, 255, 255);
    color: white;
    font-weight: 500;
    cursor: pointer;
}

@media (min-width: 800px) {
    .menu-items .item {
        border: none;
        padding: 0;
        margin-left: 0.5em;
        margin-right: 0.5em;
    }

    .menu-items .item > a {
        border-radius: 3px;
        padding: 0.6em 0.9em;
        display: block;
        transition: background-color 0.2s ease;
    }

    .menu-items .item > a:hover {
        background-color: #00000025;
    }
}

.menu-items > .item:last-of-type {
    border-bottom: none;
}

.item a {
    color: inherit;
}

/* Dropdown */

.item.dropdown .dropdown-menu {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0.5em auto 1em 1em;
}

@media (min-width: 800px) {
    .item.dropdown .dropdown-menu {
        position: absolute;
        top: calc(100% + 5px);
        left: 10px;
        background: linear-gradient(rgb(26, 164, 206), rgb(76, 170, 214));
        box-shadow: 0 3px 6px #00000042;
        border-radius: 3px;
        padding: 0.3em;
        margin: 0;
    }

    .item.dropdown .dropdown-menu::before {
        position: absolute;
        display: block;
        width: 100%;
        height: 10px;
        top: -5px;
        left: 0;
        content: '';
    }

    .item.dropdown:hover .dropdown-menu {
        display: block;
    }
}

.item.dropdown.open .dropdown-menu {
    display: block;
}

.item.dropdown > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item.dropdown > a::after {
    content: '';
    width: 1em;
    height: 1em;
    background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ0cmFuc3BhcmVudCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTEgLTEgMTAgNCI+CiAgICA8cGF0aCBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTAgMCA0IDQgNCAtNCI+PC9wYXRoPgo8L3N2Zz4=");
    background-size: contain;
    background-position: center;
    transition: transform 0.2s ease-in-out;
}

@media (min-width: 800px) {
    .item.dropdown > a::after {
        margin-left: 0.5em;
    }

    .item.dropdown:hover > a::after {
        transform: scaleY(-1);
    }
}

.item.dropdown.open > a::after {
    transform: scaleY(-1);
}

.dropdown-item {
    font-weight: 400;
    margin: 0.1em 0;
}

@media (min-width: 800px) {
    .dropdown-item {
        padding: 0.3em 0.5em;
        transition: background-color 0.2s ease;
    }

    .dropdown-item:hover {
        background-color: #0000001a;
    }
}