.nav{
    background: radial-gradient(circle, #B71833, #8A1324);

}
.nav.mobile{
    padding: 50px 50px 10px 50px;
    display: flex;
    flex-direction: column;
    align-items:center;
}




.box-burger {
    width: 27px;
    height: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom:40px;
}

.line-burger {
    width: 100%;
    height: 2px;
    background-color: #fff; /* Couleur blanche */
    border-radius: 5px;
}


/*DropDown MENU*/
#DropDownMenu {
    background: radial-gradient(circle, #B71833, #8A1324);
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute; /* Positionner par rapport à l'élément parent */
    top: 0; /* Positionné juste sous le bouton burger */
    left: 0;
    width: 100%;
    height: auto; /* Laisser le menu s'adapter à son contenu */
    transform: translateY(-100%); /* Hors de l'écran au départ */
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    z-index: 9999; /* Assurez-vous que le menu soit au-dessus des autres éléments */
    opacity: 0; /* Invisible au départ */
    pointer-events: none; /* Désactive les clics quand masqué */
}

/* Menu visible */
#DropDownMenu.visible {
    transform: translateY(0); /* Le menu se déplace sous le bouton burger */
    opacity: 1; /* Le menu devient visible */
    pointer-events: auto; /* Permet les clics sur le menu une fois visible */
}


/* Bouton croix */
.box-cross {
    width: 27px;
    height: 27px;
    position: relative;
    cursor: pointer;
}

.line-cross {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    top: 50%;
    left: 0;
    transform-origin: center;
    border-radius: 2px;
}

.line-cross:nth-child(1) {
    transform: translateY(-50%) rotate(45deg);
}

.line-cross:nth-child(2) {
    transform: translateY(-50%) rotate(-45deg);
}

.box-nav.mobile {
    margin-top: 40px;
}

.box-nav ul li a {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
}

.box-nav.mobile ul li{
    margin: 20px 0px;

}
.box-nav ul li {
    position: relative;
    padding-left: 30px;
}

.box-nav ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    background-color: white;
    width: 20px;
    height: 3px;
}

/* ----------Nav DESKTOP ------------*/
.contain-menu-mobile{
    display:none;
}
.contain-menu-desktop{
    display:block;
}

.box-nav.desktop ul{
    display:flex;
    & li{
        margin-right:50px;
    }
}
.nav.desktop{
    display: flex;
    justify-content: center;
    padding: 15px 0px;

}
.contain-nav-desktop{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:85%;
}


/**RESPONSIVE**/

@media (min-width:250px) and (max-width:980px){
    .contain-menu-mobile{
        display: block;
    }
    .contain-menu-desktop{
        display: none;
    }
}