/*body{*/
     
/*    -webkit-justify-content: center;  Pour centrer horizontalement */
/*    justify-content: center;*/
/*    align-items: center;*/
/*    display: block;*/
/*    height:fit-content;*/
/*}*/

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --dark-color: hsl(100%, 100%, 9%);
  /* --light-color: hsl(0, 95%, 98%); */
  --light-color: hsl(var(--hue), 95%, 98%);
  --base: hsl(50%, 95%, 50%);
  --complimentary1: hsl(50%, 95%, 50%);
  --complimentary2: hsl(60%, 95%, 50%);

  --font-family: "Poppins", system-ui;

  --bg-gradient: linear-gradient(
    to bottom,
    
yellow, 
    red,
    white    
    
  );

  --glow-hue: 222deg;
  --shadow-hue: 180deg;
  --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
  );
}


@property --shimmer {
  syntax: "<angle>";
  inherits: false;
  initial-value: 33deg;
}

@keyframes shimmer {
  0% {
      --shimmer: 0deg;
  }
  100% {
      --shimmer: 360deg;
  }
}

@keyframes shine {
  0% {
      opacity: 0;
  }
  15% {
      opacity: 1;
  }
  55% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
@keyframes text {
  0% {
      background-position: 100% center;
  }    
  100% {
      background-position: -100% center;
  }    
}

button {
  color: var(--bg);
  font-weight: 600;
  /*     background-image: linear-gradient(90deg, #fcecfe, #fbf6e7, #e6fcf5); */
  background-image: linear-gradient(
        315deg,
        #ffc4ec -10%,
        #efdbfd 50%,
        #ffedd6 110%
    )!important;
  padding: .8em 1.4em;
  position: relative;
  isolation: isolate;
  box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 -10px 20px -10px hsla(var(--shadow-hue),10%,90%,95%);
  border-radius: 0.66em;
  scale: 1;
  transition: all var(--spring-duration) var(--spring-easing);
  padding: 15%!important;
  padding-left: 0!important;
}

button:hover:not(:active),
button.active {
  transition-duration: calc(var(--spring-duration)*0.5);
  scale: 1.2;
  box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 0 0 transparent;
}
button:active {
  scale: 1.1;
  transition-duration: calc(var(--spring-duration)*0.5);
}

.shimmer {
  position: absolute;
  inset: -40px;
  border-radius: inherit;
  mask-image: conic-gradient(
      from var(--shimmer, 0deg),
      transparent 0%,
      transparent 10%,
      black 36%,
      black 45%,
      transparent 50%,
      transparent 60%,
      black 85%,
      black 95%,
      transparent 100%
  );
  mask-size: cover;
  mix-blend-mode: plus-lighter;
  animation: shimmer 1s linear infinite both;
}
button:hover .shimmer::before,
button:hover .shimmer::after,
button.active .shimmer::before,
button.active .shimmer::after {
  opacity: 1;
  animation: shine 1.2s ease-in 1 forwards;
}
.shimmer::before,
.shimmer::after {
  transition: all 0.5s ease;
  opacity: 0;
  content: "";
  border-radius: inherit;
  position: absolute;
  mix-blend-mode: color;
  inset: 40px;
  pointer-events: none;
}
.shimmer::before {
  box-shadow: 0 0 3px 2px hsl(var(--glow-hue) 20% 95%),
      0 0 7px 4px hsl(var(--glow-hue) 20% 80%),
      0 0 13px 4px hsl(var(--glow-hue) 50% 70%),
      0 0 25px 5px hsl(var(--glow-hue) 100% 70%);
  z-index: -1;
}

.shimmer::after {
  box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
      inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
      inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
  z-index: 2;
}

button .text {
  color: darkred;
  background-clip: text;
  background-color: var(--bg);
  background-image: linear-gradient(120deg, transparent, hsla(var(--glow-hue),100%,80%,0.66) 40%, hsla(var(--glow-hue),100%,90%,.9) 50%, transparent 52%);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: center 200%;
}

.text {
  padding: 10%;
}

button:hover .text,
button.active .text {
  animation: text .66s ease-in 1 both;
}




    /* hsl(var(--hue), 95%, 99%),
    hsl(var(--hue), 95%, 84%) */

body{
    display:block!important;
    font-family: var(--font-family);
  /* color: var(--dark-color); */
  /* background: var(--bg-gradient); */
  z-index: -1;


  /*background: linear-gradient(-45deg, #fae49b, #a78642, #9e2015, #6e6667, #ffffff);*/
  background: black;
	background-size: 400% 400%;
	animation: gradient 3s ease infinite;
	height: 450vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.accueil_bouton_white_div{
    margin:auto;
    margin-top:5%;
}
/*.accueil_bouton_white{*/
/*    margin-left: 15px;*/
/*}*/

/* LOADER STARTS HERE */

.loader {
  position:fixed;
  top: 50%;
  left: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
  
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* LOADER ENDS HERE */

.orb-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/*Enlever le old for use*/
.overlay_canvas_old {
  width: 100%;
  /* max-width: 1140px;
  max-height: 640px; */
  /* padding: 8rem 6rem; */
  /* display: flex; */
  align-items: center;
  background: rgba(255, 255, 255, 0.375)!important;
  box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1) !important;
  border-radius: 2rem!important;
  border: 1px solid rgba(255, 255, 255, 0.125)!important;
}

/*Enlever le old for use*/
.overlay_canvas_roadmap_old {
  width: 100%;
  height: 100%;
  /* max-width: 1140px;
  max-height: 640px; */
  /* padding: 8rem 6rem; */
  /* display: flex; */
  align-items: center;
  box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1) !important;
  border-radius: 2rem!important;
  border: 1px solid rgba(255, 255, 255, 0.125)!important;
}


.overlay__btn {
  width: 50%;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-color);
  background: var(--dark-color);
  border: none;
  border-radius: 0.5rem;
  transition: transform 150ms ease;
  outline-color: hsl(var(--hue), 95%, 50%);
}

