.indigo, .hover-indigo:hover { 
  color: #1e476e !important;
}

.bg-indigo, .hover-bg-indigo:hover {
  background-color: #1e476e !important;
}

.test {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-mobil {
  display: none !important;
}

.slider-desktop {
  display: block !important;
}
/* Media query for mobile devices */
@media (max-width: 768px) {
  .xx2 {
    width: 50px;
  }
  
  .sss-esction2 {
    min-height: unset !important;
  }

  .butonx {
    border: 1px solid white;
    font-size: 15px !important;
    height: 30px;
  }

  .top-50pc {
    padding-right: 2px;
    padding-left: 2px;
  }
  .slider-mobil {
    padding-left: 2px;
    padding-right: 2px;
    display: block !important;
  }

  .hero2x {
    margin-left:26%;
    margin-right:26%;
  }

  .slider-desktop {
    display: none !important;
  }

  .gicsax {
    margin-left: 0 !important;
  }

  .features2 {
    display: block;
  }

  .logon {
    margin-left: 0 !important;
  }

  .video-container4 {
    margin-bottom: -55% !important;
    margin-top: -40% !important;
  }
  /* Styles for mobile */
  #mobile-div {
    max-width: 100%;
  }
  #mobile-text {
    font-size: 2px;
  }

  .p-10 {
    padding: 1rem 2.5rem !important;
  }

  .hero {
    height: 0;
  }

  .heroP {
    font-size: 2em !important;
    font-weight: 500 !important;
    line-height: 2.3rem !important;
    width: fit-content !important;
    margin-top: -30px !important;
  } 

  .hero-image {
    max-width: 100% !important;
    position: absolute !important;
    margin-bottom: 5vh !important;
    height: 37vh !important;
    margin-left: 17vw !important;
    padding: 10px !important;
    object-fit: cover !important;
  }

  .content-right {
    flex: 0 0 90%; 
    display: flex;
    align-items: center;
    margin-top: 3rem!;
  }
   
  .main-video {
    cursor: auto !important;
    width: 80vw !important;
    height: 90vw !important;
    border-radius: 0px !important;
    display: block !important;
    object-fit: fill !important;
    background-color: rgba(0, 0, 0, 0) !important;
    object-position: 50% 50% !important;
  }

  .main-video2 {
    cursor: auto !important;
    width: 80vw !important;
    height: 75vw !important;
    border-radius: 0px !important;
    display: block !important;
    object-fit: fill !important;
    background-color: rgba(0, 0, 0, 0) !important;
    object-position: 50% 50% !important;
    position: absolute;
    z-index: -1;
  }

  .min-h-100vh {
    min-height: 100vh !important;
  }

  .video-container {
    margin-top: 20% !important;
    margin-bottom: 40% !important;
    position: relative;
    display: flex;
    justify-content: center;
    height: unset !important;
    align-items: unset !important;
    width: 100vw;
    overflow: initial !important;
  }

  .heroPCentered {
    font-size: 1.5rem !important;
    padding-top: 40%;
    margin-top: -160px !important
  }

  .special-padding {
    padding: 0px !important;
  }

  body.gold .bg-indigo-lightest-10 {
    background: linear-gradient(4450deg,#bd81db -18.44%,#8057da 137.37%);
  }

  body.gold .heroSubP2 {
    color: #ffffff !important;
  }
  
  .heroSubP {
    top: 130% !important;
    text-align: center;
    font-size: 1rem;
    padding: 0 10%;
    margin-left: 0 !important;
  }

  .heroSubP22 {
    font-size: 17px;
    text-align: center;
    margin-top: -25px !important;
  }
  
  .medium-text {
    font-size: 1.5rem !important;
  }

  .backg {
    height: 28vh !important;
  }

  .video-2 {
    display: none;
  }

  .section22 {
    padding-top: 0
     !important;
    padding-bottom: 0 !important;
  }


.br-round {
  width: 50px !important;
  height: 50px !important;
  max-width: none !important;
  border: 1px solid black;
  border-radius: 50%;
 }

 .font-f {
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Muli', sans-serif;
}

.teleggg {
  font-size: 10px !important;
};

.slick-slide {
  padding-left: 10%;
  padding-right: 10%
}

.xxsa {
  margin: 2rem !important;
}

}

.br-round {
  width: 70px;
  height: 70px;
  max-width: 70px;
  border: 1px solid black;
  border-radius: 50%;
}

.font-f {
  font-size: 1.2em;
  font-weight: 600;
  font-family: 'Muli', sans-serif;
}

.video-2 {
  margin-left: 28%;
  position: absolute;
  margin-top: -16%;
}

.filter {
  position: static;
  z-index: 999;
}

.bg-indigo-lightest-10 {
  background-color: black !important;
}

.backg {
  border: 1px solid transparent;
  border-radius: 10px;
  background-image: url(assets/images/tokenomics.avif);
}

#tokenomics {
  position: relative;
   z-index: 999 !important;
}

.x-byda {
  margin-top: 15px;
  font-weight: 700;
}

