@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 {
  --clear-text: #fff;
  --dark-text: #0b0b0b;
  --title-size: 3vw;
  --paragraph-size: 1.5vw;
}

/* BANNER */
.banners img {
  width: 100%;
}

/* CONTAINER 1 */
.container01 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 4vw;
}

.container01 h1 {
  font-size: var(--title-size);
  font-weight: 700;
  padding: 0vw 1vw;
  padding-bottom: 1vw;
}

.container01 p {
  font-size: var(--paragraph-size);
  font-weight: 400;
  padding: 1vw 10%;
}

/* CONTAINER 2 */
.container02 {
  display: flex;
  justify-content: space-between;
}

.container02Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  width: 50%;
}

.container02Content h1 {
  font-size: var(--title-size);
  font-weight: 700;
  width: 44vw;
}

.container02Content p {
  font-size: var(--paragraph-size);
  font-weight: 400;
  width: 44vw;
}

.container02Content img {
  width: 25vw;
  margin-top: 2vw;
  margin-left: -4vw;
}

.container02Product img {
  width: 50vw;
}

/* CONTAINER 3 */
.container03 {
  display: flex;
  justify-content: space-evenly;
  padding: 2vw 0vw;
}

.container03 img {
  width: 30vw;
}

/* CONTAINER 4 */
.container04 img {
  width: 100%;
}

.container04Content {
  margin-top: -32vw;
  margin-left: 8vw;
  margin-bottom: 8vw;
}

.container04Content h1 {
  font-size: var(--title-size);
  color: var(--clear-text);
  font-weight: 700;
  width: 31vw;
}

.container04Content p {
  font-size: var(--paragraph-size);
  color: var(--clear-text);
  font-weight: 400;
  width: 50vw;
}

/* CONTAINER 5 */
.container05 img {
  width: 100%;
}
.container05Content {
  display: flex;
  padding: 4vw 2vw;
}

.container05 h1 {
  font-size: var(--title-size);
  font-weight: 700;
}

.container05 p {
  font-size: var(--paragraph-size);
  font-weight: 400;
  width: 100vw;
}

/* CONTAINER 6 */
.container06 img {
  width: 100%;
}

.container06Content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -21vw;
}

.container06Content h1 {
  font-size: calc(var(--title-size) - 0.3vw);
  font-weight: 700;
  width: 44vw;
  padding: 2vw 1vw 6vw 8vw;
}

.container06Content p {
  font-size: calc(var(--paragraph-size) - 0.3vw);
  font-weight: 400;
  width: 70vw;
  padding: 2vw 8vw 6vw 5vw;
}

/* CONTAINER 7 */
.container07 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.container07Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  width: 50%;
}

.container07Content h1 {
  font-size: var(--title-size);
  font-weight: 700;
  width: 44vw;
}

.container07Content p {
  font-size: var(--paragraph-size);
  font-weight: 400;
  width: 44vw;
}

.container07Content img {
  width: 25vw;
  margin-top: 2vw;
  margin-left: -4vw;
}

.container07Product img {
  width: 50vw;
}

/* CONTAINER 8 */
.container08 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6vw;
}

.container08 h1 {
  font-size: var(--title-size);
  font-weight: 700;
}

.container08RowImages {
  display: flex;
}

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

.container08ProductItem img {
  width: 30vw;
  padding: 2vw 1vw;
}

.container08ProductItem p {
  font-size: calc(var(--paragraph-size) - 0.34vw);
  text-align: center;
  width: 25vw;
}

