


.first-bg-img-container {
    background-color: white;
    background-image: url("/assets/index_assets/first_bg.jpg");
    aspect-ratio: 1920/1215;
    background-size: cover;
    background-repeat: no-repeat;
    width: auto;
    height: auto;
    margin-left: -2vw;
    margin-right: -2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.first-main-text {
  text-align: center;
  font-size: 7vw;
  letter-spacing: 2.3vw;
  line-height: 6.7vw;
  margin-bottom: 1vw;
  margin-top: 15vw;
}

.first-secondary-text {
  text-align: center;
  font-size: 4vw;
  letter-spacing: 1.5vw;
  line-height: 6.7vw;
}

.second-column-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-bottom: 10vw;
}

.second-texts {
  text-align: center;
  font-size: 7vw;
  letter-spacing: 1vw;
  padding-top: 1vw;
}

.second-img-first {
  background-color: white;
  background-image: url("/assets/index_assets/arrows.png");
  aspect-ratio: 158/159;
  background-size: cover;
  background-repeat: no-repeat;
  width: 43vw;
  height: auto;
  margin-top: 15vw;
  margin-bottom: 1vw;
}

.second-img-second {
  background-color: white;
  background-image: url("/assets/index_assets/graph.png");
  aspect-ratio: 158/159;
  background-size: cover;
  background-repeat: no-repeat;
  width: 43vw;
  height: auto;
  margin-top: 10vw;
  margin-bottom: 1vw;
}

.second-img-third {
  background-color: white;
  background-image: url("/assets/index_assets/shield.png");
  aspect-ratio: 158/159;
  background-size: cover;
  background-repeat: no-repeat;
  width: 43vw;
  height: auto;
  margin-top: 10vw;
  margin-bottom: 1vw;
}

.third-bg-img-container {
  background-color: white;
  background-image: url("/assets/index_assets/third_bg.png");
  aspect-ratio: 360/290;
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  height: auto;
  margin-left: -2vw;
  margin-right: -2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 4vw;
}

.third-title {
  text-align: center;
  font-size: 4.5vw;
  letter-spacing: 0.3vw;
  color: white;
  margin-top: 12vw;
}

.desktop-third-title {
  text-align: center;
  font-size: 4.5vw;
  letter-spacing: 0.3vw;
  color: white;
  margin-top: 12vw;
  display: none;
}

.third-line {
  border-top: 0.5vw solid white;
  width: 30vw;
  margin-top: 4vw;
}

.third-main-text {
  text-align: center;
  font-size: 2.8vw;
  line-height: 3.5vw;
  letter-spacing: 0vw;
  color: white;
  margin-top: 4vw;
}

.third-button {
  text-align: center;
  font-size: 4.5vw;
  line-height: 4.5vw;
  letter-spacing: 1vw;
  color: white;
  border: 0.6vw solid white;
  padding: 0.8vw 3vw 0.5vw 3vw;
  border-radius: 4vw;
  text-decoration: none;
  margin-top: 8vw;
}

.third-button:hover {
  color: #19994E;
  border: 0.6vw solid #19994E;
}

.fourth-bg-img-container {
  background-color: white;
  background-image: url("/assets/index_assets/fourth_bg.png");
  aspect-ratio: 360/289;
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  height: auto;
  margin-left: -2vw;
  margin-right: -2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 6vw;
}

.fifth-bg-img-container {
  background-color: white;
  background-image: url("/assets/index_assets/fifth_bg.png");
  aspect-ratio: 360/289;
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  height: auto;
  margin-left: -2vw;
  margin-right: -2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 6vw;
}


.desktop-second-column-flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 4vw;
}

.desktop-second-column-containers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 3vw;
  margin-right: 3vw;
}

.desktop-second-column-containers > div {
  width: 13vw;
  margin-top: 0vw;
  margin-bottom: 0vw; 
}

.desktop-second-column-containers > div.second-texts {
  width: auto;
  font-size: 2.5vw;
  letter-spacing: 0.2vw;
  margin-top: 0vw;
  margin-bottom: 0vw;
}

@media (min-width: 900px) {
  .first-main-text {
    font-size: 4vw;
    letter-spacing: 2vw;
    line-height: 5vw;
  }

  .first-secondary-text {
    font-size: 3vw;
    letter-spacing: 1vw;
    line-height: 4vw;
  }

  .second-column-flex-container  {
    display: none;
  }

  .third-bg-img-container > div {
    transform: scale(0.5);
  }

  .third-main-text {
    transform: scale(0.6);
    margin-top: -4vw;
    margin-bottom: -5vw;
  }

  .desktop-third-title {
    display: block;
    margin-top: 2vw;
    margin-bottom: -3.5vw;
  }

  .third-title {
    display: none;
  }

  .third-bg-img-container > a {
    transform: scale(0.35);
    margin-top: 0vw;
    margin-bottom: 0vw;
  }

  .third-bg-img-container {
    height: 32vw;
  }

  .fourth-bg-img-container > div {
    transform: scale(0.5);
  }

  .fourth-bg-img-container > a {
    transform: scale(0.35);
    margin-top: 0vw;
    margin-bottom: 0vw;
  }

  .fourth-bg-img-container {
    height: 32vw;
    margin-top: 1vw;
  }

  .fifth-bg-img-container > div {
    transform: scale(0.5);
  }

  .fifth-bg-img-container > a {
    transform: scale(0.35);
    margin-top: 0vw;
    margin-bottom: 0vw;
  }

  .fifth-bg-img-container {
    height: 32vw;
    margin-top: 1vw;
    margin-bottom: -3vw;
    z-index: 1;
  }
  
}

@media (max-width: 900px) {
  .desktop-second-column-flex-container {
    display: none;
  }
}

