/* 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;


}

/* Home style part1 */

.introhome {
  display: flex;
  flex-direction: column;
color: #9E7757;
align-items: center;
justify-content: center;
margin-inline: 5%;
padding-top: 4%;
/* position: relative;
margin-top: 10%; */
}

.intro1, .intro2 {
  width:900px ;
  text-align: center;
 align-content: center;
 /*position: absolute;*/
}

/*
.intro1 {
  top: -15%;
  margin-top: 10px;
}

.intro2 {
  top: -5%;
  margin-top: 10px;
} */

button {
  font-size: 1em;
  background-color: #9E7757;
  color: #EFECE9;
 border-radius: 30px;
 margin: 15px;
 width: fit-content;
 height: fit-content;
 padding: 15px;
 font-weight: bold;
 cursor: pointer;
 border: #EFECE9 1px solid;
}

.introhome img {
  width: 70%;
  height: fit-content;
 
}


/* Home style part2 */


.Allelement {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.Allelement img{
width: 350px;

padding-top: 3%;
}

#imagetraffic, #imageUx {
  width: 400px;
  height: 300px;
}



.Allelement > div{
 
  height: 400px;
  display: flex;
  text-align: justify;
align-content: center;

margin: 1% ;


} 

.Content, .UXUI {

  color: #EFECE9;
  flex-direction: row-reverse;
 
  align-items: center;

}

.Traffic {
color: #9E7757;
  flex-direction: row;
  align-items: center;
} 

.Allelement button {
  width: fit-content;
  margin: 0%;
  cursor: pointer;
}


.Contentext, .UXUItext, .Traffictext {
  margin-inline: 3%;
  padding : 3%;
  width: 700px;
  
  height: fit-content;

  
}

.Contentext, .UXUItext {
  background-color: #9E7757;
}




/*

#Content1 {
  position: absolute;
  padding-top: 5%;
} */