* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Montserrat", sans-serif;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  gap: 2rem;
  & img {
    width: 15%;
    padding: 1rem;
  }
}
nav {
  width: 100%;
  & .nav-lista {
    display: flex;
    align-items: center;
    justify-content: space-around;
    & .nav-lista-item {
      font-size: 2rem;
      list-style: none;
      color: rgb(38, 59, 68);
      cursor: pointer;
      & a {
        text-decoration: none;
        color: rgb(38, 59, 68);
      }
    }
  }
}
main {
  max-width: 1080px;
  margin: auto;
}
/*-------------------------------------------------------------------------------HOMEPAGE----------------------------------------------------------------------------------------*/
.produtos {
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
  & .produtos-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgb(66, 178, 157);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.1rem rgb(66, 178, 157);
    position: relative;
    & .produto-titulo {
      font-size: 2rem;
      text-align: center;
      color: rgb(39, 58, 68);
      height: 30%;
    }
    & bold {
      color: rgb(74, 157, 177);
    }

    & .produto-container-imagem {
      height: 30%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      & .produto-imagem {
        width: 90%;
        padding: 3rem;
      }
      & .qrcode-imagem {
        width: 60%;
      }
    }
    & .produto-descricao {
      font-size: 1.6rem;
      text-align: center;
      background-color: rgb(66, 178, 157);
      color: white;
      height: 40%;
      position: relative;
      z-index: 1;
      padding: 1rem;
    }
    & .produto-botao {
      background-color: rgb(38, 59, 68);
      color: rgb(66, 178, 157);
      padding: 1.5rem 3rem;
      border-radius: 0.5rem;
      text-decoration: none;
      cursor: pointer;
      z-index: 2;
      font-size: 1rem;
      position: absolute;
      bottom: -2rem;
    }
  }
}
.quemsomos {
  width: 100%;
  background-color: lightgray;
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
  & .quemsomos-titulo {
    color: rgb(38, 59, 68);
    margin-bottom: 2rem;
  }
  & .quemsomos-subtitulo {
    font-size: 2rem;
    color: rgb(139, 178, 103);
    font-weight: bold;
  }
  & .quemsomos-descricao {
    text-align: center;
    margin-top: 2rem;
    line-height: 2.4rem;
  }
}
.logistica {
  width: 100%;
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
  background-color: lightgray;
  & .logistica-titulo {
    color: rgb(38, 59, 68);
    margin-bottom: 2rem;
  }
  & .logistica-subtitulo {
    font-size: 2rem;
    color: rgb(139, 178, 103);
    font-weight: bold;
  }
  & .logistica-descricao {
    text-align: center;
    margin-top: 2rem;
    line-height: 2.4rem;
    & a {
      color: rgb(38, 59, 68);
      font-weight: bold;
      &:hover {
        background-color: rgb(38, 59, 68);
        color: white;
        font-weight: hover;
        padding: 5px;
      }
    }
  }
}
.produtoLista {
  width: 100%;
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
  & .produtoLista-titulo {
    color: rgb(38, 59, 68);
    margin-bottom: 2rem;
  }
  & .produtoLista-subtitulo {
    font-size: 2rem;
    color: rgb(139, 178, 103);
    font-weight: bold;
  }
  & .produtoLista-descricao {
    text-align: center;
    margin-top: 2rem;
    line-height: 2.4rem;
    margin-bottom: 2rem;
  }
  & .produtoLista-botao {
    background-color: rgb(38, 59, 68);
    padding: 1rem;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    text-decoration: none;
  }
}
.clientes {
  font-size: 1.5rem;
  padding: 1rem;
  & .clientes-titulo {
    text-align: center;
    color: rgb(38, 59, 68);
  }
  & .clientes-logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  & .cliente-logo {
    width: 10%;
  }
  & .cliente-logo-grande {
    width: 20%;
  }
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  width: 100%;
  background-color: rgb(39, 58, 68);
  color: white;
  font-weight: bold;
}
/*-------------------------------------------------------------------------------PRODUTOS----------------------------------------------------------------------------------------*/
.detalhes {
  margin: 0.5rem;
  & h2 {
    text-align: center;
    padding: 1rem;
  }
  & .detalhes-produto {
    &:nth-child(n) {
      box-shadow: 0 0.2rem 0.4rem rgb(38, 59, 68);
    }
    display: flex;
    flex-direction: column;
    & .detalhes-caracteristicas {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      & .detalhes-imagem {
        width: 60%;
        box-shadow: 0 0.2rem 0.4rem rgb(38, 59, 68);
        margin: auto;
      }
      & .detalhes-descricao {
        & h3 {
          text-align: center;
        }

        & ul {
          padding: 1rem;
          font-size: 1.5rem;
          line-height: 1.8;
        }
        & a {
          color: rgb(38, 59, 68);
          font-weight: bold;
          cursor: pointer;
          &:hover {
            background-color: rgb(38, 59, 68);
            color: white;
            font-weight: hover;
            padding: 5px;
          }
        }
      }
    }
  }
}
.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 10rem;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}
& .modal-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90%;
  width: 50%;
  background-color: #fff1d6;
  /* background-color: rgb(66, 178, 157); */
  align-self: center;
  border: 1px solid black;
  border-radius: 1.5rem;
  box-shadow: inset 0 0 1.2rem 0.2rem rgba(0, 0, 0, 0.15);
  padding: 1rem;
  & .modal-corpo-lista {
    list-style: none;
    font-size: 1.5rem;
    line-height: 2.1rem;
    & .modal-corpo-sublista {
      text-indent: 4rem;
      list-style: none;
      & li {
        padding: 0.5rem;
      }
      & .sublista-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        & img {
          width: 50%;
        }
      }

      & li {
        & .modal-botao-sistema {
          &:active {
            color: rgb(66, 178, 157);
          }
          &:hover {
            background-color: rgb(38, 59, 68);
            color: white;
            font-weight: bold;
            padding: 0.3rem;
          }
          &:link {
            color: black;
          }
          &:visited {
            color: rgb(66, 178, 157);
            text-decoration: none;
          }
        }
      }
    }
  }
  & .modal-fechar {
    background-color: #fff1d6;
    padding: 1rem;
    border: 1px solid black;
    border-radius: 0.5rem;
    cursor: pointer;
    &:hover {
      background-color: rgb(38, 59, 68);
      color: white;
      font-weight: bold;
      border: none;
    }
  }
}
.abrirModal {
  &.modal {
    display: flex;
  }
}
.ativo {
  border-bottom: 1px solid rgb(38, 59, 68);
  color: white;
  font-weight: bold;
  cursor: pointer;
  padding: 2rem;
  border-radius: 3px;
  color: white;
}
.inativo {
  border-bottom: white;
  color: rgb(38, 59, 68);
  font-weight: 400;
  padding: 0;
  border-radius: 0;
}
/* --------------------------------------------------------------------------------Contatos-------------------------------------------------------------------------------------- */
.contatos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 10rem - 5rem);
  & .contatos-formulario {
    width: 50%;
    & form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      border-right: 1px solid black;
      & input {
        padding: 1rem;
        width: 90%;
        &::placeholder {
          text-align: center;
        }
      }
      & textarea {
        width: 90%;
        height: 20rem;
        &::placeholder {
          text-align: center;
        }
      }
      .contatos-formulario-botao {
        padding: 0.5rem;
        color: rgb(38, 59, 68);
        cursor: pointer;
        &:hover {
          background-color: rgb(38, 59, 68);
          color: white;
          font-weight: bold;
        }
      }
    }
  }
  & .contatos-dados {
    width: 50%;
    & address {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      & p {
        font-size: 2rem;
      }
    }
  }
}