@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");

body {
  font-family: "Open Sans";
}

:root {
  --high-gray: #3c3c3b;
  --low-gray: #97999B;
  --white: #ffffff;
}

/* CONTAINER 1 */
.container01 {
  background: url("../img/mainBG.svg") no-repeat;
  height: 53vw;
  background-size: contain;
}

.container01Content {
  display: flex;
  height: 53vw;
  justify-content: space-between;
  align-items: flex-start;
}

.container01Logo {
  padding: 2vw 0vw 0vw 9vw;
}

.logoMain {
  width: 15vw;
}

.container01Info {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.container01Description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--high-gray);
  width: 32vw;
  border-radius: 0vw 0vw 0vw 4vw;
  padding: 2vw 8vw 2vw 0vw;
  margin-top: 5vw;
}

.container01Description h1 {
  color: var(--white);
  font-weight: 700;
  font-size: 4vw;
  text-transform: uppercase;
  width: 100%;
  text-align: end;
}

.container01Description h2 {
  color: var(--white);
  font-weight: 300;
  font-size: 4vw;
  text-transform: uppercase;
  width: 100%;
  text-align: end;
}

.modelBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--high-gray);
  width: 18vw;
  height: 3vw;
  border-radius: 5vw;
  margin-top: 2vw;
}

.modelBtn p {
  color: var(--white);
  font-weight: 700;
  font-size: 1.5vw;
  text-transform: uppercase;
}

/* CONTAINER 2 */

.container02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 3vw;
}

.container02 img {
  width: 16vw;
}

/* CONTAINER 3 */
.container03 {
    display: flex;
}

.container03Description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--low-gray);
    padding: 0vw 10vw;
}

.container03Description h1 {
    font-size: 4vw;
    font-weight: 700;
    color: var(--white);
    width: 42vw;
}

.container03Description h2 {
    font-size: 3vw;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 3vw;
}

.container03Description p {
    font-size: 1.5vw;
    font-weight: 300;
    color: var(--white);
    width: 38vw;
}

.container03Product img {
    width: 50vw;
    z-index: 1;
    margin-left: -13vw;
}

/* CONTAINER 4 */
.container04 {
  background: url(../img/container04BG.svg) no-repeat;
  height: 37vw;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container04Content {
  background: var(--low-gray);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 38vw;
  height: 20vw;
  padding: 2vw 12vw 3vw 7vw;
  border-radius: 0vw 0vw 0vw 5vw;
}

.container04Content h1 {
  font-size: 4vw;
  color: var(--white);
  font-weight: 700;
  line-height: 4.5vw;
  text-align: end;
  margin-bottom: 2vw;
}

.container04Content p {
  font-size: 1.5vw;
  color: var(--white);
  font-weight: 300;
  text-align: end;
}

/* CONTAINER 5 */
.container05 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 4vw;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item img {
  width: 30vw;
}

.item h1 {
  font-size: 2vw;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: -7vw;
}

.item h2 {
  font-size: 2vw;
  font-weight: 300;
  text-transform: uppercase;
}

/* CONTAINER 6 */
/* .container06 {
  background: url("../img/container06BG.png") no-repeat;
  height: 53vw;
  background-size: contain;
} */

.container06 img {
  width: 100%;
}

/* CONTAINER 7 */
.container07 {
  display: flex;
  justify-content: space-between;
  background: var(--high-gray);
  margin-top: 1vw;
}

.container07Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0vw 2vw 0vw 8vw;
  width: 36vw;
}

.container07 h1 {
  color: var(--white);
  font-size: 4vw;
  font-weight: 700;
  line-height: 4.5vw;
  margin-bottom: 4vw;
}

.container07 p {
  color: var(--white);
  font-size: 1.5vw;
  font-weight: 300;
}

.container07Product img {
  width: 50vw;
}

/* CONTAINER 8 */
.container08 {
  display: flex;
  justify-content: space-between;
}

.container08Product img {
  width: 50vw;
  z-index: 1;
  margin-top: 2vw;
}

.container08Content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: var(--low-gray);
  z-index: -1 !important;
  margin-left: -13vw;
  padding: 0vw 13vw;

}

.container08Content h1 {
  color: var(--white);
  font-size: 4vw;
  font-weight: 700;
  line-height: 4.5vw;
  margin-bottom: 4vw;
  margin-top: 6vw;
}

.container08Content p {
  color: var(--white);
  font-size: 1.5vw;
  font-weight: 300;
  margin-bottom: 4vw;
}

