@media screen and (max-width: 480px) {
  .maindiv {
    background-image: none;
  }

  p {
    font-size: 2.5vw;
  }

  body,
  html {
    overflow-x: hidden;
  }

  nav {
    border-radius: 4vw;
    padding: 3vw 5vw;
  }

  nav a {
    color: #d0d0f9;
  }

  nav img {
    width: 35vw;
  }

  nav button img {
    width: 7vw;
  }

  .header {
    padding: 5vw;
    background-image: url("../images/header-mobile.png");
    height: 246vw;
  }

  .header .main {
    margin-top: 10vw;
    text-align: center;
  }

  .header .main .heading {
    width: 100%;
  }

  .header .main p {
    font-size: 5vw;
    margin-top: 4vw;
  }

  .header .main a img {
    width: 60vw;
    margin: auto;
  }

  /* about  */
  .about {
    padding: 0vw 5vw;
    position: relative;
    z-index: 999;
  }

  .about .main_img {
    margin-top: -18vw;
    display: none;
  }

  .about .caracter {
    position: absolute;
    top: 62%;
    right: -69px;
    width: 100%;
    animation: fly 6s ease-in-out infinite;
  }

  .about2 {
    padding: 2vw 5vw;
    background-image: none;
    height: 100%;
    margin-top: 0vw;
    padding-top: 17vw;
    position: relative;
  }

  .about2 .heading {
    width: 70vw;
    margin-top: 15vw;
  }

  .about2 .icon {
    width: 15vw;
  }

  .about2 h2 {
    font-size: 6vw;
    margin: 3vw 0;
  }

  .about2 p {
    color: #d0d0f9;
    font-size: 4vw;
  }

  .about2 a img {
    width: 60vw;
    margin-left: -10vw;
    transition: all 0.3s ease-in-out;
  }

  .about2 .cycal_c {
    position: absolute;
    bottom: -85vw;
    right: 40vw;
    width: 70%;
    animation: cycleMove 6s linear infinite;
  }

  @keyframes cycleMove {
    0% {
      transform: translateX(0) translateY(0) rotate(0deg);
    }

    25% {
      transform: translateX(-50px) translateY(-10px) rotate(-1deg);
    }

    50% {
      transform: translateX(-10px) translateY(0) rotate(1deg);
    }

    75% {
      transform: translateX(150px) translateY(10px) rotate(-1deg);
    }

    100% {
      transform: translateX(0) translateY(0) rotate(0deg);
    }
  }

  /* team  */
  .team {
    padding: 0vw 5vw;
    position: relative;
  }

  .team .main_img {
    margin-top: 0vw;
  }

  .team .caracter {
    position: absolute;
    top: 54%;
    left: 5%;
    width: 90vw;
  }

  /* .roadmap  */
  .roadmap {
    position: relative;
    padding: 0vw 5vw;
    padding-bottom: 10vw;
  }

  .roadmap .main {
    margin-top: 15vw;
    text-align: center;
  }

  .roadmap .main .heading {
    width: 90%;
    margin: auto;
    margin-bottom: 3vw;
  }

  .roadmap .main p {
    font-size: 5vw;
    color: #ffffff80;
  }

  .roadmap .main a img {
    width: 60vw;
    margin: auto;
  }

  .roadmap_c {
    width: 100%;
    position: static;
    margin-left: 3vw;
  }

  .roadmap .grid img {
    width: 15vw;
    margin-left: -1vw;
    position: relative;
    z-index: 99;
  }

  .roadmap .grid h2 {
    font-size: 7vw;
    margin: 2vw 0;
  }

  .roadmap .grid ul li {
    color: #e9e4fe90;
    font-size: 3vw;
    margin-bottom: 1vw;
  }

  .roadmap .grid .line {
    top: 56.5vw;
    left: -39vw;
    width: 100%;
    z-index: -10;
    rotate: 90deg;
  }

  /* tokenomice  */

  .tokenomice {
    padding: 5vw;
    background-image: url("../images/token-mobile.png");
    height: 312vw;
    position: relative;
  }

  .tokenomice .token_c {
    position: absolute;
    width: 100%;
    top: 53%;
    right: 0;
    animation: bounceRotate 4s ease-in-out infinite;
  }

  .tokenomice .footer_img {
    position: absolute;
    width: 45vw;
    bottom: -11vw;
    left: 28vw;
    animation: moveLR 8s linear infinite;
  }

  /* footer  */

  .footer {
    margin: 5vw;
    padding: 5vw;
    border-radius: 3vw;
  }

  .footer .logo {
    width: 100%;
    margin-bottom: 2vw;
  }

  .footer p {
    color: #e9e4fe;
    font-size: 4vw;
  }

  .footer h2 {
    font-size: 4.8vw;
    margin-bottom: 3vw;
  }

  .footer a {
    color: #ffffff50;
    margin-bottom: 1vw;
    display: block;
  }

  .footer a:hover {
    color: #fff;
  }

  .footer .links {
    display: flex;
    align-items: center;
    gap: 3vw;
  }

  .footer .links a img {
    width: 12vw;
    transition: all 0.3s ease-in-out;
  }

  .footer .links a img:hover {
    transform: scale(1.1);
  }

  .footer .copyright {
    padding: 2vw;
    font-size: 3vw;
  }
}