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

}


/*Page Content style part 1*/

.Allelement1{
display: flex;
flex-direction: column;
text-align: left;
align-items: center;
}

#Contenttitre{
color: #9E7757;
margin-top: 5%;
margin-bottom: 0%;


}

.Content{
    display: flex;
    flex-direction: row;
    align-items: center;
 
}

.Content img {
    width: 400px;
}

.Contentext {
  background-color: #9E7757;
  color: #EFECE9;
  width: 70% ;
  height: 170px;
  
  text-align: justify;

font-family: "Roboto Flex";
font-size: 20px;
font-weight:600;
padding: 2%;
margin-bottom: 3%;
 

}


.Contentext p {
  color: #EFECE9;
}

/*Page Content style part 2*/

#Réseauxprez{
  color: #9E7757;
  display: flex;
  flex-direction: column;
  width: 900px;
}

#Réseauxprez1 {
  color: #37717C;
}

#Sliders{

display: flex;
align-items: center;
  background-color: #37717C;
 padding: 3%;

width:fit-content;
  text-align: center;
  overflow: hidden;
   
}


#Slides {

 display: flex;
 flex-direction: row;
 width:1300px;
  overflow: hidden;
 
 
}

.Slide {
  width:350px ;
  padding-inline: 10px;
 

}

 button {
  width: 50px;
  height: 50px;
  font-size: 60px;
  cursor: pointer;
  background-color: #37717C;
  color: #EFECE9;
 margin: 1%;
 border: none;
 text-shadow: #1c1b19 5px 4px;
}





/*
#Slide1, #Slide2, #Slide3, #Slide4, #Slide5, #Slide6 {
  display: none;
  
} */



/* Test slider */

/*
#Slide4, #Slide5, #Slide6 {
  display: none;
  
} 
  */



/*Page Content style part 3*/

#Ecommerceprez {
  color: #9E7757;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
    width: 900px;

}

#Ecommerceprez p {
  text-align:justify;

}



#Ecommercecontent h3 {
background-color: #9E7757;
color: #EFECE9;
padding:2%;
margin: 7% 0% 0% 0%;

}

#Ecommercecontent h4, p {
  color: #9E7757;
}



#Ecommercecontent {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  font-family: "Roboto Flex"
  

}

#Ecommercecontent img {
width: 400px;
height: 400px;
padding: 0%;
margin: 0%;

}

#Ecommercedetail {
  border: 2px solid #9E7757;
}

#Ecommerceaction {
  background-color: #37717C;
  margin: 2%;
  padding: 2%;
  height: fit-content;
  color: #EFECE9;

}

#Ecommerceaction > h3 {
  background-color: #37717C;
}


/*Page Content style part 4*/

#Blogprez img {
 
width: 450px;
padding: 1%;
height: fit-content;
}


.blogcontent{
 width: fit-content;
height: 450px;
 overflow: hidden;
  overflow-y: scroll;
  border: #9E7757 4px solid;
 margin-inline: 2%;
  
}

#Blogblock {

    display: flex;
  flex-direction: row;
  justify-content: space-between;
 margin: 3% 0% 3% 0%;
 
}




#Blogprez h2, #Blogprez h2 {
  color: #9E7757;
}


#blog1 {
  margin-top: 3%;
}

#blog3 {
  margin-top: 7%;
}