html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
:root {
  --overlay-bg: #030303;
  --overlay-menu-linkcolor: #fff;
  --theme-font-color: #2bfe2e;
  --btn-bg-color: #05bf05;
  --theme-sub-font-color: #05bf05;
  --bg-body-color: #000;
  --font-mont: "Montserrat", sans-serif;
  --font-inter: "Inter", sans-serif;
  --primary-color: #00f800;
}
/*slide menu*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  z-index: 50;
  .overlaybg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    width: 115vw;
  }
  video {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    mix-blend-mode: luminosity;
    opacity: 0;
    width: 115vw;
  }
  .wrapstars {
    position: absolute;
    z-index: 1;
  }
  &:before {
    content: "";
    background: var(--overlay-bg);
    left: -55%;
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    transition: left 0.5s ease;
  }
  &:after {
    content: "";
    background: var(--overlay-bg);
    right: -55%;
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    transition: all 0.5s ease;
  }
  &.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
    video {
      animation: fadeInRightVideo 0.5s ease forwards;
      animation-delay: 0.35s;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
    li {
      animation: fadeInRight 0.5s ease forwards;
      animation-delay: 0.35s;
      &:nth-of-type(2) {
        animation-delay: 0.55s;
      }
      &:nth-of-type(3) {
        animation-delay: 0.75s;
      }
      &:nth-of-type(4) {
        animation-delay: 0.85s;
      }
      &:nth-of-type(5) {
        animation-delay: 0.95s;
      }
    }
    .overlay-btns a {
      animation: fadeInUp 0.5s ease forwards;
      animation-delay: 0.1s;
      &:nth-of-type(2) {
        animation-delay: 0.2s;
      }
      &:nth-of-type(3) {
        animation-delay: 0.3s;
      }
      &:nth-of-type(4) {
        animation-delay: 0.4s;
      }
      &:nth-of-type(5) {
        animation-delay: 0.5s;
      }
      &:nth-of-type(6) {
        animation-delay: 0.6s;
      }
      &:nth-of-type(7) {
        animation-delay: 0.7s;
      }
      &:nth-of-type(8) {
        animation-delay: 0.8s;
      }
      &:nth-of-type(9) {
        animation-delay: 0.9s;
      }
      &:nth-of-type(10) {
        animation-delay: 0.99s;
      }
    }
    .copyright {
      animation: fadeInUp 0.5s ease forwards;
      animation-delay: 0.55s;
    }
    .oclose {
      animation: fadeInRight 0.5s ease forwards;
      animation-delay: 0.5s;
    }
    .ologo {
      animation: fadeInRight 0.5s ease forwards;
      animation-delay: 0.5s;
    }
    .overlaybg {
      animation: fadeInRight 0.5s ease forwards;
    }
  }
  .overlay-btns {
    border-top: 1px solid #333333;
    background-color: #111111;
    position: absolute;
    z-index: 101;
    bottom: 0;
    width: 100%;
    padding: 50px 30px;
    .btnsocial ul li {
      float: left;
      padding: 0;
      margin-left: 15px;
      a {
        transition: all 0.5s;
        font-size: 19px;
        border: 1px solid #fff;
        line-height: 18px;
        padding: 10px 22px;
        border-radius: 20px;
        color: #fff;
      }
    }
    .copyright {
      opacity: 0;
      font-size: 19px;
      line-height: 18px;
      padding: 10px 22px;
      color: #fff;
      text-transform: uppercase;
    }
    .plinks ul li {
      float: left;
      padding: 0;
      margin-left: 15px;
      a {
        transition: all 0.5s;
        font-size: 19px;
        line-height: 18px;
        padding: 10px 22px;
        color: #747474;
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .overlay-header {
    position: relative;
    z-index: 101;
  }
  .overlay-header .ologo {
    margin: 20px 27px;
    opacity: 0;
  }
  .wrap-menu {
    position: relative;
  }
  .overlay-menu {
    margin: 0;
    position: absolute;
    width: 100%;
    top: 43%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
  }
  nav {
    z-index: 100;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
    li {
      display: block;
      padding: 0 50px;
      position: relative;
      opacity: 0;
      a {
        transition: all 0.5s;
        z-index: 99;
        display: block;
        font-size: calc(1.7rem + 3.4vw);
        font-weight: 600;
        color: #747474;
        text-decoration: none;
        text-transform: uppercase;
        line-height: calc(1.7rem + 3.4vw);
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .oclose {
    padding: 20px;
    opacity: 0;
  }
  button {
    text-decoration: none;
    margin-right: 20px;
    background: transparent;
    box-shadow: none;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 80%;
      height: 2px;
      background-color: #fff;
      transition: 0.3s ease-out;
      left: 50%;
      top: 50%;
    }
    &:after {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &:before {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    &:hover,
    &:focus {
      &:before,
      &:after {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }
  }
}

.nft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.level-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-up-btn {
  background: #1c1c1c;
  border: 1px solid #e0e6f3;
  border-radius: 12px;
  padding: 4px 8px;
  color: white;
  cursor: pointer;
}

.tier-info {
  margin: 10px 0;
}

.tier-status-row {
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 14px;
  margin-bottom: 5px;
}

.tier-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
}

.tier-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.3);
}

.tier-progress-fill {
  height: 100%;
  background: rgba(53, 98, 53, 1);
  border-radius: 2px;
  transition: width 0.3s ease;
}

@keyframes imgpulse {
  0% {
    box-shadow: 0 0 82px 10px rgba(53, 98, 53, 1);
  }
  50% {
    box-shadow: 0 0 102px 10px rgba(53, 98, 53, 0.5);
  }
  70% {
    box-shadow: 0 0 122px 10px rgba(53, 98, 53, 0.7);
  }
  100% {
    box-shadow: 0 0 82px 10px rgba(53, 98, 53, 1);
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
    z-index: 99;
  }
}
@keyframes fadeInRightVideo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 13%;
    z-index: 99;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/*end slide menu*/
