body {
    font-family: "Poppins", sans-serif;
    /* overflow-x: hidden; */
  }
  #toggleNav:checked ~ .block-endnav #hamburger #line {
    --tw-translate-y: 0.375rem;
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  
  #toggleNav:checked ~ .block-endnav #hamburger #line2 {
    --tw-translate-y: -0.25rem;
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .gradient-text span {
    background: -webkit-linear-gradient(322deg, #18f06e -7.9%, #0b6de0 117.63%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #navlinks ul li a.active span {
    background: -webkit-linear-gradient(97.48deg, #18f06e -7.9%, #0b6de0 117.63%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
  }
  @media screen and (max-width: 767px) {
    #navlinks ul li a span {
      color: #131717;
    }
  }
  .button {
    transition: all 0.3s ease-in-out;
    padding: 1rem 2.5rem;
    display: inline-block;
    position: relative;
  }
  .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    transition: transform 0.3s ease-in-out;
  }
  .button:hover::before {
    transform: scale(1.07);
  }
  .main-banner:before {
    content: "";
    background-image: url(../images/hero.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0px;
    width: 1000px;
    height: 140%;
    animation-delay: 0.4s;
    animation-name: fadeInRight;
    animation-duration: 1s;
    visibility: visible;
  }
  .connect-web3-wallet:before {
    content: "";
    background-image: url(../images/connect-web3-wallet-3.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 3%;
    top: 120px;
    width: 650px;
    height: 575px;
    animation-delay: 0.4s;
    animation-name: fadeInLeft;
    animation-duration: 1s;
    visibility: visible;
    filter: drop-shadow(0px 0px 25px #607b8060);
  }
  
  .connect-web3-wallet::after {
    content: "";
    background-image: url(../images/connect-web3-wallet-shape.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0px;
    top: -40px;
    width: 425px;
    height: 140%;
    z-index: -1;
    animation-delay: 0.4s;
    animation-name: fadeInLeft;
    animation-duration: 1s;
    visibility: visible;
  }
  
  .unique-address:before {
    content: "";
    background-image: url(../images/unique-address-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 3%;
    top: 240px;
    width: 650px;
    height: 462px;
    animation-delay: 0.4s;
    animation-name: fadeInRight;
    animation-duration: 1s;
    visibility: visible;
    filter: drop-shadow(0px 0px 25px #607b8060);
  }
  
  .unique-address::after {
    content: "";
    background-image: url(../images/shape.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0px;
    top: 0;
    width: 425px;
    height: 140%;
    z-index: -1;
    animation-delay: 0.4s;
    animation-name: fadeInRight;
    animation-duration: 1s;
    visibility: visible;
  }
  
  .cta {
    background-image: url(../images/CTA.png);
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: 100% 100%;
    min-height: 515px;
  }
  #before-after-slider {
    width: 100%;
    position: relative;
    border-radius: 20px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  #after-image {
    display: block;
    overflow: hidden;
    border-radius: 20px;
  }
  
  #before-image {
    position: absolute;
    height: 100%;
    width: 70%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 2;
    border-radius: 20px 0 0 20px;
  }
  #before-image img {
    max-width: max-content;
  }
  
  #resizer {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 5;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 70%;
    height: 115%;
    width: 6px;
    background: linear-gradient(178.74deg, #18f06e 0%, #0b6de0 124.9%);
    border-radius: 10px;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
  }
  #resizer:after {
    background: #131717;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    margin: 0 0 0 -24px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 7px solid #fffffff5;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2211%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m6%201.821-4%204%204%204M14%201.821l4%204-4%204%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 11px;
    content: "";
    cursor: pointer;
  }
  @media screen and (max-width: 1800px) {
    .main-banner:before {
      width: 892px;
      height: 125%;
    }
  }
  @media screen and (max-width: 1600px) {
    .main-banner:before {
      top: 50px;
      width: 820px;
      height: 115%;
    }
  }
  @media screen and (max-width: 1470px) {
    .main-banner:before {
      width: 750px;
      height: 105%;
      top: 70px;
    }
    .connect-web3-wallet:before {
      top: 170px;
      width: 600px;
      height: 80%;
    }
    .unique-address:before {
      top: 220px;
      width: 610px;
      height: 65%;
    }
  }
  @media screen and (max-width: 1370px) {
    .connect-web3-wallet:before {
      top: 180px;
      width: 558px;
      height: 84%;
    }
    .unique-address:before {
      top: 230px;
      width: 574px;
      height: 61%;
    }
    .main-banner:before {
      width: 720px;
      height: 115%;
      top: 0px;
    }
  }
  @media only screen and (min-width: 1280px) and (max-width: 1380px) {
    .main-banner:before {
      width: 715px;
      height: 100%;
      top: 90px;
    }
  }
  @media screen and (max-width: 1279px) {
    .main-banner:before {
      top: 40px;
      width: 660px;
      height: 105%;
    }
    .connect-web3-wallet:before {
      top: 180px;
      width: 498px;
      height: 75%;
    }
    .unique-address:before {
      top: 161px;
      width: 542px;
      height: 70%;
    }
  }
  @media screen and (max-width: 1150px) {
    .main-banner:before {
      top: 40px;
      width: 595px;
      height: 95%;
    }
    .connect-web3-wallet:before {
      top: 195px;
      width: 450px;
      height: 68%;
    }
    .unique-address:before {
      top: 175px;
      width: 470px;
      height: 61%;
    }
  }
  @media screen and (max-width: 1023px) {
    .main-banner:before,
    .connect-web3-wallet:before,
    .unique-address:before,
    .connect-web3-wallet::after ,
    .unique-address::after {
      content: none;
    }
    body .cta {
      background-image: url(../images/CTA-mobile.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      min-height: 335px;
    }
  }
  @media screen and (min-width: 1208px) and (max-width: 1287px) {
    .mask-image {
      margin-top: 38px !important;
    }
  }
  @media screen and (min-width: 1145px) and (max-width: 1207px) {
    .mask-image {
      margin-top: 37px !important;
    }
  }
  @media screen and (min-width: 1024px) and (max-width: 1144px) {
    .mask-image {
      margin-top: 27px !important;
    }
  }
  @media screen and (max-width: 767px) {
    body #before-after-slider,
    body #after-image {
      border-radius: 10px;
    }
    body #before-image {
      border-radius: 10px 0 0 10px;
    }
    body #resizer {
      height: 130%;
    }
  }