.container08Content h2 {
  color: var(--low-gray);
  background-color: var(--white);
  font-size: 1.5vw;
  font-weight: 700;
  padding: 0.5vw 2vw;
  border-radius: 5vw;
  text-align: center;
}

.container08Content h3 {
  color: var(--white);
  opacity: 50%;
  font-size: 1.4vw;
  font-weight: 300;
  margin-top: 5vw;
  margin-left: -3vw;
}

/* FOOTER */
.lineFooter {
  background: #00b1db;
  height: 5px;
  margin-top: 6vh;
}

.footerContainer {
  display: flex;
  justify-content: space-between;
  padding: 36px 24px;
  align-items: center;
}

.footerContainer div a {
  color: #000000;
  font-size: 22px;
}

.footerItens {
  display: flex;
  align-items: center;
}

.logo {
  width: 24vw;
}

.containerSocial {
  margin-left: 4vw;
}

.containerSocial a {
  text-align: center;
  margin: 0 1vw;
}

.linkContainer {
  margin-right: 4vw;
}

/* RESPONSIVO */

/* CONTAINER 1 */
@media (max-width: 768px) {
  .container01Description {
    width: 51vw;
  }

  .container01Description h1 {
    font-size: 10vw;
    width: unset;
    text-align: unset;
  }

  .container01Description h2 {
    font-size: 5vw;
    width: unset;
    text-align: unset;
  }
  
  .modelBtn {
    width: 41vw;
    height: 7vw;
  }
  
  .modelBtn p {
    font-size: 3.5vw;
  }

  /* CONTAINER 2 */
  .container02 {
    padding: 0vw 8vw;
  }
  .container02 img {
    width: 33vw;
    padding: 8px;
  }

  /* CONTAINER 3 */
  .container03 {
    flex-direction: column;
  }

  .container03Description {
    align-items: center;
    padding: 6vw 0vw;
  }

  .container03Description h1 {
    font-size: 8vw;
    width: unset;
  }

  .container03Description h2 {
    font-size: 6vw;
  }

  .container03Description p {
    font-size: 4vw;
    width: 100%;
    text-align: center;
  }

  .container03Product img {
    width: 100%;
    margin-left: unset;
  }

  /* CONTAINER 4 */
  .container04 {
    height: 54vw;
  }

  .container04Content {
    width: 50vw;
    height: 42vw;
    padding: 3vw 4vw 3vw 4vw;
  }

  .container04Content h1 {
    font-size: 6vw;
  }

  .container04Content p {
    font-size: 3vw;
  }

  /* CONTAINER 5 */
  .container05 {
    flex-direction: column;
  }

  .item img {
    width: 100%;
  }

  .item h1 {
    font-size: 6vw;
    margin-top: -28vw;
}

  .item h2 {
    font-size: 4vw;
  }

  .item:nth-child(2) h1 {
    margin-top: -21vw;
  }

  /* CONTAINER 7 */
  .container07 {
    flex-direction: column;
    align-items: center;
  }

  .container07Content {
    padding: unset;
    width: unset;
  }

  .container07 h1 {
    font-size: 8vw;
    line-height: 9vw;
    padding: 5vw 15vw;
    text-align: center;
  }

  .container07 p {
    font-size: 4vw;
    text-align: center;
    width: 90vw;
  }
  
  .container07Product img {
    display: flex;
    width: 100%;
    margin-right: -20vw;
  }

  /* CONTAINER 8 */
  .container08 {
    flex-direction: column;
  }

  .container08Product img {
    width: 100%;
    margin-top: unset;
  }

  .container08Content {
    align-items: center;
    margin-left: unset;
    padding: unset;
  }

  .container08Content h1 {
    font-size: 8vw;
    line-height: 9vw;
    text-align: center;
    padding: 0vw 14vw;
  }

  .container08Content p {
    font-size: 4vw;
    text-align: center;
  }

  .container08Content h2 {
    font-size: 4vw;
    padding: 1vw 8vw;
  }
  
  .container08Content h3 {
    font-size: 3vw;
    padding: 3vw;
  }
}

@media (max-width: 720px) {
  /* FOOTER */
  .linkContainer {
    display: none;
  }

  .line {
    display: none;
  }
}

@media (max-width: 425px) {
  .container02 img {
    width: 38vw;
    padding: unset;
  }
}

@media (max-width: 320px) {
  .container02 img {
    width: 66vw;
    padding: 4vw;
  }

  .footerContainer div a {
    font-size: 0px;
  }
}