body{
    padding: 0 7vw;
    margin: 0vw;
    /* border: 1px solid black; */
    overflow-x: hidden;
}

/***************************************/
/***************************************/
/***************************************/
/*****************design du head**********************/

.div-head{
    position: relative;
    height: 40vw;
    /* border: 2px solid pink; */
    padding-bottom: 1vw;
    /* background-color: rgb(17, 110, 55); */
      background: linear-gradient( 180deg, rgb(17, 110, 55) 50%,rgb(4, 138, 155));



                  box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }


.menuBar{
  display: none;
}


#btnDisplayMenu{
  display: none;
}

.img-head {
    position: relative;
    top: -2vw;
    left: -5vw;
    box-shadow: 0.1vw 0.1vw 0.1vw rgb(138, 136, 136);
    border-radius: 50%;
    padding: 2vw;
    background-color: white;
    height: 8vw;
    width: 8vw;

    transition: all 0.5s ease-in-out;
    animation-name: anime-envi1;
    animation-duration: 7s;
    animation-timing-function: ease;
    animation-delay: 0.1s;
    animation-direction: alternate;

          z-index: 20;

  }
  
  .img-head:hover {
    scale: 1.1;
    box-shadow: 0.1vw 0.1vw 0.1vw rgb(138, 136, 136);
    border-radius: 50%;
  }
  
  @keyframes anime-envi1 {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }


#btnDisplayMenu{
    display: none;
}



.div-menu{
   position: absolute;
    top:2vw;
    left: 20vw;
    z-index: 80;
    font-family: garamond;

}


.div-menu ul{
     display: flex;
    /* border: 2PX solid red; */
    padding-right: 1vw;
}

.div-menu ul li{
    margin-right: 2vw;
    list-style: none;
    width: max-content;
}

.div-menu ul li a{
 text-decoration: none;
    color: white;
    transition: all 0.4s ease-in-out;
}


.div-menu ul .li-pro a{
 position: relative;
    top: 0vw;
    color: rgb(78, 78, 78);
    padding: 0.3vw 1vw 0.8vw 1vw;
    /* transition: all 0.5s ease-in-out; */
    box-shadow: 0.08vw 0.08vw 0.2vw rgb(130, 130, 130);
    background-color: rgb(255, 255, 255);

}



.div-menu ul li:hover a {
  color: rgb(17, 209, 17);
    padding-bottom: 1vw;
    border-bottom: 2px solid rgb(17, 209, 17);
  
}

.DisplayMenu{
  display: none;
 
}




.CloseMenu{
  display: none;
 

}


.img-head3{
    height: 6vw;
    width: 6vw;
}

/*******************************************************************************/
/******************TText head************************************/
.div-head h1{
  font-size: 4vw;
  position: relative;
  left: 11vw;
  top: 0vw;
  text-align: center;
  width: 60vw;
  color: white;
  margin-bottom: 13vw;
  font-weight: 900;
  line-height: 5vw;
        z-index: 20;

  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


.div-head p{
  position: absolute;
  top: 25vw;
  left: 26vw;
  font-size: 1.4vw;
  color: white;
  font-weight: 200;
        z-index: 20;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



.sp-head{
  color: #4cef06;
        z-index: 20;

}



/**************************************/
/************************************/
/********Lien sociaux*****************/


.lien-sociaux{
  position: absolute;
  left: 83vw;
  top: 26vw;
        z-index: 20;

	
}


.lien-sociaux ul{


}

.lien-sociaux ul li {
  list-style: none;
  margin-bottom: 1vw;

}

.lien-sociaux ul li a img {
  height: 2.3vw;
  width: 2.3vw;

}


.img-head3 {
  display: none;
	height: 5vw;
	width: 5vw;
	position: absolute;
	top: 15vw;
	right: 0.3vw;
	z-index: 650;
	padding: 3vww;
	background-color: white;
	border-radius: 50%;
	opacity: 0;
  
	animation-name: slowDown2;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 0.1s;
  }
  
  @keyframes slowDown2 {
	0% {
	  top: 15vw;
	}
  
	10% {
	  top: 16vw;
	  opacity: 1;
	}
  
	20% {
	  top: 17vw;
	}
  
	30% {
	  top: 18vw;
	  opacity: 1;
	}
  
	40% {
	  top: 19vw;
	}
  
	45% {
	  top: 20vw;
	  opacity: 1;
	}
  
	50% {
	  top: 21vw;
	  opacity: 1;
	}
  
	55% {
	  top: 22vw;
	}
  
	60% {
	  top: 23vw;
	  opacity: 1;
	}
  
	65% {
	  top: 24vw;
	}
  
	70% {
	  top: 25vw;
	  opacity: 1;
	}
  
	
	
  }



  .btnDisplayProjet{
    display: flex;
    position: absolute;
    bottom: 0vw;
    left: -1vw;
    padding: 0.5vw 1vw;
    border-radius: 10px;
    justify-content: space-between;
    width: 50vw;
    /* border: 2px solid pink; */
    background-color: white;
    z-index: 300;

                box-shadow: 0.1vw 0.1vw 0.5vw rgb(187, 185, 185), -0.1vw -0.1vw 0.5vw rgb(185, 182, 182);

  }


  .btnDisplayProjet button{
    font-size: 0.7vw;
    padding: 0.3vw 0.4vw;
    border-radius: 20px;
    border: none;

  }


  .btnDisplayProjet button:hover{
    box-shadow: 0.1vw 0.1vw 0.7vw rgb(131, 130, 130), -0.1vw -0.1vw 0.7vw rgb(144, 137, 137);
    color:white ;
    background-color: rgb(17, 110, 55);
    transition: all 0.4s ease-in-out;
  }

  .bull{
    position: absolute;
    background-color: rgb(17, 110, 55);
    border-radius: 50%;
    width: 2.3vw;
    height: 2.3vw;
    bottom: -2vw;
    left: 2.2vw;
    transition: all 0.4s ease-in-out;
    z-index: 310;
  }


/**************************************/

  .imgUP{
    position: fixed;
    bottom: 8vh;
    right: 1vw;
    height: 3vw;
    width: 3vw;
  }

/**************************************/

.divBlock{
  position: relative;
  top: 2vw;
  height: max-content;
  /* border: 2px solid rgb(187, 255, 0); */
}







/***********************************/
/***********************************/
/*************Slide Contain**********************/

.slide-contain-top{
    /* border: 2px solid blue; */
    position: absolute;
    top: 0;
    left: 0vw;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: hidden;
}


#firstSlide{
    display: block;
}


.slide-contain-top .slide{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}



.slide-contain-top .slide.zapContain {
    display: block;
    transition: all 2s ease-in-out;
    animation: SLideContain 0.6s ease-in-out;
  }
  
  @keyframes SLideContain {
    from{
      left: 0vw;
    }
    to{
      left: 0;
    }
  }

  #slideModif{
    top: -15vw;
  }


  #slideModif img{
    filter: brightness(30%);
    transition: all 0.3s ease-in-out;
  }

  #slideModif img:hover{
    filter: brightness(20%);
  }









