/* GLOBAL */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

:root {
  --blue1: #0050dc;

  --dark-text: #2f2f2f;
}

img {
  width: 100%;
}

/* CONTAINER 1 */
.container__01 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--blue1);
}

.container__01-left {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 58rem;
  padding-left: 2%;
  color: white;
}

.container__01-left img {
  width: 80%;
}

.container__01-left h1 {
  font-size: 45px;
  font-weight: 300;
}

.container__01-left h6 {
  font-size: 24px;
  font-weight: 300;
}

.container__01-right {
  width: 70%;
}

/* CONTAINER 2 */
.container__02 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container__02-text {
  position: absolute;
  z-index: 1;
  padding: 5%;
  color: var(--dark-text);
}

.container__02-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__02-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__02-bg {
  position: relative;
}

/* CONTAINER 3 */
.container__03 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.container__03-text {
  position: absolute;
  z-index: 1;
  padding-top: 1%;
  text-align: center;
  color: var(--dark-text);
}

.container__03-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__03-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__03-bg {
  position: relative;
}

/* CONTAINER 4 */
.container__04 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container__04-text {
  position: absolute;
  z-index: 1;
  padding: 3%;
  color: white;
}

.container__04-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__04-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__04-bg {
  position: relative;
}

/* CONTAINER 5 */
.container__05 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container__05-text {
  position: absolute;
  z-index: 1;
  padding: 3%;
  color: var(--dark-text);
}

.container__05-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__05-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__05-text h5 {
  position: absolute;
  bottom: -68%;
  padding: 5%;
  font-size: 16px;
}


.container__05-bg {
  position: relative;
}

/* CONTAINER 6 */
.container__06 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container__06-text {
  position: absolute;
  z-index: 1;
  padding: 3%;
  color: var(--dark-text);
}

.container__06-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__06-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__06-bg {
  position: relative;
}

/* CONTAINER 7 */
.container__07 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.container__07-text {
  position: absolute;
  z-index: 1;
  padding: 3%;
  color: white;
}

.container__07-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__07-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__07-bg {
  position: relative;
}

/* CONTAINER 8 */
.container__08 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container__08-text {
  position: absolute;
  z-index: 1;
  padding: 3%;
  color: var(--dark-text);
}

.container__08-text h2 {
  font-size: 45px;
  font-weight: 700;
}

.container__08-text p {
  font-weight: 400;
  font-size: 21px;
}

.container__08-bg {
  position: relative;
}

.box1 {
  margin-top: -35%;
  margin-right: 10%;
  color: white;
  text-align: center;
}

.box2 {
  margin-top: 14%;
}

.box2 h2 {
  font-weight: 400;
}

/* RESPONSIVE */
@media (min-width: 1925px) {
  .wrapper {
    margin-inline: 15%;
  }
}

@media (max-width: 1400px) {
  h2 {
    font-size: 32px !important;
  }

  p {
    font-size: 18px !important;
  }

  .container__02-text {
    padding: 10px;
  }

  .container__05-text {
    padding: 5px;
  }

  .container__06-text {
    padding: 10px;
  }
}

@media (max-width: 1024px) {
  .container__01-left {
    height: 35rem;
  }

  .container__01-left h1 {
    font-size: 34px;
  }

  .container__01-left h6 {
    font-size: 18px;
  }

  .container__02 {
    flex-direction: column;
  }

  .container__02-text {
    position: static;
    text-align: center;
  }

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

  .container__03-text {
    position: static;
    text-align: center;
    padding: 5%;
  }

  .container__04 {
    flex-direction: column;
  }

  .container__04-text {
    position: static;
    text-align: center;
    color: var(--dark-text);
  }

  .container__05 {
    flex-direction: column;
  }

  .container__05-text {
    position: static;
    text-align: center;
  }

  .container__05-text h5 {
    position: static;
  }

  .container__06 {
    flex-direction: column;
  }

  .container__06-text {
    position: static;
    text-align: center;
  }

  .container__07 {
    flex-direction: column;
  }

  .container__07-text {
    position: static;
    text-align: center;
  }

  .container__07-text {
    color: var(--dark-text);
  }

  .container__08 {
    flex-direction: column;
  }

  .container__08-text {
    position: static;
    text-align: center;
  }

  .box1 {
    margin: unset;
    color: var(--dark-text);
  }

  .box2 {
    margin: unset;
  }
}

@media (max-width: 650px) {
  .container__01 {
    flex-direction: column;
  }

  .container__01-left {
    width: 60%;
  }

  .container__01-left {
    padding-inline: 5%;
  }

  .container__01-left {
    height: 65vh;
  }

  h2 {
    font-size: 32px !important;
  }
  p {
    font-size: 16px !important;
  }
}

@media (max-width: 350px) {
  .container__01-left {
    height: 100vh;
  }
}