@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Kavoon&family=Lilita+One&family=Oi&family=Rubik+Vinyl&display=swap');
*, *:before, *:after{
  margin:0;
  padding: 0;

}

body{
    margin: 0;
   
    background-color: rgb(255, 255, 255);
}
::-webkit-scrollbar{
  width: 8px;
  background-color: #ffffff;
  border-radius: 10px;
 
}
::-webkit-scrollbar-track{
   background:#ffffff;
   border-radius: 10px;
 
}
::-webkit-scrollbar-thumb{
   background: #000000;
   border-radius: 10px;
   
}
.container-loading{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 30px;


}
.circle0{

 position: relative;
 
  width: 300px;
  height: 300px;
  border: 5px solid #FFFFFF;
  box-shadow: 0 0 0 5px #000000,0 0 20px 10px #000000;
  border-radius: 50%;
  overflow: hidden;
}
.wave{
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  border-radius: 50%;
  box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.5);
}
.wave:before,
.wave:after{
  content:'';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 200%;
  background: black;
  transform: translate(-50%, -75%);
}
.wave:before{
  border-radius: 45%;
  background: rgb(255, 255, 255);
  animation: animate 5s linear infinite;
}
.wave:after{
  border-radius: 40%;
  background: rgba(226, 224, 224, 0.418);
  animation: animate 10s linear infinite;
}

@keyframes animate{
  0%{
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -75%) rotate(360deg);
  }
}


#pourcentage{
    z-index: 1;
    color: rgb(0, 0, 0);
    position: absolute;
    left: 50%;
    top: 30%;
    font-size: 2rem;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-family: "Bagel Fat One", serif;
  }
  #LODING{
    font-family: "Bagel Fat One", serif;

    
  }
  #particles-js{
    width:100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
   
  }
  #particle-js{
    width: 100%;
    height:300px;
    background: #ffffff;
    overflow: hidden;
    z-index: 2;
    position: absolute;
    opacity: 0;
 top: 200px;

 
  }




  .logos{
    overflow: hidden;
    padding: 2px 0;
    background-color: rgba(255, 255, 255, 0.829);
      white-space: nowrap;
      width: 100%;
      margin: 0 auto;
      border-top: solid 5px black;
      border-bottom:solid 5px black ;
 
      position: absolute;
      bottom: 30px;
      left: 0;
      transform: rotate(5deg);
}
.logos-slide , .logos-slide1, .logos-slide11{
    display: inline-block;
 
    animation: 10s slide infinite linear;
  
}

.logos-slide p , .logos-slide1 p{
    display: inline-block;
    margin: 0 40px;
    font-size: 40px;
    font-family: 'kavoon';
    
}
.logos-slide11 img{
  display: inline-block;
  margin: 0 35px;
  height: 100px ;
  width: 80px;
  mix-blend-mode: color-burn;
  border: 3px solid black;
  border-radius: 10px;
  padding: 10px;
  background-color: #000000;
  background-image: url("https://www.transparenttextures.com/patterns/basketball.png");
 
  
}
.logos:hover .logos-slide{
    animation-play-state: paused;
}
.logos::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 12%;
    height: 100%;
   background: linear-gradient(to left,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.829));
  
    content: "";  
    z-index: 555;

}
.logos::after{
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
   background: linear-gradient(to right,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.863));
  
    content: ""; 
     z-index: 555;

}


@keyframes slide {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
    
}
.contact{
  display: flex;
  flex-flow: column;
  height: 300px;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 25%;
  right: 25px;
  padding: 10px;
  z-index: 3;
}
 