.slide-contain-top .slide .slideh1{
    position: absolute;
    left: 9vw;
    margin-top: 12vw;
    font-size: 4vw;
    width: 70vw;
    text-align: center;
    line-height: 4vw;
    color: white;
    margin-bottom: 16vw;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;


    transition: all 2s ease-in-out;
    animation: textFirstSlide 1s ease-in-out;


}



  
  @keyframes textFirstSlide {
    0% {
      left: -20vw;
      opacity: 0;
      scale: 0.6;
    }
  
    100% {
        left: 9vw;
      opacity: 1;
      scale: 1;

    }
  }

.slide-contain-top .slide .slideh2{
    position: absolute;
    left: 9vw;
    top: 25vw;
    font-size: 4vw;
    width: 70vw;
    text-align: center;
    line-height: 4vw;
    color: white;
    z-index: 100;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;




}






.slide-contain-top .slide .slideP1{
    position: relative;
    width: 50vw;
    left: 30vw;
    top: 21vw;
    color: white;
    font-size: 1.3vw;


    
    transition: all 2s ease-in-out;
    animation: slideP1 2s ease-in-out;

}




@keyframes slideP1 {
    0% {
      top: 60vw;
      opacity: 0;
    }
  
    100% {
      opacity: 1;
      top: 21vw;

    }
  }


.slide-contain-top .slide .slideP2{
    position: absolute;
    width: 50vw;
    left: 30vw;
    top: 35vw;
    color: white;
    font-size: 1.3vw;
}






.slide-contain-top .slide img{
    width: 124%;
    height: 70vw;
}

/**************************************/
/**************************************/
/****************Neo Industry**********************/



.div-neo{
  display: block ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    overflow: hidden;
    top: 0vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);
    background-color: rgba(255, 255, 255, 0.996);

}

.display-Neo{
  display: none ;
}

.div-neo h1{
  font-size: 2.5vw;
  position: relative;
  left: 8vw;
  margin-top: 10vw;
  width: 50vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.div-neo img{
  border-radius: 20%;
  position: absolute;
  top: 8vw;
  right: 2vw;
}

.div-neo p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 1.1vw;
  line-height: 2vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 45vw;
  text-align: justify;
  color: #4b4d4c;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.sp-neo{
  color: rgb(148, 68, 3);
}

.sp-sen{
  color: green;
}

.sp-sap{
  color: rgb(9, 79, 170);
  font-weight: 700;
}


strong{
  color: rgb(255, 51, 0);
}



#containerNeo{
  height: 35vw;
  width: 70%;
  position: relative;
  left: 20vw;
  top: 8vw;
  margin-bottom: 25vw;
  background-color: #efefef;
  /* border: 4px solid rgb(167, 165, 165); */
                    box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);



  
}





#containerNeo .img-Neo.zapContainerNeo {
  display: block;
  transition: all 2s ease-in-out;
  animation: containerNeo 1s ease-in-out;
}

@keyframes containerNeo {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


#firstImgNeo{
display: block;
}



.img-Neo.pageNeo{
  display: block;
  transition: all 1s ease-in-out;
  animation: shifpicNeo 0.9s ease-in-out;

}

@keyframes shifpicNeo {
  from{
    left: 20vw;
    scale: 1.8;
    opacity: 0;

  }
  to{
    left: -6vw;
    scale: 1;
    opacity: 1;
  }
}



.img-Neo{
  height: 110%;
  width: 100%;
  position: absolute;
  top: -6.5vw;
  left: -6vw;
  display: none;

}

