@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 76em) {
  html {
    font-size: 56.25%;
  }

  .nav-ul {
    gap: 1.2rem;
  }

  .hero-title {
    font-size: 4.8rem;
  }
  .hero-description {
    font-size: 1.8rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  html {
    font-size: 50%;
  }

  .logo-box {
    z-index: 1000;
  }

  .header-box {
    max-width: 123rem;
  }

  .footer-box {
    max-width: 123rem;
  }

  .footer-copy {
    max-width: 123rem;
  }

  /*MOBILE*/
  .header {
    height: 9.6rem;
  }

  .nav-bar {
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all 0.4s ease-in;
    transform: translateY(-100%);
  }

  .mobile-nav-cta {
    display: block;
  }

  .nav-open .nav-bar {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-ul {
    align-items: center;
    flex-direction: column;
    gap: 3.2rem;
    font-size: 2rem;
  }

  .nav-ul:link,
  .nav-ul:visited {
    font-size: 2rem;
  }

  .btn-mobile-nav {
    z-index: 1000;
    display: block;
  }

  .mobile-btn-none {
    z-index: 1000;
    display: none;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }
  .nav-open .icon-mobile-nav[name="close-outline"] {
    z-index: 1000;
    display: block;
  }
  .icon-c {
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 6px;
  }
}

@media (max-width: 55em) {
  .footer-1st-colunmn {
    margin-right: 2.4rem;
  }

  .footer-copy {
    font-size: 1.05rem;
  }

  .no-nav {
    display: none;
  }

  .send_box {
    flex-direction: column;
  }
  .queri {
    display: flex;
  }
  .send_box {
    gap: 1.2rem;
    justify-content: center;
    padding-top: 12rem;
    padding-bottom: 12rem;
    padding-left: 5.6rem;
    padding-right: 5.6rem;
  }
  .mail-send-box {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .icon-c {
    margin-right: 1.2rem;
  }

  @media (max-width: 44em) {
    .nav-cheat-ul-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      margin-bottom: 1.2rem;
    }
    .nav-cheat-ul {
      background-color: #fff;
      font-size: 1.2rem;
      padding: 0.8rem 0.8rem;
      display: flex;
      gap: 1.6rem;
      border-radius: 1.2rem;
      box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.15);
      justify-content: center;
      align-items: center;
    }
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
    }

    .hero-title {
      text-align: center;
      font-size: 4rem;
    }

    .hero-description {
      text-align: center;
      font-size: 2rem;
    }

    .text-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .img-box {
      width: 70%;
    }

    .section-img {
    }
    .tablet-img {
      display: block;
    }

    .grid-2cols {
      display: block;
    }

    .call-to-action-box h3 {
      text-align: center;
      font-size: 2.4rem;
    }

    .call-to-action {
      margin-top: 12.8rem;
    }

    .footer-box {
      display: grid;
      grid-template-columns: 1fr 1fr;

      justify-content: space-between;
      align-items: flex-start;
    }

    .footer-2nd-colunmn {
      padding-bottom: 3.2rem;
    }

    .contact {
      display: none;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .mobile-nav-cta {
      display: block;
    }

    .section-img-mobile {
      display: block;
    }

    .mobile-no-img {
      display: none;
    }

    .contact-main-container {
      display: flex;
      flex-direction: column;
    }
    .send-box-txt {
      padding-left: 0rem;
    }

    .flex-2ndbox {
      display: flex;
      flex-direction: column;
    }
    .send_box {
      margin-bottom: 0rem;
    }
    .discord-send-box {
      margin-bottom: 12rem;
    }
    form {
      width: 30rem;
    }
    #message {
      width: 30rem;
    }
    #name {
      width: 14.6rem;
    }
    #discord-tag {
      width: 14.6rem;
    }
  }
  .news-box {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  @media (max-width: 38.5em) {
    .news-box__img-box {
      display: none;
    }
    .news-box__2cols-grid {
      display: flex;
    }
    .news-box__text {
      padding-bottom: 3.2rem;
    }
    .txt-btc {
      transform: translateY(-5%);
    }
  }

  @media (max-width: 34em) {
    .section-info-title {
      font-size: 2.2rem;
    }

    .featured-container {
      max-width: 100%;
      border-radius: 18px;
      padding: 2.4rem 2.8rem;
    }

    .sponsor-img {
      max-width: 6rem;
      height: 6rem;
      border-radius: 18px;
    }

    .logos {
      gap: 1rem;
    }

    .call-to-action-box {
      padding: 6.4rem;
    }
    .call-to-action-box h2 {
      font-size: 2rem;
      margin-bottom: 1.2rem;
    }
    .call-to-action-box h3 {
      font-size: 2.4rem;
    }

    .footer-box {
      padding: 0 2.4rem;
      gap: 2rem;
    }

    .footer-logo-description {
      line-height: 1.5;
      padding-right: 1.6rem;
    }

    /**********************/

    .footer-2nd-colunmn {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.6rem;
    }
  }

  /**************************/
  /* FIXING GAP ON SAFARI */
  /**************************/

  .no-flexbox-gap .nav-ul:not(:last-child) {
    margin-right: 3.2rem;
  }

  .no-flexbox-gap .hero:not(:last-child) {
    margin-right: 4.8rem;
  }

  .no-flexbox-gap .btn-box:not(:last-child) {
    margin-right: 1.6rem;
  }

  .no-flexbox-gap .logo:not(:last-child) {
    margin-bottom: 2.4rem;
  }

  .no-flexbox-gap .icon-box:not(:last-child) {
    margin-right: 2.4rem;
    margin-bottom: 2.4rem;
  }

  .no-flexbox-gap .grid-2cols-2rows:not(:last-child) {
    margin-right: 2.4rem;
  }

  .no-flexbox-gap .footer-box:not(:last-child) {
    margin-right: 2.4rem;
  }

  .no-flexbox-gap .footer-logo-box:not(:last-child) {
    margin-right: 0.4rem;
  }

  .no-flexbox-gap .footer-social-box:not(:last-child) {
    margin-right: 1.2rem;
  }

  .no-flexbox-gap .footer-2nd-colunmn:not(:last-child) {
    margin-right: 1.2rem;
  }

  .no-flexbox-gap .footer-nav:not(:last-child) {
    margin-right: 1.2rem;
  }
}