.hero {
  position: relative;
  width: 100%;
  /* height: 500px; */
  z-index: -1;
}

.hero img {
  width: 100%;
  /* height: 500px; */
  /* object-fit: cover; */
}

.box-hero {
  height: 500px;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 100px;
  width: 50%;
}

.box-hero .toppic {
  font-weight: 100;
  font-size: 14pt;
  margin-bottom: 10px;
}

.box-hero .title {
  font-size: 23pt;
  font-weight: 400;
  margin-bottom: 10px;
}

.box-hero .sub-title {
  font-size: 12pt;
  font-weight: 400;
  margin-bottom: 30px;
}

.box-hero a {
  display: flex;
  color: #FFF;
  background-color: #2a2a2a;
  width: 120px;
  height: 36px;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
}

@media screen and (max-width: 500px) {

    .hero {
      /* height: 300px; */
    }

    .hero img {
      /* height: 300px; */
    }

    .box-hero {
        width: 100%;
        padding: 0 60px;
        /* height: 300px; */
    }
}