@media screen and (max-width: 480px) {

     body,
     html {
         overflow-x: hidden;
     }

     p {
         font-size: 4vw;
     }

     nav {
         width: 100%;
         max-width: 85%;
         padding: 4vw 7vw;
         border: 2px solid #201A17;
         top: 5vw;

     }

     nav .text {
         font-size: 2vw;
         display: none;
     }

     nav .social {
         gap: 8vw;
     }

     nav img {
         transform: scale(3.2);
     }

     nav .toggle {
         transform: scale(2.5);
     }

     nav .logo {
         transform: scale(4.2);
         width: 25vw;
         margin-left: 3vw;
     }

     .social button {
         display: block;
     }


     /* hedaer  */

     .header {
         background-image: url('/assets/images/mobile-header.png');
         height: 246vw;
         padding: 0vw 5vw 5vw 5vw;
         position: relative;
     }

     .bottom_c img {
         display: none;
     }

     .header .buy-now {
         width: 45vw;
         position: absolute;
         top: 61vw;
     }

     .header .heading {
         width: 90%;
         top: 27vw;
         transform: translateX(-50%);
         left: 50%;
     }


     .ca_section {
         gap: 2vw;
         justify-content: center;
         border-top: 2px solid #000;
         border-bottom: 2px solid #000;
         padding: 3vw 2vw;
     }

     .ca_section .ca_links img {
         max-width: 10vw;
     }

     .ca_section .social h5 {
         font-size: 4vw;
         color: #fff;
     }

     .ca_section .ca h5 {
         font-size: 2.5vw;
     }

     .ca_section .ca span {
         cursor: pointer;
         font-size: 4.5vw;
     }

     /* about -===================== */
     .about {
         margin-top: -3vw;
         padding: 25vw 10vw 20vw 10vw;
     }

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

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

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

     .about .img-2 {
         width: 20vw;
         right: 7vw;
     }

     .about .img-3 {
         width: 17vw;
         right: -4vw;
         bottom: 5vw;
     }

     .about .img-4 {
         width: 21.5vw;
         right: -7.5vw;
         top: 5vw;
     }

     .about .img-5 {
         width: 17vw;
         top: -16.8vw;
         right: 19vw;
     }

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

     .about .right h1 {
         font-size: 13vw;
         line-height: 13vw;
         -webkit-text-stroke: 1px #000;
     }

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

     .about .right .btn img {
         width: 40vw;
         margin-left: -5vw;
     }

     /* .tokenomice  */

     .tokenomice {
         height: 280vw;
     }

     .tokenamin {
         position: static;
     }

     .tokenamin .inner {
         flex-direction: column;
     }


     .tokenamin .inner img {
         width: 75vw;
     }


     /* .roadmap  */

     .roadmap {
         padding: 10vw;
     }

     .roadmap .roadmap_img {
         top: -15vw;
         width: 60vw;
         left: 18%;
     }

     .roadmap h1 {
         transform: scale(1.5);
         margin-bottom: 11vw;
     }

     .roadmap .box {
         border: 3px solid #000;
         padding: 5vw;
         border-radius: 4.5vw;
     }

     .roadmap .box h2 {
         font-size: 16vw;
         line-height: 18vw;
     }

     .roadmap .box .inner {
         padding: 3vw;
     }

     .roadmap .box .inner p {
         font-size: 5vw;
     }

     .roadmap .arrows {
         position: absolute;
         top: 49%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 33vw;
         animation: bounce-updown 2s infinite ease-in-out;
         transform-origin: center;
     }

     @keyframes bounce-updown {

         0%,
         100% {
             transform: translate(-50%, -50%) translateY(0);
         }

         50% {
             transform: translate(-50%, -50%) translateY(-10px);
         }
     }


     /* OurGallery  */

     .OurGallery {
         padding-top: 10vw;
     }

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

     .OurGallery h1 {
         font-size: 17vw;
         margin: 2vw 0;
         line-height: 16vw;
         margin-bottom: 15vw;
     }

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

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

     .OurGallery .collection {
         flex-direction: column;
         align-items: center;
         gap: 0;
     }

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

     .OurGallery .collection .shaps {
         top: -8vw;
     }

     .faq {
         background-image: url('/assets/images/faq-bg-mobile.png');
         height: 480vw;
         padding: 40vw 10vw 10vw 10vw;
         margin-top: -30vw;
     }

     .faq h1 {
         font-size: 22vw;
     }

     .faq .open {
         padding: 6vw;
         border-radius: 4.5vw;
         box-shadow: 8px 8px 0px 0px #212529;
     }

     .faq .close {
         padding: 6vw;
         border-radius: 4.5vw;
     }

     .faq .open h2,
     .faq .close h2 {
         font-size: 7vw;
         margin-bottom: 4vw;
     }

     .faq .faqstar {
         width: 90%;
         top: 0;
         left: 5vw;
     }

     /* .cta  */
     .cta {
         margin-top: -30vw;
         padding-top: 5vw;
     }

     .cta .heading {
         width: 100%;
         margin-top: 15vw;
     }

     .cta .buy {
         width: 27vw;
         margin: auto;
         margin-top: 0vw;
     }

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

 }