/*slide*/
.img-header img {
  margin-top: 3px;
  height: 90vh;
  width: 100%;
}

.img {
  position: relative;
}

/*sobre*/

.sobre {
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  align-items: center;
}
h2 {
  border-top: 5px solid rgb(231, 229, 229);
  padding: 60px;
  margin: 0 auto;
  width: 800px;
  font-size: 40px;
  font-weight: bold;
  color: rgb(172, 163, 163);
}
.mozaico {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.texto {
  font-size: 25px;
  text-align: center;
  line-height: 38px;
}

.mozaico .wrapper100:nth-child(1) {
  width: 1200px;
  margin-bottom: 25px;
}

.wrapper100 {
  align-items: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 2%;
  gap: 0.5in;
}
.mozaico .wrapper100:nth-child(2) {
  flex-direction: row-reverse;
  padding-top: 40px;
}
.wrapper100 > .wrapper-img > img {
  max-width: 100%;
  height: auto;
}

.mvv {
  background-image: url(../images/ocean-gfe137d03a_1920.jpg);
  margin-top: 55px;
  display: flex;
  height: 800px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.mvv-conteiner {
  width: 530px;
  height: 100%;
  color: white;
}
.title {
  display: flex;
  flex-direction: row;
}
.mvv-conteiner h2 {
  border-top: 0;
  padding: 0;
  margin: 0;
  width: 0;
  font-size: 40px;
  font-weight: bold;
  color: wheat;
}

.mvv-conteiner > .mission {
  width: 100%;
  height: 90%;
  margin-top: 25px;
}

.cortina {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  border-radius: 50px;
}
.cortina > .title {
  padding: 25% 0 2% 15%;
  display: flex;
  flex-direction: column;
}
.mission .texto {
  padding: 0 0 2% 15%;
  text-align: left;
  width: 360px;
  height: 100%;
  line-height: normal;
  font-size: 20px;
}
.mvv-conteiner > .mission {
  background-position: center;
  background-size: cover;
}

.mvv-conteiner > .mission {
  border-radius: 50px;
  background-image: url(../images/economy-g488154395_1920.jpg);
}
.mvv-conteiner:nth-child(2) > .mission {
  border-radius: 50px;
  background-image: url(../images/eye-g485096dd4_1920.jpg);
}
.mvv-conteiner:nth-child(3) > .mission {
  border-radius: 50px;
  background-image: url(../images/money-g85de69a5d_1920.jpg);
}

.mvv-conteiner > .mission:hover .cortina {
  background-image: linear-gradient(
    -45deg,
    rgba(44, 17, 197, 0.7),
    rgba(0, 0, 0, 0.3) 90%
  );
  cursor: default;
}
.mvv-conteiner > .mission:hover {
  background-size: auto;
}

.logo-title1 {
  background-image: url(../images/visao.png);
  width: 80px;
  height: 80px;
  background-size: cover;
}

.mvv-conteiner:first-child .logo-title1 {
  background-image: url(../images/missao.png);
}
.mvv-conteiner:last-child .logo-title1 {
  background-image: url(../images/valores.png);
}

.contato > .logo-title1 {
  background-image: url(../images/gps.png);
}

@media screen and (max-width: 1223px) {
  .sobre > .mozaico .wrapper-img {
    display: none;
  }
  .mozaico .wrapper100:nth-child(1) {
    width: 100%;
    margin-bottom: 25px;
  }

  .mvv-conteiner > .mission {
    width: 100%;
    height: 70%;
    margin-top: 0;
  }
  .mvv {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: none;
  }
  .mvv-conteiner {
    width: 100%;
  }
  .mvv-conteiner .mission {
    border-radius: 1px;
  }
  .mvv-conteiner:nth-child(2) .mission {
    border-radius: 1px;
  }
  .mvv-conteiner:nth-child(3) .mission {
    border-radius: 1px;
  }
  .cortina {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .mission .texto {
    padding: 2% 2%;
    text-align: center;
    width: 80%;
    line-height: normal;
    font-size: 30px;
  }
  .cortina > .title {
    padding: 0 0;
    width: 150px;
  }

  .mission .cortina {
    padding: 15% 0 15% 0;
  }
}
@media screen and (max-width: 820px) {
  .sobre > h2 {
    width: 100%;
    border-top: none;
    padding: 0 2%;
    margin-bottom: 55px;
  }
  .mission .texto p {
    font-size: 25px;
    width: 100%;
  }
}

.reveal,
.reveal01 {
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease-in-out;
}

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

@media screen and (max-width: 500px) {
  .img-header img {
    height: 65vh;
  }
}