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

html,
body {
  font-family: "Open Sans";
  font-size: 62.5%;
}

img {
  width: 100%;
  display: block;
}

:root {
    --clear-text: #FFFFFF;
    --dark-bg: #509124;
    --mid-bg: #72A81E;
    --light-bg: #81AE1D;
    --mobile-bg: #8CBA1A;
}

/* container 1 */

.container01 {
  position: relative;
  width: 100%;
}

.container01Content .logo {
  width: 20vw;
  margin-left: 12rem;

}

.container01Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.baloonTag {
  background: linear-gradient(to left, rgba(140, 186, 26, 0) 18.23%, rgba(140, 186, 26, 0.575758) 45.43%, #8CBA1A 91.67%);
  padding: 4rem 44rem 4rem 13rem;
}

.baloonTag h1 {
  font-weight: 700;
  font-size: 6.4rem;
  color: var(--clear-text);
}

.modelBtn {
  background: var(--mid-bg);
  width: 22rem;
  border-radius: 5rem;
  padding: 1rem 1.5rem;
  margin-block: 5%;
}

.modelBtn p {
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--clear-text);
  text-align: center;
}

/* container 2 */

.container02 {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-bottom: 2%;
}

.container02 img {
  width: 20%;
}

/* container 3 */

.container03 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(360deg, #428726 6.12%, #8CBA1A 37.94%);
}

.container03Content {
  width: 50%;
  margin-left: 8%;
}

.container03 h1 {
  font-weight: 700;
  font-size: 6rem;
  color: var(--clear-text);
}

.container03 h2 {
  font-weight: 400;
  font-size: 4.8rem;
  color: var(--clear-text);
  margin-bottom: 4%;
}

.container03 p {
  font-weight: 300;
  font-size: 2.8rem;
  color: var(--clear-text);
  margin-bottom: 2%;
}

.container03Product {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
}

.warrantyBtn {
  background: var(--light-bg);
  padding: 0.5rem 6rem;
  border-radius: 5rem;
  margin-right: 15%;
  margin-block: 5%;
}

.warrantyBtn p {
  color: var(--clear-text);
  font-size: 3.6rem;
  font-weight: 700;
}

/* container 4 */

.container04 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container04Content {
  width: 50%;
  padding: 2% 6%;
}

.container04Content h1 {
  color: var(--dark-bg);
  font-size: 6rem;
  font-weight: 700;
}

.container04Content p {
  font-size: 2.8rem;
  font-weight: 400;
}

/* container 5 */

.container05 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(0deg, #428726 6.12%, #8CBA1A 37.94%);
}

.container05Content {
  width: 50%;
  padding: 2% 6%;
}

.container05Content h1 {
  color: var(--dark-bg);
  font-size: 6rem;
  font-weight: 700;
  color: var(--clear-text);
}

.container05Content p {
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--clear-text);
}

/* container 6 */

.container06 {
  display: flex;
  align-items: center;
  align-items: flex-end;
  padding-block: 4%;
}

.container06Content {
  display: flex;
  flex-direction: column;
  margin-bottom: 8%;
  margin-left: 6%;
}

.container06Content h1 {
  font-size: 6rem;
  font-weight: 700;
  color: var(--mid-bg);
  border-bottom: var(--mid-bg) 1rem solid;
  margin-bottom: 4%;
}

.container06Content p {
  font-size: 2.8rem;
}

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

.container06Product p {
  font-size: 2.8rem;
}

/* container 7 */

.container07 {
  position: relative;
  width: 100%;
}

.container07Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.baloonTag {
  background: linear-gradient(to left, rgba(140, 186, 26, 0) 18.23%, rgba(140, 186, 26, 0.575758) 45.43%, #8CBA1A 91.67%);
  padding: 4rem 44rem 4rem 13rem;
}

.baloonTag h1 {
  font-weight: 700;
  font-size: 6.4rem;
  color: var(--clear-text);
}

.baloonTag p {
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--clear-text);
}

/* RESPONSIVE */

