@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

:root {
  --white-font: #ffffff;
  --strong-orange: #ff6b00;
  --low-orange: #ff8a00;
  --midle-orange: #f68d2e;
}

body {
  font-family: "Open Sans";
}

/*CONTAINER 1*/

.container01 {
  display: flex;
  background: url(../img/BG.svg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 51vw;
}

.container01Content {
  width: 50vw;
  display: flex;
  flex-direction: column;
}

.logo img {
  max-width: 16vw;
  padding: 6vw;
}

.container01Description {
  background: linear-gradient(
    90deg,
    #ff5300 6.47%,
    #ff6b00 50.38%,
    rgba(255, 107, 0, 0) 111.87%
  );
  width: 50vw;
  height: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3vw;
}

.container01Description h1 {
  color: var(--white-font);
  font-weight: 700;
  font-size: 3vw;
  max-width: 29vw;
}

.tagStyle01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28vw;
  height: 3vw;
  background: var(--strong-orange);
  border-radius: 5vw;
  margin-bottom: 2vw;
}
.tagStyle02 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28vw;
  height: 3vw;
  background: var(--low-orange);
  border-radius: 5vw;
  margin-bottom: 2vw;
}

.tags {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42vw;
}

.tags p {
  width: 50vw;
  color: var(--white-font);
  font-weight: 700;
  text-align: center;
  font-size: 1.4vw;
}

.container01Product {
  width: 50vw;
}

.container01Product img {
  width: 100%;
  position: absolute;
  margin-left: -52vw;
}

/*CONTAINER 2 - CONTAINERBOX*/

.containerBox {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.boxItem {
  max-width: 16vw;
  padding: 2vw 1vw;
}

/*CONTAINER 03*/

.container03 {
  width: 100%;
  height: 50vw;
  display: flex;
}

.container03Product {
  width: 25vw;
}

.container03Product img {
  width: 60vw;
  z-index: 1;
}

.container03Content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75vw;
  height: 100%;
  color: var(--white-font);
  background: linear-gradient(270deg, #ff6720 0%, #f68d2e 111.11%);
  z-index: -1;
}

.container03Description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 18vw;
}

.container03Content h1 {
  font-size: 3vw;
  font-weight: 700;
}

.container03Content h2 {
  font-size: 2vw;
  font-weight: 200;
  margin-bottom: 0.5vw;
}

.container03Content p {
  max-width: 31vw;
  font-size: 1.2vw;
}

.tagStyleGarantia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22vw;
  height: 3vw;
  background-color: var(--white-font);
  border-radius: 5vw;
  margin-top: 3vw;
}

.tagStyleGarantia p {
  color: var(--strong-orange);
  text-align: center;
  font-weight: 700;
  font-size: 1.4vw;
}

/*CONTAINER 4*/
.container04 {
  display: flex;
  flex-direction: row;
  max-height: 51.1vw;
}

.prato img {
  width: 97vw;
}

.pratoMobile img {
  display: none;
  width: 100%;
}

.descriptionMobile h1{
  display: none;
}