.overlay__btn:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.overlay__btn--transparent {
  background: transparent;
  color: var(--dark-color);
  border: 2px solid var(--dark-color);
  border-width: 2px;
  margin-right: 0.75rem;
}

@media (prefers-contrast: high) {
  .orb-canvas {
    display: none;
  }
}

.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/* CHANGE HEADER HERE */
#saita_header{
  background-color: black;
  position: fixed;
  z-index: 10000;
  width: 100%;
  /* rgb(0 0 0 / var(--tw-bg-opacity)); */
} 

.nav_design{
    background-color: black;
    /*border-radius: 17%;*/
}

.nav_design:hover{
    background-color : darkslategrey;
    border-radius: 17%;
}
.svg_punch_accueil{
    width: 37%;
}

@media screen and (max-width: 700px) {
  .svg_punch_accueil {
    width: 95%;
  }
}



.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998; 
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color:white;
  overflow-wrap: break-word;
  z-index: 9999; /* Ensure the popup is on top of other elements */
}

@media screen and (max-width: 1000px) {
  .popup-content {
    width: 100%; /* Set the width to 100% for smaller screens */
    /*max-height: 95%; /* Limit maximum height of the popup */
  }
  .tuto_pick{
    min-width: 90%;
}
}

/* height: fit-content; */
  /*max-height: 80%; /* Limit maximum height of the popup */

.popup-content {
  max-height: 80%;
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  background-color : darkslategrey;
  width: 60%;
  overflow-wrap: break-word; 
  margin: auto; /* Center the popup vertically and horizontally */
  margin-top: 7%;
  padding: 20px;
  border-radius: 3%;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}


/*
.popup-content:hover{
   height: auto; 
}
*/

.close {
  float: right;
  cursor: pointer;
}
.close:hover{
  background-color: white;
  /* opacity: 0.2; */
  color: darkslategrey;
  border-radius: 100%;
}

.tuto_pick{
  width: 50%;
}

/*
.tuto_pick:hover{
   height: auto; Maintain aspect ratio 
  cursor: zoom-in;  Change cursor to indicate zoom capability 
  transition: transform 0.3s ease; Smooth transition for zoom effect 
}
*/


/* SIDE ROCKET STARTS HERE */

/*#side_rocket_ALL_SECTIONS{*/
/*   margin-top: 100px;*/
/*}*/


@media screen and (max-width: 750px) {
  /* CSS rules to apply when the media feature matches */
  #ALL_SECTIONS{
    width: 85%;
    padding: 0.4rem!important;
  }
}



#ALL_SECTIONS{
  width: 87%;
  margin: auto;
  place-items: center;
  padding: 2rem;
  padding-top:0;
  background: transparent !important;  
  /*transparent*/
  /*margin-top: 80px;*/

}

