@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden;
  }

  .header {
    background-image: url("../images/headermobile.png");
    height: 320vw;
  }

  p {
    font-size: 4vw;
  }

  .howgif {
    width: 40vw;
    right: -10vw;
    bottom: -20vw;
  }

  .howtobuy h3 {
    margin-top: 10vw;
  }

  nav {
    padding: 3vw;
    position: absolute;
    top: 44vw;
    left: 26vw;
  }

  nav .logo {
    width: 10vw;
  }

  nav .right {
    gap: 5vw;
  }

  nav .right .chart {
    width: 22vw;
  }

  nav .right img {
    width: 7vw;
  }

  .main .heading {
    width: 80%;
  }


  .main .left p {
    font-size: 8vw;
    line-height: 8vw;
    text-align: center;
  }

  .main .left h2 {
    font-size: 4.5vw;
    margin: 5vw 0;
  }

  .main .left h2 span {
    font-size: 7vw;

  }

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

  .main .right {
    transform: translateY(6vw);
    scale: 1;
  }


  /* social  */

  .social {
    flex-direction: column;
    justify-content: center;
    padding: 6vw 5vw;
    gap: 3vw;

  }

  .social .links .buybtn {
    width: 30vw;
  }


  .social .links img {
    width: 10vw;
  }

  .social .textbox {
    padding: 2vw 2vw;
    text-align: center;
    align-items: start;
  }

  .social .textbox span {
    font-size: 8vw;
  }


  /* wallat  */

  .wallat {
    padding: 5vw 3vw;

  }

  .wallat .wallatbox {
    margin-top: 4vw;
    gap: 5vw;
  }

  .wallat .wallatbox img {
    width: 30vw;
  }

  .slider {
    gap: 2vw;
  }

  .slider video {
    height: 50vw;
  }



  /* about  */

  .about {
    padding: 5vw;
  }

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

  .about .gif3 {
    position: absolute;
    width: 22vw;
    right: -5vw;
    bottom: -16vw;
  }

  .about .right p {
    padding: 5vw;
    font-size: 4.7vw;
  }

  .headingmain {
    font-size: 10vw;
    margin-bottom: 1vw;
    text-shadow: 2px 2px #000;
    color: #fff;
    font-weight: 700;
    line-height: 12vw;
  }

  /* roadmap  */

  .roadmap h2 {
    text-align: center;
    margin-bottom: 5vw;
    margin-top: 5vw;

  }

  .roadmap .road1 {
    transform: translateY(4vw);
    width: 50vw;
  }

  .roadmap .box {
    padding: 5vw;
    border-radius: 3vw;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1);
    border: 2px solid #000;
  }



  .roadmap .box h4 {
    font-size: 4vw;
    margin-top: 4vw;
  }


  .roadmap .box4 {
    margin-top: 0;
  }

  .roadmap .road7 {
    margin-top: 0;
  }

  .roadmap .box .line1 {
    position: absolute;
    left: 0;
    bottom: -35vw;
    width: 15vw;
  }

  .roadmap .box .line2 {
    position: absolute;
    right: 0;
    bottom: -30vw;
    width: 15vw;
  }

  .roadmap .box .line5 {
    position: absolute;
    left: 0;
    bottom: -36vw;
    width: 10vw;
  }

  .roadmap .box .line7 {
    position: absolute;
    left: 0;
    bottom: -15vw;
    width: 10vw;
  }

  /* sections  */
  .sections {
    background-image: url("../images/Section.png");
    padding: 25vw 5vw;
  }

  .sections .right h1 {
    font-size: 13vw;
    line-height: 13vw;
  }

  .sections .right p {
    font-size: 5vw;
  }

  .sections .right h3 {
    font-size: 5vw;
    padding: 2vw;
    border-radius: 2vw;
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 1);
    margin-top: 4vw;
  }

  .boxmain {
    padding: 5vw;
  }

  .boxmain h4 {
    background-color: #FE7549;
    font-size: 5dvb;
    padding: 0.5vw 4vw;
    border-top-left-radius: 3vw;

  }

  .boxmain p {
    margin-top: 2vw;
    margin-bottom: 4vw;
  }

  .bookslider .box {
    flex: 0 0 100%;
    padding: 5vw;
  }


  .bookslider .box h4 {
    font-size: 8vw;
  }

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

  .arrow {
    width: 20vw;
  }

  /* ==================== faqs */

  .faqs {
    padding: 40vw 5vw 5vw 5vw;
    background-image: url("../images/Section2.png");
  }



  .faqs .left h1 {
    font-size: 10vw;
    text-align: center;
    color: #fff;
  }

  .accordion-btn {
    font-size: 5vw;
    padding: 2vw 2vw;
  }

  .faqs .left .faqgif {
    width: 20vw;
    margin-top: 2vw;
  }




  /* tokenomice  */

  .tokenomice {
    padding: 0 5vw;
  }

  .tokenomice .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tokenomice .left h1 {
    font-size: 12vw;
  }



  .tokenomice .left .box {
    display: flex;
    box-sizing: border-box;
    background: #f3f3f3;
    padding: 1vw;
    border-radius: 3vw;
    text-align: center;
    border: 2px solid #000;
    gap: 2vw;
    align-items: center;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 1);
    justify-content: center;
    margin-top: 4vw;
    min-height: 15vw;
  }

  .tokenomice .left .box img {
    width: 4vw;
  }

  /* join  */

  .join h3 {
    font-size: 10vw;
    text-align: center;
  }

  .join .box {
    padding: 2vw 4vw;
    gap: 5vw;
  }

  .join .box img {
    width: 8vw;

  }

  .footer {
    display: flex;
    padding: 5vw;
    margin-top: 20vw;
    flex-direction: column;

  }

  .crying {
    width: 25vw;
    position: absolute;
    top: -15vw;
    left: 5vw;
  }

  .footer .fotimg {
    width: 100%;
  }



  .copyright {
    background-color: #FFA60A;
    padding: 2vw;
    text-align: center;
  }


}