@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Flex:opsz,wght@8..144,100;8..144,200;8..144,300;8..144,400;8..144,500;8..144,600;8..144,700;8..144,800;8..144,900;8..144,1000&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Train+One&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Roboto Flex, sans-serif;
}

body{
  background-color: #000000;
  animation: fade 2000ms ease-in-out;
}

::-webkit-scrollbar {
  width: 5px;
  height: 15px;
}
::-webkit-scrollbar-track-piece  {
  background-color: #000;
}
::-webkit-scrollbar-thumb:vertical {
  height: 1px;
  background: linear-gradient(90deg, #4A5CFF 0.8%, rgba(250, 0, 255, 0.56) 98.71%);
}

h1{
  text-align: center;
  text-wrap: balance;
  font-size: 96px;
  line-height: 75%;
  width: 50%;
  background: -webkit-linear-gradient(-90deg, rgba(255,255,255,1) 10%, rgba(0,0,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3{
  line-height: 48px;
  letter-spacing: 6px;
  font-size: 64px;
  background: linear-gradient(90deg, #4A5CFF 0.08%, rgba(250, 0, 255, 0.56) 48.71%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h4{
  text-shadow: 0 14px 98px rgba(74, 212, 255, 0.65);
  font-size: 64px;
  letter-spacing: 4px;
  line-height: 75.259%; /* 48.165px */

  background: linear-gradient(90deg, #4AD4FF 0.11%, rgba(134, 168, 255, 0.56) 96.19%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a{
  z-index: 20;
}

.footer p{
  line-height: 275.259%; /* 55.052px */
  letter-spacing: 15px;
  position: relative;
}

.footer p:after{
  content: '';
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, #4A5CFF 0.08%, rgba(250, 0, 255, 0.56) 48.71%);
  position: absolute;
}

.footer h5{
  line-height: 75.259%; /* 96.331px */
  letter-spacing: 8px;
}

hr{
  background: linear-gradient(90deg, #4A5CFF 0.08%, rgba(250, 0, 255, 0.56) 48.71%);
  border: none;
}

.hero p{
  letter-spacing: 15px;
}

.gradient-border {
  --borderGradientColor1: #4A5CFF; /* Couleur du dégradé */
  --borderGradientColor2: rgba(250, 0, 255, 0.56); /* Couleur du dégradé */
  background: linear-gradient(to left, var(--borderGradientColor1), var(--borderGradientColor2));
  padding: 3px;
}

.pointFollow {
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Ajout de l'effet de néon avec une ombre portée */
  left: 0;
  top: 0;
  animation: follow 30s linear infinite;
  background: white;
  filter: blur(2px);
}


.card > div:nth-child(1) .items {
  border-radius: 0 0 0 153px;
}

.card > div:nth-child(2) {
  border-radius: 153px 0 0 0!important;
  transform: translateY(15%);
}

.card > div:nth-child(2) .items {
  border-radius: 153px 0 0 0!important;
}

.card > div:nth-child(3) .items {
  border-radius: 0 0 153px 0;
}


.letterSpacing{
  line-height: 275.259%; /* 41.289px */
  letter-spacing: 11px;
}

@keyframes fade {
  from{
    opacity: 0.1;
  }
  to{
    opacity: 1;
  }
}

@keyframes follow {
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: calc(100% - 0px);
    top: 0;
  }
  50% {
    left: calc(100% - 0px);
    top: calc(100% - 0px);
  }
  75% {
    left: 0;
    top: calc(100% - 0px);
  }
  100% {
    left: 0;
    top: 0;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0); /* Début de l'animation */
  }
  100% {
    transform: translateX(-100%); /* Fin de l'animation (déplacement d'une largeur d'écran) */
  }
}

#particles-js{
  z-index: 10;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
}

.list-container{
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
}

.list-container .list{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  z-index: 20;
}

.list-container .list:nth-child(2){
  flex-direction: row-reverse;
}

.list .item{
  min-width: 400px;
  max-width: 500px;

  min-height: 300px;
  max-height: 400px;
  transition: 300ms ease-in-out;
}

.list .item img{
  border-radius: 30px;
}

.list .item:hover{
  transform: rotate(-2deg);
}

.list .item:hover img{
  transform: scale(1.1);
}

.list .item img{
  object-fit: cover;
  object-position: center;
  transition: 300ms ease-in-out;

  width: 100%;
  height: 100%;
}


@media screen and (max-width: 1280px) {
  .hero p{
    letter-spacing: 5px;
  }
}
@media screen and (max-width: 1024px) {
  .hero p{
    letter-spacing: 5px;
  }
  h3{
    font-size: 45px;
  }
}

@media screen and (max-width: 425px) {
  h1{
    font-size: 60px;
  }
  h4{
    font-size: 50px;
  }
  h3{
    font-size: 35px;
    line-height: 28px;
    letter-spacing: 4px;
  }
}

@media screen and (max-width: 320px) {
  h1{
    font-size: 60px;
  }
  h4{
    font-size: 50px;
  }
}