body{
  
  z-index: 4000;
  position: relative;
  margin: 0;
  
  overflow: hidden;
  display: flex;
  
  height: 100vh;
  width: 100%;
  

}


.container{
  position: relative;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;

}






header{
  font-family: 'Montserrat', sans-serif;
  z-index: 100000;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  min-height: 1%;
  font-size: 1rem;
  
  background: linear-gradient(#000000, #ffffff00);
  mix-blend-mode: luminosity;
  
  animation: apparition2 0.5s;
}




header ul{
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  width: 100%;
  
}

header ul li{
  
 margin: 0 1em;
 padding: 1em;
}

header ul li a{
  position: relative;
  text-decoration: none;
  font-family: 'Comic Sans MS', cursive;
  font-size: 20px;
  color: white;
  font-weight: bold;

}


header ul li a::after{
  z-index: 5000;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: rgb(255, 255, 255);
  transform: scale(0);
  transition: transform 0.3s;
}
  
header ul li a:hover::after{
  transform: scale(1);
}







@keyframes apparition2
{
  0%
  {
    opacity: 0;
    

  }
  50%
  {
    opacity: 0;
    

  }
  100%
  {
    opacity: 1;
    

  }
}


.arrow1 {
  position: absolute;
  z-index: 8000;

  

  

  

  top: 78.5%;
  left: 47.6%;
  font-size: 100px;
  color: white;

  animation: arrowdown 2s infinite;
}



@keyframes arrowdown {
  0% { 
      opacity: 1;
  }
  50% { 
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}







section{
  
  position: relative;
  display: flex;
  height: 100vh;
  scroll-snap-align: start;
  flex-flow: column wrap;
  
}




section.un{
  z-index: 4000;
  height: 100vh;
  background: url(background1.jpg);

}


section.deux{
  height: 100vh;
  background: url(background2.jpg);

}

section.trois{
  height: 100vh;
  background: url(background4.jpg);
}

section.quatre{
  height: 100vh;
  background: url(background3.jpg);
}

section.cinq{
  height: 100vh;
  background: url(background5.jpg);
}

section.six{
  height: 15vh;
  background: black
}






section .text1{
  font-family: 'Comic Sans MS', cursive;
  color: white;
  
  z-index: 6000;
  position: relative;
  font-size: 15vh;

  top: 20%;
  margin-left: auto;
  margin-right: auto;

  border: white 5px solid;
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.418);
  animation: apparition2 1s ease-out;
  
}









section .contactimage{
  
  position: relative;
  z-index: 6000;
  object-fit: cover;
  
  border-radius: 10%;
  top: 40%;
  left: 30%;
  max-height: 50%;
  max-width: 20%;
  box-shadow: black 5px -5px 10px ;
}


section .contactimage:hover{
  position: relative;
  z-index: 6000;
  
  
  border-radius: 10%;
  top: 38%;
  left: 30%;
  max-height: 52%;
  max-width: 22%;
  transition: 0.5s all;
}





section .contacttitle{
  z-index: 6000;
  position: absolute;
  font-size: 10vh;

  top: 36%;
  left:58%;
  color: white;
}

section .contactsoustitle{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 61%;
  left:69%;
  color: white;
}

section .contactsoustitle2{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 66%;
  left:58%;
  color: white;
}
  

section .contactsoustitle3{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 71%;
  left:65.5%;
  color: white;
}


.backgroundrectanglecontact{
  position: absolute;
  border-radius: 30px;
  top: 38%;
  left: 57%;
	width: 41%;
	height: 45vh;
	background:rgba(36, 36, 36, 0.582);
  box-shadow: rgba(0, 0, 0, 0.603) 5px -5px 10px ;
}






section .nousimage{
  position: relative;
  z-index: 6000;
  object-fit: 10%;
  
  object-fit: cover;
  border-radius: 10%;
  top: 15%;
  left: 3%;
  max-height: 50%;
  max-width: 20%;
  box-shadow: black 5px -5px 10px ;
}


section .nousimage:hover{

  position: relative;
  z-index: 6000;
  border-radius: 10%;
  top: 14%;
  left: 2%;
  max-height: 52%;
  max-width: 22%;
  transition: 0.5s all;
}





section .noustitle{
  

  z-index: 6000;
  position: absolute;
  font-size: 10vh;
  
  top: 11%;
  left:25%;
  
  color: white;
  
}

section .noussoustitle{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 36%;
  left:25%;
  color: white;
}

section .noussoustitle2{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 41%;
  left:25%;
  color: white;
}
  

section .noussoustitle3{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 46%;
  left:25%;
  color: white;
}

section .noussoustitle4{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 50%;
  left:25%;
  color: white;
}


.backgroundrectanglenous{
  position: absolute;
  border-radius: 30px;
  top: 14%;
  left: 2%;
	width:50%;
	height:52vh;
	background:rgba(36, 36, 36, 0.466);
  box-shadow: rgba(0, 0, 0, 0.603) 5px -5px 10px ;
}

















section .journéédecouvertetitle{
  

  z-index: 6000;
  position: absolute;
  font-size: 10vh;

  top: 11%;
  left:27%;
  
  color: white;
  
}

section .journéédecouvertesoustitle{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 36%;
  left:27%;
  color: white;
}

section .journéédecouvertesoustitle2{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 41%;
  left:27%;
  color: white;
}
  

section .journéédecouvertesoustitle3{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 46%;
  left:27%;
  color: white;
}

section .journéédecouvertesoustitle4{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 50%;
  left:27%;
  color: white;
}



.backgroundrectanglejournéédecouverte{
  position: absolute;
  border-radius: 30px;
  top: 16%;
  left: 6%;
	width:70%;
	height:71vh;
	background:rgba(36, 36, 36, 0.582);
  box-shadow: rgba(0, 0, 0, 0.603) 5px -5px 10px ;
}




.journéédecouverteslider{
  position: relative;
  z-index: 6000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 7%;
  
  box-shadow: black 5px -5px 10px ;
  
  height: 69vh;
  width: 18.526%;

  animation: slide 25s infinite;
  
}


@keyframes slide{
  0%{
    background: url(journeedecouverte1.png);
    background-size: 100%;
  }
  20%{
    background: url(journeedecouverte2.png);
    background-size: 100%;
  }
  40%{
    background: url(journeedecouverte3.jpeg);
    background-size: 100%;
  }
  60%{
    background: url(journeedecouverte4.jpeg);
    background-size: 100%;
  }
  80%{
    background: url(journeedecouverte5.jpeg);
    background-size: 100%;
  }
  100%{
    background: url(journeedecouverte1.png);
    background-size: 100%;
  }

}










section .stage1title{
  

  z-index: 6000;
  position: absolute;
  font-size: 8vh;

  top: 11%;
  left:24%;
  
  color: white;
  
}

section .stage1soustitle{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 36%;
  left:24%;
  color: white;
}

section .stage1soustitle2{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 41%;
  left:24%;
  color: white;
}
  

section .stage1soustitle3{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 46%;
  left:24%;
  color: white;
}

section .stage1soustitle4{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 50%;
  left:24%;
  color: white;
}



.backgroundrectanglestage1{
  position: absolute;
  border-radius: 30px;
  top: 16%;
  left: 3%;
	width: 47%;
	height: 71vh;
	background:rgba(36, 36, 36, 0.582);
  box-shadow: rgba(0, 0, 0, 0.603) 5px -5px 10px ;
}


.stage1contact{
  position: absolute;
  z-index: 5500;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 3.9%;
  
  
  background: rgba(0, 0, 0, 0.568);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  
  height: 69vh;
  width: 18.526%;
}

.stage1contacttext{

  z-index: 5600;
  position: absolute;
  font-size: 8vh;

  top: 38%;
  left: 6%;
  
  color: white;
  border: white 5px solid;
  padding: 1px 9px;
  border-radius: 10px;
}


.sousstage1image{
  position: absolute;
  z-index: 5000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 4%;
  
  background: url(stage1.png);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  opacity: 1;
  
  height: 69vh;
  width: 18.526%;
}


.stage1image{
  position: relative;
  z-index: 6000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 4%;
  
  background: url(stage1.png);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  opacity: 1;
  transition: opacity .8s;
  
  height: 69vh;
  width: 18.526%;
}

.stage1image:hover{
  position: relative;
  z-index: 6000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 4%;
  
  background: url(stage1.png);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  
  opacity: 0;
  
  height: 69vh;
  width: 18.526%;
}









section .stage2title{
  

  z-index: 6000;
  position: absolute;
  font-size: 8vh;

  top: 11%;
  left: 74%;
  
  color: white;
  
}

section .stage2soustitle{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 36%;
  left:74%;
  color: white;
}

section .stage2soustitle2{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 41%;
  left:74%;
  color: white;
}
  

section .stage2soustitle3{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 46%;
  left:74%;
  color: white;
}

section .stage2soustitle4{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 50%;
  left:74%;
  color: white;
}



.backgroundrectanglestage2{
  position: absolute;
  border-radius: 30px;
  top: 16%;
  left: 53%;
	width:43.5%;
	height:71vh;
	background:rgba(36, 36, 36, 0.582);
  box-shadow: rgba(0, 0, 0, 0.603) 5px -5px 10px ;
}


.stage2contact{
  position: absolute;
  z-index: 5500;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 53.9%;
  
  
  background: rgba(0, 0, 0, 0.568);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  
  height: 69vh;
  width: 18.526%;
}

.stage2contacttext{

  z-index: 5600;
  position: absolute;
  font-size: 8vh;

  top: 38%;
  left: 56.5%;
  
  color: white;
  border: white 5px solid;
  padding: 1px 9px;
  border-radius: 10px;
}


.sousstage2image{
  position: absolute;
  z-index: 5000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 53.9%;
  
  background: url(journeedecouverte2.png);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  opacity: 1;
  
  height: 69vh;
  width: 18.526%;
}


.stage2image{
  position: absolute;
  z-index: 6000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 53.9%;
  
  background: url(journeedecouverte2.png);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  opacity: 1;
  transition: opacity .8s;
  
  height: 69vh;
  width: 18.526%;
}

.stage2image:hover{
  position: absolute;
  z-index: 6000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 53.9%;
  
  background: url(journeedecouverte2.png);
  background-size: 100%;
  box-shadow: black 5px -5px 10px ;
  
  opacity: 0;
  
  height: 69vh;
  width: 18.526%;
}










section .meditationanimaletitle{
  

  z-index: 6000;
  position: absolute;
  font-size: 10vh;

  top: 11%;
  right:27%;
  
  color: white;
  
}

section .meditationanimalesoustitle{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 36%;
  right:27%;
  color: white;
}

section .meditationanimalesoustitle2{
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 41%;
  right:27%;
  color: white;
}
  

section .meditationanimalesoustitle3{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 46%;
  right:27%;
  color: white;
}

section .meditationanimalesoustitle4{
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;

  top: 51%;
  right:27%;
  color: white;
}



.backgroundrectanglemeditationanimale{
  position: absolute;
  border-radius: 30px;
  top: 16%;
  right: 6%;
	width:70%;
	height:71vh;
	background:rgba(36, 36, 36, 0.582);
  box-shadow: rgba(0, 0, 0, 0.603) 5px -5px 10px ;
}




.meditationanimaleslider{
  position: relative;
  z-index: 6000;
  
  object-fit: fill;
  border-radius: 10%;
  top: 17vh;
  left: 74.6%;
  
  box-shadow: black 5px -5px 10px ;
  
  height: 69vh;
  width: 18.526%;

  animation: meditationanimaleslide 15s infinite;
  
}


@keyframes meditationanimaleslide{
  0%{
    background: url(méditationanimale3.png);
    background-size: 100%;
  }
  33%{
    background: url(méditationanimale1.png);
    background-size: 100%;
  }
  66%{
    background: url(méditationanimale2.png);
    background-size: 100%;
  }

  100%{
    background: url(méditationanimale3.png);
    background-size: 100%;
  }


}

















.gotopbtn{
  z-index: 10000;
  position: fixed;
  width: 50px;
  height: 50px;
  background: #1616166e;
  border-radius: 20%;
  bottom: 40px;
  right: 50px;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
  
  
}


.gotopbtn:hover{
  z-index: 10000;
  position: fixed;
  width: 50px;
  height: 50px;
  background: #1616166e;
  border-radius: 20%;
  bottom: 40px;
  right: 50px;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:rgb(212, 212, 212);
  font-size: 35px;
  animation: arrowup 1s infinite;
}



@keyframes arrowup
{
  0%
  {
    
    transform:   translate(0px, -10px);

  }
  50%
  {
    
    transform:   translate(0px, 0px);
    

  }
  100%
  {
    
    transform:   translate(0px, -10px);

  }
}






.map{
  z-index: 10000;
  position: fixed;
  width: 50px;
  height: 50px;
  background: #1616166e;
  border-radius: 20%;
  bottom: 40px;
  left: 50px;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
  
}



.map:hover{
  z-index: 10000;
  position: fixed;
  width: 50px;
  height: 50px;
  background: #1616166e;
  border-radius: 20%;
  bottom: 40px;
  right: 50px;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:rgb(212, 212, 212);
  font-size: 35px;
  animation: mapmove 1s infinite;
  
}

.maptext{
  font-family: 'Comic Sans MS', cursive;
  color: white;
  
  z-index: 6000;
  position: fixed;
  font-size: 3vh;;

  bottom: 43px;
  left: 110px;
  

  
  padding: 5px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.418);
  
  
}






