/* Media Queries */

@media screen and (max-width: 480px) {
  li {
    font-size: 3.3vw;
    margin-bottom: 3vw;
    margin-left: 4vw;
  }

  p {
    font-size: 3.3vw;
  }

  .mobile-menu-icon {
    display: block;
    color: #f3f3f3c2;
  }

  nav {
    border-bottom: 1px solid #ffffff26;
  }

  nav .center {
    display: none;
  }

  nav .logo img {
    width: 30vw;
  }

  .header {
    height: 187vw;
    border: none;
    padding: 10vw 5vw;
  }

  .header h1 {
    font-size: 7vw;
  }

  .button {
    text-decoration: none;
    padding: 2.3vw 6vw;
    border-radius: 1vw;
    border: 1px solid #ffffff26;
    background-color: #d4811c;
    width: fit-content;
  }

  /* links */

  .links .iner .box {
    padding: 4vw;
    border: 1px solid #ffffff26;
    border-radius: 1vw;
    transition: all 0.5s ease-in-out;
  }

  .links .iner .box:hover {
    background-image: linear-gradient(to right, #000, #d4811ca8);
    transition: all 0.5s ease-in-out;
  }

  .links .iner .box img {
    width: 20vw;
  }

  .links h1 {
    font-size: 6vw;
    text-align: center;
  }

  /* about  */

  .about {
    margin-top: 10vw;
  }

  .about h1 {
    font-size: 6vw;
    font-weight: 600;
  }

  .about .box {
    background-image: linear-gradient(to left bottom, #0000004d, #000000);
    padding: 10vw;
    border-radius: 3vw;
    border: 1px solid #ffffff26;
    flex-direction: column;
    display: flex;
    gap: 1vw;
  }

  .about .box h1 {
    font-size: 5vw;
    margin-top: 3vw;
    font-weight: 500;
  }

  .about .box p {
    font-size: 3.5vw;
  }

  .about .box img {
    width: 20vw;
  }

  .about::before {
    top: 50%;
    width: 100%;
    height: 50vw;
    background-color: #fff;
    z-index: -1;
    transform: translateY(-50%);
  }

  /* telegram_sec  */
  .telegram_sec {
    margin-top: 10vw;
  }

  .telegram_sec h1 {
    font-size: 7vw;
    margin-bottom: 2vw;
  }

  .box_img {
    width: 40vw;
  }

  .sec_1 .iner_box_1 {
    padding: 5vw;
    border-bottom: 1px solid #2f2f2f;
  }

  .sec_1 .iner_box_2 {
    border-left: 1px solid #2f2f2f;
    padding: 5vw;
  }

  .sec_1 .iner_box_2 img {
    width: 12vw;
  }

  .sec_1 h4 {
    font-size: 5vw;
    margin-bottom: 2vw;
  }

  .iner_box {
    border-top: 1px solid #2f2f2f;
    border-bottom: 1px solid #2f2f2f;
    padding: 5vw;
  }

  .iner_box_1 {
    padding: 5vw;
  }

  .iner_box_2 {
    padding: 5vw;
  }

  .tele_main::before {
    width: 80vw;
  }

  hr {
    border: 1px solid #2f2f2f;
  }

  .sec_2 img {
    width: 12vw;
  }

  .sec_2 h4 {
    font-size: 5vw;
    margin-bottom: 2vw;
  }

  /* Web Dapp AI Agents  */
  .web_dapp {
    padding: 5vw;
    text-align: center;
  }
  .web_dapp h1 {
    font-size: 6vw;
  }

  .web_dapp .box {
    padding: 16vw 15vw;
    border-radius: 3vw;
    overflow: hidden;
    gap: 1vw;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 86vw;
  }

  .web_dapp .box img {
    width: 15vw;
    margin: auto;
  }

  .web_dapp .box h4 {
    font-size: 5vw;
  }

  .features {
    border: none;
  }

  .features .dv {
    margin-bottom: 10vw;
  }

  .features .dv h3 {
    margin-bottom: 2vw;
  }

  .features h1 {
    font-size: 7vw;
    font-weight: 600;
    margin-bottom: 3vw;
  }

  .features h2 {
    font-size: 4vw;
    margin-bottom: 1vw;
  }

  .features p {
    margin-bottom: 5vw;
  }

  /* tokenomice  */

  .tokenomice {
    margin-top: 10vw;
  }

  .tokenomice h1 {
    font-size: 7vw;
    font-weight: 600;
    margin-bottom: 1vw;
  }
  .tokenomice h2 {
    font-size: 3vw;
  }

  .tokenomice .box {
    padding: 10vw;
    border-radius: 3vw;
    border: 1px solid #ffffff26;
    flex-direction: column;
    display: flex;
    gap: 1vw;
  }

  .tokenomice .box h1 {
    font-size: 5vw;
    margin-top: 3vw;
    font-weight: 500;
  }

  .tokenomice .box p {
    font-size: 3.5vw;
  }

  .tokenomice .box img {
    width: 50vw;
  }

  .tokenomice::before {
    top: 50%;
    width: 100%;
    height: 50vw;
    background-color: #fff;
    z-index: -1;
    transform: translateY(-50%);
  }

  /* ======================== whyus =============== */

  .whyus h1 {
    font-size: 7vw;
    font-weight: 600;
  }

  .whyus h2 {
    font-size: 4vw;
    margin: 2vw;
  }

  .whyus .link img {
    width: 8vw;
  }

  footer {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 5vw;
    position: relative;
    z-index: 999;
    background-color: #000;
    border-top: 1px solid #ffffff26;
  }

  footer .logo img {
    width: 50vw;
    margin-bottom: 5vw;
  }

  footer .center {
    display: flex;
    align-items: center;
    gap: 3vw;
    color: #ffffffb2;
    flex-direction: column;
  }

  .button:hover {
    opacity: 0.8;
  }
  footer a {
    display: block;
    margin-top: 5vw;
  }
}