/* Versão 2*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: rgb(252, 252, 252);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background: rgb(20, 20, 20);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-X: hidden;
}

header {
  height: 14%;
  transition: 0.3s;
  max-height: 130px;
  min-height: fit-content;
  width: 90vw;
  background: rgb(28, 28, 28);
  opacity: 90%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  position: fixed;
  border-radius: 0px 0px 10px 10px;
  top: -10px;
  box-shadow: 2px 2px 5px rgb(0, 0, 0);
  z-index: 1;
}

.rolheader {
  height: 8%;
  transition: 0.3s;
}

header div {
  height: 90%;
  width: 33%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.logo {
  padding-left: 20px;
  display: flex;
  justify-content: flex-start;
}

.logo_lunix {
  height: 100px;
  transition: 0.3s;

}

.logoscl {
  height: 70px;
  transition: 0.3s;
}



.slogan {
  padding-right: 40px;
  min-width: 290px;
  display: flex;
  font-family: 'Courier New', Courier, monospace;
}

.menu-pc {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.menu-pc a {
  text-decoration: none;
  height: 30px;
  width: 20%;
  min-width: fit-content;
  padding-bottom: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /*border: 1px solid rgb(222, 222, 222);*/
  border-radius: 10px;
  color: rgb(222, 222, 222);
  font-weight: 400;
  font-size: 0.8em;
}

.menu-pc a:hover {
  /*background: rgb(222, 222, 222);
  color: black;
  border: 0px;*/
  scale: 1.1;
  text-decoration: underline;

}

