body{
  font-family: "Montserrat", serif;
  background-color: #FCE6DB;

}

/* header section  */
.main_header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color:black;
  color :white;
  font-size: 20px;
}

/* nav section  */
.main_header-nav a {
  color : white;
  text-decoration: none;

}

.main_header-nav a:hover{
  color : #E84E1C;
  transition-duration: 500ms;
}


/* hereo banner  */
.hero-banner_logo{
  display :flex;
  justify-content: center;
  align-items: center;
  margin:0;
}

.hero-banner_logo img{
 
  width: 50%;
  height: 100%;
  object-fit: contain;
  overflow: hidden;

} 

/* hero banniere section  */

.wrapper{
  display: flex;
  flex :1;
  background-color: #FCE6DB;
  padding: 5%;
  margin:0;
  
}



.hero-banner_section{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  color : #252525;

}

.hero-banner_subtitle{
  font-weight: 700;
}

.hero-banner_main-title{
  font-size: 20px;
}

.hero-banner_socials{
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.hero-banner_socials svg{
  width: 50px;
  padding-right:10px;
}


.hero-banner_socials svg:hover{
  transform: translateY(-10px);
  transition: all 500ms ease-out;
}
/* footer  */

.main_footer{
  display: flex; 
  width: 100%;
  height: 10%; 
  justify-content: space-around;
  align-items: center; 
  background-color : #E84E1C;
  position: fixed;
  bottom:0;
  color : white;
}

.main_footer a {
  color : white;
  text-decoration: none;
}

.main_footer a:hover {
  color : black;
  transition-duration: 500ms;
}
/* mentions legales */
.legal-notice{
  display: flex;
  flex-wrap: wrap;
  padding-right: 20%;
  padding-left: 20%;
  padding-bottom: 10%;
}


/* Mobile + */
@media (min-width: 400px) { /* ... */ }

/* Phablets */
@media (min-width: 550px) { /* ... */ }

/* Tablettes */
@media (min-width: 750px) { /* ... */ }

/* Desktop */
@media (min-width: 1000px) { /* ... */ }

/* Desktop HD */
@media (min-width: 1200px) { /* ... */ }

/* Desktop Wide */

  @media (min-width: 1024px) and (max-width: 1400px) {


  .wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #FCE6DB;
    padding: 5%;

  }
  .hero-banner_logo {
    width: 50%;

  }

  .hero-banner_logo img{
    width: 100%;
    height: 100%;
  }


  .legal-notice{
    padding-bottom: 30%;
    
  }
  
}



/* MEDIA QUERY  TABLETTE */

@media (min-width: 0) and (max-width: 1024px) {

  .wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #FCE6DB;
    padding: 5%;

  }

    .hero-banner_logo img{
    width: 100%;
    height: 100%;
  }

  .hero-banner_socials
  {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* footer */
  .main_footer{
    font-size:12px;
  }

  /* nav */
  .main_header{
    font-size:15px;
  }
  .legal-notice{
    padding-bottom: 50%;
  }
}