*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.hero{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  background: linear-gradient(135deg, #0088ca 0%,#030069 50%,#1f001f 78%);
  padding: 30px 0;
}
.hero__left{
  width: 50%;
  text-align: center;
  padding-left: 10%;
}
.hero__right{
  width: 50%;
  text-align: center;
}
.hero__right .tree-container{
  width: 100%;
}
.hero__left h2{
  color:  #0ff;
  font-size: 24px;
  font-weight: 300;
  text-align: center;
}
.hero__left h3{
  color: #f7b93f;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}
.hero__left p{
  color: #0ff;
  text-align: center;
}