@media screen and (max-width:1000px) and (min-width:800px) {

    .navbar ul li a{
        font-size: 13px;
        margin: 10px;
    }
    .btns{
        margin-left: 20px;
    }
    .btns button{
        height: 30px;
        padding: 6px 9px;
        font-size: 10px;
        margin: 5px;
    }
    .footer{
        flex-direction: column;
    }
    


    .services{
        display: flex;
        flex-wrap: wrap;
    }
    .services .child{
        width: 150px;
        height: 280px;
    }
    
}
@media screen and  (max-width:1100px) and (min-width:800px){
    .footer{
        flex-direction: column;
    }
    .rooms .item{
        width: 80%;
        margin: 60px;
    }
}
@media screen and  (max-width:800px){
    .contact-form{
        display: none;
    }
    .footer-parent {
        display: flex;
        justify-content: center;
    }
    .gallery{
        width: 80%;
        margin-bottom: 20px;
    }
    .coment{
        flex-direction: column;
    }
    .coment .child{
        width: 80%;
        margin: 20px 0px;
    }
    .specialite div p{
        font-size: 12px;
    }
    .Specialite-parent{
        padding: 90px 0px;
    }
    .achivement-parent{
        padding: 170px 0px;
    }
    .services .child {
        width: 35%;
    }
    .about{
        flex-direction: column;
    }
    .about .txt{
        width: 100%;
        margin-bottom: 30px;
    }
   .about .pic{
    width: 90%;
    height: 400px;
    margin: auto;
   }
   .fond h1{
    text-align: center;
    font-size: 45px;
   }
   .formulaire{
    grid-template-columns: auto auto;
   }
   .lydiacity{
        padding: 50px 0px;
   }
   .fond button{
    margin-top: 40px;
}
.rooms .item .desc {
   
    bottom: -80px;
    padding: 22px;
    left: 9px;
    right: 9px;
   
}
.item .desc p{
    font-size: 12px;
}
.item .desc h2{
    font-size: 20px;
}
.item button{
    font-size: 10px;
}
   .navbar{
    display: none;
   }
   .services .child p{
    font-size: 11px;
   }
   .listbtn{
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 3px;
}
.listbtn.active span:nth-child(2){
    visibility: hidden;
}
.listbtn.active span:first-child, .listbtn.active span:last-child{
    transition: all 1s;
}
.listbtn.active span:first-child{
    transform: rotate(45deg) translateY(11.5px) ;
    
}
.listbtn.active span:last-child{
    transform: rotate(-45deg) translateY(-11.5px) ;

}
.listbtn span{
    width: 35px;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    margin: 3px;
    
}
.header.active{
    background-color: #0e0037;
}
.navbar.active{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.navbar.active ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 80px;
}
.navbar.active ul li {
    margin: 20px;
}
.btns{
    display: flex;
    flex-direction: column;
    margin-left: 0px;
}
.btns button{
    margin: 20px 0px;
   
}
.header .parent{
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: center;
    height: 55px;
}
.header{
    flex-direction: column;
    position: fixed;
    z-index: 10000;
}
.logo img {
    width: 120px;
    height: 30px;
}
.lydiacity form .btn button{
    width: 60%;
    font-size: 15px;
    height: 30px;
}
.specialite div h6{
    font-size: 12px;
}
.specialite div h1{
    font-size: 30px;
}
.specialite div p{
    font-size: 10px;
}
.rooms .item .desc{
    left: 0px;
}
}

@media screen and  (max-width:550px){
    .footer{
        flex-direction: column;
    }
    .services .child {
        width: 80%;
    }
    .formulaire{
        grid-template-columns: auto ;
       }
       
       .lydiacity{
        height: 130vh;
       }
       .lydiacity form h1{
        text-align: center;
       }
       .services .child p{
        font-size: 13px;
       }
       
    
}