body {
  font-family: 'Satoshi', sans-serif;
  background-color: black;
  color: #DBDBDB;
}
.gradient {
  font-weight: 200;
  background: -webkit-linear-gradient(0deg, #fff 80%, #615D62 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.gradient-primary {
  font-weight: 200;
  background: -webkit-linear-gradient(0deg, #00FFDE 80%, #615D62 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.fs-main {
  font-size: 6rem;
  line-height: 6rem;
}

.page-wrapper {
  background-image: url(../img/noise.png);
  background-blend-mode: color-burn;
}

kbd {
  background: #00FFDE !important;
  color: #08010A !important;
}

/* VIDEOS */
#hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative; /* Add position relative to make absolute positioning work */
  background-image: url(../img/home.png);
  background-position: center;
}

/* Fallback background image */
#hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Container styles */
.container {
  position: relative; /* Add position relative to make absolute positioning work */
  z-index: 2; /* Ensure the container appears above the video */
}

/* Video styles */
#video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the video covers the entire container */
  z-index: 1; /* Ensure the video appears below the container */
  opacity: .25;
}

/* shadow */
.shadow-purple {
  -webkit-box-shadow: 0px 2px 22px 0px rgba(0, 255, 221, 0.4); 
  box-shadow: 0px 2px 22px 0px rgba(0, 255, 221, 0.4);
  transition: ease-in-out .5s;
}
.shadow-purple:hover {
  -webkit-box-shadow: 0px 2px 40px 0px rgba(0, 255, 221, 0.4); 
  box-shadow: 0px 2px 40px 0px rgba(0, 255, 221, 0.4);
  transition: ease-in-out .5s;
}


/* ANIMATIONS */
.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-left {
	-webkit-animation: slide-in-left 0.65s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.65s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.rotating {
  animation: rotating 40s linear infinite;
}
.heartbeat {
	-webkit-animation: heartbeat 5s ease-in-out infinite both;
	        animation: heartbeat 5s ease-in-out infinite both;
}
.floating {
  position: relative;
  animation: floatUpDown 7s ease-in-out infinite;
}
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* Adjust the distance as needed */
  }
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
/**
 * ----------------------------------------
 * animation rotating
 * ----------------------------------------
 */
  @keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
/**
 * ----------------------------------------
 * animation flicker-2
 * ----------------------------------------
 */
 @-webkit-keyframes flicker-2 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  45.99% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  46.9% {
    opacity: 0;
  }
  46.91% {
    opacity: 1;
  }
  51.99% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  52.8% {
    opacity: 0;
  }
  52.81% {
    opacity: 1;
  }
}
@keyframes flicker-2 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  45.99% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  46.9% {
    opacity: 0;
  }
  46.91% {
    opacity: 1;
  }
  51.99% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  52.8% {
    opacity: 0;
  }
  52.81% {
    opacity: 1;
  }
}

/* nav */
#menu {
  max-width: 590px;
  background-color: rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 50px;
  border: 1px solid #1C1B1C;
  padding: 0;
  margin-top: 2rem;
}
.navbar-brand {
  width: 120px;
  margin-left: 1rem;
}
img.logo {
  width: 50% !important;
}
a {
    color: #00FFDE;
    text-decoration: none;
    font-weight: 500;
}
a:hover, a.dropdown-item:hover {
    color: #00FFDE !important;
}
.nav-link:hover, .nav-link.active, .nav-link:active {
    color: #00FFDE !important;
    cursor: pointer;
}
.nav-link {
  margin-right: .85rem;
  font-weight: 500;
}
.dropdown-menu {
  top: 10%;
  background-color: rgba(0, 0, 0, .95) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 50px;
  border: 1px solid #1C1B1C;
}