.telegram {
  font-size: 18px !important;
}

#imageContainer {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  max-width: 100%;
  filter: saturate(0.4);
  transition: all ease 0.5s;
}

#imageContainer:hover {
  filter: saturate(100%);
}

#imageContainer > * {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.special-padding {
  padding: 0 14%;
  align-items: center;
}

.main-video {
  cursor:auto;width:50vw;height:50vw;border-radius:0px;display:block;object-fit:fill;background-color:rgba(0, 0, 0, 0);object-position:50% 50%;
}


.main-video2 {
  position: absolute;z-index: -1;cursor:auto;width:40vw;height:40vw;border-radius:0px;display:block;object-fit:fill;background-color:rgba(0, 0, 0, 0);object-position:50% 50%;
}

.main-video3 {
  cursor:auto;width:50vw;height:50vw;border-radius:0px;display:block;object-fit:fill;background-color:rgba(0, 0, 0, 0);object-position:50% 50%;
}


.video-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}


.hero {
  font-family: 'Hubot-Sans', sans-serif;
}

/* Container for the left and right content */
.flex-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center; /* Center vertically */
}

/* Left side content (60% of screen width) */
.content-left {
  flex: 0 0 40%; /* Takes 60% of the width */
  padding-right: 1rem;
}

/* Right side content (40% of screen width) */
.content-right {
  display: flex;
  align-items: center;
}

.slick-dots {
  display: none !important;
}

.fixed {
  z-index: 999 !important;
}

.hero-image {
  max-width: 100%;
  position: absolute;
  height: 60vh;
  margin-left: 14%;
  padding: 10px;
  object-fit: cover;
}