#side_rocket_ALL_SECTIONS::before{

  visibility: visible;
  
}

#side_rocket{
  /* margin: 10; */
  /*height: 100%; */
  background: #1a032b;
  /* overflow: hidden; */
  perspective: 10rem;
  /* z-index: 100; */
  opacity: 0.25;
  /* width: 80%;   HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEre */
  width: 16.67%;
}

#section_1_saitamoon{
  position: relative;
}

#section_1_saitamoon::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/saitamoon-dark.webp');  */
  /* background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  opacity: 0.5;
  visibility: visible;
}

#section_b_saitamoon{
  position: relative;
  display:inline-block;
}

/*Enlever le old for use*/
.container_roadmap_old{
  padding: 0 !important;
  padding-right: 0 !important;
}

.img_roadmap{
border-radius: 5%;
min-width:100%;
}

.a_image_rocket_side{
   margin-right: 70%;
}

.a_image_rocket_side_tel{
  display: none;
  margin-bottom: 1200%;
}

@media (max-width: 768px){

  .a_image_rocket_side{
    display: none;
  }
  .a_image_rocket_side_tel{
    display: block;
    /* max-width: 30%; */
  }
}


.a_image_bar_ver{
  display: none;
}

@media (max-width: 768px){

  .a_image_bar_hor{
    display: none;
  }
  .a_image_bar_ver{
    display: block;
    /* max-width: 30%; */
  }
}



.img_roadmap_rocket{
  max-width: 125%;
  /* max-height: 80%; */
}

@media (max-width: 768px){

  .roadmap_card{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
}

.roadmap_card{
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: row;
  background-image:  url('images/Fond.png') ;
  border-radius: 2em;
}

@media (max-width: 768px){

  .roadmap_card_container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
}

.roadmap_card_container{
  display: block;
  /* flex-wrap: wrap; */
  flex-direction: column;
  background-image:  url('images/Fond.png') ;
  border-radius: 2em;
}

#section_b_saitamoon::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/_Roadmap\ Timeline\ Brainstorm.jpg');  
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  /* opacity: 0.5; */
  visibility: visible;
  border-radius: inherit;
  /* background: none !important; */
}

#accueil_text_div{
 /*background-color: black;*/
 /*border-radius: 20%;*/
 /*box-shadow: 0 0 1em rgba(0,0,0, .2);*/
 /*border: 1px solid rgba(255, 255, 255, .2);*/
 
  text-align: justify;
  color: #ffffff;
}

#accueil_text{
  width: 90%;
  margin:auto;
  top: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
}


#values{
  position: relative;
}

#values::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/saitamoon-punch.gif');  */
  /* background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  opacity: 0.5;
  visibility: visible;
}

.bg-grey-saita{
  background-color: darkslategrey;
}

.values_text_div{
  background-color: darkslategrey;
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  width: fit-content;
  margin: auto;
  padding: 1%;
 }
 
 
 

.section_3_flex{
    width: 30%;
    margin: auto;
}

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

.section_3_flex{
    width: 80%;
    margin: auto;
}
}
   

.section_3_saitamoon_tel{
  display: none!important;
}

@media (max-width: 768px){

  .section_3_saitamoon{
    display: none!important;
  }
  .section_3_saitamoon_tel{
    display: flex!important;
    /* max-width: 30%; */
  }
}

.section_3_saitamoon_tel{
  position: relative;
}

.section_3_saitamoon_tel::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/saitamoon-sun.webp'); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  opacity: 0.5;
  visibility: visible;
}


 

.section_3_saitamoon{
  position: relative;
}

.section_3_saitamoon::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/saitamoon-sun.webp'); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  opacity: 0.5;
  visibility: visible;
}

.img-elem-carousel{
 /* to keep images properties 
  width: auto;
  height: auto;
  max-width: 100%; 
  max-height: 100%; 
  */
  width:100%;
  height:100%;
  background: #f59e0b;
  border-radius: 100%;
  /* background-image: url(static_svg/blockchain-development-icon.svg); */
}

