/*Color*/
/* violet : #8e44ad */
/* violet claire : #D980FA */
/* Orange : #f39c12 */
/* Orange claire : #ffbe76 */
/*------------GENERAL----------*/

html{
  scroll-behavior: smooth;
}
html, body {
  width: 100%;
  height: 100%;
  font-family: 'Oswald', sans-serif!important;

}

.divider{
  width: 50px;
  height: 2px;
  background: #27ae60;
  margin:0 auto;

}
.green{
  color: #27ae60;
}
h1{
  text-shadow: #333 1px 0 10px;
  -webkit-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  -o-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;

  font-size: 65px!important;
  text-transform: uppercase;


}

h2{
  text-align: left;
  font-size: 35px!important;
  
 
  text-transform: uppercase;
}

section{
  min-height: 50vh;
}
p{
  text-align: justify;
  font-family: 'Poppins', sans-serif;
}
hr{
  opacity: 0;
}

/*----------NAV---------*/
nav{
  height: 80px;
  width: 100%;
  background: #fff;
  display: block;
float: right;
-webkit-box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.16);
        box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.16);
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  float: right;  
  line-height: 80px;
 margin-right: 80px;
  top: 0;
  right: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}


nav ul li a{
  font-size: 12px;
  line-height: 80px;
  color: #000;
  padding: 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
 
-webkit-transition: all 0.3s;
 
-o-transition: all 0.3s;
 
transition: all 0.3s;

}

nav ul li a:hover, .active{
  text-decoration: none;
  color: #27ae60;
  
  -webkit-transition: all 0.3s;
  
  -o-transition: all 0.3s;
  
  transition: all 0.3s;

}


.btn-open-menu {
  color: #000;
  font-size: 25px;
  line-height: 80px;
  cursor: pointer;
  float: right;
  margin-right: 50px;
  display: none;

}

.logo{
  font-size: 30px;
  color: #000;
  line-height: 80px;
  margin-left: 80px;
  
 

}
.logo:hover{
text-decoration: none;
color: #000;
}
/*-----------------POPUP--------------------*/
.popup .overlay{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 1;
  display: none;
}

.popup .content{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
      -ms-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
          border-radius: 5px;
  background: #fff;
  width: 450px;
  min-height: 220px;
  z-index:2;
  
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.popup .close-btn{
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;

}
.popup.active .overlay{
  display: block;
}
.popup.active p{
  color: #333;
  font-size: 14px!important;
  font-weight: bold;
}
.popup.active li{
  color: #333;
}
.popup.active .content{
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
/*-----------------POPUP 2--------------------*/
.popup2 .overlay{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 1;
  display: none;
}

.popup2 .content{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
      -ms-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);

  background: #ff9f43;
  width: 450px;
  min-height: 220px;
  z-index:2;
  border-radius: 5px;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.popup2 .close-btn{
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;

}
.popup2.active2 .overlay{
  display: block;
}
.popup2.active2 p{
  color: #333;
  font-size: 14px!important;
  font-weight: bold;
}

.popup2.active2 .content{
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
/*----------HEADER---------*/
#photoheader{
  background: url(../image/anties.jpg)no-repeat;
  background-size: cover;
  background-position: bottom;
  height: calc(100vh);
  width: 100%;
  position: relative;

background-attachment: fixed;

}

.centrerdivtext{
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

}
.centrerdivtext h1{
  color: #fff;
}
.btn1{
text-decoration: none;
font-weight: bold;
cursor: pointer;
color: #fff;
border: 1px solid #ee5253;
padding: 12px;
border-radius: 5px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background: #ee5253;
font-family: 'Poppins', sans-serif;
}
.btn1:hover{
text-decoration: none;
color: #ee5253;
border: 1px solid #ee5253;
background: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.btn2{
 background: transparent;
 cursor: pointer;
 font-weight: bold;
border-radius: 5px;
text-decoration: none;
color: #ff9f43;
border: 1px solid #ff9f43;
padding: 12px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
font-family: 'Poppins', sans-serif;
}
.btn2:hover{
text-decoration: none;
color: #ff9f43;
background: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;

}
#reseaux a{
color: #fff;


-webkit-transition: all 0.3s;


-o-transition: all 0.3s;


transition: all 0.3s;

}
#reseaux #facebook:hover{
color:#1877F2;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#reseaux #whatsapp:hover{
  color: #4CED69;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#reseaux a{
  text-decoration: none;

}
#reseaux i{
  color: #fff;
  font-size: 8px;
}
/*-----------SECTION A PROPOS----------*/
#apropos{
  background: #fff;
}
#apropos h3{
  font-size: 25px!important;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;

  color: #333;

}
#apropos p{
  font-size: 15px;
  text-align: center;
  color: #636e72;
}


/*-----------SECTION SERVICES----------*/
#services{
  background:url(../image/CleanBanner.jpg) no-repeat;
  background-size: cover;
  min-height: 45vh;
  width: 100%;
  background-attachment: fixed;
}
#services .divservice{
  margin-top: 40px;
}
#services{
min-height: 35vh!important;
}
#services i{
  font-size: 35px;