.contact a{
  color: black;
  font-size: 40px;
  font-weight: 900;
  text-decoration: none;

  display: inline-block;
  animation: mov1 linear 3s infinite;
  position: relative;

}
.contact a::before{
  position: absolute;
  content: '';
  bottom: -22px;
  width: 40px;
  right: -1%;
  height: 15px;
  border-radius: 5px;
  
  background-color: #00000057;
  filter: blur(10px);

}
.contact:hover a{
  animation-play-state: paused;
}
@keyframes mov1{
  0%{
    transform: translateY(-8px);
    

  }
  50%{
    transform:translateY(8px);
    

  }
  100%{
    transform:translateY(-8px);

  }
}
.containerdezz3{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}
.containerzz3{
  display: flex;
 height: 90%;
 gap: 40px;
 justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-flow: column;
}
.containerzz3 h1{
  font-family: 'kavoon';
  font-weight: 900;
  color: #f8f8f8;
  text-shadow: 1px 1px 0px black,-1px -1px 0px black,2px 2px 0px black,-2px -2px 0px black;
}



.logos1{
  overflow: hidden;
  padding: 2px 0;
  background-color: rgba(255, 255, 255, 0.829);
    white-space: nowrap;
    width: 100%;
    margin: 0 auto;
  

  
    bottom: 30px;
  
    transform: rotate(0deg);
}

.logos2{
  overflow: hidden;
  padding: 2px 0;
  background-color: rgba(255, 255, 255, 0.829);
    white-space: nowrap;
    width: 100%;
    margin: 0 auto;
 

  
    bottom: 30px;
  
    transform: rotate(0deg);
}

.logos3{
  overflow: hidden;
  padding: 2px 0;
  background-color: rgba(255, 255, 255, 0.829);
    white-space: nowrap;
    width: 100%;
    margin: 0 auto;


  
    bottom: 30px;
  
    transform: rotate(0deg);
}



.logs:hover .logos-slide1,.logs1:hover .logos-slide11{
  animation-play-state: paused;
}
.logs::before{
  position: absolute;
  top: 0;
  left: 0;
  /* width: 12%;
  height: 100%;
 background: linear-gradient(to left,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.829)); */
 width: 100%;
 height: 100%;
 background-color: #000000;

  content: "";  
  z-index: 555;

}
.logsanim::before{
  animation: logsa 2s ease-in-out 500ms forwards;
}
@keyframes logsa  {
 
  0%{
    background-color: #000000;
  

  }
  50%{
    background-color: #000000;
  }
  75%{
    background-color: #000000;
  }
  90%{
    background-color: #000000;

  }

  100%{
     width:12%;
  height: 100%;
 background: linear-gradient(to left,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.829));

  }
  
}

.logs::after{
  position: absolute;
  top: 0;
  right: 0;
  width: 12%;
  height: 100%;
 background: linear-gradient(to right,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.863));

  content: ""; 
   z-index: 555;

}



.logs1::before{
  position: absolute;
  top: 0;
  left: 0;
  width:12%;
  height: 100%;
 background: linear-gradient(to left,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.829));

  content: "";  
  z-index: 555;

}
.logs1::after{
  position: absolute;
  top: 0;
  right: 0;
  /* width: 40%;
  height: 100%;
 background: linear-gradient(to right,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.863)); */
 height: 100%;
 width: 100%;
 background-color: #000000;

  content: ""; 
   z-index: 555;

}
.losgsanim1::after{
  animation: logsa1 2s ease-in-out 500ms forwards;
}
@keyframes logsa1{
  0%{
    background-color: #000000;
  

  }
  50%{
    background-color: #000000;
  }
  75%{
    background-color: #000000;
  }
  90%{
    background-color: #000000;

  }

  100%{
     width: 12%;
  height: 100%;
 background: linear-gradient(to right,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.863));

  }
}









.logos-slide1{
  display: inline-block;

  animation: 30s slide1 infinite linear;

}
.logos-slide11{
  display: inline-block;

  animation: 30s slide11 infinite linear;

}


@keyframes slide1 {
  from{
      transform: translateX(0);
    
  }
  to{
      transform: translateX(-100%);
     
  }
  
}
@keyframes slide11 {
  from{
      transform: translateX(-100%);
     
  }
  to{
      transform: translateX(0%);
    
  }
  
}