.balao {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(0deg, #ff6720 0%, #f68d2e 96.25%);
  border-radius: 13vw;
  margin-left: -30vw;
  margin-top: 2vw;
  z-index: -1;
  width: 24vw;
  height: 42vw;
}

.balao img {
  max-width: 7vw;
  padding-top: 2vw;
}

.balao h2 {
  font-weight: 400;
  color: var(--white-font);
  font-size: 1.9vw;
  text-align: center;
  max-width: 21vw;
}

/*CONTAINER 5*/
.container05 {
  display: flex;
  width: 100%;
  height: 28.05vw;
  background: linear-gradient(97.35deg, #ff6720 7.07%, #f68d2e 92.6%);
  padding-top: 4vw;
}

.container05Content {
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white-font);
}

.container05Content h1 {
  font-size: 3vw;
  font-weight: 700;
  max-width: 26vw;
}

.container05Content p {
  font-size: 1.2vw;
  max-width: 27vw;
}

.container05Product {
  width: 50vw;
}

.container05Product img {
  width: 57vw;
  margin-top: -2.9vw;
  margin-left: -7vw;
}

/*CONTAINER 6*/

.container06 {
  display: flex;
}

.container06Product {
  width: 50vw;
}

.container06Product img {
  height: 50vw;
  border-right: var(--strong-orange) 1vw solid;
}

.container06Content {
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container06Content h1 {
  color: var(--midle-orange);
  font-weight: 700;
  font-size: 3vw;
  max-width: 29vw;
}

.container06Content p {
  max-width: 28.2vw;
  font-weight: 300;
  font-size: 1.2vw;
}

.container06Content strong {
  font-weight: 500;
}

/* footer */
.lineFooter {
  background: #00b1db;
  height: 5px;
}

.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;
}

.containerSocial {
  margin-left: 4vw;
}

.containerSocial a {
  text-align: center;
  margin: 0 1vw;
}

.linkContainer {
  margin-right: 4vw;
}


@media (max-width: 1024px) {
    .footerContainer {
      padding: 20px 10px;
    }
  
    .logo {
      width: 160px;
    }
  
    .socialSize {
      width: 30px;
    }
  
    .line {
      margin: 0;
    }
  
    .containerSocial {
      margin-left: 15px;
    }
}

@media (max-width: 768px) {
  .container01Description h1 {
    font-size: 3.2vw;
  }
  .tags p {
    font-size: 1.7vw;
  }
  .containerBox {
    flex-wrap: wrap;
  }
  .boxItem {
    max-width: 32vw;
    padding: 1vw 1vw;
  }

  .container03 {
    flex-direction: column;
    height: 100%;
  }

  .container03Product img {
    position: unset;
    width: 100%;
  }

  .container03Product {
    width: 100vw;
  }

  .container03Content {
    width: 100%;
  }

  .container03Content h1 {
    font-size: 5vw;
  }

  .container03Content h2 {
    font-size: 4vw;
  }

  .container03Content p {
    max-width: 96vw;
    text-align: center;
    font-size: 2vw;
  }

  .container03Description {
    margin: 0;
    align-items: center;
    width: 100%;
    height: 50vw;
    justify-content: center;
  }

  .tagStyleGarantia {
    width: 36vw;
    height: 6vw;
  }

  .tagStyleGarantia p {
    font-size: 2.5vw;
  }

  .container05Content h1 {
    font-size: 3vw;
    max-width: 50vw;
  }

  .container05Content p {
    font-size: 2vw;
    max-width: 45vw;
  }

  .container06 {
    flex-direction: column;
  }

  .container06Product img {
    height: 102vw;
    border-right: none;
    border-bottom: var(--strong-orange) 1vw solid;
  }

  .container06Content {
    width: 100%;
  }

  .container06Content h1 {
    font-size: 5vw;
    max-width: 100%;
  }

  .container06Content p {
    max-width: 68vw;
    font-size: 2vw;
    text-align: center;
  }

  .lineFooter {
    background: #00b1db;
    height: 5px;
    margin-top: 1vh;
  }
}

@media (max-width: 600px) {
  .container01Description {
    margin-bottom: 1vw;
  }

  .tagStyle01 {
    width: 32vw;
    height: 4vw;
    margin-bottom: 1vw;
  }

  .tagStyle02 {
    width: 32vw;
    height: 4vw;
  }
  .tags p {
    font-size: 2vw;
  }

  .container03Content {
    height: 100vw;
  }

  .container03Content h1 {
    font-size: 8vw;
  }

  .container03Content h2 {
    font-size: 6vw;
  }

  .container03Content p {
    max-width: 95vw;
    font-size: 4vw;
  }

  .container04 {
    flex-direction: column-reverse;
    margin-top: 24vw;
  }

  .prato {
    display: none;
    height: 52.7vw;
  }

  .pratoMobile img {
    display: block;
    height: 52.7vw;
  }

  .balao {
    margin-left: 20vw;
    width: 60vw;
    height: 25vw;
  }
  
  .balao h2 {
    font-size: 3vw;
    max-width: 43vw;
    padding: 1.5vw;
  }

  .descriptionMobile {
    display: flex;
    justify-content: center;
  }

  .descriptionMobile h1 {
    color: var(--midle-orange);
    font-size: 5vw;
    font-weight: 700;
    max-width: 100%;
    display: block;
    position: absolute;
    margin-top: 1vw;
  }

  .tagStyleGarantia {
    width: 46vw;
    height: 35px;
  }

  .tagStyleGarantia p {
    font-size: 4vw;
  }

  .container05 {
    flex-direction: column;
    height: 84vw;
  }

  .container05Content {
    margin-bottom: 4vw;
    width: 100%;
    height: 28vw;
  }

  .container05Content h1 {
    font-size: 24px;
    max-width: 100%;
  }

  .container05Content p {
    font-size: 16px;
    max-width: 95vw;
    text-align: center;
    margin-left: 0vw;
  }

  .container05Product {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .container05Product img {
    width: 100%;
    margin-top: 1vw;
}

  .container06Content h1 {
    font-size: 6vw;
    max-width: 100%;
    margin-bottom: 2vw;
  }

  .container06Content p {
    max-width: 96vw;
    font-size: 16px;
  }

  .linkContainer {
      display: none;
  }

  .line {
      display: none;
  }
}

@media (max-width: 463px) {
  .container05 {
    height: 100%;
  }

  .container05Content {
    height: 45vw;
  }



  .container05Content h1 {
    font-size: 20px;
    max-width: 100%;
    margin-top: 2vw;
  }
}

@media (max-width: 329px) {
  .container05Content {
    height: 50vw;
  }

  .container05 {
    height: 106vw;
  }

  .container05Product img {
    width: 100%;
    margin-top: 2vw;
  }
}