color: #27ae60;
}
#services h4{
  font-size: 16px;

   color: #fff;
font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  
}
#services p{
  font-size: 15px;
  text-align: center;
  color: #fff;
}
/*-----------SECTION TARIF----------*/
#tarifs{
  background: #fff;
}
#tarifs h3{
 
  margin-bottom: 20px;
  
}
#tarifs i{
  font-size: 20px;
  color: #27ae60;
}
#tarifs th{
 
}





/*---------------PARALAX------------------*/
#parallax{
  position: relative;
  min-height: 50vh;
  background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0.45)),to(rgba(0,0,0,0.45))), url(../image/Cleanv2.jpg) no-repeat;
  background:-o-linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url(../image/Cleanv2.jpg) no-repeat;
  background:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url(../image/Cleanv2.jpg) no-repeat;
  background-attachment: fixed;
  background-size: cover;
  text-align: center;
  color: #fff;
  
  
}
#parallax #parallaxDescription{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
#parallax #parallaxDescription h3{
  font-size: 60px;
  text-transform: uppercase;
  text-shadow: #333 1px 0 10px;

  margin-bottom: 25px;
  
}
#parallax #parallaxDescription p{
  text-align: center;
  font-weight: bold;
  margin-bottom: 50px;
}
.bold{
  font-weight: bold;
  color: #27ae60;
}
/*----------------PARTIE CONTACT---------------------*/

#contact{
  background: #fff;
  color: #333;
  
}
#contact h2{

  font-size: 35px!important;
}
#contact h4{

text-transform: uppercase;
}
#contact h5{
  font-weight: bold;

}
#contact p {
  text-align: center;
  color:#333;
}
#contact i {
  margin: 0 auto;
  font-size: 25px;
  background:#fff ;
border: 1px dashed #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items:center;
  color:#27ae60;
}

#contact a{
  color:#333;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#contact a:hover{
  color: #27ae60;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}



/*--------------------FOOTER-----------------------*/
#footer{
  background: #27ae60;
  
  padding: 80px 0;

}

#footerReseaux ul{

text-align: center;


}
#footerReseaux ul li{
padding:0 5px;

display: inline-block;
}
#footerReseaux ul li a{
background:#27ae60;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items:center;
  color:#fff;
  margin: 0 auto;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

}
#footerReseaux ul li a:hover{
background:#fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items:center;
  color:#27ae60;
  margin: 0 auto;
   text-decoration: none;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}


#footer ul{
list-style: none;
margin: 0;
padding: 0;
}
#Ogweb p{
text-align: center;
color: white;
}
#Ogweb p a{
  color: white;
}
/*--------------- mention legale ----------*/
#mentionsleg p {
  padding: 0!important;
}
#mentionsleg h3{
 
  font-size: 25px!important;
  font-weight: bold;
  color: #27ae60;
}

.box .noshow{
opacity: 0;
-webkit-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
}
/*Animation*/
.fade{
opacity: 1!important;

/*met transform: et non pas all pour les configuration qu'on a mis ds le js*/
-webkit-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
}

/*-----------------MOBILE-----------------*/
@media screen and (max-width: 992px) {

#mentionsleg p {
  padding: 0!important;
}
h1{
  font-size: 55px!important;
  -webkit-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  -o-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
}
h2{
  font-size: 51px!important;
  -webkit-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  -o-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
}
h3{
  font-size: 49px!important;
}
.btn-open-menu {
 
  display: block;

}
.logo{
  font-size: 20px;
  -webkit-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  -o-transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;
  transition: all cubic-bezier(.17,.67,.83,.67) 0.5s;

}
/*pop up*/
.popup .content{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
      -ms-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);

  background: #fff;
  max-width: 400px;
  min-height: 220px;
  z-index:2;
  
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.popup2 .content{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
      -ms-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);

  
  max-width: 400px;
  min-height: 220px;
  z-index:2;
  
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
nav ul{
width: 100%;
height: calc(100vh - 80px);
background:#fff ;
display: block;
 padding: 0;
margin: 0;
 position: relative;
 left: -100%;
 z-index: 99;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;
}
.open nav ul{
 
 left:0;

padding: 0;
margin: 0;

 
 display: block;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;

 
}
.open nav ul li a{
text-align: center;
width: 100%; 
color: #000;
 padding: 0 10px;
}

.open nav ul li a:hover{
 
color: #27ae60;

}

#contact h2{
  font-size: 30px!important;
}

/*#parallax #parallaxDescription h3{
  font-size: 40px!important;
  text-transform: uppercase;


  margin-bottom: 20px;
  
}*/
#parallax #parallaxDescription p{
  text-align: center;
  
  margin-bottom: 50px;
}
#parallax{
  
  min-height: 65vh;
  
  
  
}
.centrerdivtext{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

}
}
@media screen and (max-width: 768px) {

h3{
  font-size: 39px!important;
}
h1{
  font-size:  40px!important;
}
.popup2 h2{
  font-size: 35px!important;
}
.popup h2{
  font-size: 35px!important;
}
}
@media screen and (max-width: 576px) {
h3{
  font-size: 26px!important;
}

h1{
  font-size:  33px!important;
}

}