#copyButton {
  width: 250px; /* Set a fixed width */
  text-align: center;
}
#copyButton span {
  font-size: 20px;
  display: inline-block;
  width: 100%; /* Ensures text is aligned within the button */
}
.bubbly-button{
  display: inline-block;
  -webkit-appearance: none;
  appearance: none;
  background-color: #1e476e;
  color: white;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(20, 92, 136, 0.5);
  
  &:focus {
    outline: 0;
  }
  
  &:before, &:after{
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
  }
  
  &:before{
    display: none;
    top: -75%;
    background-image:  
      radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle,  transparent 20%, #1e476e 20%, transparent 30%),
    radial-gradient(circle, #1e476e 20%, transparent 20%), 
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle,  transparent 10%, #1e476e 15%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    background-position: 0% 80%, -5% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 85% 30%;
  }
  
  &:after{
    display: none;
    bottom: -75%;
    background-image:  
    radial-gradient(circle, #1e476e 20%, transparent 20%), 
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle,  transparent 10%, #1e476e 15%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%),
    radial-gradient(circle, #1e476e 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
 
  &:active{
    transform: scale(0.9);
    background-color: darken(#1e476e, 5%);
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
  }
  
  &.animate{
    &:before{
      display: block;
      animation: topBubbles ease-in-out 0.75s forwards;
    }
    &:after{
      display: block;
      animation: bottomBubbles ease-in-out 0.75s forwards;
    }
  }
}

.text-test {
  color: #999;
  font-size: 10px;
  text-align:right;
  padding-top: 20%;
}

@keyframes topBubbles {
  0%{
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
    50% {
      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}
 100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
  background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

@keyframes bottomBubbles {
  0%{
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
 100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
  background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .flex-container {
      flex-direction: column;
      margin-top: 40%;
  }

  .content-left, .content-right {
      flex: 0 0 100%; /* Each takes 100% width on mobile */
      padding: 0; /* Remove padding on mobile */
  }

  .content-right {
      margin-top: 1rem; /* Space between content and image */
  }
}


@import url('https://fonts.cdnfonts.com/css/hubot-sans');
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; }

html::-webkit-scrollbar { display: none; }
html { -ms-overflow-style: none; scrollbar-width: none; }


/* body.gold .header h2 ,
body.gold p,
body.gold > * > * :not(.contact-btn) {
    filter: invert(1);
} */

body.gold .ggg {
  color: black !important;
}


body.gold .butonx {
  border: 1px solid transparent;
}

.butonx {
  font-size: 22px !important;
}

body.gold .opacity-50 {
  color: #a98aed;
}
body.gold .filler {
  box-shadow:  none !important;
}

body.gold .tete{
  color: white !important;
}

body.gold .bubbly-button {
  background-color: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%) !important;

}

body.gold .bg-indigo {
  background-color: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%) !important;
}

body.gold .heroPCentered {
  font-size: 3.5em;
  text-align: center !important;
  background: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%);
  font-weight: 600;
  font-family: 'Clash Grotesk';
  margin-top: -50px;
  height: fit-content; 
  opacity: 0;
  translate: 0 1em;
  animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;
  color: #d8ecf8;
  text-shadow: 0 2px 16px rgba(50, 72, 96, 0.24);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes up {      
  100% { translate: 0; }    
}

body.gold .heroP {
    font-size: 3em;
    font-weight: 600;
    font-family: 'Clash Grotesk';
    margin-top: -50px;
    height: fit-content; 
    opacity: 0;
    translate: 0 1em;
    animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;
    color: #1e476e;
    text-shadow: 0 2px 16px rgba(50, 72, 96, 0.24);
    background: #9657da;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes up {      
    100% { translate: 0; }    
}

body.gold #copyButton {
  color: white !important;
  background: linear-gradient(to right, #9d50bb, #6e48aa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body.gold .fixed {
  background: linear-gradient(to right, #9d50bb, #6e48aa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body.gold .heroT > h2 {
  color: #8057da;
  background:
  radial-gradient( 2em 2em at 50% 50%,
      transparent calc(var(--p) - 2em),
      #fff calc(var(--p) - 1em), 
      #fff calc(var(--p) - 0.4em), 
      transparent var(--p) 
  ),
  linear-gradient(0deg, #a889bc 30%, #cd82ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 16px rgba(155, 86, 252, 0.604);

  --p:0%;
  transition:--p 3s linear;
  
  animation: pulse 10s linear 1.2s infinite;
}

body.gold .opacity-89 {
  background-color: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%) !important;
  opacity: 0.4;
  border: 1px solid transparent;
  border-radius:30;
}

body.gold .heroT h2:nth-child(2) {
  background:
  radial-gradient( 2em 2em at 50% 50%,
      transparent calc(var(--p) - 2em),
      transparent calc(var(--p) - 1em),
      #fff calc(var(--p) - 1em), 
      #fff calc(var(--p) - 0.4em), 
      transparent calc(var(--p) - 0.4em), 
      transparent var(--p) 
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(16px) opacity(0.4);
}
@keyframes pulse { 
  0% { --p:0%; }
  50% { --p:300%;}
  100% { --p:300%;}
}
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

body.gold .list-title {
  background: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body.gold .roadmap-list li {
  background: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body.gold .bg-indigo-lightest-10 {
  color: rgb(0, 0, 0) !important;
}

.button {
  font-size: 18px !important;
}
body.gold .button-lg {
  color: black !important;
}

body.gold .white li {
  color: black !important;
}

body.gold .my-3 a {
  color: black !important;
}

body.gold .xxsaas {
  color: black !important;
}


body.gold p {
  color: black !important;
}

body.gold h5 {
  color: black !important;
}

body.gold strong {
  color: black !important;

}

body.gold .xx2 {
  background: black !important;
  color: white !important;
}

body.gold .bg-indigo{
  background-color: linear-gradient(to right, #9d50bb, #6e48aa) !important;
}


body.gold .dsadxsa {
  background: linear-gradient(to right, #9d50bb, #6e48aa) !important;
}

body.gold .p-5{
  color: black !important;
}

body.gold .dsadsa {
  background-color: white !important;
}

body.gold .heroSubP {
  color: white !important;
}


body.god .opacity-88 {
  color: linear-gradient(269deg,#ffd8db -18.44%,#8057da 137.37%) !important;
}

body.gold .dsadsax {
  background: linear-gradient(269deg, #ffd8db -18.44%, #8057da 137.37%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;;
  color: transparent !important;
}

body.gold .heroSubP p {
  font-size: 1em;
  position: relative; width: fit-content; margin: auto;
  color: rgb(157, 101, 181);
  text-shadow: 0 2px 16px rgba(135, 46, 219, 0.24);
  background: linear-gradient(269deg,#ffd8db -18.44%,#8057da 137.37%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.gold .heroSubP p::before,
body.gold .heroSubP p::after {
  position: absolute; top: 60%; 
  display: block; content: '';
  width: 5em; height: 1px;
  opacity: 0;
  animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;
}
@keyframes load2 {  
  0% { opacity: 0;}    
  100% { opacity: 0.3;}    
}
body.gold .heroSubP p::before{
  background: linear-gradient( -90deg, #b089bc 0%, transparent 100%);
  right: 120%;
  translate: -5em 0;
}
body.gold .heroSubP p::after {
  background: linear-gradient( 90deg, #c582ff 0%, transparent 100%);
  left: 120%;
  translate: 5em 0;
}

body.gold .header h2 a{
    filter: hue-rotate(30deg);
}
body.gold canvas {
    filter: drop-shadow(2em 4em 0px #c982ff) drop-shadow(-8em -14em 0px #e282ff);
}
body.gold .header .spotlight {
    filter: invert(1) brightness(4.7) opacity(0.5);
}
body.gold .mountains > div {
    box-shadow: 
    -1em -0.2em 0.4em -1.1em #c2ccff,
    inset 0em 0em 0em 2px red,
    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
    inset 10.2em 10.3em 2em -10em #d4e6ff2f;
}

body.gold .content-section,
body.gold .content-section ::before,
body.gold .content-section ::after,
body.gold .logon,
body.gold .test{
  filter: hue-rotate(270deg) saturate(200%) brightness(80%);
}

.logon {
  max-height: 6rem;
  margin-left: 30%;
  cursor: pointer;
}

.gicsax {
  margin-left:10%;
}

.test {
  cursor: pointer;
}

h2 {
    font-family: 'Hubot-Sans', sans-serif;
}
h2, p {
    margin: 0; padding: 0;
}
h2 a {
    text-decoration: none;
    color: unset;
}

.header {
    display: flex; width: 100%;
    justify-content: center;
    color: #bad6f7;
    padding: 2em;
    position: absolute;
    top: 0; left: 0; right: 0; margin: 0 auto;

    opacity: 0;
    translate: 0 -1em;
    animation: load 2s ease-in 2s forwards, up 1.4s ease-out 2s forwards;
}
.header > :nth-child(1) {
    font-size: 1em;
    position: absolute; left: 0; right: 29em; margin: 0.2em auto;
    width: fit-content;
}
.header > :nth-child(2) {
    position: absolute; left: 0; right: 0; margin: 0 auto;
    width: fit-content;
}
.header > h2{
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.04s ease-in-out;
}
.header > h2:hover {
    opacity: 1;
    text-shadow: 0 2px 16px rgba(174,207,242, 0.6);
    width: fit-content;
}

.header > div.mid-spot {
    width: 1.8em; height: 1.8em;
    border-radius: 50%;
    background: black;
    box-shadow: 0 0 1em 0 #98c0ef;
    cursor: pointer;
    transition: box-shadow 1s ease-in-out;
}
.header > div.mid-spot:hover {
    box-shadow: -0.3em 0.1em 0.2em 0 #f782ff;
}
body.gold .header > div.mid-spot:hover {
    box-shadow: -0.3em 0.1em 0.2em 0 #ce98ef;
}

body.gold .header > div.mid-spot {
    box-shadow: 0 0 1em 0 #e682ff;
}

.header > :nth-child(2):hover ~ .spotlight {
    animation: colorize 10s linear infinite;
}
@keyframes colorize {
    0%{filter: hue-rotate(0deg); }
    100% {filter: hue-rotate(-380deg);}
}

button.contact-btn {
    position: absolute; left: min(46em, 60vw); right: 0; margin: 0 auto;
    width: 8em; height: 2.4em;
    cursor: pointer;
    border-radius: 20em;
    border: none;
    transition: background 0.5s, transform 0.5s;
    
    border: 1px solid #c2ccff33;
    opacity: 1;
    padding-top: 0.3em;

    background: #121521;
    color: #9dc3f7;
    white-space:nowrap;
}
button.contact-btn::before {
    content: ''; display: block; position:absolute; left: 0; top:0; border-radius: 20em;
    width: 100%; height: 100%;
    background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);
    opacity: 0.1;
    transition: all 0.4s ease-in-out;
}
button.contact-btn:hover::before {
    background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);
    opacity: 0.3;
}
.contact-btn .glow {
    --border-width: 1px;
    --loop-cycle: 24s;
    position: absolute;
    inset: calc(var(--border-width)* -1);
    border-radius: 50px;
    border: var(--border-width) solid transparent;
    -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    pointer-events: none;
}
button.contact-btn:hover .glow {
    --loop-cycle: 2s;
}
.contact-btn .glow::after, .contact-btn .glow::before {
    content: "";
    height: 100%;
    offset-anchor: 100% 50%;
    background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);
    opacity: 0.4;
    offset-path: rect(0 100% 100% 0 round 33px);
    position: absolute;
    display: inline-block;
    -webkit-animation: loop 4s linear infinite;
    animation: loop var(--loop-cycle) linear infinite;
    aspect-ratio: 1 / 1;
    transition: opacity 1s ease-in-out;
}
.contact-btn .glow::before {
    animation-delay: calc( var(--loop-cycle) / -2 );
}
@keyframes loop {
    100% {
        offset-distance: 100%;
    }    
}
.contact-btn-content {
    background: linear-gradient(0deg, #d8ecf8, #98c0ef);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2em;
    line-height: 142%;
}
button.contact-btn:hover .glow::after, button.contact-btn:hover .glow::before {
    opacity: 0.6;
}
@keyframes btn-rot {
    0% { rotate: 0deg; }
    100% { rotate: 360deg; } 
}

.header .spotlight {
    pointer-events: none;
    position: relative; left: 0; right: 0; top:0; margin: 0 auto;
    transition: filter 1s ease-in-out;

    height: 42em; width: 100%;
    overflow: hidden;
}
.header .spotlight > div {
    border-radius: 0 0 50% 50%;
    position: relative; left: 0; right: 0; margin: 0 auto; 
    top: 3em;
    width: 30em; height: max(42em, 86vh);
    background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(124, 145, 182, .3) 49%, rgba(124, 145, 182, .5) 50%, rgba(124, 145, 182, .3) 51%, transparent 55%);
    transform-origin: 50% 0;
    filter: blur(15px) opacity(0.5);
    z-index: -1;
    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 21s ease-in-out infinite reverse;
}
.header .spotlight > div:nth-child(1){ 
    rotate: 20deg;
    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 17s ease-in-out infinite;
}
.header .spotlight > div:nth-child(2){ 
    rotate: -20deg;
    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 14s ease-in-out infinite;
}
@keyframes loadrot {
    0% { rotate: 0deg; scale: 0;}
    100% { scale: 1;}
}
@keyframes spotlight {
    0% {
        transform: rotateZ(0deg) scale(1);
        filter: blur(15px) opacity(0.5);
    }
    20% {
        transform: rotateZ(-1deg) scale(1.2);
        filter: blur(16px) opacity(0.6);
    }    
    40% {
        transform: rotateZ(2deg) scale(1.3);
        filter: blur(14px) opacity(0.4);
    }    
    60% {
        transform: rotateZ(-2deg) scale(1.2);
        filter: blur(15px) opacity(0.6);
    }    
    80% {
        transform: rotateZ(1deg) scale(1.1);
        filter: blur(13px) opacity(0.4);
    }    
    100% {
        transform: rotateZ(0deg) scale(1);
        filter: blur(15px) opacity(0.5);
    }    
}

#home {
  background-color: black;
}

canvas#particleCanvas {
    position: absolute; pointer-events: none;
    animation: load 0.4s ease-in-out forwards;
    z-index: 1;
    width: 100%;
}

p {
    font-size: 1.5em;
}

body.gold .bg-indigo-lightest-10 {
  background: linear-gradient(4450deg, #bd81db -18.44%, #8057da 137.37%);
}

.heroT {
    position: relative; left: 0; right: 0;
    padding-top: 2em;
    translate: 0 -1.6em;
    opacity: 0;
    animation: load 2s ease-in-out 0.6s forwards;
}
@keyframes load {  
    0% { opacity: 0;}    
    100% { opacity: 1;}    
}
.heroT > h2 {
    bottom: 20%;
    position: absolute ;left: 0; right: 0;
    width: fit-content;
    left: -5px !important;
    font-size: 7em;
    font-weight: 600;
    color: #9dc3f7;
    background:
    radial-gradient( 2em 2em at 50% 50%,
        transparent calc(var(--p) - 2em),
        #fff calc(var(--p) - 1em), 
        #fff calc(var(--p) - 0.4em), 
        transparent var(--p) 
    ),
    linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 16px rgba(174,207,242,.24);

    --p:0%;
    transition:--p 3s linear;
    
    animation: pulse 10s linear 1.2s infinite;
}

.heroT h2:nth-child(2) {
    background:
    radial-gradient( 2em 2em at 50% 50%,
        transparent calc(var(--p) - 2em),
        transparent calc(var(--p) - 1em),
        #fff calc(var(--p) - 1em), 
        #fff calc(var(--p) - 0.4em), 
        transparent calc(var(--p) - 0.4em), 
        transparent var(--p) 
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(16px) opacity(0.4);
}
@keyframes pulse { 
    0% { --p:0%; }
    50% { --p:300%;}
    100% { --p:300%;}
}
@property --p {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.heroPCentered {
  font-size: 3.5em;
  text-align: center !important;
  background: linear-gradient(0deg, #d8ecf8 0, #5e89a2 100%);
  font-weight: 600;
  font-family: 'Clash Grotesk';
  margin-top: -50px;
  height: fit-content; 
  opacity: 0;
  translate: 0 1em;
  animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;
  color: #d8ecf8;
  text-shadow: 0 2px 16px rgba(50, 72, 96, 0.24);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes up {      
  100% { translate: 0; }    
}

.xx2 {
  width: 150px;
}


.special-button {
  border: 1px solid white;
  cursor: pointer;
}

.larger-text {
  font-size: 18px;
}

.special-step {
  border: 1px solid white;
  border-radius: 8px;
}

.shadow-sd {
  cursor: pointer;
  transition: 0.5s;
}

.shadow-sd:hover {
  color: #fff;
  text-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.sss-esction {
  min-height: 65vh;
}

.sss-esction2 {
  min-height: 40vh;
}


.heroP {
    font-size: 3em;
    font-weight: 600;
    font-family: 'Clash Grotesk';
    margin-top: -50px;
    height: fit-content; 
    opacity: 0;
    translate: 0 1em;
    animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;
    color: #1e476e;
    text-shadow: 0 2px 16px rgba(50, 72, 96, 0.24);
    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes up {      
    100% { translate: 0; }    
}

.heroSubP2 {
  position: absolute; top: 59%; margin: auto;
  height: fit-content;
  opacity: 0;
  translate: 0 -1em;
  color: white;
  animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;
}

.heroSubP {
    position: absolute; top: 70%; margin: auto;
    height: fit-content;
    opacity: 0;
    translate: 0 -1em;
    color: white;
    animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;
}
@keyframes load3 {  
    0% { opacity: 0;}    
    100% { opacity: 0.7;}    
}
.heroSubP p {
    font-size: 1em;
    position: relative; width: fit-content; margin: auto;
    color: #d8ecf8;
    text-shadow: 0 2px 16px rgba(174,207,242,.24);
    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.heroSubP p::before,
.heroSubP p::after {
    position: absolute; top: 60%; 
    display: block; content: '';
    width: 5em; height: 1px;
    opacity: 0;
    animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;
}
@keyframes load2 {  
    0% { opacity: 0;}    
    100% { opacity: 0.3;}    
}
.heroSubP p::before{
    background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);
    right: 120%;
    translate: -5em 0;
}
.heroSubP p::after {
    background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);
    left: 120%;
    translate: 5em 0;
}

.accent-lines {
    pointer-events: none;
    position: absolute; top: 0; left: 0; right: 0;
    width: 100%; height: 42em;
    z-index: -2;
    --accent-lines-clr: rgba(186, 215, 247, .18);
}
.accent-lines > div {
    position: absolute; top: 0; right: 0; left: 0; margin: auto;
    height: 100%; width: 100%;
}
.accent-lines > div:nth-child(1) > div{
    position: absolute; top: 0; right: 0; left: 0; margin: auto;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-lines-clr), transparent);
    opacity: 0; scale: 0;
    animation: accentload 2s ease-out 2.4s forwards;
}
.accent-lines > div:nth-child(1) > div:nth-child(1){ top: 6em; }
.accent-lines > div:nth-child(1) > div:nth-child(2){ top: 11em; }
.accent-lines > div:nth-child(1) > div:nth-child(3){ top: 16em; }
.accent-lines > div:nth-child(1) > div:nth-child(4){ top: 24em; }
.accent-lines > div:nth-child(1) > div:nth-child(5){ top: 29em; }
.accent-lines > div:nth-child(2) > div{
    position: absolute; top: 0; right: 0; left: 0; margin: auto;
    width: 1px; height: 100%;
    background: var(--accent-lines-clr);
}
@keyframes accentload {
    0% {
        opacity: 0; scale: 0;
    }
    100% {
        opacity: 1; scale: 1;
    }
}

.accent-lines > div:nth-child(2) > div {
    opacity: 0; scale: 0;
    animation: accentload 2s ease-out 2s forwards;
}
.accent-lines > div:nth-child(2) > div:nth-child(1){ left: 24em; }
.accent-lines > div:nth-child(2) > div:nth-child(2){ left: 34em; }
.accent-lines > div:nth-child(2) > div:nth-child(3){ right: 24em; }
.accent-lines > div:nth-child(2) > div:nth-child(4){ right: 34em; }

.accent-lines > div:nth-child(1) > div::before, 
.accent-lines > div:nth-child(1) > div::after { 
    content: ''; display: none; position: absolute;
    width: 0.2em; height: 0.2em; border-radius: 1em;
    background: #9dc3f7;
    left: 0; right: 0; margin: auto;
    translate: 0 -1px;

    opacity: 0; scale: 0;
    animation: accentload 2s ease-out 4.4s forwards;
}

.accent-lines > div:nth-child(1) > div:nth-child(3)::before{ display: block; left: 24em; }
.accent-lines > div:nth-child(1) > div:nth-child(3)::after{ display: block; right: 24em; }
.accent-lines > div:nth-child(1) > div:nth-child(4)::before{ display: block; left: 24em; }
.accent-lines > div:nth-child(1) > div:nth-child(4)::after{ display: block; right: 24em; }
.accent-lines > div:nth-child(1) > div:nth-child(5)::before{ display: block; left: 24em; }
.accent-lines > div:nth-child(1) > div:nth-child(5)::after{ display: block; right: 24em; }

.accent-lines > div:nth-child(1) > div:nth-child(2)::before,
.accent-lines > div:nth-child(1) > div:nth-child(2)::after{ 
    display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;
}
.accent-lines > div:nth-child(1) > div:nth-child(2)::before{
    right: 24em; rotate: 45deg; translate: -2.5em 2.5em;
}
.accent-lines > div:nth-child(1) > div:nth-child(2)::after{
    right: 24em; rotate: -45deg; translate: -2.5em 2.5em;
}
.accent-lines > div:nth-child(1) > div:nth-child(1)::before,
.accent-lines > div:nth-child(1) > div:nth-child(1)::after{ 
    display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;
}
.accent-lines > div:nth-child(1) > div:nth-child(1)::before{
    left: 24em; rotate: 45deg; translate: 2.5em 7.5em;
}
.accent-lines > div:nth-child(1) > div:nth-child(1)::after{
    left: 24em; rotate: -45deg; translate: 2.5em 7.5em;
}

.accent-lines > div:nth-child(1) > div:nth-child(2)::before,
.accent-lines > div:nth-child(1) > div:nth-child(2)::after {
    opacity: 0; scale: 0;
    animation: accentload2 2s ease-out 2.4s forwards;
}
.accent-lines > div:nth-child(1) > div:nth-child(1)::before,
.accent-lines > div:nth-child(1) > div:nth-child(1)::after {
    opacity: 0; scale: 0;
    animation: accentload3 2s ease-out 2.4s forwards;
} 
@keyframes accentload2 {
    0% {
        opacity: 0; scale: 0; transform: rotate(360deg);
    }
    50% { scale: 0; }
    100% {
        opacity: 0.12; scale: 1; transform: rotate(0deg);
    }
}
@keyframes accentload3 {
    0% {
        opacity: 0; scale: 0; transform: rotate(-360deg);
    }
    50% { scale: 0; }
    100% {
        opacity: 0.12; scale: 1; transform: rotate(0deg);
    }
}

.mountains {
    position: absolute; left: 0; right: 0; top: 31em; margin: auto;
    width: 100%; height: 10em;
    pointer-events: none;
}
.mountains::before {
    content: ''; display: block;
    width: 100%; height: 500%;
    position: absolute; top: 0%;
    background: linear-gradient(90deg, #121521 0%, transparent 50%);
    background: linear-gradient(0deg, #121521 80%, transparent 90%);
    z-index: 2;
}
.mountains > div {
    box-shadow: 
    -1em -0.2em 0.4em -1.1em #c2ccff,
    inset 0em 0em 0em 2px #c2ccff,
    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
    inset 10.2em 10.3em 2em -10em #d4e6ff2f;
    background: #121521;
    z-index: 1;
    filter: brightness(0.8);
    position: absolute; left: 0; right: 0; margin: auto;
    width: 20em; height: 20em;
    rotate: 45deg;
}
.mountains > div:nth-child(1) {
    bottom: -240%; 
    translate: -6em 2em;
    animation: mountainload1 2s ease-out 2.4s forwards;
}
.mountains > div:nth-child(2) {
    bottom: -240%;
    translate: -2em 0em;
    width: 14em; height: 20em;
    animation: mountainload2 2s ease-out 2.2s forwards;
}
.mountains > div:nth-child(3) {
    bottom: -240%; 
    translate: 6em 3em;
    animation: mountainload1 2s ease-out 2s forwards;
}
@keyframes mountainload1 {
    0% { bottom: -240%; }
    100% { bottom: -140%; }
}
@keyframes mountainload2 {
    0% { bottom: -240%; }
    100% { bottom: -108%; }
}
.mountains > div::before {
    content: ''; display: block;
    background: repeating-radial-gradient( at 100% 100%, transparent 0%, #c2ccff22 2px, transparent 4px);
    width: 12em; height: 12em;
    position: absolute;
    left: 0; top: 0;
    border-bottom-right-radius: 100%;
}

.hero-spacer {
    height: 40em;
    pointer-events: none;
}

.content-section {
    position: relative;
    z-index: 1112;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 16em 0 12em 0;
    overflow: hidden;
}

.content-section p.subt {
    color: #d8ecf8be;
    font-size: 0.8em;
    font-weight: 200;
    position: relative;
    width: fit-content;
    margin: auto;
}
.content-section h3 {
    margin: 0.4em 0 0.6em 0;
    font-size: 2.3em;
    font-weight: 600;
    color: #d8ecf8;
    text-shadow: 0 2px 16px rgba(174,207,242,.24);
    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.content-section p.subp {
    color: #d8ecf8be;
    font-size: 1em;
    font-weight: 400;
    max-width: 26em;
    margin: auto;
}

.content-section p.subt::before,
.content-section p.subt::after {
    position: absolute; top: 60%; 
    display: block; content: '';
    width: 5em; height: 1px;
    opacity: 0.5;
}
.content-section p.subt::before{
    background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);
    right: 120%;
    top: 50%;
}
.content-section p.subt::after {
    background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);
    left: 120%;
    top: 50%;
}

.content-section .content-acc {
    position: absolute;
    left: 0; right: 0; top: 25%; margin: auto;
    display: flex; justify-content: center;
}
.content-section .content-acc div{
    width: 10em; height: 10em;
    border-radius: 50%;
    box-shadow: 
    -1em -0.2em 0.4em -1.1em #c2ccff,
    inset 0em 0em 0em 2px #c2ccff,
    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
    inset -1.2em 2.3em 2em -0.5em #d4e6ff2f;
    background: #121521;
    z-index: 1;
    filter: brightness(0.8);
    background: repeating-radial-gradient( at 50% 50%, transparent 0%, #c2ccff22 2px, transparent 4px);
    translate: -18em;
}
.content-section .content-acc div:nth-child(2){
    translate: 18em 12em;
    border-radius: 2em;
    box-shadow: 
    -1em -0.2em 0.4em -1.1em #c2ccff,
    inset 0em 0em 0em 2px #c2ccff,
    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
    inset 10.8em 11.3em 2em -10.5em #d4e6ff2f;
}

.filler {
  box-shadow: 
   1px 2px 2px hsl(220deg 60% 50% / 0.2), 
   2px 4px 4px hsl(220deg 60% 50% / 0.2), 
   4px 8px 8px hsl(220deg 60% 50% / 0.2), 
   8px 16px 16px hsl(220deg 60% 50% / 0.2), 
   16px 32px 32px hsl(220deg 60% 50% / 0.2)
}


.video-container4 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 83vh;
  overflow: hidden;
  margin-bottom: -6%;
  margin-top: -1%;
}

.roadmap-2 {
  padding: 0 6%;
}

.section22 {
 padding-top: 18rem;
 padding-bottom: 18rem;

}

.roadmap {
  margin-bottom: 110px;
}
.roadmap .rcontainer {
  overflow: hidden;
  padding-top: 40px;
}
.roadmap-item .list-title {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  padding-bottom: 18px;
  font-size: 1.43em;
  font-weight: 600;
  border-bottom: 2px solid white;
  color: white;
}
.roadmap-item.executed .list-title {
  color: #1e476e;
}
.roadmap-item.executed li {
  background: linear-gradient(45deg, #00c280 23%, #01a094 33%, #0434da);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.roadmap-list {
  padding-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #888888;
  padding-left: 0;
}
.roadmap-list li {
  position: relative;
  padding: 0;
  list-style: none;
  text-align: left;
}
.roadmap-list li::before {
  position: absolute;
  content: "";
}
.roadmap-list li:before {
  width: 30px;
  height: 100%;
  left: 0;
  z-index: 200;
}
.roadmap-wrapper {
  position: relative;
  position: relative;
  display: flex;
  flex-direction: column;
}
.roadmap-wrapper::after {
  position: absolute;
  content: "";
}
.roadmap-wrapper::before {
  position: absolute;
  content: "";
}
.roadmap-wrapper:after, .roadmap-wrapper:before {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 100%;
  width: 2px;
  z-index: 1;
}
.roadmap-wrapper:after {
  background-color: white;
}
.roadmap-wrapper:before {
  background-color: white;
  left: calc(50% - 1px);
}
.roadmap-item-wrap {
  position: relative;
  z-index: 10;
}
.roadmap-item-wrap:after {
  content: "";
  display: table;
  clear: both;
}
.roadmap-item-wrap .roadmap-item {
  position: relative;
}
.roadmap-item-wrap .roadmap-item::before {
  position: absolute;
  content: "";
}
.roadmap-item-wrap .roadmap-item:before {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  display: inline-block;
  line-height: 40px;
  margin-top: -15px;
  z-index: 2;
  color: white;
  content: " ●";
  font-size: 30px;
}
.roadmap-item-wrap.right .roadmap-item {
  padding-left: 70px;
  float: right;
}
.roadmap-item-wrap.right .roadmap-item:before {
  right: 100%;
  transform: translateX(50%);
}
.roadmap-item-wrap.right .list-title {
  padding-left: 70px;
  left: auto;
  right: 0;
}
.roadmap-item-wrap.left .roadmap-item {
  padding-right: 70px;
}
.roadmap-item-wrap.left .roadmap-item:before {
  left: 100%;
  transform: translateX(-50%);
}
.roadmap-item {
  width: 50%;
}

@media (max-width: 1200px) {
  .roadmap-list {
    font-size: 14px;
  }

  .token-sale-items-wrapper {
    left: 40px;
  }

  .roadmap-item-wrap.left .roadmap-item,
.roadmap-item-wrap.right .roadmap-item {
    padding-right: 35px;
  }
}
@media (max-width: 992px) {
  .roadmap-wrapper:before, .roadmap-wrapper:after {
    display: none;
  }
  .roadmap-item {
    width: 100%;
  }
  .roadmap-item .list-title {
    position: relative;
    top: 0;
  }
  .roadmap-item-wrap {
    margin-bottom: 25px;
  }
  .roadmap-item-wrap .list-title {
    padding-left: 25px !important;
  }
  .roadmap-item-wrap .roadmap-item {
    padding: 0 5px 0 0 !important;
  }
  .roadmap-item-wrap .roadmap-item.right:before, .roadmap-item-wrap .roadmap-item.left:before {
    width: 30px;
    height: 30px;
    margin-left: 0;
    bottom: 0;
    top: 1.43em;
    margin-top: 0;
    left: 0;
    right: 100%;
    line-height: 0;
    transform: translateX(0px) translateY(0%);
  }
  .roadmap-list {
    padding: 14px 0 0 25px;
  }
}
@media (max-width: 576px) {
  .roadmap {
    margin-bottom: 25px;
  }
  .roadmap .section-title {
    margin-bottom: 25px;
  }
  .roadmap-item-wrap {
    margin-bottom: 21px;
  }
  .roadmap-item .list-title {
    font-size: 14px;
    padding-bottom: 12px;
  }
  .roadmap-list {
    font-size: 12px;
    padding-top: 10px;
  }
  .roadmap-list li {
    padding-left: 18px;
  }
  .roadmap-list li:before {
    background: url(/assets/img/home/roadmap-list-point.png) no-repeat left 7px;
    background-size: 4px;
  }

  .roadmap-item-wrap .roadmap-item:before {
    width: 35px;
    height: 35px;
    top: 10px;
    left: -4px !important;
  }
  .roadmap-item-wrap.left .roadmap-item:before {
    right: -6px;
  }
  .roadmap-item-wrap.right .roadmap-item:before {
    left: -6px;
  }
}