/* BUTTONS */
.btn {
  border-radius: 50px;
  font-weight: 500;
}
.btn-primary {
  --si-btn-color: #000 !important;
  --si-btn-bg: #00FFDE;
  --si-btn-border-color: #00FFDE;
  --si-btn-hover-color: #000;
  --si-btn-hover-bg: #aafff4;
  --si-btn-hover-border-color: #aafff4;
  --si-btn-focus-shadow-rgb: 84, 87, 205;
  --si-btn-active-color: #000;
  --si-btn-active-bg: #00FFDE;
  --si-btn-active-border-color: #00FFDE;
  --si-btn-active-shadow: unset;
  --si-btn-disabled-color: #000;
  --si-btn-disabled-bg: #00FFDE;
  --si-btn-disabled-border-color: #00FFDE;
}
.btn-outline-primary {
  --si-btn-color: #aafff4;
  --si-btn-border-color: #00FFDE;
  --si-btn-hover-color: #aafff4;
  --si-btn-hover-bg: rgba(133, 255, 245, 0.15);
  --si-btn-hover-border-color: #00FFDE;
  --si-btn-focus-shadow-rgb: 99, 102, 241;
  --si-btn-active-color: #aafff4;
  --si-btn-active-bg: #00FFDE;
  --si-btn-active-border-color: #00FFDE;
  --si-btn-active-shadow: unset;
  --si-btn-disabled-color: #515151;
  --si-btn-disabled-bg: transparent;
  --si-btn-disabled-border-color: #00FFDE;
  --si-gradient: none;
}

/* label */
.bg-faded-primary {
  background-color: rgba(143, 67, 167, .35) !important;
  color: #fff !important;
  font-size: 1.15rem;
}

/* texts */
.lead {
  color: #acacac;
  font-size: 1.25rem;
}

/* TOKENOMICS */
.card.bg-purple {
  background-color: rgba(143, 67, 167, .35)  !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  animation: grain 8s steps(10) infinite;
  background-image: url(../images/noise.png);
  background-blend-mode: color-burn;
  border: 1px solid #8F43A7;
}
.active_state {
  color: white !important;
  font-weight: 500;
  /* flicker anim */
  -webkit-animation: flicker-2 2s linear infinite both;
	        animation: flicker-2 2s linear infinite both;
}
.unactive_state {
  text-decoration: line-through;
  color: #4c4c4c !important;
  
}
.vertical-text {
  transform: rotate(-90deg); /* Rotate the text 90 degrees counterclockwise */
  white-space: nowrap; /* to prevent the text from wrapping */
}

/* FOOTER */
.top_footer {
  background-image: linear-gradient(to right, #000, #00FFDE, #000);
  height: 1px;
  padding: .5px 0;
}

.offcanvas-backdrop {
  background-color: transparent !important;
}

@media (min-width: 992px) {
  .offcanvas .offcanvas-body {
    background-image:none !important;
  }
}
@media (max-width: 991px) {
  .navbar-brand img {
    width: 100px;
  }
  #menu {
    max-width: 90% !important;
    transition: ease-in 1s;
  }
  .offcanvas {
    width: 100% !important;
  }
  /* HEROS */
  .bg-mobile {
    background-color: rgba(0, 0, 0, .75) !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid #1C1B1C;
    background-image: url(../images/noise.png);
    background-blend-mode: color-burn;
    border-radius: 20px;
    padding: 1rem;
  }
  .opacity {
    opacity: .5;
  }
  /* mobile */
  .offcanvas-header, .offcanvas-body {
    background-color: rgba(0, 0, 0, 1) !important;
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      background-image: url(../images/noise.png);
      background-blend-mode: color-burn;
      background: transparent;
}
  .offcanvas.offcanvas-end {
    box-shadow: 0 0 5000px black;
  }
}
@media (max-width: 600px) {
  .fs-main {
    font-size: 4rem;
    line-height: 4rem;
  }
  .scroll-content {
    opacity: 1 !important;
  }
  .scroll-right,
  .scroll-left {
            animation: none !important;
  }
}

