.home {
  padding-top: 4em;
  padding-bottom: 4em;

  .column-item {
    align-items: baseline;

    h1 {
      span {
        font-size: 1.4rem;
      }

      color: var(--secondary-color);
      font-size: 2.7rem;

    }

    p {
      color: var(--tertiary-color);
    }
  }
}

.burger-menu {
  display: none;
}

.about-us {
  padding-top: 0;
  align-items: flex-start;
  justify-content: center;
  text-align: center;

  h1 {
    padding: 1em 0;
    border-bottom: 1px solid var(--primary-color);
  }

  p {
    width: 100%;
    font-size: large;
    color: var(--tertiary-color);
  }

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    justify-self: baseline;

    li {
      list-style: none;
      background-color: #EAEAEA;
      padding: 0.5em 1.5em;
      text-align: left;
      flex: 33%;
      border-radius: 5px;

      div {
        font-size: 2.5rem;
        font-family: "Anton", sans-serif;

        span {
          font-size: 2.3rem;
        }
      }

      label {
        color: var(--primary-color);
      }
    }
  }
}

.about-us-detail {
  .column-item {
    &.text {
      p {
        text-align: left;
        font-weight: 100;
        color: var(--primary-color);
        font-size: 1.5rem;
        width: -webkit-fill-available;
        padding: 0;
        margin: 0;
      }

      h1 {
        text-align: left;
        width: -webkit-fill-available;
        font-size: 3.5rem;
      }
    }

    &.image {
      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 10px 80px 10px 10px;
      }
    }

  }
}

.services {
  background-color: var(--primary-color);
  padding-top: 4em;

  h1 {
    width: 100%;
    text-align: center;
  }

  ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;

    li {
      flex: 23%;
      border-radius: 10px;
      padding: 3em 3em;
      background-color: var(--primary-color);
      text-align: center;
      border: 2px solid black;
      cursor: pointer !important;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

      &:hover {
        background-color: black;
        color: white;
      }

      .material-symbols-outlined {
        font-size: 3rem;
      }

      h2 {
        font-size: 1.2rem;
        min-height: 40px;
        padding: 0;
        margin: 0;
      }

      p {
        padding: 0;
        margin: 0;
      }

      &:nth-child(odd) {
        background-color: white;
        color: var(--secondary-color);
        border-color: white;

        &:hover {
          background-color: var(--primary-color);
          color: white;
        }
      }
    }
  }
}

.proyects {
  background-color: var(--secondary-color);

  h1 {
    width: 100%;
    color: white;

    strong {
      font-size: 2.5rem;
    }
  }

  ul {
    display: flex;
    list-style: none;
    flex-direction: row;
    gap: 30px;
    padding: 0;
    width: -webkit-fill-available;
    height: auto;

    li {
      flex: 23%;
      height: auto;
      position: relative;
      transition: transform 0.6s ease, background-size 0.6s ease;

      &:hover {
        transform: scale(1.08);
        background-size: 110%;
      }

      .item {
        width: auto;
        height: 180px;
        border-radius: 10px;
        padding: 7em 3.5em;
        background-color: var(--primary-color);
        text-align: center;
        position: relative;
        overflow: hidden;
        border: none;

        h2 {
          font-size: 1rem;
          color: white;
          position: absolute;
          padding: 0.3em 2em;
          text-align: center;
          top: 10px;
          left: 2.5px;
          background: var(--gradient-color);
        }

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          padding: 2.5px;
          border-radius: 10px;
          background: var(--gradient-color);
          background-size: 600% 600%;
          animation: moveGradient 6s linear infinite;
          -webkit-mask: linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
        }

        &.welding {
          background-image: url("../assets/images/destacado.png");
          background-position: 0;
          background-size: cover;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            background-color: rgb(0, 0, 0, 0.3);
          }
        }

        &.extra {
          background-image: url("../assets/images/destacado_2.png");
          background-position: 0%;
          background-size: cover;
          background-repeat: no-repeat;
        }

        &.exportacion {
          background-image: url("../assets/images/exportacion.jpg");
          background-position: 0%;
          background-size: cover;
          background-repeat: no-repeat;
        }

        &.trayectoria {
          background-image: url("../assets/images/trayectoria.jpg");
          background-position: 50%;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }

      .hexagon {
        position: absolute;
        background: var(--primary-color);
        z-index: 1;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        bottom: -25px;
        right: -25px;

        .material-symbols-outlined {
          background-color: transparent;
          color: black;
          padding: 0;
          font-size: 2rem;
        }

        &:hover {
          .material-symbols-outlined {
            color: white;
          }
        }
      }
    }
  }
}