/* CONTAINER 9 */
.container09 {
  margin-top: 6vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.container09 h1 {
  font-size: var(--title-size);
  font-weight: 700;
}

.container09RowImages {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.container09RowImages img {
  width: 32vw;
}

.container09 p {
  font-size: calc(var(--paragraph-size) + 1vw);
  text-align: center;
  width: 100%;
  padding-bottom: 4vw;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  /* CONTAINER 1 */
  .container01 h1 {
    font-size: calc(var(--title-size) + 3vw);
    width: 100vw;
    padding: unset;
  }

  .container01 p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    width: 95vw;
    padding: 2vw 0vw;
  }

  /* CONTAINER 2 */
  .container02 {
    flex-direction: column;
  }

  .container02Content {
    width: 100vw;
  }

  .container02Content h1 {
    font-size: calc(var(--title-size) + 3vw);
    width: 90vw;
    text-align: center;
  }

  .container02Content p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    width: 95vw;
    text-align: center;
    padding: 2vw 0vw;
  }

  .container02Content img {
    width: 65vw;
    margin-top: 2vw;
    margin-left: unset;
  }

  .container02Product img {
    width: 100vw;
  }

  /* CONTAINER 3 */
  .container03 {
    display: flex;
    align-items: center;
    padding: 2vw 0vw;
    flex-direction: column;
  }

  .container03 img {
    width: 90vw;
    padding: 2.5vw 5vw;
  }

  /* CONTAINER 4 */
  .container04 {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 40vw;
    justify-content: center;
    align-items: center;
  }

  .container04Content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -40vw;
    margin-left: unset;
    margin-bottom: 5vw;
  }

  .container04Content h1 {
    font-size: calc(var(--title-size) + 3vw);
    color: var(--dark-text);
    text-align: center;
    padding: unset;
    width: 85vw;
  }

  .container04Content p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    color: var(--dark-text);
    text-align: center;
    padding: 2vw 0vw;
    width: 95vw;
  }

  /* CONTAINER 5 */
  .container05Content {
    flex-direction: column;
    align-items: center;
    padding: 4vw 0vw;
  }

  .container05 h1 {
    font-size: calc(var(--title-size) + 3vw);
    font-weight: 700;
    text-align: center;
    width: 68vw;
  }

  .container05 p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    font-weight: 400;
    width: 100vw;
    text-align: center;
    padding: 2vw 0vw;
  }

  /* CONTAINER 6 */
  .container06Content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -21vw;
    flex-direction: column;
  }

  .container06Content h1 {
    font-size: calc(var(--title-size) + 3vw);
    font-weight: 700;
    width: 68vw;
    text-align: center;
    padding: unset;
  }

  .container06Content p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    font-weight: 400;
    width: 95vw;
    text-align: center;
    padding: 2vw 0vw;
  }

  /* CONTAINER 07 */
  .container07 {
    flex-direction: column;
    justify-content: center;
  }

  .container07Content {
    width: 100vw;
  }

  .container07Content h1 {
    font-size: calc(var(--title-size) + 3vw);
    font-weight: 700;
    width: 95vw;
    text-align: center;
  }

  .container07Content p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    font-weight: 400;
    width: 95vw;
    text-align: center;
  }

  .container07Content img {
    width: 65vw;
    margin-top: 2vw;
    margin-left: unset;
  }

  .container07Product img {
    width: 100vw;
  }

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

  .container08 h1 {
    font-size: calc(var(--title-size) + 3vw);
  }

  .container08ProductItem img {
    width: 95vw;
  }

  .container08ProductItem p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
    text-align: center;
    width: 90vw;
  }

  /* CONTAINER 9 */
  .container09 h1 {
    font-size: calc(var(--title-size) + 3vw);
  }

  .container09RowImages {
    flex-direction: column;
  }

  .container09RowImages img {
    width: 70vw;
  }

  .container09 p {
    font-size: calc(var(--paragraph-size) + 1.5vw);
  }
}

@media (max-width: 425px) {
  /* CONTAINER 1 */
  .container01 h1 {
    font-size: calc(var(--title-size) + 5vw);
    width: 88vw;
  }

  .container01 p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
    width: 95vw;
  }

  /* CONTAINER 2 */
  .container02Content h1 {
    font-size: calc(var(--title-size) + 5vw);
    width: 88vw;
  }

  .container02Content p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
    width: 95vw;
  }

  .container02Content img {
    width: 95vw;
  }

  /* CONTAINER 4 */
  .container04Content h1 {
    font-size: calc(var(--title-size) + 5vw);
    width: 80vw;
  }

  .container04Content p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
    width: 92vw;
  }

  /* CONTAINER 5 */
  .container05 h1 {
    font-size: calc(var(--title-size) + 5vw);
    width: 100vw;
  }

  .container05 p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
    width: 92vw;
  }

  /* CONTAINER 6 */
  .container06Content h1 {
    font-size: calc(var(--title-size) + 5vw);
    width: 92vw;
  }

  .container06Content p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
    width: 92vw;
  }

  /* CONTAINER 7 */
  .container07Content h1 {
    font-size: calc(var(--title-size) + 5vw);
    width: 88vw;
  }

  .container07Content p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
    width: 92vw;
  }

  .container07Content img {
    width: 95vw;
  }

  /* CONTAINER 8 */
  .container08 h1 {
    font-size: calc(var(--title-size) + 5vw);
  }

  .container08ProductItem p {
    font-size: calc(var(--paragraph-size) + 3.5vw);
  }

  /* CONTAINER 9 */
  .container09 h1 {
    font-size: calc(var(--title-size) + 5vw);
  }

  .container09 p {
    font-size: calc(var(--title-size) + 1.5vw);
    text-align: center;
    width: 88vw;
  }
}