@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: 14vw;
  width: 76%;
         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;
     }

     .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;
     }

     .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;
         margin-top: 10vw;
     }

     .tokenomice .token_c {
         position: absolute;
         width: 70%;
         top: 43%;
         right: 28vw;
         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;
     }


     .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;
     }
 }