.carousel_meme {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-inner_meme {
  display: flex;
  transition: transform 0.5s ease;
}

.slide_meme {
  flex: 0 0 100%; /* Chaque diapositive prend toute la largeur du conteneur */
}

.img-elem-carousel2{
  width:100%;
  height:100%;
  background: #f59e0b;
  border-radius: 100%;
}

.carousel_meme2 {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-inner_meme2 {
  display: flex;
  transition: transform 0.5s ease;
}

.slide_meme2 {
  flex: 0 0 100%; /* Chaque diapositive prend toute la largeur du conteneur */
}


.button_meme_div{
   display: flex; 
  /*display: ruby-text;*/
  /*justify-content: inherit;*/
  justify-content: space-around;
  position:relative;
  padding: 5%;
}

.prev_meme{
  margin-right: 100%;
   /*width: 50%;*/
}
.prev_meme2{
  margin-right: 100%;
   /*width: 50%;*/
}

.services_wrap_img{
 /* content: '';
 height: 40%;

 background-image: url("images/saitamoon_design_2.gif"); */
 /* background-size: cover;
 background-repeat: no-repeat; */
 /* position: absolute; 
  z-index: -1; */
  border-radius: 40px;
  width: 80%;
}

/* .services_wrap_img_event{

   border-radius: 40px;
   width: 80%;
 } */

.services_wrap_img_tel{

   border-radius: 40px;
 }

#Services_Button{
  padding: 0!important;
  padding-right: 5%!important;
  padding-left: 2%!important;
}

.services_game_tel{
  display: none;
}

@media (max-width: 768px){

  .services_game{
    display: none;
  }
  .services_game_tel{
    display: flex;
    /* max-width: 30%; */
  }
}

.services_event_tel{
  display: none;
}

@media (max-width: 768px){

  .services_event{
    display: none;
  }
  .services_event_tel{
    display: flex;
    /* max-width: 30%; */
  }
}

.section_4_saitamoon{
  position: relative;
}

.section_4_saitamoon::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/saitamoon-bull.webp'); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  opacity: 0.5;
  visibility: visible;
}

.goal_text_div{
  /*background-color: darkslategrey;*/
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  width: fit-content;
  margin: auto;
  padding: 1%;
 }

 /* #goal_text{
  width: 90%;
  margin:auto;
  top: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
} */

/* #services_soon{
  background-color: transparent;
} */

.join_icon{
margin: 5%;
transform: scale(2.0);
}

#join{
  font-weight: bold;
  color: black;
}

#section_5_saitamoon{
  position: relative;
}

#section_5_saitamoon::before{
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url('images/saitamoon-contact.webp'); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute; 
  z-index: -1;
  
  opacity: 0.5;
  visibility: visible;
  border-radius: inherit;
}

.contact_text_div{
  /*background-color:#ffffff;
  border-radius: 35%;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  width: 60%;
  margin: auto;
  padding-bottom: 2%; */
  font-weight: bold;
  color: #9e2015;
 }
 
 @media only screen and (max-width: 1280px){

   .contact_text_div{
    padding-bottom: 7%;
 }
} 


 .contact_text{
  background-color: black;
  border-radius: 15%;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
 }
 .contact_text:hover{
  background-color: red;
  color: #06092d;
  font-weight: 900;
  font-weight: bold;
 }

#canvas {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  overflow: hidden;
}


.fire-wrapper {
  left: 50%;
  position: absolute;
  top: 50%;
  padding-top: 2700px;
  transform-origin: center center;
  transform: translate(-50%, 0) rotate3d(1, 0, 0, 60deg);
  width: 3.5rem;
  /* margin-bottom: 500px; */
  
}

.fire {
  animation: whoosh 1s linear infinite both;
  width: 100%;
  /* padding-bottom: 200px;  TO ADD SPEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEED*/
  padding-bottom: 5px;
}

@keyframes whoosh {
  from {
    transform: translateY(-25%);
  }
  to {
    transform: translateY(0);
  }
}

.rain {
  position: absolute;
  width: 1rem;
  height: 10rem;
  background: #ffffff;
  border-radius: 20%;
  opacity: 0.2;
  z-index: -1;
}

.drop {
  width: 1rem;
  height: 7rem;
  background: #ffffff;
  position: absolute;
  border-radius: 20%;
  opacity: 0.2;
}

.rain1 {
  left: 5rem;
  top: 2rem;
  animation: raining 2s linear infinite both;
}

.rain2 {
  left: 15rem;
  top: 10rem;
  animation: raining 3s linear infinite both;
}

