* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "milky";
  src: url("../fonts/MilkyNice-Clean.ttf");
}
@font-face {
  font-family: "sun";
  src: url("../css/sun.ttf");
}

:root {
  --font_sun: "sun", sans-serif;
}
:root {
  --font_milky: "milky", sans-serif;
}

html {
  scroll-behavior: smooth;
}
@keyframes spin-earth{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}.animate-spin-earth{animation:spin-earth 30s linear infinite}
@keyframes spin-token{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}.animate-spin-token{animation:spin-token 3s linear infinite}
body{
  font-family: var(--font_sun);
  color: #000;
  /* color: #305473; */
}

/* copy */
.icon.copy_address.active{
  background-color: rgb(0, 151, 0);
}

/* lines */
.snow-cap::before {
  top: 0;
  margin-top: -3rem;
  left: 0;
  background-image: url('../images/top_about.svg');
  background-repeat: repeat-x;
}

.snow-cap::before, .snow-cap-2::before, .snow-cap-3::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 140px;
  z-index: 1; 
}

/* navbar fix */
.menu-list a{ 
  padding: 0 2.3rem;
  height: 45px; 
  text-align: center;

  font-size: 1.3rem;
 

  display: flex;
  align-items: center;
  justify-content: center;

  transition: .3s ease-in-out;

  color: #000; 
  /* color: #BF8C4B; */
}

.menu-list a:hover{
  background-color: #9dadd1;
  color: #fff;
}

.menu-list a.active{
  border: 2px solid #472A1A;
  /* border: 2px solid #BF8C4B; */
}

/* hero */
.shadow_title{
  text-shadow: -1px 0 black, 0 9px black, 1px 0 black, 0 -1px black;
}

.hero .title{
  text-shadow: -1px 0 black, 0 15px black, 1px 0 black, 0 -1px black;
}

.left_right_animation{
  animation: animated 10s linear infinite;
}

@keyframes animated {
  0%,50%,100%{
    transform: translateX(0%);
  }
  20%{
    transform: translateX(15%);
  }
  70%{
    transform: translateX(-15%);
  }
}
.carrousel {
  background-color: #000;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px 0;
  display: flex;
}
.h3 {
  color: #000;
  text-align: center;
  font-size: 18px;
  line-height: 18px;
}

.carrousel_in {
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  overflow: hidden;
  /* Ajouté pour masquer le débordement */
  display: flex;
  /* Ajouté pour centrer le contenu */
  align-items: center;
  /* Ajouté pour centrer verticalement */
}

.carrousel_text {
  display: inline-block;
  animation: scroll 15s linear infinite forwards;
  white-space: nowrap;
  /* Ajouté pour empêcher le retour à la ligne */
}

.carrousel_text span {
  padding: 0 2rem;
}

.carrousel_text img {
  width: 34px;
  /* Taille de l'image */
  height: 34px;
  /* Taille de l'image */
  margin-right: 48px;
  /* Espace entre l'image et le texte */
}
@keyframes scroll {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}



.wobble{
  animation: wobble 1s linear infinite;
}


@keyframes wobble {
  0% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
  15% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg)
  }
  30% {
    -webkit-transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
    -ms-transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg)
  }
  45% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg)
  }
  60% {
    -webkit-transform: translate3d(3%, 0, 0) rotate3d(0, 0, 1, 2deg);
    -ms-transform: translate3d(3%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(3%, 0, 0) rotate3d(0, 0, 1, 2deg)
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
  }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble
}



/* ecosystem */
.union_hover:hover img:nth-child(2){
  rotate: -10deg;
}

/* tokens */
.token._1 ,
.token._3 {
  rotate: 10deg;
}
 
.token._1:hover,
.token._2:hover,
.token._3:hover,
.token._4:hover{
  rotate: 0deg;
}

.token._2 ,
.token._4 {
  rotate: -10deg;
}

.token._1 .icon div{
  background: radial-gradient(circle, rgba(136, 237, 136, 1) 0%, rgba(0, 198, 0, 1) 100%); 
}
.token._2 .icon div{
  background:radial-gradient(circle, rgba(45, 182, 186, 1) 0%, rgba(20, 137, 140, 1) 100%); 
}
.token._3 .icon div{
  background: radial-gradient(circle, rgba(94, 105, 147, 1) 0%, rgba(31, 41, 82, 1) 100%);
}
.token._4 .icon div{
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(230, 209, 209, 1) 100%);
}