.img-Neo img{
  height: 100%;
  width: 100%;
  border-radius: 0;
  border-radius: 50px;
    border: 6px solid white;


}



#dotNeo span img{
  position: re lative;
  height: 2vw;
  width: 2vw;
  top: 8vw;
  left: 25vw;
  margin-right: 1vw;
}

.div-btn{
  /* border: 1px solid black; */
  position: relative;
  top: 27vw;
  left: 4.5vw;
  display: flex;
  width: 86%;
  z-index: 500;
  justify-content: space-between;
}


/**************************************/
/**************************************/
/****************Resilience Climatique**********************/

.div-Res{
  display: ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    padding-top: 1vw;
    padding-bottom: 10vw;
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);

    /* background-color: rgba(122, 154, 170, 0.314); */
 
}



.display-Res{
  display: ;
}



/* 
.imgDesignRes{
  position: absolute;
  top: 0;
  left: 0vw;
  height: 100%;
  width: 100%;
} */

.div-Res h2{
  font-size: 2.8vw;
  position: relative;
  left: 8vw;
  margin-top: 4vw;
  width: 50vw;
  color: rgb(47, 47, 47);
  font-weight: 900;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.div-Res p{
  position: relative;
  left: 8vw;
  top: 0vw;
  font-size: 1.1vw;
  line-height: 2.3vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 45vw;
  color: #4b4d4c;
  text-align: justify;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.div-img-Res{
  overflow: hidden;
  height: 35vw;
  width: 60%;
  position: relative;
  left: 8vw;
  top: 5vw;
  border: 6px solid rgb(230, 230, 230);
  border-radius: 50px;
  box-shadow: 0.1vw 0.1vw 0.3vw rgb(111, 110, 110), -0.1vw -0.1vw 0.3vw rgb(156, 154, 154);

}


.slide-Res .img-Res.zapRes {
  display: block;
  transition: all 2s ease-in-out;
  animation: lislide 1s ease-in-out;
}

@keyframes lislide {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



.slide-Res{
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}


.img-Res{
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 0;
  display: none ;
}



.designRes2{
  position: absolute;
  height:25vw;
  width: 25vw;
  top: 7vw;
  left: 55vw;
}



/**************************************/
/**************************************/
/****************Saped**********************/

.div-saped{
  display: ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    background-color: rgb(255, 255, 255);
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);
    padding-bottom: 38vw;
    padding-top: 1vw;

}



.display-Saped{
  display: none;
}

.div-saped h1{
  font-size: 2.5vw;
  position: relative;
  left: 8vw;
  margin-top: 10vw;
  width: 50vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}



.div-saped p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 1vw;
  line-height: 2vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 45vw;
  color: #4b4d4c;
  text-align: justify;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}




.div-img2-saped{
  height: 41vw;
  width: 40%;
  position: relative;
  left: 39vw;
  top: 22vw;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
  margin-bottom: 15vw;
  border: 7px solid orange;
              box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);



}


.slide-saped{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #969797;
}

.img1-saped{
  height: 100%;
  width: 100%;
  border-radius: 0;
  display: none;
}



.slide-saped .img1-saped.zapSaped {
  display: block;
  transition: all 2s ease-in-out;
  animation: SLideSaped 0.6s ease-in-out;
}

@keyframes SLideSaped {
  from{
    left: -20vw;
    scale: 0.7;
  }
  to{
    left: 0;
    scale: 1;
  }
}



/*********div-img3-saped**************/

.div-img3-saped{
  height: 25vw;
  width: 25%;
  position: absolute;
  left: 17vw;
  top: 49vw;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
  border: 7px solid green;
              box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);


}