.drop2 {
  top: 12rem;
  animation: raining 4s linear infinite both -2s;
}

.rain3 {
  left: 5rem;
  top: 35rem;
  animation: raining 3s linear infinite both;
}

.rain4 {
  right: 23rem;
  top: 6rem;
  animation: raining 4s linear infinite both;
}

.rain5 {
  left: 16rem;
  top: 47rem;
  animation: raining 3s linear infinite both -3s;
}

.drop5 {
  top: -6rem;
  animation: raining 2s linear infinite both;
}

.rain6 {
  right: 10rem;
  top: 34rem;
  animation: raining 3s linear infinite both;
}

.rain7 {
  left: 34rem;
  top: 10rem;
  animation: raining 2s linear infinite both -5s;
}

.rain8 {
  right: 19rem;
  top: 40rem;
  animation: raining 3s linear infinite both;
}

.drop8 {
  top: -7rem;
  animation: raining 4s linear infinite both -6s;
}

.rain9 {
  right: 5rem;
  top: 15.5rem;
  animation: raining 3s linear infinite both;
}

.rain10 {
  left: 20rem;
  top: -4rem;
  animation: raining 2s linear infinite both -3s;
}

.drop11 {
  right: 17rem;
  top: 20rem;
  animation: raining 3s linear infinite both;
}

.drop12 {
  right: 15rem;
  top: 50rem;
  animation: raining 4s linear infinite both -1s;
}

@keyframes raining {
  from {
    transform: translateY(-1200px);
  }
  to {
    transform: translateY(869px);
  }
}

/* SIDE ROCKET ENDS HERE */


/* Style all font awesome icons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Twitter */
  .fa-twitter {
    background: transparent;
    color: white;
  }

  /* instagram */
  .fa-instagram {
    background: transparent;
    color: white;
  }

  /* linkedin */
  .fa-linkedin {
    background: transparent;
    color: white;
  }

  /* githun */
  .fa-github {
    background: transparent;
    color: white;
  }

  #accueil_OTAKU_image:hover {
    
    transform: scale(1.1);
    opacity: 0.45;
  }
  

#accueil_OTAKU_image{
  border-radius: 70%;
 
  transform: scale(0.85);
}

#svg_logo{
  font-family: 'Russo One', sans-serif;
	/* position: absolute;  */
	width: 100%; height: 100%;
}

#svg_logo text {
	text-transform: uppercase;
	animation: stroke2 5s infinite;
	stroke-width: 2;
	stroke: yellow;
	font-size: 80px;
}

