/* Tablets */
@media screen and (max-width: 1024px) {
  .proyects {
    ul {
      flex-wrap: wrap;
    }
  }

  .hexagon {
    &.large {
      width: 250px;
      height: 250px;
    }

    &.small {
      width: 100px;
      height: 100px;
    }

    &.web {
      display: none;
    }
  }

  nav ul.menu-web {
    gap: 15px;
    font-size: 0.9rem;
  }

  .services ul li,
  .proyects ul li {
    flex: 45%;
    /* 2 columnas */
  }

  .clients ul li .hexagon {
    width: 180px;
    height: 180px;
  }

  .about-us ul li {
    flex: 45%;
  }

  .about-us-detail .column-item.image img {
    width: 350px;
  }
}

/* Móviles */
@media screen and (max-width: 768px) {

  :root {
    --layout-h-p: 1em;
  }

  .footer-contact div {
    justify-content: center !important;
  }

  .reveal {
    opacity: 0;
    transform: translateY(0) !important;
    transition: all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1);
  }

  .fade-up {
    transform: translateY(40px);
  }

  .fade-left {
    transform: translateX(-40px);
  }

  .fade-right {
    transform: translateX(40px);
  }

  .reveal.active {
    opacity: 1;
    transform: translate(0, 0);
  }

  .delay-1 {
    transition-delay: 0.2s;
  }

  .delay-2 {
    transition-delay: 0.4s;
  }


  .home {
    .column-item {
      text-align: center;
      align-items: center;
      justify-content: center;
    }
  }

  .about-us-detail {
    flex-direction: column;

    .column-item {
      p {
        text-align: center !important;
      }

      h1 {
        text-align: center !important;
      }
    }
  }

  .about-us {
    flex-direction: column;
    padding-bottom: 1em;

    .column-item {
      justify-content: baseline;

      ul {
        margin: 0 !important;
        padding: 0 !important;
      }
    }
  }

  nav {
    padding-top: 0.2em;
    padding-bottom: 0.2em;

    .burger-menu {
      display: flex;
      outline: none !important;
      color: var(--primary-color) !important;
      border: none;
      background: transparent !important;
      min-width: auto;
      height: 100%;
      padding: 0.2em;
      align-items: end;

      span {
        font-size: 2rem;
        color: white;
        background-color: transparent;
      }
    }

    .menu-web {
      display: none !important;
    }

    .menu-web.active {
      display: flex !important;
      flex-direction: column;
      z-index: 10;
      animation: menu-in 0.2s forwards;
      pointer-events: auto;
      background-color: rgb(0, 0, 0, 0.8);
      position: absolute;
      top: 51px;
      width: 100%;
      outline: 1px solid var(--primary-color);
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      transform-origin: top center;
      border-radius: 0;
      left: 0;
      gap: 0;
      height: auto;
      align-items: center;

      li {
        font-weight: 300;
        font-size: 1rem;
        padding: 0.5em 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #5e5e5e;

        a {
          color: white;
          height: auto;
          width: auto;
          text-align: justify;
        }
      }
    }

    .menu-web.removing {
      animation: menu-out 0.2s forwards !important;
    }
  }

  .section {
    width: -webkit-fill-available !important;
  }

  .clients {
    ul {
      padding-left: 0 !important;
    }
  }

  .proyects {
    .hexagon {
      right: -7px !important;
    }

    ul {
      flex-wrap: wrap;
    }
  }


  .hexagon {
    &.large {
      width: 250px;
      height: 250px;
    }

    &.small {
      width: 100px;
      height: 100px;
    }

    &.web {
      display: none;
    }
  }

  nav {
    position: relative;
  }


  .home {
    flex-direction: column;
    text-align: center;
  }

  .home .column-item h1 {
    font-size: 1.8rem;
  }

  .clients {
    ul {
      li {
        h2 {
          min-height: auto !important;
        }
      }
    }
  }

  .services ul li,
  .proyects ul li,
  .about-us ul li {
    flex: 100%;
    /* 1 columna en móvil */
  }

  .about-us-detail .column-item.image img {
    width: 100%;
    max-width: 300px;
  }

  .clients ul li .hexagon {
    width: 140px;
    height: 140px;
  }

  .clients h1 strong,
  .proyects h1 strong {
    font-size: 1.8rem;
  }


  .news-container {
    flex-direction: column;

    & .news-main {
      img {
        width: -webkit-fill-available !important;
      }
    }
  }


}