.slide3-saped{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img3-saped{
  height: 100%;
  width: 100%;
  border-radius: 0;
}





/*********div-img4-saped**************/

.div-img4-saped{
  height: 28vw;
  width: 25%;
  position: absolute;
  left: 17vw;
  top: 75vw;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
  border: 7px solid green;

              box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

}


.slide2-saped{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img2-saped{
  height: 100%;
  width: 100%;
  border-radius: 0;
}



/**************************************/
/**************************************/
/****************ACC**********************/

.div-acc{
  display:  ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
   /* background-color:  rgba(255, 255, 255, 0.314); */
    overflow: hidden;
    top: 0vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);



    

}


.display-Acc{
  display: none;
}

.div-acc h2{
  font-size: 2.5vw;
  position: relative;
  left: 8vw;
  margin-top: 10vw;
  width: 20vw;
  font-weight: 700;
  color: rgb(195, 96, 96);
  line-height: 3vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.div-acc p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 1vw;
  line-height: 2vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 45vw;
  text-align: justify;
  color: #4b4d4c;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}


.p2-acc{
  margin-bottom: 5vw;
}


/**************************************/
/***************.div-ul-acc***********************/

.div-ul-acc{
  position: relative;
  left: 0;
  /* border: 2px solid rgb(0, 255, 68); */
  top: 8vw;
  height: 57vw;
  margin-bottom: 10vw;
  background: linear-gradient( 180deg,  rgb(17, 110, 55),#93ffc5
  );
}


.div-ul-acc .ul-acc{
  position: relative;
  width: 100%;
  height: 100%;
}

.div-ul-acc .ul-acc .slide-block-acc{
  position: relative;
  list-style: none;
  height: 100%;
  width: 100%;
  display: none;
}

#firstImgAcc{
  display: block;
}

/* #secondImgAcc{
  display: block;
} */


.ul-acc .slide-block-acc.pageAcc{
  display: block;
  transition: all 1s ease-in-out;
  animation: shifpicAcc 0.9s ease-in-out;

}

@keyframes shifpicAcc {
  from{
    left: 20vw;
    opacity: 0;

  }
  to{
    left: 0vw;
    opacity: 1;
  }
}

.img-ACC1{
  height: 13vw;
  width: 25%;
  position: absolute;
  top: 10vw;
  left: 6vw;
  border: 2px solid rgb(243, 243, 243);
  border-radius: 20px;
  transition: all 0.4s ease-in-out;



    animation: imgACC1 6s ease-in-out 1s infinite;


}




@keyframes imgACC1 {
    0% {
      bottom: 7.5vh;
      scale: 1.2;
    }
  
    50% {
      bottom: 8vh;
      scale: 1;
    }
  
    100% {
      bottom: 8.2vh;
      scale: 1.2;
    }
  }



.img-ACC2{
  height: 13vw;
  width: 25%;
  position: absolute;
  top: 19vw;
  left: 19vw;
  border: 2px solid orange;
  border-radius: 20px;
    transition: all 0.4s ease-in-out;




   animation: imgACC2 6s ease-in-out 2s infinite;



}



@keyframes imgACC2 {
    0% {
      bottom: 7.5vh;
      scale: 1.2;
    }
  
    50% {
      bottom: 8vh;
      scale: 1;
    }
  
    100% {
      bottom: 8.2vh;
      scale: 1.2;
    }
  }




.img-ACC3{
  height: 13vw;
  width: 30%;
position: absolute;
  top: 31vw;
  left: 3vw;
  border: 2px solid rgb(255, 255, 255);

    border-radius: 20px;

    transition: all 0.4s ease-in-out;



  
   animation: imgACC3 6s ease-in-out 3s infinite;
}



@keyframes imgACC3 {
    0% {
      bottom: 7.5vh;
      scale: 1.2;
    }
  
    50% {
      bottom: 8vh;
      scale: 1;
    }
  
    100% {
      bottom: 8.2vh;
      scale: 1.2;
    }
  }



  .img-SO{
      height: 23vw;
  width: 50%;
position: absolute;
  top: 14vw;
  left: 3vw;


    transition: all 0.4s ease-in-out;


  }



.div-ul-acc ul li p{
  position: absolute;
  top: -3.3vw;
  left: -3vw;
  padding-left: 2vw;
  font-weight: 700;
  border-bottom: 5px solid rgb(207, 66, 66);
  width: 105%;
  color: rgb(182, 68, 68);


}
.spACC{
  position: absolute;
  right: 5vw;
  font-size: 1vw;
  line-height: 1.8vw;
  letter-spacing: 0.07vw;
  word-spacing: 0.05vw;
  top: 6vw;
  width: 30vw;
  text-align: justify;
  color: rgb(37, 37, 37);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}




.spPRE{
  position: absolute;
  right: 5vw;
  font-size: 1.3vw;
  line-height: 1.8vw;
  letter-spacing: 0.07vw;
  word-spacing: 0.05vw;
  top: 15vw;
  width: 30vw;
  text-align: justify;
  color: rgb(37, 37, 37);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}



.spSO{
  position: absolute;
  right: 9vw;
  font-size: 1.3vw;
  line-height: 1.8vw;
  letter-spacing: 0.07vw;
  word-spacing: 0.05vw;
  top: 20vw;
  width: 30vw;
  text-align: justify;
  color: rgb(37, 37, 37);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}







.divBtnAcc{
  /* border: 2px solid black; */
  width: 90%;
  left: 4vw;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 45vw;
  z-index: 500;
}

.divBtnAcc button{
  font-size: 1.7vw;
  border-radius: 50%;
  padding: 0.2vw 0.8vw;
  border: none;
  background-color: rgba(0, 0, 0, 0.618);
  color: white;
  font-weight: 700;
  transition: all 0.5s ease-in-out;

}


.divBtnAcc button:hover{
  background-color: white;
  color: rgb(62, 61, 61);
  scale: 1.1;
  box-shadow: 0.1vw 0.1vw 0.3vw rgb(189, 183, 183), -0.1vw -0.1vw 0.3vw rgb(198, 194, 194);

}





/**************************************/
/**************************************/
/****************Projet Rif**********************/
.div-Rif{
  display:block;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    /* background-color: #93ffc5; */
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);
    padding-top: 1vw;
    padding-bottom: 1vw;



    background: linear-gradient( 180deg,white,white,  #93ffc5, #93ffc5, rgb(17, 110, 55)
  );

}


.display-Rif{
  display: none;
}


.div-Rif h2{
  font-size: 2.5vw;
  position: relative;
  left: 8vw;
  margin-top: 10vw;
  width: 50vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.div-p-Rif >p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 1vw;
  line-height: 2vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 45vw;
  text-align: justify;
  color: #4b4d4c;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.p2-Rif{
  background-color: yellow;
  padding: 0 1vw;
  color: #000000;
  margin-top: 4vw;
}



.designRes1{
  position: absolute;
  height: 27vw;
  width: 27vw;
  top: 1vw;
  left: 57vw;
}


.designRes3{
  position: absolute;
  height: 33vw;
  width: 70vw;
  top: -3vw;
  left: 30vw;
}




