@media screen and (max-width: 480px) {
  body,
  html {
    overflow-x: hidden;
  }
  p {
    font-size: 2vw;
  }

  .links_absolute img {
    width: 6vw;
  }

  .links_absolute .buy {
    width: 15vw;
  }

  .main {
    display: flex;
    justify-content: space-between;
    gap: 40vw;
  }

  .main h1 {
    -webkit-text-stroke-width: 1px;
  }

  .main h2 {
    -webkit-text-stroke-width: 1px;
  }

  .main img {
    width: 18vw;
  }

  .header_sec .inner {
    padding: 4vw 5vw;
  }

  .header_sec .inner img {
    width: 20vw;
    height: 20vw;
    margin: auto;
  }

  .header_sec .inner p {
    opacity: 0.8;
    font-size: 2.5vw;
  }

  .header_sec .box {
    border: 1px solid #ffffff44;
    border-left: none;
    border-right: none;
    padding: 3vw 0;
  }

  .header_sec .eth_1 {
    width: 20vw;
    bottom: -5vw;
    left: -8vw;
  }

  .header_sec .eth_2 {
    width: 20vw;
    z-index: 999;
    top: 10vw;
    right: -10vw;
  }

  .about span {
    padding: 0.5vw 5vw;
  }

  .about h1 {
    font-size: 17vw;
    color: #d9d9d9;
  }

  .about p {
    font-size: 3vw;
    margin-bottom: 4vw;
  }

  .about .buy {
    width: 25vw;
  }

  .about .main {
    animation: bounce 3s ease-in-out infinite;
  }

  .tokenomice h1 {
    font-size: 15vw;
  }

  .tokenomice img {
    width: 100%;
    height: 100%;
    margin-top: 2vw;
  }

  .tokenomice p {
    padding: 1vw;
    font-size: 4vw;
  }

  .bg_color {
    background-image: linear-gradient(to bottom, #071c5673, #020e3000);
    margin-top: 15vw;
  }

  .roadmap {
    padding: 7vw;
    position: relative;
  }

  .roadmap h1 {
    font-size: 10vw;
  }

  .roadmap p {
    font-size: 3vw;
  }

  .roadmap .buy {
    width: 30vw;
  }

  .roadmap .box_1,
  .roadmap .box_2,
  .roadmap .box_3,
  .roadmap .box_4 {
    padding: 8vw;
    height: 100%;
  }

  .roadmap .box_1 h2,
  .roadmap .box_2 h2,
  .roadmap .box_3 h2,
  .roadmap .box_4 h2 {
    font-size: 8vw;
  }

  .roadmap .box_1 h5,
  .roadmap .box_2 h5,
  .roadmap .box_3 h5,
  .roadmap .box_4 h5 {
    opacity: 0.8;
    font-size: 3vw;
  }

  .roadmap .box_1 img,
  .roadmap .box_2 img,
  .roadmap .box_3 img,
  .roadmap .box_4 img {
    width: 14vw;
  }

  .roadmap .box_1 {
    rotate: 0deg;
    margin-top: 0;
  }

  .roadmap .box_2 {
    rotate: 0deg;
    scale: 1;
  }

  .roadmap .box_3 {
    rotate: 0deg;
    scale: 1;
    margin-top: 0;
  }

  .roadmap .box_4 {
    rotate: 0deg;
    scale: 1;
  }

  .roadmap_img {
    margin-top: 0;
    animation: flipLeftRight 4s infinite ease-in-out;
  }

  .roadmap .eth_1 {
    position: absolute;
    width: 10vw;
    z-index: 999;
    top: 15vw;
    left: 5vw;
    animation: rotateLeftRight 2s ease-in-out infinite;
  }

  .roadmap .eth_2 {
    position: absolute;
    width: 10vw;
    z-index: 999;
    top: -5vw;
    right: 5vw;
    rotate: 10deg;
    animation: rotateLeftRight 2s ease-in-out infinite;
  }

  .meme {
    margin-top: 15vw;
    width: 90%;
  }

  .meme .inner {
    padding: 5vw;
  }

  .meme .inner h1 {
    font-size: 10vw;
    line-height: 11vw;
    margin: 2vw 0;
  }

  .meme .inner p {
    font-size: 4vw;
  }

  /* join  */
  .join {
    margin-top: -20vw;
    position: relative;
    z-index: 99;
  }

  .join .cato {
    position: absolute;
    top: -22vw;
    width: 25vw;
    left: 8vw;
    animation: bounce 3s ease-in-out infinite;
  }

  .join .eth_1 {
    position: absolute;
    width: 12vw;
    z-index: 999;
    top: -5vw;
    right: 10vw;
    animation: rotateLeftRight 2s ease-in-out infinite;
  }

  footer {
    margin-top: -29vw;
    position: relative;
  }

  footer p {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px);
    padding: 1vw;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    color: #000000;
  }
}