@font-face {
  font-family: "Abalone Smile";
  font-display: swap;
  src: url("../fonts/Abalone Smile.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Pulang;
  font-display: swap;
  src: url(../fonts/Pulang.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  border: 0;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
*::after,
*::before {
  display: inline-block;
}
body,
html {
  height: 100%;
  min-width: 320px;
}
body {
  color: #000;
  line-height: 1;
  font-family: "Abalone Smile";
  font-size: 1.25rem;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button,
input,
textarea {
  font-family: "Abalone Smile";
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
}
input,
textarea {
  width: 100%;
}
label {
  display: inline-block;
}
button,
option,
select {
  cursor: pointer;
}
a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}
.lock body {
  overflow: hidden;
  touch-action: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports (overflow: clip) {
  .wrapper {
    overflow: clip;
  }
}
.wrapper > main {
  flex: 1 1 auto;
}
.wrapper > * {
  min-width: 0;
}
[class*="__container"] {
  max-width: 99.375rem;
  margin: 0 auto;
  padding: 0 0.9375rem;
}
[class*="--gc"] {
  display: grid;
  min-width: 0;
  grid-template-columns: 0.9375rem 1fr minmax(auto, 97.5rem) 1fr 0.9375rem;
}
[class*="--gc"] > * {
  min-width: 0;
  grid-column: 3/4;
}
.menu__body {
  border-radius: 0.8125rem;
  background-color: #7834c7;
  padding: 0.25rem;
}
.menu__list {
  padding: 0.625rem 1.5625rem;
  display: flex;
  align-items: center;
  border-radius: 0.625rem;
  border: 0.125rem solid #000;
  background-color: #dfeffd;
}
.menu__link {
  color: #000;
  font-family: "Abalone Smile";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: color 0.2s ease 0s, scale 0.2s ease 0s;
}
.menu__link._navigator-active {
  color: #7834c7;
  scale: 1.2;
}
.icon-menu {
  display: none;
}
.ibg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.ibg--top {
  -o-object-position: top;
  object-position: top;
}
.ibg--bottom {
  -o-object-position: bottom;
  object-position: bottom;
}
.ibg--left {
  -o-object-position: left;
  object-position: left;
}
.ibg--right {
  -o-object-position: right;
  object-position: right;
}
.ibg--contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 0.875rem;
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-column-gap: 1.25rem;
  -moz-column-gap: 1.25rem;
  column-gap: 1.25rem;
}
.header__logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.header__logo img {
  transition: scale 0.2s ease 0s;
  width: 100%;
}
.header__right {
  display: flex;
  align-items: center;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
}
.header__button {
  width: 10rem;
  height: 3.75rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8125rem;
  background-color: #7834c7;
}
.header__button::before {
  pointer-events: none;
  z-index: 1;
  content: "";
  position: absolute;
  inset: 0.25rem;
  border-radius: 0.625rem;
  border: 0.125rem solid #000;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.header__button span {
  position: relative;
  z-index: 2;
  color: #000;
  font-family: "Abalone Smile";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: letter-spacing 0.2s ease 0s;
}
.footer {
  position: relative;
  z-index: 3;
}
.footer__top {
  position: relative;
}
.footer__top::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 115%;
  background: url(../img/FooterBG.svg) top/cover no-repeat;
}
.footer__container {
  position: relative;
  z-index: 2;
}
.footer__top-body {
  display: flex;
  justify-content: space-between;
}
.footer__top-content {
  position: relative;
  z-index: 2;
}
.footer__top-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1rem;
}
.footer__top-menu-item {
  color: #6de635;
  -webkit-text-stroke-width: 0.0545454545em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: Pulang;
  font-style: normal;
  font-weight: 400;
  line-height: 95%;
  text-transform: uppercase;
  transition: color 0.2s ease 0s;
}
.footer__top-social {
  display: flex;
  align-items: center;
  -webkit-column-gap: 0.75rem;
  -moz-column-gap: 0.75rem;
  column-gap: 0.75rem;
}
.footer__top-social-item {
  flex-shrink: 0;
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8125rem;
  background-color: #7834c7;
}
.footer__top-social-item:nth-child(1)::after {
  background-color: #000;
}
.footer__top-social-item:nth-child(2)::after {
  background-color: #0cbeff;
}
.footer__top-social-item:nth-child(3)::after {
  background-color: #000;
}
.footer__top-social-item:nth-child(4)::after {
  background-color: #4cb5db;
}
.footer__top-social-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0.25rem;
  border-radius: 0.625rem;
  border: 0.125rem solid #000;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.footer__top-social-item::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.75rem;
  border-radius: 0.375rem;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.footer__top-social-item svg {
  position: relative;
  z-index: 3;
  width: 40%;
  height: 40%;
  transition: scale 0.2s ease 0s;
}
.footer__top-image {
  pointer-events: none;
  position: relative;
}
.footer__bottom {
  border-top: 0.3125rem solid #000;
  background-color: #6de635;
}
.footer__bottom-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
}
.footer__bottom-body > span {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  font-size: 1.25rem;
}
.footer__bottom-body a {
  display: flex;
  align-items: center;
  -webkit-column-gap: 0.375rem;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
}
.footer__bottom-body a span {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  font-size: 1.25rem;
}
.footer__bottom-body a img {
  width: 7.75rem;
}
.menu-open-bg {
  pointer-events: none;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  opacity: 0;
  transition: opacity 0.3s ease 0s;
}
.menu-open .menu-open-bg {
  opacity: 1;
}
@-webkit-keyframes to-right {
  0% {
    -webkit-transform: translateX(-150%) scaleX(1) scaleY(1);
    transform: translateX(-150%) scaleX(1) scaleY(1);
  }
  80% {
    -webkit-transform: translateX(10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@keyframes to-right {
  0% {
    -webkit-transform: translateX(-150%) scaleX(1) scaleY(1);
    transform: translateX(-150%) scaleX(1) scaleY(1);
  }
  80% {
    -webkit-transform: translateX(10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes to-right2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150%) scaleX(1) scaleY(1);
    transform: translateX(-150%) scaleX(1) scaleY(1);
  }
  25% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    -webkit-transform: translateX(10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@keyframes to-right2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150%) scaleX(1) scaleY(1);
    transform: translateX(-150%) scaleX(1) scaleY(1);
  }
  25% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    -webkit-transform: translateX(10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes to-left {
  0% {
    -webkit-transform: translateX(150%) scaleX(1) scaleY(1);
    transform: translateX(150%) scaleX(1) scaleY(1);
  }
  80% {
    -webkit-transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@keyframes to-left {
  0% {
    -webkit-transform: translateX(150%) scaleX(1) scaleY(1);
    transform: translateX(150%) scaleX(1) scaleY(1);
  }
  80% {
    -webkit-transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes to-left2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(150%) scaleX(1) scaleY(1);
    transform: translateX(150%) scaleX(1) scaleY(1);
  }
  25% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    -webkit-transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@keyframes to-left2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(150%) scaleX(1) scaleY(1);
    transform: translateX(150%) scaleX(1) scaleY(1);
  }
  25% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    -webkit-transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
    transform: translateX(-10%) scaleX(0.85) scaleY(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scaleX(1) scaleY(1);
    transform: translateX(0) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes to-left-basic {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(2.5rem);
    transform: translateX(2.5rem);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes to-left-basic {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(2.5rem);
    transform: translateX(2.5rem);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes to-right-basic {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-2.5rem);
    transform: translateX(-2.5rem);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes to-right-basic {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-2.5rem);
    transform: translateX(-2.5rem);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/heroBg.jpg) center/cover no-repeat;
}
.hero__front {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  inset: 0;
}
.hero__front img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero__container {
  position: relative;
  min-height: 100vh;
  z-index: 1;
  display: flex;
}
.hero__image {
  -webkit-transform-origin: right;
  transform-origin: right;
  will-change: transform;
  -webkit-transform: translateX(-150%) scaleX(1) scaleY(1);
  transform: translateX(-150%) scaleX(1) scaleY(1);
}
.loaded .hero__image {
  -webkit-animation: to-right 0.6s ease-in 0.4s forwards;
  animation: to-right 0.6s ease-in 0.4s forwards;
}
.hero__image img {
  width: 100%;
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.hero__title {
  width: 100%;
  -webkit-transform-origin: left;
  transform-origin: left;
  will-change: transform;
  -webkit-transform: translateX(150%) scaleX(1) scaleY(1);
  transform: translateX(150%) scaleX(1) scaleY(1);
}
.loaded .hero__title {
  -webkit-animation: to-left 0.6s ease-in 0.4s forwards;
  animation: to-left 0.6s ease-in 0.4s forwards;
}
.hero__title img {
  width: 100%;
}
.hero__text {
  position: relative;
  color: #ecf8ff;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(2.5rem);
  transform: translateX(2.5rem);
}
.loaded .hero__text {
  -webkit-animation: to-left-basic 0.3s ease-out 1.2s forwards;
  animation: to-left-basic 0.3s ease-out 1.2s forwards;
}
.hero__actions {
  display: flex;
  align-items: center;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}
.hero__button {
  position: relative;
  width: 11.25rem;
  height: 3.75rem;
  border-radius: 0.8125rem;
  background-color: #7834c7;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(2.5rem);
  transform: translateX(2.5rem);
  will-change: transform, opacity, visibility;
}
.loaded .hero__button {
  -webkit-animation: to-left-basic 0.3s ease-out 1.4s forwards;
  animation: to-left-basic 0.3s ease-out 1.4s forwards;
}
.hero__button::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0.25rem;
  border-radius: 0.625rem;
  border: 0.125rem solid #000;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.hero__button::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(#d4e9fe, transparent 0.125rem),
    linear-gradient(90deg, #d4e9fe, transparent 0.125rem), #ebf8ff;
  background-size: 0.75rem 0.75rem;
  background-position: center center;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.hero__button span {
  position: relative;
  z-index: 3;
  color: #000;
  font-family: "Abalone Smile";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: letter-spacing 0.2s ease 0s;
}
.hero__social {
  display: flex;
  align-items: center;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}
.hero__social-item {
  flex-shrink: 0;
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8125rem;
  background-color: #7834c7;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(2.5rem);
  transform: translateX(2.5rem);
  will-change: transform, opacity, visibility;
}
.loaded .hero__social-item:nth-child(1) {
  -webkit-animation: to-left-basic 0.3s ease-out 1.5s forwards;
  animation: to-left-basic 0.3s ease-out 1.5s forwards;
}
.hero__social-item:nth-child(1)::after {
  background-color: #000;
}
.loaded .hero__social-item:nth-child(2) {
  -webkit-animation: to-left-basic 0.3s ease-out 1.6s forwards;
  animation: to-left-basic 0.3s ease-out 1.6s forwards;
}
.hero__social-item:nth-child(2)::after {
  background-color: #0cbeff;
}
.hero__social-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0.25rem;
  border-radius: 0.625rem;
  border: 0.125rem solid #000;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.hero__social-item::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.75rem;
  border-radius: 0.375rem;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.hero__social-item svg {
  position: relative;
  z-index: 3;
  width: 40%;
  height: 40%;
  transition: scale 0.2s ease 0s;
}
.about {
  position: relative;
  z-index: 2;
  background-color: #9239d1;
}
.about::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 0;
  width: 13%;
  aspect-ratio: 295/418;
  background: url(../img/AboutDecor.png) center/contain no-repeat;
}
.about__top {
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0;
  width: 100%;
}
.about__top img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.about__body {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}
.about__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.about__title span {
  font-family: Pulang;
  font-style: normal;
  font-weight: 400;
  line-height: 95%;
  text-transform: uppercase;
  will-change: transform, opacity;
}
.about__title span:nth-child(1) {
  color: #000;
  opacity: 0;
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transform: translateX(-150%) scaleX(1) scaleY(1);
  transform: translateX(-150%) scaleX(1) scaleY(1);
}
.about__title span:nth-child(2) {
  color: #6de635;
  -webkit-text-stroke-width: 0.0375em;
  paint-order: stroke fill;
  -webkit-text-stroke-color: #000;
  opacity: 0;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: translateX(150%) scaleX(1) scaleY(1);
  transform: translateX(150%) scaleX(1) scaleY(1);
}
.about__text {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(-2.5rem);
  transform: translateX(-2.5rem);
  will-change: transform, opacity, visibility;
}
.about__button {
  position: relative;
  width: 11.25rem;
  height: 3.75rem;
  border-radius: 0.8125rem;
  background-color: #6de635;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(-2.5rem);
  transform: translateX(-2.5rem);
  will-change: transform, opacity, visibility;
}
.about__button::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0.25rem;
  border-radius: 0.625rem;
  border: 0.125rem solid #000;
  background-color: #7834c7;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.about__button::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.75rem;
  border-radius: 0.375rem;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.about__button span {
  position: relative;
  z-index: 3;
  color: #000;
  font-family: "Abalone Smile";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: letter-spacing 0.2s ease 0s;
}
.about__image img {
  width: 100%;
}
.how {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1907/1173;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -0.125rem;
  background: url(../img/HowToBuyBG.svg) center/cover no-repeat;
}
.how__container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.how__image {
  width: 100%;
}
.how__image img {
  width: 100%;
}
.how__content {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 594/716;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../img/HowContent.svg) center/contain no-repeat;
}
.how__title {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
}
.how__title._watcher-view {
  -webkit-animation: opacity 0.3s ease 0.2s forwards;
  animation: opacity 0.3s ease 0.2s forwards;
}
.how__title > span {
  display: inline-block;
  position: relative;
  font-family: Pulang;
  font-style: normal;
  font-weight: 400;
  line-height: 95%;
  text-transform: uppercase;
  -webkit-transform: translateX(-2%) translateY(-15%) rotate(-2deg);
  transform: translateX(-2%) translateY(-15%) rotate(-2deg);
}
.how__title > span:nth-child(1) {
  color: #742eba;
}
.how__title > span:nth-child(2) {
  -webkit-transform: rotate(1.34deg);
  transform: rotate(1.34deg);
  color: #04070d;
}
.how__items {
  display: flex;
  flex-direction: column;
}
.how__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
}
.how__item._watcher-view {
  -webkit-animation: opacity 0.3s ease 0.2s forwards;
  animation: opacity 0.3s ease 0.2s forwards;
}
.how__item:nth-child(1) p {
  -webkit-transform: rotate(-0.831deg);
  transform: rotate(-0.831deg);
}
.how__item:nth-child(2) p {
  -webkit-transform: rotate(1.775deg);
  transform: rotate(1.775deg);
}
.how__item:nth-child(4) h3 {
  -webkit-transform: rotate(-1.943deg);
  transform: rotate(-1.943deg);
}
.how__item:nth-child(4) p {
  -webkit-transform: rotate(-0.831deg);
  transform: rotate(-0.831deg);
}
.how__item h3 {
  background-color: #6de635;
  display: flex;
  align-items: center;
  -webkit-column-gap: 0.5rem;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  padding: 0 1rem;
}
.how__item h3 span:nth-child(1) {
  color: #742eba;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.how__item h3 span:nth-child(2) {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.how__item p {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tokenomics {
  position: relative;
  z-index: 2;
  background: url(../img/tokenomicsBG.jpg) 60% / cover no-repeat;
}
.tokenomics__container {
  display: flex;
  justify-content: flex-start;
}
.tokenomics__body-box {
  position: relative;
  aspect-ratio: 878/829;
  background: url(../img/TokenomicsBody.png) center/contain no-repeat;
}
.tokenomics__body {
  position: absolute;
  top: 23%;
  left: 7%;
  width: 88%;
  height: 70%;
  -webkit-transform: rotate(3.308deg);
  transform: rotate(3.308deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tokenomics__label {
  text-align: center;
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tokenomics__title {
  width: 100%;
}
.tokenomics__title img {
  width: 100%;
}
.tokenomics__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tokenomics__row span {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tokenomics__main {
  width: 100%;
  border-top: 0.1875rem solid #000;
  border-bottom: 0.1875rem solid #000;
  display: flex;
}
.tokenomics__items {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 0.1875rem solid #000;
}
.tokenomics__items._watcher-view .tokenomics__item:nth-child(1) {
  -webkit-animation: opacity 0.3s ease 0.2s forwards;
  animation: opacity 0.3s ease 0.2s forwards;
}
.tokenomics__items._watcher-view .tokenomics__item:nth-child(2) {
  -webkit-animation: opacity 0.3s ease 0.3s forwards;
  animation: opacity 0.3s ease 0.3s forwards;
}
.tokenomics__items._watcher-view .tokenomics__item:nth-child(3) {
  -webkit-animation: opacity 0.3s ease 0.4s forwards;
  animation: opacity 0.3s ease 0.4s forwards;
}
.tokenomics__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
  -webkit-column-gap: 1.25rem;
  -moz-column-gap: 1.25rem;
  column-gap: 1.25rem;
}
.tokenomics__item span {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tokenomics__decor1 {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tokenomics__decor1 img {
  max-width: 50%;
  max-height: 70%;
}
.tokenomics__decor2 {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tokenomics__decor2 img {
  width: 104%;
}
.tokenomics__ca {
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  -webkit-column-gap: 0.375rem;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
}
.tokenomics__ca._watcher-view {
  -webkit-animation: opacity 0.3s ease 0.2s forwards;
  animation: opacity 0.3s ease 0.2s forwards;
}
.tokenomics__ca button {
  transition: color 0.2s ease 0s;
}
.join {
  position: relative;
  z-index: 3;
  width: 100%;
}
.join__bg {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.join__bg img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}
.join__bg-dec {
  position: sticky;
  top: 10%;
  left: 0;
  width: 100%;
  height: 70%;
  z-index: 2;
  inset: 0;
}
.join__bg-dec img {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 0;
  width: 100%;
  height: 145%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}
.join__body {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 95%;
  z-index: 3;
  background: url(../img/JoinImage.png) top/cover no-repeat;
}
.join__container {
  position: relative;
  z-index: 3;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.join__actions {
  display: flex;
  align-items: center;
}
.join__actions._watcher-view .join__button {
  -webkit-animation: to-left-basic 0.3s ease-out 0.2s forwards;
  animation: to-left-basic 0.3s ease-out 0.2s forwards;
}
.join__actions._watcher-view .join__social-item:nth-child(1) {
  -webkit-animation: to-left-basic 0.3s ease-out 0.3s forwards;
  animation: to-left-basic 0.3s ease-out 0.3s forwards;
}
.join__actions._watcher-view .join__social-item:nth-child(2) {
  -webkit-animation: to-left-basic 0.3s ease-out 0.4s forwards;
  animation: to-left-basic 0.3s ease-out 0.4s forwards;
}
.join__button {
  position: relative;
  background-color: #7834c7;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(2.5rem);
  transform: translateX(2.5rem);
  will-change: transform, opacity, visibility;
}
.join__button::before {
  content: "";
  position: absolute;
  z-index: 1;
  border: 0.125rem solid #000;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.join__button::after {
  content: "";
  position: absolute;
  z-index: 2;
  background: linear-gradient(#d4e9fe, transparent 0.125rem),
    linear-gradient(90deg, #d4e9fe, transparent 0.125rem), #ebf8ff;
  background-size: 0.75rem 0.75rem;
  background-position: center center;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.join__button span {
  position: relative;
  z-index: 3;
  color: #000;
  font-family: "Abalone Smile";
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: letter-spacing 0.2s ease 0s;
}
.join__social {
  display: flex;
  align-items: center;
}
.join__social-item {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #7834c7;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(2.5rem);
  transform: translateX(2.5rem);
  will-change: transform, opacity, visibility;
}
.join__social-item:nth-child(1)::after {
  background-color: #000;
}
.join__social-item:nth-child(2)::after {
  background-color: #0cbeff;
}
.join__social-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  border: 0.125rem solid #000;
  background-color: #6de635;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.join__social-item::after {
  content: "";
  position: absolute;
  z-index: 2;
  transition: inset 0.2s ease 0s, border-radius 0.2s ease 0s;
}
.join__social-item svg {
  position: relative;
  z-index: 3;
  width: 40%;
  height: 40%;
  transition: scale 0.2s ease 0s;
}
@media (min-width: 47.99875em) {
  .footer__top-image {
    align-self: flex-end;
    flex: 0 0 45%;
    min-height: 100%;
  }
  .footer__top-image img {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 15%;
    width: 100%;
    aspect-ratio: 752/649;
    -o-object-fit: contain;
    object-fit: contain;
  }
  .hero__image {
    align-self: flex-end;
    flex: 0 0 55%;
  }
  .hero__content {
    align-self: flex-start;
    flex: 0 0 50%;
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%);
    align-items: flex-end;
    text-align: right;
  }
  .about__content {
    align-self: center;
    flex: 1 1 auto;
  }
  .about__content._watcher-view .about__title span:nth-child(1) {
    -webkit-animation: to-right2 0.45s ease-in 0.2s forwards;
    animation: to-right2 0.45s ease-in 0.2s forwards;
  }
  .about__content._watcher-view .about__title span:nth-child(2) {
    -webkit-animation: to-left2 0.45s ease-in 0.2s forwards;
    animation: to-left2 0.45s ease-in 0.2s forwards;
  }
  .about__content._watcher-view .about__text {
    -webkit-animation: to-right-basic 0.3s ease-out 0.65s forwards;
    animation: to-right-basic 0.3s ease-out 0.65s forwards;
  }
  .about__content._watcher-view .about__button {
    -webkit-animation: to-right-basic 0.3s ease-out 0.85s forwards;
    animation: to-right-basic 0.3s ease-out 0.85s forwards;
  }
  .about__image {
    flex: 0 0 60%;
    align-self: flex-end;
  }
  .how__image {
    flex: 0 0 55%;
  }
  .how__content {
    flex: 0 0 40%;
    -webkit-transform: translate(-10%, 6%) rotate(3.636deg);
    transform: translate(-10%, 6%) rotate(3.636deg);
  }
}
@media (min-width: 99.375em) {
  .menu__list {
    -webkit-column-gap: 4.125rem;
    -moz-column-gap: 4.125rem;
    column-gap: 4.125rem;
  }
  .header__logo {
    width: 11.4375rem;
  }
  .footer__top {
    padding-top: 3.75rem;
  }
  .footer__top-content {
    padding-bottom: 2.5rem;
  }
  .footer__top-menu {
    margin-bottom: 1.625rem;
  }
  .footer__top-menu-item {
    font-size: 6.875rem;
  }
  .page__how {
    padding-top: 6.25rem;
  }
  .page__how {
    padding-bottom: 6.25rem;
  }
  .page__tokenomics {
    padding-top: 11.25rem;
  }
  .page__tokenomics {
    padding-bottom: 7.5rem;
  }
  .hero__content {
    padding-top: 10rem;
  }
  .hero__content {
    padding-bottom: 5rem;
  }
  .hero__title {
    margin-bottom: 2.5rem;
  }
  .hero__text {
    font-size: 1.25rem;
  }
  .hero__text {
    margin-bottom: 1.25rem;
  }
  .hero__text {
    width: 29.375rem;
  }
  .about {
    margin-top: -1.25rem;
  }
  .about__top {
    height: 7.6875rem;
  }
  .about__content {
    padding-right: 2.5rem;
  }
  .about__content {
    padding-top: 2.5rem;
  }
  .about__content {
    padding-bottom: 6.25rem;
  }
  .about__title span {
    font-size: 10rem;
  }
  .about__text {
    font-size: 1.25rem;
  }
  .about__text {
    margin-bottom: 2.1875rem;
  }
  .how__content {
    padding-left: 1.875rem;
  }
  .how__content {
    padding-right: 1.875rem;
  }
  .how__title {
    margin-bottom: 2.125rem;
  }
  .how__title > span {
    font-size: 5.25rem;
  }
  .how__items {
    row-gap: 1.75rem;
  }
  .how__item h3 {
    margin-bottom: 0.5rem;
  }
  .how__item h3 span:nth-child(1) {
    font-size: 2.25rem;
  }
  .how__item h3 span:nth-child(2) {
    font-size: 1.75rem;
  }
  .how__item p {
    font-size: 1.25rem;
  }
  .how__item p {
    padding-left: 3.125rem;
  }
  .tokenomics__body-box {
    width: 54.875rem;
  }
  .tokenomics__label {
    font-size: 2rem;
  }
  .tokenomics__label {
    margin-bottom: 0.75rem;
  }
  .tokenomics__row {
    padding-top: 0.625rem;
  }
  .tokenomics__row {
    padding-bottom: 0.625rem;
  }
  .tokenomics__row {
    padding-left: 1.25rem;
  }
  .tokenomics__row {
    padding-right: 1.25rem;
  }
  .tokenomics__row span {
    font-size: 1.5rem;
  }
  .tokenomics__main {
    margin-bottom: 0.875rem;
  }
  .tokenomics__items {
    padding-top: 0.75rem;
  }
  .tokenomics__items {
    padding-bottom: 0.75rem;
  }
  .tokenomics__items {
    padding-left: 1.25rem;
  }
  .tokenomics__items {
    padding-right: 1.25rem;
  }
  .tokenomics__items {
    row-gap: 0.625rem;
  }
  .tokenomics__item span {
    font-size: 1.25rem;
  }
  .tokenomics__decor2 {
    margin-bottom: 0.8125rem;
  }
  .tokenomics__ca {
    font-size: 1.25rem;
  }
  .join__container {
    padding-bottom: 6.25rem;
  }
  .join__actions {
    -webkit-column-gap: 1.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
  }
  .join__button {
    width: 18.75rem;
  }
  .join__button {
    height: 6.25rem;
  }
  .join__button {
    border-radius: 1.25rem;
  }
  .join__button::before {
    border-radius: 0.75rem;
  }
  .join__button::before {
    inset: 0.5rem;
  }
  .join__button::after {
    border-radius: 0.5rem;
  }
  .join__button::after {
    inset: 1.125rem;
  }
  .join__button span {
    font-size: 2.25rem;
  }
  .join__social {
    -webkit-column-gap: 1.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
  }
  .join__social-item {
    width: 6.25rem;
  }
  .join__social-item {
    height: 6.25rem;
  }
  .join__social-item {
    border-radius: 1.25rem;
  }
  .join__social-item::before {
    border-radius: 0.75rem;
  }
  .join__social-item::before {
    inset: 0.5rem;
  }
  .join__social-item::after {
    border-radius: 0.5rem;
  }
  .join__social-item::after {
    inset: 1.125rem;
  }
}
@media (min-width: 99.37375em) {
  .join {
    aspect-ratio: 1920/1160;
  }
}
@media (any-hover: hover) and (min-width: 99.375em) {
  .join__social-item:hover::before {
    border-radius: 1.25rem;
  }
  .join__social-item:hover::after {
    border-radius: 1.25rem;
  }
}
@media (min-width: 160em) {
  .how {
    margin-top: -7.5rem;
  }
  .tokenomics {
    margin-top: -5rem;
  }
  .join {
    margin-top: -5rem;
  }
}
@media (max-width: 20em) {
  .header__logo {
    width: 10rem;
  }
  .footer__top {
    padding-top: 2.5rem;
  }
  .footer__top-content {
    padding-bottom: 1.875rem;
  }
  .footer__top-menu {
    margin-bottom: 1.25rem;
  }
  .footer__top-menu-item {
    font-size: 3rem;
  }
  .footer__top-image {
    margin-top: -2.5rem;
  }
  .page__how {
    padding-top: 7.5rem;
  }
  .page__how {
    padding-bottom: 3.75rem;
  }
  .page__tokenomics {
    padding-top: 6.25rem;
  }
  .page__tokenomics {
    padding-bottom: 5rem;
  }
  .hero__content {
    padding-top: 8.75rem;
  }
  .hero__title {
    margin-bottom: 1.25rem;
  }
  .hero__text {
    font-size: 1.125rem;
  }
  .hero__text {
    margin-bottom: 1rem;
  }
  .about {
    margin-top: 0.0000000625rem;
  }
  .about__top {
    height: 3.75rem;
  }
  .about__content {
    padding-top: 2.5rem;
  }
  .about__title span {
    font-size: 5rem;
  }
  .about__text {
    font-size: 1.125rem;
  }
  .about__text {
    margin-bottom: 1.5rem;
  }
  .how {
    margin-top: -3.125rem;
  }
  .how__image {
    margin-top: -0.9375rem;
  }
  .how__content {
    padding-right: 0.5rem;
  }
  .how__content {
    padding-left: 0.5rem;
  }
  .how__title {
    margin-bottom: 0.5rem;
  }
  .how__title > span {
    font-size: 2.25rem;
  }
  .how__items {
    row-gap: 0.5rem;
  }
  .how__item h3 {
    margin-bottom: 0.25rem;
  }
  .how__item h3 span:nth-child(1) {
    font-size: 1.5rem;
  }
  .how__item h3 span:nth-child(2) {
    font-size: 1.25rem;
  }
  .how__item p {
    font-size: 0.75rem;
  }
  .how__item p {
    padding-left: 0.375rem;
  }
  .tokenomics {
    margin-top: -1.875rem;
  }
  .tokenomics__label {
    font-size: 0.875rem;
  }
  .tokenomics__label {
    margin-bottom: 0.1875rem;
  }
  .tokenomics__row {
    padding-top: 0.1875rem;
  }
  .tokenomics__row {
    padding-bottom: 0.1875rem;
  }
  .tokenomics__row {
    padding-left: 0.625rem;
  }
  .tokenomics__row {
    padding-right: 0.625rem;
  }
  .tokenomics__row span {
    font-size: 0.875rem;
  }
  .tokenomics__main {
    margin-bottom: 0.375rem;
  }
  .tokenomics__items {
    padding-top: 0.25rem;
  }
  .tokenomics__items {
    padding-bottom: 0.25rem;
  }
  .tokenomics__items {
    padding-left: 0.625rem;
  }
  .tokenomics__items {
    padding-right: 0.625rem;
  }
  .tokenomics__items {
    row-gap: 0.25rem;
  }
  .tokenomics__item span {
    font-size: 0.6875rem;
  }
  .tokenomics__decor2 {
    margin-bottom: 0.375rem;
  }
  .tokenomics__ca {
    font-size: 0.625rem;
  }
  .join {
    margin-top: -1.875rem;
  }
  .join__container {
    padding-bottom: 4.375rem;
  }
  .join__actions {
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
  .join__social {
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
}
@media (max-width: 61.99875em) {
  .footer__top-image img {
    left: 5%;
    width: 140%;
  }
  .join__body {
    background: url(../img/JoinImage.png) 45% / cover no-repeat;
  }
}
@media (max-width: 47.99875em) {
  .menu__body {
    position: fixed;
    width: 100%;
    height: auto;
    left: 0;
    top: -100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 0 0.8125rem 0.8125rem;
    overflow: auto;
    padding: 6.875rem 0.9375rem 1.875rem 0.9375rem;
    border-bottom: 0.125rem solid #000;
    transition: top 0.3s ease-in;
  }
  .menu-open .menu__body {
    top: 0;
    transition: top 0.3s ease-out;
  }
  .menu__list {
    width: 100%;
    padding: 1.875rem 1.5625rem;
    flex-direction: column;
    row-gap: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .icon-menu {
    flex-shrink: 0;
    position: relative;
    width: 3.375rem;
    height: 3.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8125rem;
    background-color: #7834c7;
    display: block;
    z-index: 5;
  }
  .icon-menu i {
    position: absolute;
    z-index: 1;
    inset: 0.25rem;
    border-radius: 0.625rem;
    border: 0.125rem solid #000;
    background-color: #6de635;
  }
  .icon-menu span,
  .icon-menu::after,
  .icon-menu::before {
    content: "";
    transition: all 0.3s ease 0s;
    right: 0.6875rem;
    position: absolute;
    z-index: 2;
    width: calc(100% - 1.375rem);
    height: 0.125rem;
    background-color: #fff;
  }
  .icon-menu::before {
    top: 1.125rem;
  }
  .icon-menu::after {
    bottom: 1.125rem;
  }
  .icon-menu span {
    top: calc(50% - 0.0625rem);
  }
  .menu-open .icon-menu span {
    width: 0;
  }
  .menu-open .icon-menu::before {
    top: calc(50% - 0.0625rem);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .menu-open .icon-menu::after {
    bottom: calc(50% - 0.0625rem);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .footer__top-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__top-menu {
    align-items: center;
  }
  .footer__top-image {
    width: 100%;
    max-width: 32.5rem;
  }
  .footer__top-image img {
    width: 100%;
  }
  .footer__bottom-body {
    flex-direction: column-reverse;
    row-gap: 0.375rem;
  }
  .hero__container {
    flex-direction: column-reverse;
    align-items: center;
    row-gap: 1.25rem;
  }
  .hero__image {
    max-width: 32.5rem;
  }
  .hero__content {
    align-items: center;
    text-align: center;
  }
  .hero__title {
    max-width: 32.5rem;
  }
  .about__body {
    flex-direction: column;
    row-gap: 1.25rem;
  }
  .about__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-right: 0.9375rem;
  }
  .about__title {
    align-items: center;
  }
  .about__title._watcher-view span:nth-child(1) {
    -webkit-animation: to-right2 0.45s ease-in 0.2s forwards;
    animation: to-right2 0.45s ease-in 0.2s forwards;
  }
  .about__title._watcher-view span:nth-child(2) {
    -webkit-animation: to-left2 0.45s ease-in 0.2s forwards;
    animation: to-left2 0.45s ease-in 0.2s forwards;
  }
  .about__text._watcher-view {
    -webkit-animation: to-right-basic 0.3s ease-out 0.2s forwards;
    animation: to-right-basic 0.3s ease-out 0.2s forwards;
  }
  .about__button._watcher-view {
    -webkit-animation: to-right-basic 0.3s ease-out 0.2s forwards;
    animation: to-right-basic 0.3s ease-out 0.2s forwards;
  }
  .how__container {
    flex-direction: column-reverse;
    align-items: center;
  }
  .how__image {
    max-width: 32.5rem;
  }
  .how__content {
    max-width: 32.5rem;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  .tokenomics {
    background: url(../img/tokenomicsBG.jpg) 10% / cover no-repeat;
  }
  .tokenomics__body-box {
    width: 100%;
  }
  .tokenomics__items {
    flex: 0 0 80%;
  }
  .tokenomics__decor1 {
    flex: 0 0 20%;
  }
  .join {
    aspect-ratio: 1222/1600;
  }
  .join__body {
    top: 10%;
    height: 90%;
    background: url(../img/JoinImageMob.png) top/contain no-repeat;
  }
  .join__body::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background-color: #53a630;
  }
}
@media (max-width: 47.99875em) and (any-hover: none) {
  .icon-menu {
    cursor: default;
  }
}
@media (max-width: 41.875em) {
  .tokenomics__label {
    display: none;
  }
}
@media (max-width: 29.99875em) {
  .hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__image img {
    width: 110%;
    -webkit-transform: translateX(1%);
    transform: translateX(1%);
  }
  .how__image {
    width: calc(100% + 2.25rem);
  }
  .tokenomics__main {
    border-top: 0.125rem solid #000;
    border-bottom: 0.125rem solid #000;
  }
  .tokenomics__items {
    border-right: 0.125rem solid #000;
  }
}
@media (max-width: 26.875em) {
  .join__button {
    width: 11.25rem;
  }
  .join__button {
    height: 3.75rem;
  }
  .join__button {
    border-radius: 0.8125rem;
  }
  .join__button::before {
    border-radius: 0.625rem;
  }
  .join__button::before {
    inset: 0.25rem;
  }
  .join__button::after {
    border-radius: 0.375rem;
  }
  .join__button::after {
    inset: 0.75rem;
  }
  .join__button span {
    font-size: 1.5rem;
  }
  .join__social-item {
    width: 3.75rem;
  }
  .join__social-item {
    height: 3.75rem;
  }
  .join__social-item {
    border-radius: 0.8125rem;
  }
  .join__social-item::before {
    border-radius: 0.625rem;
  }
  .join__social-item::before {
    inset: 0.25rem;
  }
  .join__social-item::after {
    border-radius: 0.375rem;
  }
  .join__social-item::after {
    inset: 0.75rem;
  }
}
@media (any-hover: hover) and (max-width: 26.875em) {
  .join__social-item:hover::before {
    border-radius: 0.8125rem;
  }
  .join__social-item:hover::after {
    border-radius: 0.8125rem;
  }
}
@media (min-width: 47.99875em) and (max-width: 99.375em) {
  .menu__list {
    -webkit-column-gap: clamp(
      1.5rem,
      -0.9524312061rem + 5.1093647357vw,
      4.125rem
    );
    -moz-column-gap: clamp(1.5rem, -0.9524312061rem + 5.1093647357vw, 4.125rem);
    column-gap: clamp(1.5rem, -0.9524312061rem + 5.1093647357vw, 4.125rem);
  }
  .hero__content {
    padding-bottom: clamp(3.75rem, 2.5821756162rem + 2.4330308265vw, 5rem);
  }
  .hero__text {
    width: clamp(18.75rem, 8.8234927374rem + 20.6807620253vw, 29.375rem);
  }
  .about__content {
    padding-right: clamp(
      0.0000000625rem,
      -2.3356486468rem + 4.8660615313vw,
      2.5rem
    );
  }
  .about__content {
    padding-top: clamp(1.875rem, 1.2910878081rem + 1.2165154133vw, 2.5rem);
  }
  .about__content {
    padding-bottom: clamp(3.75rem, 1.4143512323rem + 4.866061653vw, 6.25rem);
  }
  .about__title span {
    font-size: clamp(5rem, 0.3287024647rem + 9.732123306vw, 10rem);
  }
  .about__text {
    font-size: clamp(1rem, 0.7664351232rem + 0.4866061653vw, 1.25rem);
  }
  .about__text {
    margin-bottom: clamp(1.5rem, 0.8576965889rem + 1.3381669546vw, 2.1875rem);
  }
  .how__content {
    padding-left: clamp(0.75rem, -0.3010419455rem + 2.1897277439vw, 1.875rem);
  }
  .how__content {
    padding-right: clamp(0.75rem, -0.3010419455rem + 2.1897277439vw, 1.875rem);
  }
  .how__title {
    margin-bottom: clamp(0.375rem, -1.2599541374rem + 3.4062431571vw, 2.125rem);
  }
  .how__title > span {
    font-size: clamp(2.375rem, -0.3109960828rem + 5.595970901vw, 5.25rem);
  }
  .how__items {
    row-gap: clamp(0.75rem, -0.1842595071rem + 1.9464246612vw, 1.75rem);
  }
  .how__item h3 {
    margin-bottom: clamp(0.25rem, 0.0164351232rem + 0.4866061653vw, 0.5rem);
  }
  .how__item h3 span:nth-child(1) {
    font-size: clamp(1.5rem, 0.7993053697rem + 1.4598184959vw, 2.25rem);
  }
  .how__item h3 span:nth-child(2) {
    font-size: clamp(1.125rem, 0.5410878081rem + 1.2165154133vw, 1.75rem);
  }
  .how__item p {
    font-size: clamp(0.6875rem, 0.1619790273rem + 1.0948638719vw, 1.25rem);
  }
  .how__item p {
    padding-left: clamp(0.375rem, -2.1942136444rem + 5.3526678183vw, 3.125rem);
  }
  .tokenomics__body-box {
    width: clamp(34.75rem, 15.9480274203rem + 39.1717963067vw, 54.875rem);
  }
  .tokenomics__label {
    font-size: clamp(1.125rem, 0.3075229313rem + 1.7031215786vw, 2rem);
  }
  .tokenomics__label {
    margin-bottom: clamp(0.25rem, -0.2171297535rem + 0.9732123306vw, 0.75rem);
  }
  .tokenomics__row {
    padding-top: clamp(0.25rem, -0.1003473152rem + 0.729909248vw, 0.625rem);
  }
  .tokenomics__row {
    padding-bottom: clamp(0.25rem, -0.1003473152rem + 0.729909248vw, 0.625rem);
  }
  .tokenomics__row {
    padding-left: clamp(0.75rem, 0.2828702465rem + 0.9732123306vw, 1.25rem);
  }
  .tokenomics__row {
    padding-right: clamp(0.75rem, 0.2828702465rem + 0.9732123306vw, 1.25rem);
  }
  .tokenomics__row span {
    font-size: clamp(1.125rem, 0.7746526848rem + 0.729909248vw, 1.5rem);
  }
  .tokenomics__main {
    margin-bottom: clamp(0.625rem, 0.3914351232rem + 0.4866061653vw, 0.875rem);
  }
  .tokenomics__items {
    padding-top: clamp(0.375rem, 0.0246526848rem + 0.729909248vw, 0.75rem);
  }
  .tokenomics__items {
    padding-bottom: clamp(0.375rem, 0.0246526848rem + 0.729909248vw, 0.75rem);
  }
  .tokenomics__items {
    padding-left: clamp(0.75rem, 0.2828702465rem + 0.9732123306vw, 1.25rem);
  }
  .tokenomics__items {
    padding-right: clamp(0.75rem, 0.2828702465rem + 0.9732123306vw, 1.25rem);
  }
  .tokenomics__items {
    row-gap: clamp(0.5rem, 0.3832175616rem + 0.2433030827vw, 0.625rem);
  }
  .tokenomics__item span {
    font-size: clamp(0.875rem, 0.5246526848rem + 0.729909248vw, 1.25rem);
  }
  .tokenomics__decor2 {
    margin-bottom: clamp(0.5rem, 0.208043904rem + 0.6082577066vw, 0.8125rem);
  }
  .tokenomics__ca {
    font-size: clamp(1rem, 0.7664351232rem + 0.4866061653vw, 1.25rem);
  }
}
@media (min-width: 20em) and (max-width: 99.375em) {
  .header__logo {
    width: clamp(10rem, 9.6377952756rem + 1.811023622vw, 11.4375rem);
  }
  .footer__top {
    padding-top: clamp(2.5rem, 2.1850393701rem + 1.5748031496vw, 3.75rem);
  }
  .footer__top-content {
    padding-bottom: clamp(1.875rem, 1.717519685rem + 0.7874015748vw, 2.5rem);
  }
  .footer__top-menu {
    margin-bottom: clamp(1.25rem, 1.155511811rem + 0.4724409449vw, 1.625rem);
  }
  .footer__top-menu-item {
    font-size: clamp(3rem, 2.0236220472rem + 4.8818897638vw, 6.875rem);
  }
  .page__how {
    padding-top: clamp(6.25rem, 7.8149606299rem + -1.5748031496vw, 7.5rem);
  }
  .page__how {
    padding-bottom: clamp(3.75rem, 3.1200787402rem + 3.1496062992vw, 6.25rem);
  }
  .page__tokenomics {
    padding-top: clamp(6.25rem, 4.9901574803rem + 6.2992125984vw, 11.25rem);
  }
  .page__tokenomics {
    padding-bottom: clamp(5rem, 4.3700787402rem + 3.1496062992vw, 7.5rem);
  }
  .hero__content {
    padding-top: clamp(8.75rem, 8.4350393701rem + 1.5748031496vw, 10rem);
  }
  .hero__title {
    margin-bottom: clamp(1.25rem, 0.9350393701rem + 1.5748031496vw, 2.5rem);
  }
  .hero__text {
    font-size: clamp(1.125rem, 1.093503937rem + 0.157480315vw, 1.25rem);
  }
  .hero__text {
    margin-bottom: clamp(1rem, 0.937007874rem + 0.3149606299vw, 1.25rem);
  }
  .about {
    margin-top: clamp(
      -1.25rem,
      0.3149607082rem + -1.5748032283vw,
      0.0000000625rem
    );
  }
  .about__top {
    height: clamp(3.75rem, 2.7578740157rem + 4.9606299213vw, 7.6875rem);
  }
  .join__container {
    padding-bottom: clamp(4.375rem, 3.9025590551rem + 2.3622047244vw, 6.25rem);
  }
  .join__actions {
    -webkit-column-gap: clamp(1rem, 0.874015748rem + 0.6299212598vw, 1.5rem);
    -moz-column-gap: clamp(1rem, 0.874015748rem + 0.6299212598vw, 1.5rem);
    column-gap: clamp(1rem, 0.874015748rem + 0.6299212598vw, 1.5rem);
  }
  .join__social {
    -webkit-column-gap: clamp(1rem, 0.874015748rem + 0.6299212598vw, 1.5rem);
    -moz-column-gap: clamp(1rem, 0.874015748rem + 0.6299212598vw, 1.5rem);
    column-gap: clamp(1rem, 0.874015748rem + 0.6299212598vw, 1.5rem);
  }
}
@media (min-width: 20em) and (max-width: 47.99875em) {
  .footer__top-image {
    margin-top: clamp(-3.75rem, -1.6071029957rem + -4.4644850217vw, -2.5rem);
  }
  .about__content {
    padding-top: clamp(2.5rem, 2.0535514978rem + 2.2322425108vw, 3.125rem);
  }
  .about__title span {
    font-size: clamp(5rem, 3.2142059913rem + 8.9289700433vw, 7.5rem);
  }
  .about__text {
    font-size: clamp(1.125rem, 1.0357102996rem + 0.4464485022vw, 1.25rem);
  }
  .about__text {
    margin-bottom: clamp(1.5rem, 1.0089066476rem + 2.4554667619vw, 2.1875rem);
  }
  .how {
    margin-top: clamp(-5.25rem, -1.6070750926rem + -7.5896245368vw, -3.125rem);
  }
  .tokenomics__label {
    font-size: clamp(0.875rem, 0.4285514978rem + 2.2322425108vw, 1.5rem);
  }
  .tokenomics__label {
    margin-bottom: clamp(0.1875rem, -0.0357242511rem + 1.1161212554vw, 0.5rem);
  }
  .tokenomics__row {
    padding-top: clamp(0.1875rem, -0.0357242511rem + 1.1161212554vw, 0.5rem);
  }
  .tokenomics__row {
    padding-bottom: clamp(0.1875rem, -0.0357242511rem + 1.1161212554vw, 0.5rem);
  }
  .tokenomics__row {
    padding-left: clamp(0.625rem, 0.3571308987rem + 1.3393455065vw, 1rem);
  }
  .tokenomics__row {
    padding-right: clamp(0.625rem, 0.3571308987rem + 1.3393455065vw, 1rem);
  }
  .tokenomics__row span {
    font-size: clamp(0.875rem, 0.6071308987rem + 1.3393455065vw, 1.25rem);
  }
  .tokenomics__main {
    margin-bottom: clamp(0.375rem, 0.1071308987rem + 1.3393455065vw, 0.75rem);
  }
  .tokenomics__items {
    padding-top: clamp(0.25rem, -0.0178691013rem + 1.3393455065vw, 0.625rem);
  }
  .tokenomics__items {
    padding-bottom: clamp(0.25rem, -0.0178691013rem + 1.3393455065vw, 0.625rem);
  }
  .tokenomics__items {
    padding-left: clamp(0.625rem, 0.3571308987rem + 1.3393455065vw, 1rem);
  }
  .tokenomics__items {
    padding-right: clamp(0.625rem, 0.3571308987rem + 1.3393455065vw, 1rem);
  }
  .tokenomics__items {
    row-gap: clamp(0.25rem, 0.0714205991rem + 0.8928970043vw, 0.5rem);
  }
  .tokenomics__item span {
    font-size: clamp(0.6875rem, 0.3749860485rem + 1.5625697576vw, 1.125rem);
  }
  .tokenomics__decor2 {
    margin-bottom: clamp(0.375rem, 0.1964205991rem + 0.8928970043vw, 0.625rem);
  }
  .tokenomics__ca {
    font-size: clamp(0.625rem, 0.0892617974rem + 2.678691013vw, 1.375rem);
  }
}
@media (min-width: 47.99875em) and (max-width: 160em) {
  .how {
    margin-top: clamp(-7.5rem, -0.7143614469rem + -4.2410240957vw, -2.75rem);
  }
}
@media (min-width: 20em) and (max-width: 29.99875em) {
  .how__image {
    margin-top: clamp(-1.5rem, 0.1876406426rem + -5.6257032129vw, -0.9375rem);
  }
}
@media (min-width: 34.37375em) and (max-width: 47.99875em) {
  .how__content {
    padding-left: clamp(1.375rem, 1.0596444954rem + 0.9174311927vw, 1.5rem);
    padding-right: clamp(1.375rem, 1.0596444954rem + 0.9174311927vw, 1.5rem);
  }
  .how__title {
    margin-bottom: clamp(1.375rem, 1.0596444954rem + 0.9174311927vw, 1.5rem);
  }
  .how__title > span {
    font-size: clamp(4.375rem, 4.0596444954rem + 0.9174311927vw, 4.5rem);
  }
  .how__items {
    row-gap: clamp(1.125rem, 0.8096444954rem + 0.9174311927vw, 1.25rem);
  }
  .how__item h3 {
    margin-bottom: clamp(0.4375rem, 0.2798222477rem + 0.4587155963vw, 0.5rem);
  }
  .how__item h3 span:nth-child(1) {
    font-size: clamp(1.875rem, 1.5596444954rem + 0.9174311927vw, 2rem);
  }
  .how__item h3 span:nth-child(2) {
    font-size: clamp(1.5rem, 1.1846444954rem + 0.9174311927vw, 1.625rem);
  }
  .how__item p {
    font-size: clamp(1.125rem, 0.9673222477rem + 0.4587155963vw, 1.1875rem);
  }
  .how__item p {
    padding-left: clamp(1.125rem, 0.8096444954rem + 0.9174311927vw, 1.25rem);
  }
}
@media (min-width: 20em) and (max-width: 34.37375em) {
  .how__content {
    padding-right: clamp(0.5rem, -0.7174971737rem + 6.0874858683vw, 1.375rem);
  }
  .how__content {
    padding-left: clamp(0.5rem, -0.7174971737rem + 6.0874858683vw, 1.375rem);
  }
  .how__title {
    margin-bottom: clamp(0.5rem, -0.7174971737rem + 6.0874858683vw, 1.375rem);
  }
  .how__title > span {
    font-size: clamp(2.25rem, -0.7067788503rem + 14.7838942517vw, 4.375rem);
  }
  .how__items {
    row-gap: clamp(0.5rem, -0.3696408383rem + 4.3482041917vw, 1.125rem);
  }
  .how__item h3 {
    margin-bottom: clamp(0.25rem, -0.0108922515rem + 1.3044612575vw, 0.4375rem);
  }
  .how__item h3 span:nth-child(1) {
    font-size: clamp(1.5rem, 0.978215497rem + 2.608922515vw, 1.875rem);
  }
  .how__item h3 span:nth-child(2) {
    font-size: clamp(1.25rem, 0.9021436647rem + 1.7392816767vw, 1.5rem);
  }
  .how__item p {
    font-size: clamp(0.75rem, 0.228215497rem + 2.608922515vw, 1.125rem);
  }
  .how__item p {
    padding-left: clamp(0.375rem, -0.668569006rem + 5.21784503vw, 1.125rem);
  }
}
@media (min-width: 20em) and (max-width: 160em) {
  .tokenomics {
    margin-top: clamp(-5rem, -1.4285714286rem + -2.2321428571vw, -1.875rem);
  }
  .join {
    margin-top: clamp(-5rem, -1.4285714286rem + -2.2321428571vw, -1.875rem);
  }
}
@media (min-width: 47.99875em) and (max-width: 99.37375em) {
  .join {
    height: clamp(45rem, 32.1536192214rem + 26.7639902676vw, 58.75rem);
  }
}
@media (min-width: 26.875em) and (max-width: 99.375em) {
  .join__button {
    width: clamp(11.25rem, 8.4698275862rem + 10.3448275862vw, 18.75rem);
  }
  .join__button {
    height: clamp(3.75rem, 2.8232758621rem + 3.4482758621vw, 6.25rem);
  }
  .join__button {
    border-radius: clamp(0.8125rem, 0.6503232759rem + 0.6034482759vw, 1.25rem);
  }
  .join__button::before {
    border-radius: clamp(0.625rem, 0.5786637931rem + 0.1724137931vw, 0.75rem);
  }
  .join__button::before {
    inset: clamp(0.25rem, 0.1573275862rem + 0.3448275862vw, 0.5rem);
  }
  .join__button::after {
    border-radius: clamp(0.375rem, 0.3286637931rem + 0.1724137931vw, 0.5rem);
  }
  .join__button::after {
    inset: clamp(0.75rem, 0.6109913793rem + 0.5172413793vw, 1.125rem);
  }
  .join__button span {
    font-size: clamp(1.5rem, 1.2219827586rem + 1.0344827586vw, 2.25rem);
  }
  .join__social-item {
    width: clamp(3.75rem, 2.8232758621rem + 3.4482758621vw, 6.25rem);
  }
  .join__social-item {
    height: clamp(3.75rem, 2.8232758621rem + 3.4482758621vw, 6.25rem);
  }
  .join__social-item {
    border-radius: clamp(0.8125rem, 0.6503232759rem + 0.6034482759vw, 1.25rem);
  }
  .join__social-item::before {
    border-radius: clamp(0.625rem, 0.5786637931rem + 0.1724137931vw, 0.75rem);
  }
  .join__social-item::before {
    inset: clamp(0.25rem, 0.1573275862rem + 0.3448275862vw, 0.5rem);
  }
  .join__social-item::after {
    border-radius: clamp(0.375rem, 0.3286637931rem + 0.1724137931vw, 0.5rem);
  }
  .join__social-item::after {
    inset: clamp(0.75rem, 0.6109913793rem + 0.5172413793vw, 1.125rem);
  }
}
@media (any-hover: hover) and (min-width: 26.875em) and (max-width: 99.375em) {
  .join__social-item:hover::before {
    border-radius: clamp(0.8125rem, 0.6503232759rem + 0.6034482759vw, 1.25rem);
  }
  .join__social-item:hover::after {
    border-radius: clamp(0.8125rem, 0.6503232759rem + 0.6034482759vw, 1.25rem);
  }
}
@media (any-hover: hover) {
  .menu__link:hover {
    color: #7834c7;
    scale: 1.2;
  }
  .header__logo:hover img {
    scale: 1.05;
  }
  .header__button:hover::before {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .header__button:hover span {
    letter-spacing: 0.2em;
  }
  .footer__top-menu-item:hover {
    color: #7834c7;
  }
  .footer__top-social-item:hover::before {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .footer__top-social-item:hover::after {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .footer__top-social-item:hover svg {
    scale: 1.2;
  }
  .footer__bottom-body a:hover span {
    text-decoration: underline;
  }
  .hero__button:hover::before {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .hero__button:hover::after {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .hero__button:hover span {
    letter-spacing: 0.2em;
  }
  .hero__social-item:hover::before {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .hero__social-item:hover::after {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .hero__social-item:hover svg {
    scale: 1.2;
  }
  .about__button:hover::before {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .about__button:hover::after {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .about__button:hover span {
    letter-spacing: 0.2em;
  }
  .tokenomics__ca button:hover {
    color: #742eba;
  }
  .join__button:hover::before {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .join__button:hover::after {
    inset: 0;
    border-radius: 0.8125rem;
  }
  .join__button:hover span {
    letter-spacing: 0.2em;
  }
  .join__social-item:hover::before {
    inset: 0;
  }
  .join__social-item:hover::after {
    inset: 0;
  }
  .join__social-item:hover svg {
    scale: 1.2;
  }
}