.token:hover{
  rotate: 0 !important;
  cursor: pointer;
}

.token{
  animation: token 3s linear infinite;
}

@keyframes token {
  0%, 100% {
    transform: translateY(0);
  } 
  50% {
      transform: translateY(-15px);
  }
}

.how{
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


/* footer */
footer{
  background: linear-gradient(180deg, #a77d44 22%, rgba(255, 255, 255, 1) 100%);
}

footer a,
footer p{
  font-family: "Montserrat", sans-serif;
}

.text_about_footer,
footer .link h3,
footer .link a{
  text-shadow: .3px .5px 0 white;
  font-weight: 600;
  transition: .2s;
}

footer .link a:hover{
  color: white;
}

footer .social a:hover{
  scale: 1.1;
}

.faq_text{
  height: 0;
}

.faq.active{
  height: auto;
  padding-bottom: 1rem;
}

.faq.active .faq_text{
  height: auto;
}

.faq.active .icon{
  rotate: 180deg; 
}

/* animation */
.title h2 span{
  animation: text_title 3s linear infinite;
}

.title h2 span:nth-child(1),
.title h2 span:nth-child(3),
.title h2 span:nth-child(5),
.title h2 span:nth-child(7),
.title h2 span:nth-child(9){
  rotate: -10deg;
}

.title h2 span:nth-child(2),
.title h2 span:nth-child(4),
.title h2 span:nth-child(6),
.title h2 span:nth-child(8){
  rotate: 10deg;
}

.title h2 span:nth-child(1){
  animation-delay: .2s;
}
.title h2 span:nth-child(2){
  animation-delay: .4s;
}
.title h2 span:nth-child(3){
  animation-delay: .1s;
}
.title h2 span:nth-child(4){
  animation-delay: .6s;
}
.title h2 span:nth-child(5){
  animation-delay: .5s;
}
.title h2 span:nth-child(6){
  animation-delay: .3s;
}
.title h2 span:nth-child(7){
  animation-delay: .5s;
}
.title h2 span:nth-child(8){
  animation-delay: .7s;
}

@keyframes text_title {
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-5%);
  }
}


/* union */
.union{
  animation: union 2s linear infinite;
  rotate: -10deg;
}

.union:hover{
  rotate: 0deg;
}


@keyframes union {
  0%, 100% {
    transform: translateY(0);
}
50% {
    transform: translateY(-15px);
}
}

.zoom_animation{
  animation: zoom_animation 15s linear infinite;
}

@keyframes zoom_animation {
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
}
 

/* media queries */
@media screen and (max-width:500px) {
  .snow-cap::before, .snow-cap-2::before, .snow-cap-3::after { 
    top: -15px;
    margin-top: 0rem;
    background-size: contain;
  }
 
  /* hero */
  .shadow_title{
    text-shadow: -1px 0 black, 0 5px black, 1px 0 black, 0 -1px black;
  }

  .hero .title{
    text-shadow: -1px 0 black, 0 5px black, 1px 0 black, 0 -1px black;
  }

  /* token */
  .token._1 ,
  .token._3 ,
  .token._2 ,
  .token._4 {
     rotate: 0deg;
  }
 
}




/* animation */

.snowflake{ 
  position: absolute;
  width: 0.6vw;
  height: 0.6vw;
  background-color: white;
  border-radius: 50%;
  top: -5vw;
}

.snowflake:nth-child(1) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 82vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(2) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: 3vw;
  left: 32vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(3) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 12vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(4) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 42vw;
  animation: snowfall 4s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(5) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 68vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(6) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 62vw;
  animation: snowfall 4s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(7) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 27vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(9) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 23vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(10) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 66vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(11) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 12vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(12) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 44vw;
  animation: snowfall 5s linear infinite;
  animation-delay: -4s;
}



.snowflake:nth-child(13) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 66vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(14) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 36vw;
  animation: snowfall 6.5s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(15) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 50vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(16) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 39vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(17) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 69vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(18) {
  --size: 0.4vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 67vw;
  animation: snowfall 5s linear infinite;
  animation-delay: -4s;
}


@keyframes snowfall {
  0% {
    /* transform: translate3d(var(--left-ini), 0, 0); */
  }
  100% {
      transform: translate3d(var(--left-end), 190vh, 0);
  }
}

/* animation */
.float_animation{
  animation: float 2s ease-in-out infinite;
}
/* float */
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% { 
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0px);
  }
  }