.hero {
  position: relative;
  overflow: hidden;
}
.hero .container {
  position: absolute;
  top: 50%;
  left: 9%;
  color: white;
  width: 50%;
  z-index: 3;
}
@media (max-width: 768px) {
  .hero .container {
    top: 35%;
    left: 0;
    padding-inline: 5%;
  }
}
.hero .container .title {
  color: #1BA5DF;
}
.hero .container .subtitle {
  width: 50%;
  text-align: end;
  letter-spacing: 5px;
}
@media (max-width: 1440px) {
  .hero .container .subtitle {
    text-align: start;
  }
}
@media (max-width: 500px) {
  .hero .container .subtitle {
    text-align: start;
    width: 70%;
  }
}
@media (max-width: 768px) {
  .hero .container {
    width: 100%;
  }
}