.intro-container {
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 2s ease-out forwards;
}

.intro-title {
  font-size: 5rem;
  margin: 0;
  animation: fadeIn 2s ease-out 0.5s forwards;
  color:gray;
}

.intro-subtitle {
  font-size: 3rem;
  margin-top: 1rem;
  animation: fadeIn 2s ease-out 1.5s forwards;
  color: gray;
}

.background-video{
  width: 100vw;
  height: 100vh;
  margin: 10px 0px 0px;
}

.bounce-in-top {
	animation: bounce-in-top 1.1s both;
}

 @keyframes bounce-in-top {
  0% {
    transform: translateY(-500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(-65px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(-28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}


/* Animations */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}