@keyframes stroke2 {
	0%   {
		fill: rgba(72,138,20,0); stroke: yellow;
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
  10%  {fill: rgba(72,138,20,0); stroke: rgba(72,138,204,1); }
	30%  {fill: rgba(72,138,20,0); stroke: red; }
	50%  {fill: rgba(72,138,204,1); stroke: red; stroke-width: 3; }
	/*60% {*/
	/*	fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0); */
	/*	stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;*/
	/*}*/
	60% {
    text-shadow: 0 0 10px #f4dc03;
    fill: rgb(233 211 7);
    stroke: rgba(54,95,160,0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
    }
}

#svg_accueil {
	font-family: 'Russo One', sans-serif;
	/* position: absolute;  */
	width: 100%; height: 100%;
}
#svg_accueil text {
	text-transform: uppercase;
	animation: stroke 5s infinite alternate;
	stroke-width: 2;
	stroke: red;
	font-size: 80px;
}
@keyframes stroke {
	0%   {
		fill: rgba(72,138,20,0); stroke: red;
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(72,138,20,0); stroke: red; }
	80%  {fill: rgba(72,138,20,0); stroke: red; stroke-width: 3; }
	/*100% {*/
	/*	fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0); */
	/*	stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;*/
	/*}*/
	100% {
    text-shadow: 0 0 10px #f4dc03;
    fill: rgb(233 211 7);
    stroke: rgba(54,95,160,0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
    }
}
/* rgba(54,95,160,1) */


 svg .svg-elem-1 {
  fill: transparent;
  -webkit-transition: fill 1.2s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.8s;
          transition: fill 1.2s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.8s;
}

svg.active .svg-elem-1 {
  fill: rgb(0, 0, 0);
}

.img-elem-1{
  width: 100%;
  height: 100%;
  /* width: 50%;
  height: 50%; */
  background: #f59e0b;
  border-radius: 100%;
  /* background-image: url(static_svg/blockchain-development-icon.svg); */
}

.img-elem-2{
  width: 100%;
  height: 50%;
  background: #f59e0b;
  border-radius: 50%;
  transform: scale(0.8);
  /* background-image: url(static_svg/blockchain-development-icon.svg); */
}


/* .img-elem-3{
  width: 70%;
  height: 50%;
  background: #f59e0b;
  border-radius: 100%;
  /* transform: scale(0.8); */
  /* background-image: url(static_svg/blockchain-development-icon.svg); 
} */

.img-elem-3{
  width: 100%;
  height: 100%;
  background: #f59e0b;
  border-radius: 100%;
  /* transform: scale(0.8); */
  /* background-image: url(static_svg/blockchain-development-icon.svg); */
}

.svg-container-blockchain {
  max-width: 17%;
  /*height:30%; */
  animation: skewAnimation 2s linear infinite; /* Rotate the SVG */
}
.svg-container-create {
  animation: circle 3.5s linear infinite; /* Rotate the SVG */
}

.svg-container-community {
  animation: spin 3s linear infinite;/* alternate; /* Apply skew animation */
}
.svg-container-market {
  animation: translateAnimation 2s linear infinite alternate; /* Apply skew animation */
}



@media only screen and (max-width: 418px){
  /* Ajoutez vos styles CSS ici */



  .svg-container-blockchain {
    width: 100%;
    /* height: 60%; */
    height: fit-content;
    transform: scale(2.0);
    animation: skewAnimation 2s linear infinite; /* Rotate the SVG */
  }

  .svg-container-create {
    width: 100%;
    height: fit-content;
    transform: scale(2.0);
    animation: circle 3.5s linear infinite; /* Rotate the SVG */
  }

  .svg-container-community {
    width: 100%;
    /* height: 30%; */
    height: fit-content;
    transform: scale(2.0);
    animation: spin 3s linear infinite;/* alternate; /* Apply skew animation */
  }
  .svg-container-market {
    width: 100%;
    height: fit-content;
    transform: scale(2.0);
    animation: translateAnimation 2s linear infinite alternate; /* Apply skew animation */
  }

  
}

.img-elem-4{
  width: 100%;
  height: 50%;
  background: #f59e0b;
  border-radius: 50%;
  /* transform: scale(0.8); */
  /* background-image: url(static_svg/blockchain-development-icon.svg); */
}


.svg-container-blockchain:hover{
  animation: linear infinite; /* Rotate the SVG */
}


@keyframes skewAnimation {
  0% {
    transform: skewX(0deg) skewY(0deg);
  }
  25% {
    transform: skewX(20deg) skewY(10deg);
  }
  50% {
      transform: skewX(0deg) skewY(10deg);
  }
  75% {
    transform: skewX(-20deg) skewY(0deg);
  }
  100% {
      transform: skewX(0deg) skewY(-10deg);
  }
  
}

/* @media only screen and (max-width: 400px){

.svg-container-create {
  width: 100%;
  /* height: 100%; 
  height: fit-content;
  animation: circle 3.5s linear infinite; /* Rotate the SVG 
}
} */


.svg-container-create:hover{
  animation: linear infinite; /* Rotate the SVG */
}


@keyframes circle {
  0% { clip-path: circle(100%); }
  25% { clip-path: circle(75%); }
  50% { clip-path: circle(0%); }
  75% { clip-path: circle(75%); }
  100% { clip-path: circle(100%); }
}



/* .svg-container-community {
  width: 100%;
  height: 100%;
  animation: spin 3s linear infinite;/* alternate; /* Apply skew animation 
} */

.svg-container-community:hover{
  animation: linear infinite; /* Rotate the SVG */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  /* 50% { transform: rotate(360deg); } */
  100% { transform: rotate(360deg); }
}


/* @media only screen and (max-width: 400px){
.svg-container-market {
  width: 100%;
  height: 100%;
  height: fit-content;
  animation: translateAnimation 2s linear infinite alternate; /* Apply skew animation 
}
} */

.svg-container-market:hover{
  animation: linear infinite; /* Rotate the SVG */
}


@keyframes translateAnimation {
  0% {
      transform: translate(0, -50%); /* Start position */
  }
  25% {
    transform: translate(0, 0%); /* Intermediate position */
  }
  50% {
      transform: translate(0, 25%); /* Intermediate position */
  }
  75% {
    transform: translate(0, 50%); /* Intermediate position */
  }
  100% {
      transform: translate(0, 75%); /* End position */
  }
}



canvas {
  display: block;
}


.rocket_spline{
 width: 100%;
 height: fit-content; 
}


 #blockchain_block{
  /* background: linear-gradient(#e66465, #9198e5);
  background: black;
  transform: skewX(0deg) skewY(+10deg);
    
    z-index: 5; */
    opacity: 1;  
}


  /* background: linear-gradient(#e66465, #9198e5);
  transform: skewX(0deg) skewY(+9deg);
  border-radius: 20% !important; */
  /* #blockchain_sous_block{
  width: fit-content;

}  */

