@media screen and (max-width: 768px) {
  body,
  html {
    overflow-x: hidden;
  }

  p {
    font-size: 2.5vw;
  }

  nav {
    padding: 2vw 5vw;
       width: 95%;
  }

  nav a {
    font-size: 2.5vw;
 
  }

  .header {
    height: 100vw; 
  }

  .main_crc { 
  padding-top: 10vw; 
}

  .main_crc img { 
  scale: 1.1;
}

  .main-sec h1 {
    font-size: 6vw;
    width: 90%;
  }

  .main-sec .btn {
    gap: 2vw;
    padding: 1vw 3vw 1vw 1vw;
    border-radius: 4px;
    font-size: 3.5vw;
  }

  .star-3 {
    top: 10vw;
    right: 5vw;
  }

  .star-4 {
    bottom: 40vw;
    right: 5vw;
  }

  .marquee_1 {
    font-size: 4vw;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }

  .about {
    margin-top: -3vw;
    padding: 18vw 10vw 20vw 10vw;
  }

  .about .right {
    padding-left: 0;
  }

  .about .left .main-img {
    width: 90%;
  }

  .about .img-1 {
    width: 10vw;
  }

  .about .img-2 {
    width: 10vw;
    right: 5vw;
  }

  .about .img-3 {
    width: 17vw;
     right: -9vw;
  }

  .about .img-4 {
    width: 13.5vw;
    right: -5.5vw;
    top: 5vw;
  }

  .about .img-5 {
    width: 10vw;
    top: -9.8vw;
  }

  .gradient-text {
    font-size: 2.5vw;
  }

  .about .right h1 {
    font-size: 7vw;
  }

  .about .right p {
    font-size: 3.3vw;
  }

  .about .right .btn {
    gap: 2vw;
    padding: 2vw 3vw 2vw 2vw;
    border: 1.5px solid #fff;
    border-radius: 8px;
    font-size: 3.5vw;
  }

  /* tokenomice  */
  .tokenomice .inner p {
    font-size: 5vw;
    text-align: center;
  }

  .tokenomice .inner h1 {
    font-size: 10vw;
    text-align: center;
  }

  .tokenomice .inner h4 {
    font-size: 4vw;
    text-align: center;
  }

  .boxes {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5vw;
    gap: 5vw;
  }

  .boxes .box-1,
  .boxes .box-2,
  .boxes .box-3 {
    width: 100%;
    padding: 4vw 4vw;
    gap: 3vw;
  }

  .boxes span {
    width: 4vw;
    height: 4vw;
    border-width: 0.5vw;
  }

  .boxes .box-1 h5,
  .boxes .box-2 h5,
  .boxes .box-3 h5 {
    font-size: 10vw;
    line-height: 11vw;
  }

  .boxes .box-1 p,
  .boxes .box-2 p,
  .boxes .box-3 p {
    font-size: 4.5vw;
  }

  .tokenomice .inner .token-img {
    position: static;
    width: 80vw;
    margin-top: 5vw;
  }

  .note {
    font-size: 3vw;
    padding: 6vw;
  }

  /* nftCollection  */

  .nftCollection {
    padding-top: 10vw;
  }

  .nftCollection h2 {
    font-size: 4vw;
  }

  .nftCollection h1 {
    font-size: 8vw;
    margin: 2vw 0;
  }

  .nftCollection p {
    font-size: 3.5vw;
    width: 90vw;
  }

  .nftCollection .btn {
    font-size: 4vw;
    padding: 2vw 4vw;
  }

  .nftCollection .collection {
    flex-direction: column;
    align-items: center;
    gap: 4vw;
  }

  .nftCollection .collection .img-1,
  .nftCollection .collection .img-2,
  .nftCollection .collection .img-3 {
    width: 80vw;
  }

  .nftCollection .collection .shaps {
    top: -8vw;
  }
  /* join  */

  .join h1 {
    font-size: 20vw;
  }

  .join .btn {
    gap: 2vw;
    padding: 2vw 5vw 2vw 2vw;
    border: 1.5px solid #000;
    border-radius: 8px;
    font-size: 3.5vw;
  }

  .join .marquee_2 .slide img {
    width: 20vw;
  }
}