.designRes4{
  position: absolute;
  height: 17vw;
  width: 17vw;
  top: 8vw;
  left: 60vw;
}



.ul-Rif{
  display: flex;
  position: relative;
  /* border: 2px solid black; */
  width: 60vw;
  height: 20vw;
  margin-top: 8vw;
  left: 6vw;
  box-sizing: border-box;
}


.ul-Rif li{
  list-style: none;
  position: relative;
  height: 100%;
  width: 48%;
  margin-right: 2vw;
  transition: all 0.3s ease-in-out;

}


.ul-Rif li:hover{
  scale: 1.1;
}

.ul-Rif li img{
  height: 80%;
  width: 100%;
  border-radius: 30px;
  border: 4px solid green;
  box-sizing: border-box;



}


.ul-Rif li p{
  position: absolute;
  top: 16vw;
  left: 4.1vw;
  font-size: 0.9vw;
  width: 20vw;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #000000;
}


.p4-Rif{
  margin-bottom: 30vw;
}





.div-Slide-Rif{
  border: 2px solid black;
  width: 60vw;
  height: 35vw;
  top: -20vw;
  left: 12vw;
  position: relative;
  overflow: hidden;
  background-color: #635e5e;
  transition: all 0.3s ease-in-out;
  box-shadow: 0.1vw 0.1vw 0.7vw rgb(131, 130, 130), -0.1vw -0.1vw 0.7vw rgb(144, 137, 137);

}


.div-Slide-Rif:hover{
  scale: 1.05;
}


.display-Rif-container{
  height: 100%;
  width: 100%;
  position: relative;
}

#firstImgRif{
  display: block;
}


.display-Rif-container img{
  height: 100%;
  width: 100%;
  position: relative;
  display: none;
}






.imagesRif.pageRif{
  display: block;
  transition: all 1s ease-in-out;
  animation: shifpicRif 0.9s ease-in-out;

}

@keyframes shifpicRif {
  from{
    left: 20vw;
    scale: 1.8;
    opacity: 0;

  }
  to{
    left: 0vw;
    scale: 1;
    opacity: 1;
  }
}




.divBtnRif{
  /* border: 2px solid black; */
  width: 93%;
  left: 3vw;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 88vw;
}

.divBtnRif button{
  font-size: 3vw;
  border-radius: 50%;
  padding: 0vw 1vw 0.3vw 1vw;
  border: none;
  background-color: rgba(0, 0, 0, 0.36);
  color: white;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 0.1vw 0.1vw 0.7vw rgb(131, 130, 130), -0.1vw -0.1vw 0.7vw rgb(144, 137, 137);


}


.divBtnRif button:hover{
  background-color: #000000;
  scale: 1.03;
}




/**************************************/
/**************************************/
/****************Footer**********************/

.total-foot{
  display: none;
}






/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/

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

  body{
    padding: 0 0vw;
    margin: 0vw;
    /* border: 1px solid black; */
    overflow-x: hidden;
}




/***************************************/
/***************************************/
/*****************design du head**********************/

.div-head{
  position: relative;
  height: 120vw;
  width: 100%;
  top: -6vw;
  /* border: 2px solid pink; */
  padding-bottom: 1vw;
  background-color: rgb(17, 110, 55);
}





.img-head {
  position: relative;
  top: 3vw;
  left: 0vw;
  box-shadow: 0.1vw 0.1vw 0.1vw rgb(138, 136, 136);
  border-radius: 50%;
  padding: 2vw;
  background-color: white;
  height: 13vw;
  width: 13vw;

  transition: all 0.5s ease-in-out;
  animation-name: anime-envi1;
  animation-duration: 7s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
  animation-direction: alternate;
}










  /**********************************************************************************************************/

  .lien-sociaux {
    display: block;
    position: absolute;
    left: 30vw;
    top: 8vw;
    width: 30vw;
  }

  .lien-sociaux ul {
    display: flex;
    list-style: none;
   
  }

  .lien-sociaux ul li {
    margin-left: 1vw;
    height: 10vw;
    width: 10vw;
  }

 
 .lien-sociaux ul li img{
  height: 5vw;
  width: 5vw;
 }

  .lien-sociaux ul li:hover {
    scale: 1.1;
  }







  
  /******************************************************/
.div-menu{
  display: none;
}
  /************************************2nd bouton**********************************************************************/
/*************Menu Mobile*****************/


.menuBar{
  display:none ;
    position: absolute;
    z-index: 800;
    background-color: transparent;
    backdrop-filter: blur(9px);
    height: 125vh;
    width: 100%;
    top: 0vw;
    left: 0vw;
    transition: all 0.5s ease-in-out;




    
  
}






.menuBar ul {
  list-style: none;
    display: block;
    position: relative;
    top: 3vw;
    left: 8.5vw;
    /* left: 101vw; */
    width: 75vw;
    height: 105vw;
    background-color: rgba(61, 61, 61, 0.708);
    border: 1px solid white;
    backdrop-filter: blur(12px);
    font-family: garamond;



}



.menuBar ul.display{
  display: block;
  animation: displayMenu 0.3s ease-in-out;

}