.clients {
  h1 {
    width: 100%;
    text-align: center;

    strong {
      font-size: 2.5rem;
    }
  }

  sub {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
  }

  ul {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 30px;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      h2 {
        margin: 0;
        font-size: 1.4rem;
        max-width: 250px;
        text-align: center;
        padding: 0;
        justify-self: baseline;
        min-height: 100px;
      }

      .hexagon {
        background: white;
        width: 250px;
        height: 250px;
        aspect-ratio: 1 / 1;
        position: relative;

        &.logo {
          &::after {
            background-image: url('../assets/images/friend-placeholder-logo.png');
            background-size: contain;
          }
        }

        &.transporte-sanchez {
          &::after {
            background-image: url("../assets/images/logo-transporte-sanchez.png");
            background-size: 75%;
            background-repeat: no-repeat;
            background-position: 50%;
          }
        }

        &.aljibe-distribucion {
          &::after {
            background-image: url("../assets/images/cliente_aljibe_distribución.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50%;
          }
        }

        &.transportes-mataquito {
          &::after {
            background-image: url("../assets/images/cliente_transportes_mataquito.png");
            background-size: contain;
            background-repeat: repeat-y;
            background-position: 50%;
          }
        }

        &.transporte-ryb {
          &::after {
            background-image: url("../assets/images/cliente_ryb.webp");
            background-size: 65%;
            background-repeat: no-repeat;
            background-position: 50%;
          }
        }

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--gradient-color);
          z-index: 0;
        }

        &::after {
          content: "";
          position: absolute;
          inset: 3px;
          background: white;
          clip-path: inherit;
          z-index: 1;
        }
      }
    }
  }
}

.news-container {
  display: flex;
  gap: 30px;
  padding: 30px 0;
  width: 100%;
  .news-main {
    flex: 1.3;

    img {
      width: 550px;
      height: 400px;
      border-radius: 10px;
      border: 3px solid var(--primary-color);
      object-fit: cover;
    }

    .header {
      display: flex;
      gap: 5px;
      align-items: center;
      width: 100%;
      justify-content: baseline;
      margin-top: 10px;

      .tag {
        display: inline-block;
        background: var(--primary-color);
        color: white;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
      }

      .created-at {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: baseline;
        gap: 5px;
        font-size: 14px;
      }
    }



    h2 {
      margin: 10px 0;
    }

    a {
      color: var(--primary-color);
      font-weight: bold;
      text-decoration: none;
      width: 100%;
      text-align: right;
      display: block;
    }
  }

  .news-sidebar {
    flex: 1;

    h3 {
      margin-bottom: 15px;
      margin-top: 0;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin: 30px 0;

      a {
        text-decoration: none;
        color: white;
        background: #FC5B01;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: bold;
      }

      span {
        font-weight: bold;
      }
    }


    .news-item {
      display: flex;
      gap: 10px;
      background: #EEEEEE;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 12px;

      .info {
        display: flex;
        flex-direction: column;
        width: -webkit-fill-available;
      }

      img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
      }

      .header {
        display: flex;
        gap: 5px;
        align-items: center;
        width: 100%;
        justify-content: baseline;

        .badge {
          background: var(--primary-color);
          color: white;
          padding: 4px 8px;
          width: max-content;
          border-radius: 10px;
          font-size: 11px;
        }

        .created-at {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: baseline;
          gap: 5px;
          font-size: 12px;
        }
      }

      h4 {
        margin: 6px 0;
        font-size: 14px;
      }

      p {
        font-size: 12px;
        color: #555;
        padding: 0;
        margin: 0;
      }

      a {
        justify-self: end;
        color: var(--primary-color);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        text-align: end;
      }
    }


  }
}