body {
  margin: 0;
  padding: 0;
  background: var(--bg-body-color);
  font-family: "Inter", sans-serif;
}
.mobile {
  display: none;
}
.container {
  max-width: 1200px;
}
.tfc {
  /*theme font color*/
  color: var(--theme-font-color);
}
.tsfc {
  color: var(--theme-sub-font-color);
}
.menuBar .connectw {
  display: none;
}
.menuBar > .line > .background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.2;
  transition: background-color 0.3s ease-in-out;
  transform-origin: left center;
}
.menuBar > .line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}
@media (min-width: 1200px) {
  .menuBar > .line > .scrollbar {
    display: block;
    height: 100%;
    background-color: #1e1e1e;
    transform-origin: center top;
    transition: background-color 0.2s ease-in-out;
  }
  .menuBar > .line {
    left: 6.2rem;
    right: auto;
    width: 1px;
    height: 100%;
  }
}
.side-bar,
.side-bar__top .menu-toggle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 6.2rem;
}
.side-bar__top {
  margin: 20px auto;
}
.side-bar {
  border-right: 1px solid #2e2e2ead;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  background: rgb(0 0 0 / 100%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
  left: 0;
  min-height: 650px;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 22;
  &::after {
    content: "";
  }
}
#nav-burger {
  width: 35px;
  height: 35px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  &:hover {
    span:nth-child(1) {
      transform: scale(1.2);
    }
    span:nth-child(2) {
      transform: scale(1.2);
    }
    span:nth-child(4) {
      transform: scale(1.2);
    }
  }
}
#nav-burger span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#nav-burger span:nth-child(1) {
  top: 0px;
  background-color: #4e5054;
}
#nav-burger span:nth-child(2),
#nav-burger span:nth-child(3) {
  top: 7px;
  background-color: #6d6e72;
}
#nav-burger span:nth-child(4) {
  top: 14px;
  background-color: #797a7e;
}
/*
#nav-burger.open span:nth-child(1) {top: 18px; width: 0%; left: 50%;}
#nav-burger.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#nav-burger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#nav-burger.open span:nth-child(4) {top: 18px;width: 0%;left: 50%;}
*/
.secpad {
  padding: 80px 0;
}
.sectitlepb {
  padding-bottom: 40px;
}
.wrapwalletconnect {
  position: absolute;
  top: 3%;
  right: 1%;
  z-index: 99;
}
.wrapwalletconnect.connected {
  border-radius: 35px;
  background-color: #181a18;
  border: 1px solid #7f7f7f;
  display: flex;
  justify-content: space-between;
  padding: 4px;
  .jnglbal {
    color: #7f7f7f;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    align-items: center;
    text-align: center;
    display: flex;
    padding: 0 10px;
  }
  .walletinfo {
    border-radius: 35px;
    background-color: #808080;
    padding: 2px 3px 2px 11px;
    color: #030303;
  }
}
#hero {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  .container {
    position: relative;
    z-index: 10;
    max-width: 1300px;
  }
  p {
    font-size: 14.69px;
    line-height: 24px;
    font-weight: 200;
  }
  .wrap_ptitle {
    margin-top: 200px;
    h1 {
      font-size: 2rem;
      font-family: var(--font-inter);
      font-weight: 400;
      color: var(--primary-color);
    }
    h2 {
      font-size: 4rem;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
    }
  }
  .wrapnav {
    background: #1c1c1c;
    box-shadow: -6px 6px 12px rgba(11, 11, 11, 0.2),
      6px -6px 12px rgba(11, 11, 11, 0.2), -6px -6px 12px rgba(45, 45, 45, 0.9),
      6px 6px 15px rgba(11, 11, 11, 0.9),
      inset 1px 1px 2px rgba(45, 45, 45, 0.3),
      inset -1px -1px 2px rgba(11, 11, 11, 0.5);
    border-radius: 26px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
    .lnav {
      a {
        margin-right: 10px;
      }
    }
  }
  .pad20 {
    padding: 40px 45px;
  }
  img.rbcrystal {
    position: absolute;
    right: -40px;
    z-index: 0;
    top: 120px;
    opacity: 40%;
  }
  img.lbcrystal {
    position: absolute;
    z-index: 0;
    left: -190px;
    top: 150px;
    opacity: 40%;
  }
  .wrap-staking-bg {
    position: relative;
    background: #1c1c1c;
    box-shadow: -6px 6px 12px rgba(11, 11, 11, 0.2),
      6px -6px 12px rgba(11, 11, 11, 0.2), -6px -6px 12px rgba(45, 45, 45, 0.9),
      6px 6px 15px rgba(11, 11, 11, 0.9),
      inset 1px 1px 2px rgba(45, 45, 45, 0.3),
      inset -1px -1px 2px rgba(11, 11, 11, 0.5);
    border-radius: 26px;
    margin-top: 20px;
    padding: 40px 20px;
    .wrap-stakinginfo {
      display: flex;
      justify-content: space-between;
      .sinfo {
        display: flex;
        align-items: center;
        font-style: normal;
        font-weight: 600;
        font-size: 22.4108px;
        color: #ffffff;
        .stats {
          background: #282828;
          box-shadow: -1.93133px 1.93133px 3.86266px rgba(16, 16, 16, 0.2),
            1.93133px -1.93133px 3.86266px rgba(16, 16, 16, 0.2),
            0px 1px 3.3px rgba(64, 64, 64, 0.9),
            1.93133px 1.93133px 4.82833px rgba(16, 16, 16, 0.9),
            inset 0px 0px 21.0999px 6.90184px rgba(52, 255, 54, 0.35),
            inset 0.965665px 0.965665px 1.93133px rgba(64, 64, 64, 0.3),
            inset -0.965665px -0.965665px 1.93133px rgba(16, 16, 16, 0.5);
          border-radius: 14.485px;
          margin-right: 15px;
          margin-left: 10px;
          padding: 2px 10px;
        }
      }
    }
  }
  .wrapstaking {
    min-height: 387px;
    position: relative;
    background: #1c1c1c;
    box-shadow: -6px 6px 12px rgba(11, 11, 11, 0.2),
      6px -6px 12px rgba(11, 11, 11, 0.2), -6px -6px 12px rgba(45, 45, 45, 0.9),
      6px 6px 15px rgba(11, 11, 11, 0.9),
      inset 1px 1px 2px rgba(45, 45, 45, 0.3),
      inset -1px -1px 2px rgba(11, 11, 11, 0.5);
    border-radius: 26px;
    margin-top: 20px;
    p {
      color: #878787;
      text-transform: uppercase;
    }
    .frm {
      .frmgrp {
        position: relative;
        .frminput {
          background: #282828;
          box-shadow: -2px 2px 4px rgba(16, 16, 16, 0.2),
            2px -2px 4px rgba(16, 16, 16, 0.2),
            -2px -2px 4px rgba(64, 64, 64, 0.9),
            2px 2px 5px rgba(16, 16, 16, 0.9),
            inset 1px 1px 2px rgba(64, 64, 64, 0.3),
            inset -1px -1px 2px rgba(16, 16, 16, 0.5);
          border-radius: 12px;
          width: 100%;
          padding: 15px;
          border: none;
          &:active,
          &:focus {
            outline: none;
          }
        }
        span.jngl {
          position: absolute;
          right: 20px;
          top: 7px;
          box-sizing: border-box;
          background: #282828;
          border: 1px solid #454545;
          border-radius: 9px;
          font-weight: 600;
          padding: 6px 20px;
        }
      }
    }
    .btns {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .btnwrap {
        background: #282828;
        box-shadow: -2px 2px 4px rgba(16, 16, 16, 0.2),
          2px -2px 4px rgba(16, 16, 16, 0.2),
          -2px -2px 4px rgba(64, 64, 64, 0.9), 2px 2px 5px rgba(16, 16, 16, 0.9),
          inset 1px 1px 2px rgba(64, 64, 64, 0.3),
          inset -1px -1px 2px rgba(16, 16, 16, 0.5);
        border-radius: 12px;
        padding: 8px;
        .btnpercent {
          background: #282828;
          box-shadow: -2px 2px 4px rgba(16, 16, 16, 0.2),
            2px -2px 4px rgba(16, 16, 16, 0.2),
            -2px -2px 4px rgba(64, 64, 64, 0.9),
            2px 2px 5px rgba(16, 16, 16, 0.9),
            inset 1px 1px 2px rgba(64, 64, 64, 0.3),
            inset -1px -1px 2px rgba(16, 16, 16, 0.5);
          border-radius: 12px;
          color: #f6fafe;
          font-family: var(--font-mont);
          font-weight: 600;
          font-size: 1rem;
          text-decoration: none;
          padding: 10px 40px;
          font-size: 1.7rem;
          display: block;
        }
      }
    }
    .arrowbg {
      position: absolute;
      right: -60px;
      z-index: 1;
      padding: 15px 16px;
      top: 52px;
      background: #282828;
      box-shadow: -2px 2px 4px rgba(16, 16, 16, 0.2),
        2px -2px 4px rgba(16, 16, 16, 0.2), -2px -2px 4px rgba(64, 64, 64, 0.9),
        2px 2px 5px rgba(16, 16, 16, 0.9),
        inset 1px 1px 2px rgba(64, 64, 64, 0.3),
        inset -1px -1px 2px rgba(16, 16, 16, 0.5);
      border-radius: 50%;
      .arrow {
        background: #282828;
        box-shadow: -2px 2px 4px rgba(16, 16, 16, 0.2),
          2px -2px 4px rgba(16, 16, 16, 0.2),
          -2px -2px 4px rgba(64, 64, 64, 0.9), 2px 2px 5px rgba(16, 16, 16, 0.9),
          inset 1px 1px 2px rgba(64, 64, 64, 0.3),
          inset -1px -1px 2px rgba(16, 16, 16, 0.5);
        border-radius: 50%;
        padding: 15px 18px;
      }
      .chevdown {
        display: none;
      }
    }
    .staked {
      background: #1c1c1c;
      box-shadow: -6px 6px 12px rgba(11, 11, 11, 0.2),
        6px -6px 12px rgba(11, 11, 11, 0.2),
        -6px -6px 12px rgba(45, 45, 45, 0.9), 6px 6px 15px rgba(11, 11, 11, 0.9),
        inset 1px 1px 2px rgba(45, 45, 45, 0.3),
        inset -1px -1px 2px rgba(11, 11, 11, 0.5);
      border-radius: 26px;
      text-align: center;
      padding: 40px;
      h3 {
        font-weight: 600;
        color: #fff;
      }
      h2 {
        font-size: 4rem;
      }
    }
    .dbtns {
      display: flex;
      justify-content: space-between;
    }
  }
  .wrap-nfts {
    position: relative;
    min-height: 600px;
    margin-top: 20px;
    .justdiv {
      min-width: 300px;
    }
    .nftbg {
      background: #282828;
      border-radius: 14.485px;
      box-shadow: -1.93133px 1.93133px 3.86266px rgba(16, 16, 16, 0.2),
        1.93133px -1.93133px 3.86266px rgba(16, 16, 16, 0.2),
        -1.93133px -1.93133px 3.86266px rgba(64, 64, 64, 0.9),
        1.93133px 1.93133px 4.82833px rgba(16, 16, 16, 0.9),
        inset 0.965665px 0.965665px 1.93133px rgba(64, 64, 64, 0.3),
        inset -0.965665px -0.965665px 1.93133px rgba(16, 16, 16, 0.5);
      border-radius: 14.485px;
      padding: 17px 27px;
      .nft-file {
        padding: 5px 0;
        h3 {
          font-size: 1.2rem;
          color: #fff;
          font-weight: bold;
        }
      }
      .nft-labels {
        .item {
          width: 100%;
          background: url(/assets/images/homepage/label-bg.png) no-repeat;
          background-size: cover;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10%;
          height: 30px;
          box-sizing: border-box;
          padding-left: 12px;
          padding-right: 10px;
          margin-bottom: 7px;
          .ilabel {
            color: #fff;
            display: flex;
            align-content: center;
            flex-wrap: wrap;
          }
          .ivalue {
            color: #ffffff;
            display: flex;
            align-content: center;
            flex-wrap: wrap;
          }
        }
      }
      .nft-btns {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .btn-status-staked {
          width: 100%;
          background: linear-gradient(100.78deg, #3aff3b 0%, #7bff7c 100%);
          border-radius: 0px 0px 0px 11.588px;
          font-style: normal;
          font-weight: 700;
          font-size: 15.6501px;
          line-height: 19px;
          text-align: center;
          color: #1c1c1c;
          padding: 15px 0;
        }
        .btn-unstake-action {
          width: 100%;
          background: #303030;
          border: 0.965665px solid #505050;
          border-radius: 0px 0px 11.588px 0px;
          font-style: normal;
          font-weight: 700;
          font-size: 15.6501px;
          line-height: 19px;
          text-align: center;
          color: #fff;
          padding: 15px 0;
        }
      }
      img.nftimg {
        width: 100%;
      }
      .nft-img {
        position: relative;
      }
      img.dl {
        position: absolute;
        top: 9px;
        right: 8px;
      }
    }
    .nftbg.staked {
      box-shadow: -1.93133px 1.93133px 3.86266px rgba(16, 16, 16, 0.2),
        1.93133px -1.93133px 3.86266px rgba(16, 16, 16, 0.2),
        -1.93133px -1.93133px 3.86266px rgba(64, 64, 64, 0.9),
        1.93133px 1.93133px 4.82833px rgba(16, 16, 16, 0.9),
        inset 0px 0px 21.0999px 6.90184px rgba(52, 255, 54, 0.35),
        inset 0.965665px 0.965665px 1.93133px rgba(64, 64, 64, 0.3),
        inset -0.965665px -0.965665px 1.93133px rgba(16, 16, 16, 0.5);
      .btn-status-staked {
        background: #acacac;
        box-shadow: inset 0px 0px 15.677px 1.97195px rgba(52, 255, 54, 0.82);
      }
    }
  }
  .wrap-walletconnect {
    width: 100%;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
#hero video {
  position: absolute;
  z-index: 1;
  opacity: 50%;
  flex: 0;
  min-height: 100vh;
  min-width: 100%;
}
.herobg {
  position: absolute;
  background: url(/assets/images/homepage/hbg.png) no-repeat;
  background-size: contain;
  background-position: right;
  width: 100%;
  height: 100vh;
  z-index: 0;
  .tcjngl {
    position: absolute;
    left: 48%;
    top: 50px;
  }
  .tljngl {
    position: absolute;
    left: 10%;
    top: 50px;
  }
  .trjngl {
    position: absolute;
    right: 11%;
    top: 30px;
  }
  .brjngl {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
h1.hero {
  font-family: "Inter", sans-serif;
  color: #646464;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
h2.hero {
  font-family: "Inter", sans-serif;
  color: #646464;
  font-size: 15px;
  font-weight: 400;
  line-height: 19.95px;
}
.heroimgs {
  position: absolute;
  z-index: 1;
}
.ecllpse {
  bottom: 0;
  left: 50%;
  margin-left: -614.5px;
  z-index: 2;
}
.midkongs {
  bottom: 0;
  left: 50%;
  margin-left: -211.5px;
  z-index: 4;
}
.tokongs {
  bottom: 0;
  left: 50%;
  margin-left: -400.5px;
  z-index: 3;
}
.lcrystal {
  left: 200px;
}
.trcrystal {
  right: 220px;
  top: 120px;
}
.brcrystal {
  bottom: -50px;
  right: 0;
}
.cbounce {
  -webkit-animation: crystalbounce 3.5s linear infinite;
  animation: crystalbounce 3.5s linear infinite;
}
.cbounce2 {
  -webkit-animation: crystalbounce 3s linear infinite;
  animation: crystalbounce 3s linear infinite;
}
.cbouncebc {
  -webkit-animation: crystalbounce 10s linear infinite;
  animation: crystalbounce 10s linear infinite;
}
@keyframes crystalbounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*end jngl*/

.shadowbox {
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background-color: hsla(0, 0%, 100%, 0.3);
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 50%;
  filter: blur(50px);
  transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.own-box img {
  position: relative;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .shadow.out {
    opacity: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .shadow.in {
    opacity: 1;
  }
}

/*swiper*/
.swiper-button-next,
.swiper-button-prev {
  width: calc(var(--swiper-navigation-size) / 44 * 490);
  color: #616161;
}
.swiper-slide {
  height: 100vh;
}
.all-swiper-nav {
  position: absolute;
  right: 20px;
  width: 68px;
  border: 2px solid #646464;
  border-radius: 20px;
  padding: 0;
  margin: 0;
  top: 30px;
}
a.swiper-prev.swiper-nav svg:hover {
  background-color: #1e1e1e;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  cursor: pointer;
}
a.swiper-next.swiper-nav svg:hover {
  background-color: #1e1e1e;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  cursor: pointer;
}
.swiper-nav {
  z-index: 10;
  transition: 0.2s ease-in;
}
.eco-swiper-container {
  position: relative;
}
.eco-swiper-container.shadows:after,
.eco-swiper-container.shadows:before {
  content: "";
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}
.eco-swiper-container.shadows:before {
  right: 0;
  background: linear-gradient(90deg, transparent, #000);
}
.eco-swiper-container.shadows:after {
  left: 0;
  background: linear-gradient(270deg, transparent, #000);
}

#footer {
  position: relative;
  z-index: 100; /* Higher than side-bar's 22 */
  margin-top: 80px;
  background-color: #080808;
  font-family: "Manrope", sans-serif;
}
.fsocicons ul li {
  float: left;
  margin-right: 20px;
}
.fsocicons ul {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}
#footer h4.tfc {
  font-size: 16px;
  font-weight: 400;
}
#footer .flinks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer .flinks ul li {
  padding-top: 8px;
}
#footer .flinks ul li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}
#footer .vrybtm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer .vrybtm ul li {
  float: right;
  margin-left: 20px;
}
#footer .vrybtm ul li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.fboxwrap {
  background: radial-gradient(
        circle at 100% 100%,
        #171717 0,
        #171717 15px,
        transparent 15px
      )
      0% 0%/16px 16px no-repeat,
    radial-gradient(circle at 0 100%, #171717 0, #171717 15px, transparent 15px)
      100% 0%/16px 16px no-repeat,
    radial-gradient(circle at 100% 0, #171717 0, #171717 15px, transparent 15px)
      0% 100%/16px 16px no-repeat,
    radial-gradient(circle at 0 0, #171717 0, #171717 15px, transparent 15px)
      100% 100%/16px 16px no-repeat,
    linear-gradient(#171717, #171717) 50% 50% / calc(100% - 2px)
      calc(100% - 32px) no-repeat,
    linear-gradient(#171717, #171717) 50% 50% / calc(100% - 32px)
      calc(100% - 2px) no-repeat,
    linear-gradient(#1a1a1a 32%, #454545 100%);
  border-radius: 16px;
  padding: 18px;
  box-sizing: border-box;
  margin-bottom: 20px;
  width: 88%;
  margin-left: auto;
}
#footer .fboxwrap img {
  float: left;
}
#footer .fboxwrap p {
  margin-left: 47px;
  text-align: right;
}
.fboxwrap p.fbtit {
  color: var(--theme-font-color);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}
.fboxwrap p.fbsubt {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}
#footer .flinks a:hover {
  color: rgba(255, 255, 255, 0.6) !important;
  left: 2px;
  position: relative;
}
#footer .vrybtm a:hover {
  left: 2px;
  position: relative;
  color: #fff !important;
}

/*buttons*/
.btn-validate,
.btn-stake {
  box-sizing: border-box;
  background: linear-gradient(94.64deg, #2aff2c 1.87%, #87ff88 99.12%);
  border: 1.33448px solid #03a200;
  border-radius: 12.0103px;
  padding: 10px 60px;
  font-family: var(--font-mont);
  font-style: normal;
  font-weight: 700;
  font-size: 21.3517px;
  text-align: center;
  color: #1c1c1c;
  &:hover,
  &:focus {
    color: #000;
  }
  &.medium {
    padding: 10px 40px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
  }
  &.block {
    display: block !important;
    width: 100%;
  }
}

.btn-connect {
  box-sizing: border-box;
  background: linear-gradient(94.64deg, #2aff2c 1.87%, #87ff88 99.12%);
  border: 1.33448px solid #03a200;
  border-radius: 12.0103px;
  padding: 10px 60px;
  font-family: var(--font-mont);
  font-style: normal;
  font-weight: 700;
  font-size: 21.3517px;
  text-align: center;
  color: #1c1c1c;
  &:hover,
  &:focus {
    color: #000;
  }
  &.block {
    display: block !important;
    width: 100%;
  }
}
.btn-unstake {
  box-sizing: border-box;
  background: #1c1c1c;
  border: 1.33448px solid #e0e6f3;
  border-radius: 12.0103px;
  padding: 10px 60px;
  font-family: var(--font-mont);
  font-style: normal;
  font-weight: 700;
  font-size: 21.3517px;
  color: #fff;
  &.medium {
    padding: 10px 40px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
  }
  &.block {
    display: block !important;
    width: 100%;
  }
}
.btn-primary {
  height: 38px;
  background: linear-gradient(94.64deg, #2aff2c 1.87%, #87ff88 99.12%);
  border-radius: 35px;
  font-family: var(--font-inter);
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  align-items: center;
  text-align: center;
  color: #28282b;
  padding: 8px 20px;
  border: none !important;
  &.block {
    display: block !important;
    width: 100%;
  }
}
.btn-secondary {
  border: none !important;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  font-family: var(--font-inter);
  background: #282828;
  box-shadow: -2px 2px 4px rgba(16, 16, 16, 0.2),
    2px -2px 4px rgba(16, 16, 16, 0.2), -2px -2px 4px rgba(64, 64, 64, 0.9),
    2px 2px 5px rgba(16, 16, 16, 0.9), inset 1px 1px 2px rgba(64, 64, 64, 0.3),
    inset -1px -1px 2px rgba(16, 16, 16, 0.5);
  border-radius: 35px;
  &.block {
    display: block !important;
    width: 100%;
  }
}
.btn-primary:hover {
  color: #1e1e1e;
}
@media only screen and (max-width: 768px) {
  .wrapwalletconnect {
    right: 10%;
  }
  .btn-connect {
    padding: 10px 0;
  }
  .btn-validate,
  .btn-stake,
  .btn-unstake {
    display: block;
    padding: 10px 0;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 200px; /* Or whatever width you prefer */
  }
  #main {
    position: relative;
  }
  .overlay {
    video {
      transform: scale(5.5);
    }
    button {
      margin-right: unset;
    }
    .overlay-btns {
      padding: 20px;
      .copyright {
        font-size: 11px;
        text-align: center;
      }
      .plinks {
        text-align: center;
        ul li a {
          font-size: 11px;
        }
      }
      .btnsocial ul {
        display: flex;
        justify-content: space-between;
      }
      .btnsocial ul li {
        margin-left: unset;
      }
      .btnsocial ul li a {
        font-size: 12px;
        line-height: 12px;
        padding: 8px 13px;
      }
      .d-flex.justify-content-between {
        flex-direction: column;
      }
    }
  }
  .stars,
  .stars2,
  .stars3 {
    display: none;
  }
  .side-bar {
    background: rgb(0 0 0 / 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    position: fixed;
    z-index: 22;
    border-bottom: 1px solid #616161;
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: auto;
    top: 0;
    min-height: auto;
    &::after {
      content: unset;
    }
  }
  #nav-burger {
    width: 35px;
    height: 35px;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    span {
      background-color: #f0f0f0 !important;
    }
    span:nth-child(1) {
      top: 10px;
    }
    span:nth-child(2) {
      width: 60%;
      top: 20px;
      right: 0;
      left: unset;
    }
    span:nth-child(3) {
      opacity: 0;
    }
    span:nth-child(4) {
      top: 30px;
    }
  }
  .side-bar__top {
    margin: 0;
  }
  #hero {
    min-height: auto;
    overflow: auto;
    height: auto;
    .mobile {
      display: block;
    }
    .rbcrystal,
    .lbcrystal {
      display: none;
    }
    .herobg {
      background: url(/assets/images/homepage/circles-mbg.png) no-repeat;
      background-size: contain;
      background-position: center;
      .brjngl,
      .trjngl,
      .tcjngl {
        display: none;
      }
    }
    .crmobile {
      width: max-content;
      margin: auto;
    }
    .wrapnav {
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      margin-bottom: 20px;
      .rnav {
        display: none;
      }
    }
    .wrapstaking {
      &.pad20 {
        padding: 20px 25px;
      }
      .arrowbg {
        top: unset;
        right: unset;
        bottom: -50px;
        left: 50%;
        margin-left: -42px;
        .chevright {
          display: none;
        }
        .chevdown {
          display: block;
        }
      }
      .btns {
        .btnwrap {
          .btnpercent {
            padding: 10px 20px;
            font-size: 12px;
          }
        }
      }
      .dbtns {
        display: block;
      }
    }
    .wrap_ptitle {
      margin-top: 100px;
    }
    .wrap-staking-bg {
      padding: 20px 10px;
      overflow: visible !important;
      .wrap-stakinginfo {
        flex-direction: column;
        .sinfo {
          font-size: 16px;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          .stats {
            margin-left: 1px;
          }
        }
        .sbtns {
          display: flex;
          justify-content: space-between;
          a.medium {
            padding: 10px;
            width: 48%;
          }
        }
      }
    }
    .wrap-nfts {
      .nftbg {
        .nft-labels {
          .item {
            height: 40px;
          }
        }
      }
      img.dl {
        top: 12px !important;
        right: 17px !important;
        transform: scale(1.3);
      }
    }
  }
  header.menuBar {
    .wrapmenus {
      display: flex;
      justify-content: space-between;
    }
    .wrapwalletconnect {
      display: none;
    }
    .connectw {
      display: block;
      margin-right: 10px;
    }
    .connectw.connected {
      border-radius: 35px;
      background-color: #181a18;
      border: 1px solid #7f7f7f;
      display: flex;
      justify-content: space-between;
      padding: 4px;
      .jnglbal {
        color: #7f7f7f;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        align-items: center;
        text-align: center;
        display: flex;
        padding: 0 10px;
      }
      .walletinfo {
        border-radius: 35px;
        background-color: #808080;
        padding: 2px 3px 2px 11px;
        color: #030303;
      }
    }
    .btw-cw {
      width: 108.59px;
      height: 38px;
      color: #030303;
      background: linear-gradient(94.64deg, #2aff2c 1.87%, #87ff88 99.12%);
      border-radius: 35px;
    }
  }

  #footer {
    h4.tfc {
      margin-top: 20px;
    }
    .fboxwrap {
      width: 100%;
      margin-top: 10px;
    }
  }
}

.wallet-menu {
  position: absolute;
  top: 50px; /* Add space below the wallet icon */
  right: 0;
  background: rgba(0, 0, 0, 0.7); /* Transparent black background */
  border: 1px solid #3aff3b;
  border-radius: 8px;
  padding: 8px;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.wallet-menu button {
  background: #3aff3b;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}

.wallet-menu button:hover {
  background: #32e832; /* Slightly darker green on hover */
}




@media only screen and (max-width: 390px) {
  #hero {
    .wrapstaking {
      .btns {
        .btnwrap {
          .btnpercent {
            padding: 10px 15px;
            font-size: 11px;
          }
        }
      }
    }
  }
}
.stars {
  position: absolute;
  z-index: 0;
  width: 4px;
  height: 4px;
  background: transparent;
  animation: animStar 150s linear infinite;
  box-shadow: 779px 1331px #2d2d2d, 324px 42px #2d2d2d, 303px 586px #2d2d2d,
    1312px 276px #2d2d2d, 451px 625px #2d2d2d, 521px 1931px #2d2d2d,
    1087px 1871px #2d2d2d, 36px 1546px #2d2d2d, 132px 934px #fff,
    1698px 901px #2d2d2d, 1418px 664px #2d2d2d, 1448px 1157px #2d2d2d,
    1084px 232px #2d2d2d, 347px 1776px #2d2d2d, 1722px 243px #2d2d2d,
    1629px 835px #2d2d2d, 479px 969px #2d2d2d, 1231px 960px #2d2d2d,
    586px 384px #2d2d2d, 164px 527px #2d2d2d, 8px 646px #2d2d2d,
    1150px 1126px #2d2d2d, 665px 1357px #2d2d2d, 1556px 1982px #2d2d2d,
    1260px 1961px #2d2d2d, 1675px 1741px #2d2d2d, 858px 1007px #2d2d2d,
    200px 1064px #fff, 423px 1964px #2d2d2d, 1945px 439px #2d2d2d,
    1377px 689px #2d2d2d, 1120px 1437px #2d2d2d, 1876px 668px #2d2d2d,
    907px 1324px #2d2d2d, 529px 1589px #2d2d2d, 164px 666px #2d2d2d,
    1876px 1290px #2d2d2d, 1541px 526px #2d2d2d, 270px 1297px #2d2d2d,
    440px 865px #fff, 1500px 802px #2d2d2d, 182px 1754px #2d2d2d,
    1264px 892px #2d2d2d, 272px 1249px #2d2d2d, 1289px 1535px #2d2d2d,
    190px 1646px #2d2d2d, 955px 242px #2d2d2d, 1456px 1597px #fff,
    1727px 1983px #2d2d2d, 635px 801px #2d2d2d, 1300px 1917px #2d2d2d,
    1860px 396px #2d2d2d, 1270px 990px #2d2d2d, 529px 733px #2d2d2d,
    1335px 872px #2d2d2d, 1647px 1298px #2d2d2d, 1233px 1387px #2d2d2d,
    698px 1036px #2d2d2d, 659px 1860px #2d2d2d, 388px 1412px #fff,
    1212px 458px #2d2d2d, 755px 1468px #2d2d2d, 696px 1654px #2d2d2d,
    1144px 60px #2d2d2d;
}

.stars:after {
  content: "";
  z-index: 0;
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 3px;
  background: transparent;
  box-shadow: 779px 1331px #2d2d2d, 324px 42px #fff, 303px 586px #2d2d2d,
    1312px 276px #fff, 451px 625px #2d2d2d, 521px 1931px #fff,
    1087px 1871px #2d2d2d, 36px 1546px #fff, 132px 934px #2d2d2d,
    1698px 901px #fff, 1418px 664px #2d2d2d, 1448px 1157px #fff,
    1084px 232px #2d2d2d, 347px 1776px #fff, 1722px 243px #2d2d2d,
    1629px 835px #fff, 479px 969px #2d2d2d, 1231px 960px #fff,
    586px 384px #2d2d2d, 164px 527px #fff, 8px 646px #2d2d2d, 1150px 1126px #fff,
    665px 1357px #2d2d2d, 1556px 1982px #fff, 1260px 1961px #2d2d2d,
    1675px 1741px #fff, 1843px 1514px #2d2d2d, 718px 1628px #fff,
    242px 1343px #fff, 1497px 1880px #fff, 1364px 230px #fff, 1739px 1302px #fff,
    636px 959px #fff, 304px 686px #fff, 1735px 1228px #fff, 379px 1890px #fff,
    79px 761px #fff, 825px 1837px #fff, 1980px 1558px #fff, 1308px 1573px #fff,
    1488px 1726px #fff, 382px 1208px #fff, 522px 595px #fff, 1277px 1898px #fff,
    354px 552px #fff, 1300px 1917px #fff, 1860px 396px #fff, 1270px 990px #fff,
    529px 733px #fff, 1975px 1347px #fff, 1885px 685px #fff, 226px 506px #fff,
    651px 878px #fff, 1323px 680px #fff, 1284px 680px #fff, 238px 1967px #fff,
    911px 174px #fff, 1111px 521px #fff, 1150px 85px #fff, 794px 502px #fff,
    484px 1856px #fff, 1809px 368px #fff, 112px 953px #fff, 590px 1009px #fff,
    1655px 311px #fff;
}

.stars2 {
  position: absolute;
  z-index: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  animation: animStar 200s linear infinite;
  box-shadow: 1448px 320px #a8a8a8, 1775px 1663px #a8a8a8, 332px 1364px #a8a8a8,
    878px 340px #a8a8a8, 569px 1832px #a8a8a8, 1422px 1684px #a8a8a8,
    1946px 1907px #a8a8a8, 121px 979px #a8a8a8, 1044px 1069px #a8a8a8,
    463px 381px #a8a8a8, 423px 112px #a8a8a8, 523px 1179px #a8a8a8,
    779px 654px #a8a8a8, 1398px 694px #a8a8a8, 1085px 1464px #a8a8a8,
    1599px 1869px #a8a8a8, 801px 1882px #a8a8a8, 779px 1231px #a8a8a8,
    552px 932px #a8a8a8, 1057px 1196px #a8a8a8, 282px 1280px #a8a8a8,
    496px 1986px #a8a8a8, 1833px 1120px #a8a8a8, 1802px 1293px #a8a8a8,
    6px 1696px #a8a8a8, 412px 1902px #a8a8a8, 605px 438px #a8a8a8,
    24px 1212px #a8a8a8, 234px 1320px #a8a8a8, 544px 344px #a8a8a8,
    1107px 170px #a8a8a8, 1603px 196px #a8a8a8, 905px 648px #a8a8a8,
    68px 1458px #a8a8a8, 649px 1969px #a8a8a8, 744px 675px #a8a8a8,
    1127px 478px #a8a8a8, 714px 1814px #a8a8a8, 1486px 526px #a8a8a8,
    270px 1636px #a8a8a8, 1931px 149px #a8a8a8, 1807px 378px #a8a8a8,
    8px 390px #a8a8a8, 1415px 699px #a8a8a8, 1473px 1211px #a8a8a8,
    1590px 141px #a8a8a8, 270px 1705px #a8a8a8, 69px 1423px #a8a8a8,
    1108px 1053px #a8a8a8, 1946px 128px #a8a8a8, 371px 371px #a8a8a8,
    1490px 220px #a8a8a8, 357px 1885px #a8a8a8, 363px 363px #a8a8a8,
    1896px 1256px #a8a8a8, 1979px 1050px #a8a8a8, 947px 1342px #a8a8a8,
    1754px 242px #a8a8a8, 514px 974px #a8a8a8, 65px 1477px #a8a8a8,
    1840px 547px #a8a8a8, 950px 695px #a8a8a8, 459px 1150px #a8a8a8,
    1124px 1502px #a8a8a8, 481px 940px #a8a8a8, 680px 839px #a8a8a8,
    797px 1169px #a8a8a8, 887px 536px #a8a8a8, 1348px 1596px #a8a8a8,
    1055px 666px #a8a8a8, 1402px 1797px #a8a8a8, 1300px 1055px #a8a8a8,
    937px 238px #a8a8a8, 1474px 1815px #a8a8a8, 1144px 1710px #a8a8a8,
    1629px 1087px #a8a8a8, 911px 919px #a8a8a8, 771px 819px #a8a8a8,
    403px 720px #a8a8a8, 163px 736px #a8a8a8, 1062px 238px #a8a8a8,
    1774px 818px #a8a8a8, 1874px 1178px #a8a8a8, 1177px 699px #a8a8a8,
    1244px 1244px #a8a8a8, 1371px 58px #a8a8a8, 564px 1515px #a8a8a8,
    1824px 487px #a8a8a8, 929px 702px #a8a8a8, 394px 1348px #a8a8a8,
    1161px 641px #a8a8a8, 219px 1841px #a8a8a8, 358px 941px #a8a8a8,
    140px 1759px #a8a8a8, 1019px 1345px #a8a8a8, 274px 436px #a8a8a8,
    1433px 1605px #a8a8a8, 1798px 1426px #a8a8a8, 294px 1848px #a8a8a8,
    1681px 1877px #a8a8a8, 1344px 1824px #a8a8a8, 1439px 1632px #a8a8a8,
    161px 1012px #a8a8a8, 1308px 588px #a8a8a8, 1789px 582px #a8a8a8,
    721px 1910px #a8a8a8, 318px 218px #a8a8a8, 607px 319px #a8a8a8,
    495px 535px #a8a8a8, 1552px 1575px #a8a8a8, 1562px 67px #a8a8a8,
    403px 926px #a8a8a8, 1096px 1800px #a8a8a8, 1814px 1709px #a8a8a8,
    1882px 1831px #a8a8a8, 533px 46px #a8a8a8, 823px 969px #a8a8a8,
    530px 165px #a8a8a8, 1030px 352px #a8a8a8, 1681px 313px #a8a8a8,
    338px 115px #a8a8a8, 1607px 211px #a8a8a8, 1718px 1184px #a8a8a8,
    1589px 659px #a8a8a8, 278px 355px #a8a8a8, 464px 1464px #a8a8a8,
    1165px 277px #a8a8a8, 950px 694px #a8a8a8, 1746px 293px #a8a8a8,
    793px 911px #a8a8a8, 528px 773px #a8a8a8, 1883px 1694px #a8a8a8,
    748px 182px #a8a8a8, 1924px 1531px #a8a8a8, 100px 636px #a8a8a8,
    1473px 1445px #a8a8a8, 1264px 1244px #a8a8a8, 850px 1377px #a8a8a8,
    987px 1976px #a8a8a8, 933px 1761px #a8a8a8, 922px 1270px #a8a8a8,
    500px 396px #a8a8a8, 1324px 8px #a8a8a8, 1967px 1814px #a8a8a8,
    1072px 1401px #a8a8a8, 961px 37px #a8a8a8, 156px 81px #a8a8a8,
    1915px 502px #a8a8a8, 1076px 1846px #a8a8a8, 152px 1669px #a8a8a8,
    986px 1529px #a8a8a8, 1667px 1137px #a8a8a8;
}

.stars2:after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  z-index: 0;
  background: transparent;
  box-shadow: 1448px 320px #a8a8a8, 1775px 1663px #a8a8a8, 332px 1364px #a8a8a8,
    878px 340px #a8a8a8, 569px 1832px #a8a8a8, 1422px 1684px #a8a8a8,
    1946px 1907px #a8a8a8, 121px 979px #a8a8a8, 1044px 1069px #a8a8a8,
    463px 381px #a8a8a8, 423px 112px #a8a8a8, 523px 1179px #a8a8a8,
    779px 654px #a8a8a8, 1398px 694px #a8a8a8, 1085px 1464px #a8a8a8,
    1599px 1869px #a8a8a8, 801px 1882px #a8a8a8, 779px 1231px #a8a8a8,
    552px 932px #a8a8a8, 1057px 1196px #a8a8a8, 282px 1280px #a8a8a8,
    496px 1986px #a8a8a8, 1833px 1120px #a8a8a8, 1124px 1502px #a8a8a8,
    481px 940px #a8a8a8, 680px 839px #a8a8a8, 797px 1169px #a8a8a8,
    1977px 1491px #a8a8a8, 734px 1724px #a8a8a8, 210px 298px #a8a8a8,
    816px 628px #a8a8a8, 686px 770px #a8a8a8, 1721px 267px #a8a8a8,
    1663px 511px #a8a8a8, 1481px 1141px #a8a8a8, 219px 1841px #a8a8a8,
    358px 941px #a8a8a8, 140px 1759px #a8a8a8, 1019px 1345px #a8a8a8,
    274px 436px #a8a8a8, 1433px 1605px #a8a8a8, 1798px 1426px #a8a8a8,
    294px 1848px #a8a8a8, 1681px 1877px #a8a8a8, 1344px 1824px #a8a8a8,
    1439px 1632px #a8a8a8, 161px 1012px #a8a8a8, 1308px 588px #a8a8a8,
    1789px 582px #a8a8a8, 721px 1910px #a8a8a8, 318px 218px #a8a8a8,
    607px 319px #a8a8a8, 495px 535px #a8a8a8, 1552px 1575px #a8a8a8,
    1562px 67px #a8a8a8, 403px 926px #a8a8a8, 1096px 1800px #a8a8a8,
    1814px 1709px #a8a8a8, 1882px 1831px #a8a8a8, 533px 46px #a8a8a8,
    823px 969px #a8a8a8, 530px 165px #a8a8a8, 1030px 352px #a8a8a8,
    1681px 313px #a8a8a8, 338px 115px #a8a8a8, 1607px 211px #a8a8a8,
    1718px 1184px #a8a8a8, 1589px 659px #a8a8a8, 278px 355px #a8a8a8,
    464px 1464px #a8a8a8, 1165px 277px #a8a8a8, 950px 694px #a8a8a8,
    1746px 293px #a8a8a8, 793px 911px #a8a8a8, 528px 773px #a8a8a8,
    1883px 1694px #a8a8a8, 748px 182px #a8a8a8, 1924px 1531px #a8a8a8,
    100px 636px #a8a8a8, 1473px 1445px #a8a8a8, 1264px 1244px #a8a8a8,
    850px 1377px #a8a8a8, 987px 1976px #a8a8a8, 933px 1761px #a8a8a8,
    922px 1270px #a8a8a8, 500px 396px #a8a8a8, 1324px 8px #a8a8a8,
    1967px 1814px #a8a8a8, 1072px 1401px #a8a8a8, 961px 37px #a8a8a8,
    156px 81px #a8a8a8, 1915px 502px #a8a8a8, 1076px 1846px #a8a8a8,
    152px 1669px #a8a8a8, 986px 1529px #a8a8a8, 1667px 1137px #a8a8a8;
}

.stars3 {
  position: absolute;
  z-index: 0;
  width: 3px;
  height: 3px;
  background: transparent;
  animation: animStar 350s linear infinte;
  box-shadow: 387px 1878px #454545, 760px 1564px #454545, 1487px 999px #454545,
    948px 1828px #454545, 1977px 1001px #454545, 1284px 1963px #454545,
    656px 284px #454545, 1268px 1635px #454545, 1820px 598px #454545,
    642px 1900px #454545, 296px 57px #454545, 921px 1620px #454545,
    476px 1858px #454545, 658px 613px #454545, 1171px 1363px #454545,
    1419px 283px #454545, 1037px 731px #454545, 503px 663px #454545,
    1562px 463px #454545, 383px 1197px #454545, 1171px 1233px #454545,
    876px 1768px #454545, 856px 1615px #454545, 1375px 1924px #454545,
    1725px 918px #454545, 952px 119px #454545, 768px 1212px #454545,
    992px 1462px #454545, 1929px 717px #454545, 1947px 755px #454545,
    1818px 1123px #454545, 1896px 1672px #454545, 460px 198px #454545,
    256px 271px #454545, 752px 544px #454545, 1222px 1859px #454545,
    1851px 443px #454545, 313px 1858px #454545, 709px 446px #454545,
    1546px 697px #454545, 674px 1155px #454545, 1112px 130px #454545,
    355px 1790px #454545, 1496px 974px #454545, 1696px 480px #454545,
    1316px 1265px #454545, 1645px 1063px #454545, 1182px 237px #454545,
    427px 1582px #454545, 859px 253px #454545, 458px 939px #454545,
    1517px 1644px #454545, 1943px 60px #454545, 212px 1650px #454545,
    966px 1786px #454545, 473px 712px #454545, 130px 76px #454545,
    1417px 1186px #454545, 909px 1580px #454545, 1913px 762px #454545,
    204px 1143px #454545, 1998px 1057px #454545, 1468px 1301px #454545,
    1896px 1672px #454545, 460px 198px #454545, 256px 271px #454545,
    752px 544px #454545, 1222px 1859px #454545, 1851px 443px #454545,
    313px 1858px #454545, 709px 446px #454545, 1546px 697px #454545,
    674px 1155px #454545, 1112px 130px #454545, 355px 1790px #454545,
    1496px 974px #454545, 1696px 480px #454545, 1316px 1265px #454545,
    1645px 1063px #454545, 1182px 237px #454545, 427px 1582px #454545,
    859px 253px #454545, 458px 939px #454545, 1517px 1644px #454545,
    1943px 60px #454545, 212px 1650px #454545, 966px 1786px #454545,
    473px 712px #454545, 130px 76px #454545, 1417px 1186px #454545,
    909px 1580px #454545, 1913px 762px #454545, 204px 1143px #454545,
    1998px 1057px #454545, 1468px 1301px #454545, 144px 1676px #454545,
    21px 1601px #454545, 382px 1362px #454545, 912px 753px #454545,
    1488px 1405px #454545, 802px 156px #454545, 174px 550px #454545,
    338px 1366px #454545, 1197px 774px #454545, 602px 486px #454545,
    682px 1877px #454545, 348px 1503px #454545, 407px 1139px #454545,
    950px 1400px #454545, 922px 1139px #454545, 1697px 293px #454545,
    1238px 1281px #454545, 1038px 1197px #454545, 376px 1889px #454545,
    1255px 1680px #454545, 1008px 1316px #454545, 1538px 1447px #454545,
    1186px 874px #454545, 1967px 640px #454545, 1341px 19px #454545,
    29px 1732px #454545, 16px 1650px #454545, 1021px 1075px #454545,
    723px 424px #454545, 1175px 41px #454545, 494px 1957px #454545,
    1296px 431px #454545, 175px 1507px #454545, 831px 121px #454545,
    498px 1947px #454545, 617px 880px #454545, 240px 403px #454545;
}

.stars3:after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  z-index: 0;
  background: transparent;
  box-shadow: 387px 1878px #454545, 760px 1564px #454545, 1487px 999px #454545,
    948px 1828px #454545, 1977px 1001px #454545, 1284px 1963px #454545,
    656px 284px #454545, 1268px 1635px #454545, 1820px 598px #454545,
    642px 1900px #454545, 296px 57px #454545, 921px 1620px #454545,
    476px 1858px #454545, 658px 613px #454545, 1171px 1363px #454545,
    1419px 283px #454545, 1037px 731px #454545, 503px 663px #454545,
    1562px 463px #454545, 383px 1197px #454545, 1171px 1233px #454545,
    876px 1768px #454545, 856px 1615px #454545, 1375px 1924px #454545,
    1725px 918px #454545, 952px 119px #454545, 768px 1212px #454545,
    992px 1462px #454545, 1929px 717px #454545, 1947px 755px #454545,
    1818px 1123px #454545, 1896px 1672px #454545, 460px 198px #454545,
    256px 271px #454545, 752px 544px #454545, 1222px 1859px #454545,
    1851px 443px #454545, 313px 1858px #454545, 709px 446px #454545,
    1546px 697px #454545, 674px 1155px #454545, 1112px 130px #454545,
    355px 1790px #454545, 1496px 974px #454545, 1696px 480px #454545,
    1316px 1265px #454545, 1645px 1063px #454545, 1182px 237px #454545,
    427px 1582px #454545, 859px 253px #454545, 458px 939px #454545,
    1517px 1644px #454545, 1943px 60px #454545, 212px 1650px #454545,
    966px 1786px #454545, 473px 712px #454545, 130px 76px #454545,
    1417px 1186px #454545, 909px 1580px #454545, 1913px 762px #454545,
    204px 1143px #454545, 1998px 1057px #454545, 1468px 1301px #454545,
    144px 1676px #454545, 21px 1601px #454545, 382px 1362px #454545,
    912px 753px #454545, 1488px 1405px #454545, 802px 156px #454545,
    174px 550px #454545, 338px 1366px #454545, 1197px 774px #454545,
    602px 486px #454545, 682px 1877px #454545, 348px 1503px #454545,
    407px 1139px #454545, 950px 1400px #454545, 922px 1139px #454545,
    1697px 293px #454545, 1238px 1281px #454545, 1038px 1197px #454545,
    376px 1889px #454545, 1255px 1680px #454545, 1008px 1316px #454545,
    1538px 1447px #454545, 1186px 874px #454545, 1967px 640px #454545,
    1341px 19px #454545, 29px 1732px #454545, 16px 1650px #454545,
    1021px 1075px #454545, 723px 424px #454545, 1175px 41px #454545,
    494px 1957px #454545, 1296px 431px #454545, 175px 1507px #454545,
    831px 121px #454545, 498px 1947px #454545, 617px 880px #454545,
    240px 403px #454545;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}