@keyframes displayMenu {
  0% {
    opacity: 0;
    scale: 0.5;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}


.menuBar ul li{
  position: relative;
    display: flex;
    margin-top: 4vw;
    left: -7vw;
    width: 108%;
    /* border: 2px solid blue; */
    overflow: hidden;
}



.menuBar ul li a{
  color: rgb(199, 199, 199);
  text-decoration: none;
  border: 2px solid green;
  position: relative;
  height: 105%;
  width: 105%;
  top: -1vw;
  padding-left: 4vw;
  font-size: 4vw;
  font-weight: 600;
  padding-top: 2vw;
  padding-bottom: 1vw;
  border-bottom: 1px solid white;
}


.menuBar ul .li-accueil a{
  position: relative;
  top: 0vw;
  color: rgb(78, 78, 78);
  padding: 2vw 1vw 0.8vw 1vw;
  /* transition: all 0.5s ease-in-out; */
  box-shadow: 0.08vw 0.08vw 0.2vw rgb(130, 130, 130);
  background-color: rgb(255, 255, 255);

} 

#btnDisplayMenu{
  display: block;
  height: 6vw;
  width: 6vw;
  position: absolute;
  right: 4vw;
  top: 11vw;
  z-index: 300;

}

#btnCloseMenu{
  display: block;
  height: 7vw;
  width: 7vw;
  position: relative;
  left: 4vw;
  top: 4vw;
  border: 2px solid rgb(255, 0, 0);
  border-radius: 50px;
  z-index: 100;
}









  
/*******************************************************************************/
/******************TText head************************************/
.div-head h1{
  font-size: 9vw;
  position: relative;
  left: 6vw;
  top: 15vw;
  text-align: center;
  width: 90vw;
  color: white;
  margin-bottom: 13vw;
  font-weight: 900;
  line-height: 9vw;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}




.div-head p{
  position: absolute;
  top: 65vw;
  left: 7vw;
  font-size: 4vw;
  color: white;
  font-weight: 200;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}





 
/*******************************************************************************/
/***************************btnDisplayProjet***************************/


.btnDisplayProjet{
  display: ;
  position: absolute;
  bottom: -0.5vw;
  left: -1vw;
  padding: 0.5vw 1vw;
  border-radius: 10px;
  justify-content: space-between;
  width: 90vw;
  /* border: 2px solid pink; */
  background-color: white;
  z-index: 300;
  padding-left: 4vw;
}


.btnDisplayProjet button{
  font-size: 1.8vw;
  padding: 0.8vw 0.8vw;
  border-radius: 20px;
  border: none;
  margin-top: 0.5vw;
  margin-right: 2vw;

}



.bull{
  position: absolute;
  background-color: rgb(17, 110, 55);
  border-radius: 50%;
  width: 2.3vw;
  height: 2.3vw;
  bottom: -2vw;
  left: 2.2vw;
  transition: all 0.4s ease-in-out;
  z-index: 310;
  display: none;
}




/**************************************/

.imgUP{
  position: fixed;
  bottom: 8vh;
  right: 1vw;
  height: 6vw;
  width: 6vw;
  z-index: 500;
}





/**************************************/
/**************************************/
/****************Projet Rif**********************/
.div-Rif{
  display:block;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    background-color: rgba(122, 154, 170, 0.314);
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);
    padding-top: 1vw;
    padding-bottom: 1vw;

}


.display-Rif{
  display: none;
}


.div-Rif h2{
  font-size: 5vw;
  position: relative;
  left: 8vw;
  margin-top: 10vw;
  width: 50vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.div-p-Rif >p{
  position: relative;
  left: 8vw;
  top: 8vw;
  font-size: 2.7vw;
  line-height: 4.9vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 80vw;
  text-align: justify;
  color: #4b4d4c;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.p2-Rif{
  background-color: yellow;
  padding: 0 1vw;
  color: #000000;
  margin-top: 20vw;
}



.designRes1{
  position: absolute;
  height: 27vw;
  width: 27vw;
  top: 1vw;
  left: 57vw;
}


.designRes3{
  position: absolute;
  height: 33vw;
  width: 70vw;
  top: 5vw;
  left: 50vw;
}


.designRes2{
  position: absolute;
  height:30vw;
  width: 30vw;
  top: 5vw;
  left: 65vw;
}

.designRes4{
  position: absolute;
  height: 17vw;
  width: 17vw;
  top: 17vw;
  left: 60vw;
}



.ul-Rif{
  display: block;
  position: relative;
  /* border: 2px solid black; */
  width: 85vw;
  height: 140vw;
  margin-top: 18vw;
  left: 3vw;
  box-sizing: border-box;
}


.ul-Rif li{
  list-style: none;
  position: relative;
  height: 43%;
  width: 100%;
  margin-right: 0vw;
  margin-bottom: 15vw;
  transition: all 0.3s ease-in-out;

}


.ul-Rif li:hover{
  scale: 1.1;
}

.ul-Rif li img{
  height: 80%;
  width: 100%;
  border-radius: 30px;
  border: 4px solid green;
  box-sizing: border-box;



}


.ul-Rif li p{
  position: absolute;
  top: 50vw;
  left: 3.8vw;
  font-size: 2.4vw;
  width: 70vw;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #000000;
}


.p4-Rif{
  margin-bottom: 30vw;
}





.div-Slide-Rif{
  border: 2px solid black;
  width: 97vw;
  height: 55vw;
  top: -10vw;
  left: 1vw;
  position: relative;
  overflow: hidden;
  background-color: #635e5e;
  transition: all 0.3s ease-in-out;
  box-shadow: 0.1vw 0.1vw 0.7vw rgb(131, 130, 130), -0.1vw -0.1vw 0.7vw rgb(144, 137, 137);

}


.div-Slide-Rif:hover{
  scale: 1.05;
}


.display-Rif-container{
  height: 100%;
  width: 100%;
  position: relative;
}

#firstImgRif{
  display: block;
}


