.hover-underline {
/*  font-size: 2rem;*/
  color: #fb8500;
  position: relative;
  display: inline-block;
}

.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #ffffff, #ffb703);/*#8ecae6);*/
  bottom: 12px;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-out;
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}

.top-banner {
  position: relative;
  width: 100%;
  height: calc(100vh - 5rem);
  background-image: url(../src_images/earth-1756274_1920.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.line-1 {
  position: absolute;
  top: 3rem;
  left: 2.4rem;
}

.line-2 {
  position: absolute;
  bottom: 3rem;
  right: 2.4rem;
}

@media(max-width: 750px){
  .line-1 {
    max-width: 300px;
    margin-inline: auto;
  }
  .line-2 {
    text-align: right;
    max-width: 300px;
    margin-inline: auto;
  }
}

.key-visual {
  position: relative;
  width: 100%;
  background-color: #DCEAF7;
  color: #0F374D;
}

.key-image {
  display: block;
  inline-size: clamp(300px, 60%, 900px);
  max-inline-size: 100%;
  padding-block: 3vh;
  margin-inline: auto;
}

.key-text-top {
  padding-inline-start: 2vw;
  padding-block-start: 3vh;
}

.key-text-top-small {
  padding-inline-start: 2vw;
}

.key-text-bottom {
  padding-inline-end: 2vw;
  padding-block-start: 3vh;
  text-align: right;
}

.key-text-bottom-small {
  padding-inline-end: 2vh;
  text-align: right;
  padding-block-end: 4vh;
}