
/* Naviguation style */


.nav-bar {
  background-color:#37717C ;
  color: #FFF9EF ;
    height: 50px;
    align-content: center;
  font-size: larger;
    font-weight: 500;
font-family: "Roboto Flex";

}


.nav {
  display: flex;
  justify-content: space-evenly;
 list-style: none;

}



.sous1, .sous2 {
  position: relative;
background-color:rgba(55, 113, 124, 80%);

padding-inline: 10%;
padding-top: 3%;
text-align: center;
list-style: none;
right: 25%;
border-bottom: #EFECE9 2px solid;
display: none;
}

.sous1 {
width:150px;
}

.sous2 {
  width: 120px;
}


.nav :hover .sous2, .nav :hover .sous1  {
  display: block;
}

.nav li {
cursor: pointer;

}

#navelement1{
  font-family: "syne";
  
}

nav li :hover {
  font-size: 101%;
  
}

.nav-bar a { text-decoration: none;
  color: #FFF9EF ;
}

/* footer style */

footer {
  background-color: #37717C;
  display: flex;
  color:#EFECE9 ;
      align-content: center;
  font-size: larger;
  justify-content: center;
  font-weight: 600;
font-family: "Roboto Flex";
padding-bottom: 20px;
}

footer img {
  width: 25px;
  height: 25px;
}

.menu-footer1, .menu-footer2, .menu-footer3 {
  border-right: 2px solid ;
}

footer li {
  padding-right: 10px;
  list-style: none;
  cursor: pointer;
}

footer li :hover {
  font-size: 101%;
  
}

footer a { text-decoration: none;
  color: #FFF9EF ;
}
/* Home style Général*/

body {margin: 0;
background-color:#EFECE9 ;

}

h2 { 
  font-family: "Syne";
  font-size: 35px;
  
}

p { 
font-family: "Roboto Flex";
font-size: 20px;
font-weight:600;

}


#prezcontact {
  display: flex;
  flex-direction: column;
  justify-items: center;

  width: max-content;
  margin: 5% 5% 2% 5%;
  color: #37717C;

}

#prezcontact h2, #prezcontact p {
  padding-inline: 7%;
}



/* formulaire style Général*/

#formulaire{
display: flex;
flex-direction: column;

  background-color: #37717C;
  margin: 0% 10% 10% 10%;
  padding: 5%;
  color: #EFECE9;
  border-radius: 10px;
  font-family: "Roboto Flex";
font-size: 20px;
font-weight:600;
}

#form {
  display: flex;
  flex-wrap: wrap;
  width: 900px;
 
  
 
}

#form input {
  width: 350px;
  height: 30px;
  font-family: "Roboto Flex";
font-size: 20px;

}


#form label {
  padding: 40px;
  
}



#Comment  {
 
  width: 500px;
  height: 200px;
  
}
#Comment1  {
 padding: 3%;
 
  
}