.display-Rif-container img{
  height: 100%;
  width: 100%;
  position: relative;
  display: none;
}






.imagesRif.pageRif{
  display: block;
  transition: all 1s ease-in-out;
  animation: shifpicRif 0.9s ease-in-out;

}

@keyframes shifpicRif {
  from{
    left: 20vw;
    scale: 1.8;
    opacity: 0;

  }
  to{
    left: 0vw;
    scale: 1;
    opacity: 1;
  }
}




.divBtnRif{
  /* border: 2px solid black; */
  width: 93%;
  left: 3vw;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 296vw;
  z-index: 200;
}

.divBtnRif button{
  font-size: 5vw;
  border-radius: 30%;
  padding: 1vw 1vw 0.3vw 1vw;
  border: none;
  background-color: rgba(0, 0, 0, 0.36);
  color: white;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 0.1vw 0.1vw 0.7vw rgb(131, 130, 130), -0.1vw -0.1vw 0.7vw rgb(144, 137, 137);


}


.divBtnRif button:hover{
  background-color: #000000;
  scale: 1.03;
}




/**************************************/
/**************************************/
/****************ACC**********************/

.div-acc{
  display:  ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
   background-color:  rgba(122, 154, 170, 0.314);
    overflow: hidden;
    top: 0vw;
    padding-top: 1vw;
    padding-bottom: 15vw;
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);

}


.display-Acc{
  display: none;
}

.div-acc h2{
  font-size: 5vw;
  position: relative;
  left: 8vw;
  margin-top: 20vw;
  width: 40vw;
  font-weight: 700;
  color: rgb(195, 96, 96);
  line-height: 5vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.div-acc p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 2.7vw;
  line-height: 5vw;
  word-spacing: 0.05vw;
  letter-spacing: 0.09vw;
  width: 83vw;
  text-align: justify;
  color: #4b4d4c;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}


.p2-acc{
  margin-bottom: 5vw;
}


/**************************************/
/***************.div-ul-acc***********************/

.div-ul-acc{
  position: relative;
  left: 0;
  /* border: 2px solid rgb(0, 255, 68); */
  top: 30vw;
  height: 270vw;
  margin-bottom: 20vw;
  background-color: rgb(17, 110, 56) ;

}


.div-ul-acc ul{
  position: relative;
  width: 100%;
  height: 100%;
}

.div-ul-acc ul li{
  position: relative;
  list-style: none;
  height: 100%;
  width: 100%;
  display: none;
}

#firstImgAcc{
  display: block;
}


.slideBlockAcc.pageAcc{
  display: block;
  transition: all 1s ease-in-out;
  animation: shifpicAcc 0.9s ease-in-out;

}

@keyframes shifpicAcc {
  from{
    left: 20vw;
    scale: 1.8;
    opacity: 0;

  }
  to{
    left: 0vw;
    scale: 1;
    opacity: 1;
  }
}

.div-ul-acc ul li img{
  height: 60vw;
  rotate: -5deg;
  width: 50%;
  position: relative;
  top: 30vw;
  left: 0;
  border: 2px solid orange;

}

.div-ul-acc ul li p{
  position: absolute;
  top: -8vw;
  left: -7vw;
  padding-left: 2vw;
  font-weight: 700;
  text-transform: uppercase;
  font-style: italic;
  border-bottom: 5px solid rgb(207, 66, 66);
  width: 105%;
  color: rgb(182, 68, 68);


}
.div-ul-acc ul li span{
  position: absolute;
  font-size: 2.8vw;
  right: 0;
  left: -1vw;
  line-height: 5vw;
  letter-spacing: 0.07vw;
  word-spacing: 0.07vw;
  top: 130vw;
  width: 90vw;
  text-align: justify;
  color: white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}








.divBtnAcc{
  /* border: 2px solid black; */
  width: 90%;
  left: 5vw;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 130vw;
  z-index: 200;
}

.divBtnAcc button{
  font-size: 6vw;
  border-radius: 30%;
  padding: 0vw 0vw;
  width: 7vw;
  height: 8vw;
  border: none;
  background-color: rgba(0, 0, 0, 0.618);
  color: white;
  font-weight: 700;
  transition: all 0.5s ease-in-out;

}


.divBtnAcc button:hover{
  background-color: white;
  color: rgb(62, 61, 61);
  scale: 1.1;
  box-shadow: 0.1vw 0.1vw 0.3vw rgb(189, 183, 183), -0.1vw -0.1vw 0.3vw rgb(198, 194, 194);

}





/**************************************/
/**************************************/
/****************Saped**********************/

.div-saped{
  display:  ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    background-color: rgb(255, 255, 255);
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);
    padding-bottom: 38vw;
    padding-top: 1vw;

}



.display-Saped{
  display: none;
}

.div-saped h1{
  font-size: 6vw;
  position: relative;
  left: 8vw;
  margin-top: 20vw;
  width: 70vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}