@media (max-width: 1520px) {
  .container01 .baloonTag {
    padding: 1rem 20rem 1rem 13rem;
  }

  .baloonTag h1 {
    font-size: 5.4rem;
  }

  .modelBtn p {
    font-size: 2.4rem;
  }

  .container03Product {
    width: 48%;
  }

  .container03 h1,
  .container03 h2 {
    font-size: 5rem;
  }

  .container03 p {
    font-size: 2.4rem;
  }

  .container04Content h1 {
    font-size: 5rem;
  }

  .container04Content p {
    font-size: 2.4rem;
  }

  .container05Content h1 {
    font-size: 5rem;
  }

  .container05Content p {
    font-size: 2.4rem;
  }

  .container06 h1 {
    font-size: 5rem;
  }

  .container06 p {
    font-size: 2.4rem;
  }

  .container07 .baloonTag p {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .container01 .baloonTag h1 {
    font-size: 3.8rem;
  }

  .modelBtn {
    padding: 0.5rem 1rem;
  }

  .modelBtn p {
    font-size: 2rem;
  }

  .container03 {
    padding-block: 2%;
  }

  /* .container03Content {
    margin-inline: unset;
  } */

  .container06Content {
    display: flex;
    flex-direction: column;
    margin: unset;
    padding: 1rem;
  }

  .container07 .baloonTag {
    padding: 1rem 0rem 1rem 3rem;
  }
}

@media (max-width: 840px) {
  .container01Content .logo {
    margin-left: 4%;
  }
  
  .container01 .baloonTag {
    padding-left: 4%;
  }

  .container01 .baloonTag h1 {
    font-size: 3.8rem;
    width: 108%;
  }

  .baloonTag h1 {
    font-size: 2.8rem;
    width: 21rem;
  }

  .modelBtn {
    padding: unset;
    width: 80%;
  }

  .modelBtn p {
    font-size: 1.6rem;
  }

  .container03 {
    flex-direction: column;
  }

  .container03Content {
    margin-left: unset;
    width: 90%;
  }

  .container03Product {
    width: 100%;
  }

  .warrantyBtn {
    margin-right: 2%;
  }

  .container04 {
    flex-direction: column-reverse;
  }
  
  .container04Content {
    width: 90%;
    padding: 2% 0%;
  }
  
  .container05 {
    flex-direction: column;
  }

  .container05Content {
    width: 90%;
    padding: 2% 0%;
  }

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

  .container06Product {
    width: 80%;
    text-align: center;
  }

  .container07Content {
    position: inherit;
  }

  .container07 .baloonTag {
    background: var(--mobile-bg);
  }
}

@media (max-width: 550px) {
  .container01Content {
    position: inherit;
    align-items: center;
  }

  .container01Content h1 {
    width: 21rem;
    margin: auto;
  }

  .container01Content .logo {
    margin: 4rem;
    width: 70%;
  }

  .container01 .baloonTag {
    padding: unset;
    padding-block: 4rem;
    background: var(--mobile-bg);
    width: 100%;
  }

  .container01 .baloonTag h1 {
    width: 100%;
    text-align: center;
  }

  .modelBtn {
    padding: 0.5rem;
    width: 60%;
    margin-inline: auto;
    margin-block: 1rem;
  }

  .container02 img {
    width: 40%;
    padding: 1rem;
  }

  .container03 h1, .container03 h2 {
    font-size: 2.6rem;
  }

  .container03 p {
    font-size: 1.8rem;
  }

  .container03 p {
    font-size: 1.8rem;
  }

  .warrantyBtn {
    padding: 0.5rem 1.5rem;
    margin: auto;
  }

  .container04Content h1 {
    font-size: 2.6rem;
  }

  .container04Content p {
    font-size: 1.8rem;
  }

  .container06 h1 {
    font-size: 2.6rem;
  }

  .container06 p {
    font-size: 1.8rem;
  }

  .container05Content h1 {
    font-size: 2.6rem;
  }

  .container05Content p {
    font-size: 1.8rem;
  }

  .container07 .baloonTag h1 {
    width: 100%;
  }

  .container07 .baloonTag p {
    font-size: 1.8rem;
  }
}