@import url(style.css);

/* Hero background overlay */
.hero {
  background-image: url("https://images.unsplash.com/photo-1498084393753-b411b2d26b34?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.33);
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Fade-in animation*/
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-in-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}