/* on scroll animations */
.scroll-content {
  opacity: 0;
  z-index: 3;
}

.scroll-content.visible {
  opacity: 1;
}

.scroll-right {
  -webkit-animation: tilt-in-fwd-br 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-br 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scroll-left {
	-webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation .scroll-right
 * ----------------------------------------
 */
 @-webkit-keyframes tilt-in-fwd-br {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
            transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-br {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
            transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation .scroll-left
 * ----------------------------------------
 */
 @-webkit-keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
            transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
            transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}



/****** DASHBOARD *******/
img.logo-dashboard {
  width: 48px !important;
}
/* menu */
#account-menu {
  padding: 2rem;
  background-color: rgba(8, 1, 10, .75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.bubble {
  height: 10px;
  width: 10px;
  border-radius: 50px;
  background-color: #76FFBA;
}
#subMenu .list-inline-item a {
  color: #595959;
}
#subMenu .list-inline-item a.active {
  color: #00FFDE;
}
small {font-size: 50%;}
/* texts */
.text-success {color: #76FFBA !important;}
.text-orange {color: #00FFDE !important;}
.text-light {color: #FFF5DB !important;}
.text-secondary {color: #595959 !important;}

.list-group-item-action.active {
  background-color: #00FFDE;
  color: #000;
  box-shadow: none;
}
.list-group-item-action.active:hover {
  background-color: rgba(99, 102, 241, 0.12);
}
/* card */
.bg-darknight {
  background-color: rgba(8, 1, 10, .75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
/* modal */
[data-bs-theme=dark] .modal:not([data-bs-theme=light]) {
  --si-modal-bg: #08010A;
  --si-modal-border-width: 1px;  
}
.modal-content {box-shadow: 0 0px 35px 10px rgba(143, 67, 167, .5) !important;}
.modal-backdrop {
  --si-backdrop-zindex: 1050;
  --si-backdrop-bg: #000;
  --si-backdrop-opacity: 0.95;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* chevron */
.chevron {
  background-color: transparent;
  border: none;
}
.chevron i {
  font-size: 2rem;
}

@media (min-width: 768px) {
  aside {
    height: 100vh;
  }
}

/* validators */
.item {margin-bottom: 1rem;}

/* alert presale */
.alert-primary {
  color: #76FFBA;
  background-color: rgba(255, 189, 168, 0.1);
  border-color: #00FFDE;
}
.bubble {
  height: 10px;
  width: 10px;
  background-color: #76FFBA;
  border-radius: 50px;
  display: flex;
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}
/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.full-height {
  height: 100%; /* Prend toute la hauteur du conteneur */
}

.full-height > li {
  flex: 1; /* Répartit uniformément la hauteur entre les <li> */
}

ul li h3 {
  font-size: 1.5rem;
  font-weight: 200;
  color: #00FFDE;
}

.sec {
  position: relative;
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  margin-bottom: 5rem;
  border-radius: 20px;
  box-shadow: 0 0 106px #00ffdd2a;
}

#banner {
  background: url(../img/home.png) no-repeat;
  background-clip: content-box;
  background-position: center;
  background-size: cover;
}

.sec .p-4 {
  position: relative;
  z-index: 2; /* Places the text over the video */
  color: white;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%); /* Centers the text vertically */
}

.sec .p-4 kbd {
  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background for the kbd element */
  color: white;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* token ca */
.tokenCA {
  background-color: rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 50px;
  padding: .5rem .5rem .5rem 1rem;
  margin-top: 2rem;
}

@media (max-width: 992px) {
  .tokenCA {
    flex-direction: column;
    gap: 2;
    padding: 1rem;
    border-radius: 15px;
  }
  .tokenCA .btn {
    width: 100%;
    margin-top: 1rem;
  }
}

code {
  color: #00ffe552 !important;
  padding: 0 !important;
  font-size: .825rem !important;
}