.impacto {
  margin-top: 120px;
  height: 50vw;
  width: 90vw;
  display: grid;
  grid-template-columns: 34% 32% 34%;
  grid-template-rows: 100%;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.impacto div {
  height: 90%;
  display: flex;
  justify-content: center;
}

.impacto .lnxleft img {
  position: fixed;
  left: 30px;
  width: 25vw;
  z-index: -1;
}

.impacto .camera img {
  position: fixed;
  margin-right: 00px;
  width: 33vw;
}

.impacto .lnxright img {
  position: fixed;
  right: 30px;
  width: 25vw;
  z-index: -1;

}



h2 {
  position: relative;
  z-index: 2;
  margin-left: -150px;
  margin-right: -150px;
  text-align: center;
  font-size: 4em;
  font-weight: 500;
  font-style: oblique;
  flex-wrap: wrap;
  color: rgb(20, 20, 20);
  opacity: 40%;
  text-shadow: 1px 1px #808080, -1px -1px #424242;
  animation: lnx325 5s linear alternate infinite;
}

.destaques {
  margin-top: 100px;
  height: 90vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 49% 2% 49%;
  grid-template-rows: 100%;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #000000;
  /*box-shadow: 10px 0px 5px rgb(70, 70, 70);*/
}

/*justify-itens = alinha na linha e align-itens = alinha nas colunas*/

.direita,
.lnx325,
.esquerda {
  height: 100%;
  display: flex;
  border-radius: 10px;
}

.esquerda {
  /*background: linear-gradient(135deg, rgb(253, 253, 253), rgb(201, 201, 201), rgb(121, 121, 121));*/
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.esquerda .image {
  padding: 10px;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lnx_tripe {
  height: 100%;
  padding: 1px;
  filter: drop-shadow(15px 15px 20px rgb(70, 70, 70));
}

.lnx325 {
  align-items: center;
  justify-content: center;
}


.diferenciais {
  height: 90%;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.diferenciais div {
  height: 100px;
  width: 100px;

  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(201, 201, 201);
  background: rgb(43, 43, 43);
}

.diferenciais div:nth-child(2n+1) {
  transform: translateX(25px);
  border-radius: 50% 0% 50% 0;
}

.diferenciais div:nth-child(2n+2) {
  transform: translateX(-25px);
  border-radius: 0% 50% 0% 50%;
}

.pratico:hover {
  background: linear-gradient(90deg, rgb(109, 109, 109), rgb(30, 30, 30)) !important;
  box-shadow: 10px 0px 5px rgb(70, 70, 70);
  text-shadow: 2px 1px 3px rgb(0, 0, 0);

}

.versatil:hover {
  background: linear-gradient(100deg, rgb(109, 109, 109), rgb(30, 30, 30));
  box-shadow: 8px 3px 5px rgb(70, 70, 70);
  text-shadow: 3px 1px 3px rgb(0, 0, 0);
}

.simples:hover {
  background: linear-gradient(110deg, rgb(109, 109, 109), rgb(30, 30, 30));
  box-shadow: 5px 5px 5px rgb(70, 70, 70);
  text-shadow: 3px 3px 2px rgb(0, 0, 0);
}

.eficaz:hover {
  background: linear-gradient(120deg, rgb(109, 109, 109), rgb(30, 30, 30));
  box-shadow: 3px 8px 5px rgb(70, 70, 70);
  text-shadow: 1px 3px 2px rgb(0, 0, 0);
}


.direita .image {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frente_fundo {
  width: 50%;
  filter: drop-shadow(0px 0px 20px rgb(175, 175, 175));
  margin-top: 150px;
  margin-left: 150px;
}

.slogan strong {
  font-size: 20px;
  font-style: oblique;
}

.menu-mobile {
  cursor: pointer;
  position: fixed;
  top: 70px;
  right: 50px;
  height: 50px;
  width: 50px;
  padding-bottom: 4px;
  font-size: 12px;
  background: black;
  border-radius: 50%;
  box-shadow: 3px 3px 7px rgb(70, 70, 70);
  visibility: hidden;
}

/*.menu-mobile:hover {
animation: openmenu .4s  ease-in-out;

}*/

.menu-mobile a {
  text-decoration: none;
  position: fixed;
  top: 80px;
  right: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 4px;
  justify-content: space-around;
  height: 50px;
  width: 50px;
  background: black;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  z-index: 0;
  scale: 0.1;
  box-shadow: 5px 5px 5px rgb(70, 70, 70);
}


.hidden {
  visibility: hidden;
}

@media screen and (max-width: 576px) {
  .menu-pc {
    display: none;
  }

  .menu-mobile {
    visibility: visible;
  }

  header {
    justify-content: space-between;
    min-width: 330px;
    max-height: 120px;
    min-height: 80px;
  }

  .slogan {
    font-size: 80%;
    padding-right: 10px;
    width: 80%;
    min-width: 140px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .logo_lunix {
    height: 70px;
  }

  .destaques {
    margin-top: 20px;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-rows: 49% 2% 49%;
    grid-template-columns: 100%;
    background: none;
  }

  .direita,
  .esquerda {
    height: 100vh;
    background: black;
    z-index: -1;
  }

  .pratico {
    background: linear-gradient(90deg, rgb(109, 109, 109), rgb(30, 30, 30)) !important;
    box-shadow: 10px 0px 5px rgb(70, 70, 70);
    text-shadow: 2px 1px 3px rgb(0, 0, 0);
  }

  .versatil {
    background: linear-gradient(100deg, rgb(109, 109, 109), rgb(30, 30, 30)) !important;
    box-shadow: 8px 3px 5px rgb(70, 70, 70);
    text-shadow: 3px 1px 3px rgb(0, 0, 0);
  }

  .simples {
    background: linear-gradient(110deg, rgb(109, 109, 109), rgb(30, 30, 30)) !important;
    box-shadow: 5px 5px 5px rgb(70, 70, 70);
    text-shadow: 3px 3px 2px rgb(0, 0, 0);
  }

  .eficaz {
    background: linear-gradient(120deg, rgb(109, 109, 109), rgb(30, 30, 30)) !important;
    box-shadow: 3px 8px 5px rgb(70, 70, 70);
    text-shadow: 1px 3px 2px rgb(0, 0, 0);
  }

}

/* Animações de abertura do menú mobile*/
@keyframes openhome {
  0% {
    transform: translate(0px, 0px);
    scale: 0.05;
  }

  100% {
    transform: translate(-65px, -40px);
    scale: 1;
  }
}

@keyframes opensobre {
  0% {
    transform: translate(0px, 0px);
    scale: 0.05;
  }

  100% {
    transform: translate(-65px, 25px);
    scale: 1;
  }
}

@keyframes opencontato {
  0% {
    transform: translate(0px, 0px);
    scale: 0.05;
  }

  100% {
    transform: translate(-25px, 75px);
    scale: 1;
  }
}

/* Animações de fechamento do menú mobile*/


@keyframes closehome {
  0% {
    transform: translate(-65px, -40px);
    scale: 1;
  }

  100% {
    transform: translate(0px, 0px);
    scale: 0.5;
  }
}

@keyframes closesobre {
  0% {
    transform: translate(-65px, 25px);
    scale: 1;
  }

  100% {
    transform: translate(0px, 0px);
    scale: 0.05;
  }
}

@keyframes closecontato {
  0% {
    transform: translate(-25px, 75px);
    scale: 1;
  }

  100% {
    transform: translate(0px, 0px);
    scale: 0.05;
  }
}

@keyframes lnx325 {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 40%;
  }
}