* {
  /* border: red 1px solid; */
}
/* Choosing colors and stuff */
/* main background = cyan-950 */
/* secondary color text = amber-400 */
.first-hero {
  background-image: url("./assets/test.jpg");
  background-size: cover;
  position: relative;
}
.first-hero::after {
  position: absolute;
  content: "";
  background-color: rgba(0, 0, 0, 0.392);
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.image-dark {
  position: relative;
}
.image-dark::after {
  position: absolute;
  content: " ";
  background-color: rgba(0, 0, 0, 0.18);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.text-above-title {
  position: relative;
  margin-left: 120px;
}
.text-above-title::before {
  position: absolute;
  content: " ";
  width: 100px;
  height: 1px;
  background-color: #fbbf24;
  left: -120px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media (max-width: 767px) {
  .first-hero {
    position: relative;
  }
  .text-above-title {
    margin-left: 60px;
  }
  .text-above-title::before {
    left: -60px;
    width: 40px;
  }
  .scroll-down {
    position: absolute;
    bottom: 10rem;
    right: 1rem;
  }
}