.div-saped p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 2.7vw;
  line-height: 5vw;
  word-spacing: 0.03vw;
  letter-spacing: 0.07vw;
  width: 84vw;
  margin-top: 10vw;
  color: #4b4d4c;
  text-align: justify;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}




.div-img2-saped{
  height: 91vw;
  width: 60%;
  position: relative;
  left: 39vw;
  top: 15vw;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
  margin-bottom: 15vw;
  border: 7px solid orange;


}


.slide-saped{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #969797;
}

.img1-saped{
  height: 100%;
  width: 100%;
  border-radius: 0;
  display: none;
}



.slide-saped .img1-saped.zapSaped {
  display: block;
  transition: all 2s ease-in-out;
  animation: SLideSaped 0.6s ease-in-out;
}

@keyframes SLideSaped {
  from{
    left: -20vw;
    scale: 0.7;
  }
  to{
    left: 0;
    scale: 1;
  }
}



/*********div-img3-saped**************/

.div-img3-saped{
  height: 50vw;
  width: 37%;
  position: absolute;
  left: 1vw;
  top: 120vw;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
  border: 7px solid green;

}


.slide3-saped{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img3-saped{
  height: 100%;
  width: 100%;
  border-radius: 0;
}





/*********div-img4-saped**************/

.div-img4-saped{
  height: 50vw;
  width: 37%;
  position: absolute;
  left: 1vw;
  top: 171vw;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
  border: 7px solid green;

}


.slide2-saped{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img2-saped{
  height: 100%;
  width: 100%;
  border-radius: 0;
}





/**************************************/
/**************************************/
/****************Resilience Climatique**********************/

.div-Res{
  display: ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    padding-top: 1vw;
    padding-bottom: 1vw;
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);

    background-color: rgba(122, 154, 170, 0.314);

}



.display-Res{
  display: none;
}


.div-Res h2{
  font-size: 6vw;
  position: relative;
  left: 8vw;
  margin-top: 15vw;
  width: 60vw;
  color: green;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.div-Res p{
  position: relative;
  left: 8vw;
  top: 4vw;
  font-size: 2.7vw;
  line-height: 5vw;
  word-spacing: 0.07vw;
  letter-spacing: 0.09vw;
  width: 85vw;
  color: #4b4d4c;
  text-align: justify;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.div-img-Res{
  overflow: hidden;
  height: 60vw;
  width: 96%;
  position: relative;
  left: 2vw;
  top: 20vw;
  margin-bottom: 50vw;
  box-shadow: 0.1vw 0.1vw 1vw rgb(255, 255, 255), -0.1vw -0.1vw 1vw rgb(255, 255, 255);

}


.slide-Res .img-Res.zapRes {
  display: block;
  transition: all 2s ease-in-out;
  animation: lislide 1s ease-in-out;
}

@keyframes lislide {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



.slide-Res{
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}


.img-Res{
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 0;
  display: none ;
}






/**************************************/
/**************************************/
/****************Neo Industry**********************/



.div-neo{
  display: none ;
    position: relative;
    /* border: 2px solid blue; */
    height: max-content;
    overflow: hidden;
    top: 0vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    box-shadow: 0.1vw 0.1vw 0.3vw rgb(133, 133, 133), -0.1vw -0.1vw 0.3vw rgb(156, 156, 156);
    background-color: rgba(255, 255, 255, 0.314);

}

/* .display-Neo{
  display: none;
} */

.div-neo h1{
  font-size: 6vw;
  position: relative;
  left: 8vw;
  margin-top: 15vw;
  width: 60vw;
  line-height: 7.5vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.div-neo img{
  border-radius: 30%;
  position: absolute;
  top: 30vw;
  right: 2vw;
  height: 25vw;
  width: 25vw;
}

.div-neo p{
  position: relative;
  left: 8vw;
  top: 13vw;
  font-size: 2.7vw;
  line-height: 5vw;
  word-spacing: 0.07vw;
  letter-spacing: 0.07vw;
  width: 85vw;
  text-align: justify;
  color: #4b4d4c;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.sp-neo{
  color: rgb(148, 68, 3);
}

.sp-sen{
  color: green;
}

.sp-sap{
  color: rgb(9, 79, 170);
  font-weight: 700;
}


strong{
  color: rgb(255, 51, 0);
}



#containerNeo{
  height: 70vw;
  width: 96%;
  position: relative;
  left: 4vw;
  margin-bottom: 50vw;
  
}


#firstImgNeo{
display: block;
}



.img-Neo.pageNeo{
  display: block;
  transition: all 1s ease-in-out;
  animation: shifpicNeo 0.9s ease-in-out;

}

@keyframes shifpicNeo {
  from{
    left: 20vw;
    scale: 1.8;
    opacity: 0;

  }
  to{
    left: 0vw;
    scale: 1;
    opacity: 1;
  }
}



.img-Neo{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.img-Neo img{
  height: 100%;
  width: 100%;
  border-radius: 0;
}



#dotNeo span img{
  position: re lative;
  height: 2vw;
  width: 2vw;
  top: 8vw;
  left: 25vw;
  margin-right: 1vw;
}

.div-btn{
  /* border: 1px solid black; */
  position: relative;
  top: 27vw;
  left: 3vw;
  display: flex;
  width: 94%;
  z-index: 200;
  justify-content: space-between;
}










}