@keyframes mapmove
{
  0%
  {
    
    transform:   rotate(0deg);
    
  }
  50%
  {
    
    transform:   rotate(180deg);
    

  }
  100%
  {
    
    transform:   rotate(360deg);

  }
}






.backgroundfooter{
  position: absolute;
  
  top: 90%;

	width:100%;
	height:10vh;
	background: linear-gradient(#00000000, #000000);
  
}








.footertitle{
  font-family: 'Comic Sans MS', cursive;
  color: white;
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;;

  top: -2vh;
  left: 48.2%;
}


.footertext1{
  font-family: 'Comic Sans MS', cursive;
  color: white;
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;;
 
  bottom: 23px;
  left: 28%;
}

.footertext2{
  font-family: 'Comic Sans MS', cursive;
  color: white;
  
  z-index: 6000;
  position: absolute;
  font-size: 3vh;;
 
  bottom: 23px;
  left: 68%;
}




.footerphone{
  z-index: 10000;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #1616166e;
  border-radius: 20%;
  bottom: 40px;
  left: 23.5%;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
}

.footerphone:hover{
  z-index: 10000;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #1616166e;
  border-radius: 20%;
  bottom: 40px;
  left: 23.5%;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
  animation: mapmove 1s infinite;
}



.footerenvelope{
  z-index: 10000;
  position: absolute;
  width: 50px;
  height: 50px;
  
  bottom: 40px;
  left: 63.5%;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
}


.footerenvelope:hover{
  z-index: 10000;
  position: absolute;
  width: 50px;
  height: 50px;
  
  bottom: 40px;
  left: 63.5%;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
  animation: mapmove 1s infinite;
}




.footerfacebook{
  z-index: 10000;
  position: absolute;
  width: 50px;
  height: 50px;
  
  
  top: 5vh;
  left: 51.5%;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
}

.footerfacebook:hover{
  z-index: 10000;
  position: absolute;
  width: 50px;
  height: 50px;
  
  
  top: 5vh;
  left: 51.5%;
  
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 35px;
  animation: mapmove 1s infinite;
}



.footerdev{
  font-family: 'Comic Sans MS', cursive;
  color: white;
  
  z-index: 6000;
  position: absolute;
  font-size: 1.5vh;;

  top: 10.5vh;
  left: 50%;
}













::-webkit-scrollbar{
  width: 15px;
}

::-webkit-scrollbar-track{
  background-color: white;
}

::-webkit-scrollbar-thumb{
  background-color: rgb(189, 189, 189);
  border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover{
  background-color: rgb(141, 141, 141);
}