#content {
  width: 90%;
  margin: auto;
}

#content>section {
  margin-bottom: 6rem;
  scroll-margin-top: 130px;
}

#vision-section i {
  width: 60%;
  display: block;
  font-size: 1.3rem;
  text-align: center;
  margin: auto;
}

@media (max-width: 800px) {
  #vision-section i {
    width: 100%;
  }
}

.section-title {
  margin-bottom: 4rem;
}

/* SECTION HERO */
#hero-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6rem;
}

#hero-info {
  width: 45%;
  font-size: 1.2rem;
  align-content: center;
  padding-left: 4rem;
}

#hero-render {
  width: 55%;
  height: 40vw;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#hero-render>canvas {
  width: 100%;
}

#hero-info>img {
  margin-bottom: 2.5rem;
  width: 350px;
  max-width: 100%;
}

#hero-info>h3 {
  margin-bottom: 1.5rem;
}

#hero-info>p {
  margin-bottom: 4rem;
}

#hero-cta>a {
  margin-right: 2rem;
  line-height: 4rem;
}


@media (max-width: 900px) {
  #hero-section {
    flex-direction: column;
    row-gap: 5rem;
    margin-top: 8rem;
  }

  #hero-info {
    width: 100%;
    padding-left: 0rem;
  }

  #hero-render {
    width: 100%;
    height: 95vw;
  }

  #content {
    width: 100%;
  }
}

/* !SECTION - HERO */