/* @keyframes skewAnimation {
  0% {
    transform: skewX(0deg) skewY(0deg);
  }
  25% {
    transform: skewX(20deg) skewY(10deg);
  }
  50% {
      transform: skewX(0deg) skewY(10deg);
  }
  75% {
    transform: skewX(-20deg) skewY(0deg);
  }
  100% {
      transform: skewX(0deg) skewY(-10deg);
  }
  
} */






/* ------------ VARIABLES ------------ */
/* :root{
  
  --font: 'Courier New', Courier, monospace;

  
  --color: #ffffffb9;
  --bg-color: #06092d;
  --gradient-color: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);


} */




.body_card{
  font-family: var(--font);
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  /* background-color: var(--bg-color); */
  /* background: var(--bg-color); */
  /* overflow: hidden; */
}

.body_card::before{
  content: '';
  /* width: 22em;
  height: 22em; */
  /* background-image: var(--gradient-color); */
  border-radius: 50%;

  position: absolute;
  transform: translate(-200px, -100px);
}

.body_card::after{
  content: '';
  /* width: 15em;
  height: 15em; */
  /* background-image: var(--gradient-color); */
  border-radius: 50%;

  position: absolute;
  /* transform: translate(150px, 100px); */
}

.card_section{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  /* box-shadow: 0 1em 0 0 rgba(0,0,0, .2); */
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
  /* overflow: auto; */
  /* transform: translateY(1em);  */

}

.card_section2{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  /* box-shadow: 0 1em 0 0 rgba(0,0,0, .2); */
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
  /* overflow: auto; */
  /* transform: translateY(1em);  */

}

.card_section3{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  /* box-shadow: 0 1em 0 0 rgba(0,0,0, .2); */
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;

}

.card_section4{

  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  /* display: flex;
  flex-direction: column; */
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;

}

.card_section5{

  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  /* display: flex;
  flex-direction: column; */
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;

}

.card_section6{

  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  /* display: flex;
  flex-direction: column; */
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
  /* background-color: #a78642; */


}

.card_section7{

  background-color: transparent;
  border-radius: 2em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  /* display: flex;
  flex-direction: column; */
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
  /* background-color: #a78642; */

}

.card_section8{

  width:100%;
  background-color: transparent;
  border-radius: 0;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  /* display: flex;
  flex-direction: column; */
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
  /* background-color:#ffffff; */

  background-image: url('images/saitamoon-contact.webp'); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}


/* ----------- CARD ------------- */
.card{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color: darkslategrey;
  /*background-color: #d7c200db;*/
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  /* box-shadow: 0 1em 0 0 rgba(0,0,0, .2); */
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
  /* overflow: auto; */
  /* transform: translateY(1em);  */

}

.card2{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color: darkslategrey;
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
}

.card3{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color: darkslategrey;
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
}

.card4{
  /* width: 30em;
  height: 18em; */
  /* background-color: rgba(255, 255, 255, .2); */
  background-color:darkslategrey;
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0,0,0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  color: var(--color);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  z-index: 1;

  overflow: hidden;
}

.objective_all_block{
  width: 90%;
  /* height: fit-content; */
  margin: auto;
  /* font-size: 2rem; */
  font-weight: 500;
  /* background-color: rgba(255, 255, 255, .2); */
  /*background-color: darkslategrey;*/

  position: relative;
  top: 1em;
  margin-bottom: 1em;
  
}


.text_services{
    margin-top: 10%;
}

.fa-telegram:before {
    content: "\f2c6";
    color: white!important;
}