.home {
  position: relative;
  height: 50vh;
  /*min-height: 400px;*/
  /*background-image: url(../../public/images/concert.jpg);*/

  background-color: #1e1e2f;
background-color: black;

  /*
  justify-content: center;
  text-align: center;
  color: white;
  animation: fadeInBG 2s ease-in forwards;
  opacity: 0;*/
}

.home-container {
  width: 100%;
  
  height: 100%;

    background-size: 100%;
  background-size: cover;
  background-position: 50% 65%;

  transition: opacity 2s ease-in-out;
  opacity: 1;
}

@media (max-width: 768px) {
  .home {
    height: 25vh;
    /*background-size:contain;
    background-repeat: no-repeat;*/
  }
}

#bg {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

/*
.home {
  position: relative;
  height: calc(60vh - 100px);
  min-height: 400px;
  background-image: url(../../public/images/welcome.jpg);
  background-size: 100%;
  background-size: cover;
  background-position: 50% 60%;
  display: flex;

  justify-content: center;
  text-align: center;
  color: white;
  animation: fadeInBG 2s ease-in forwards;
  opacity: 0;
  margin-top : 100px;
}

.home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.home-container {
  position: relative;
  z-index: 2;
  padding: 2rem;
} 

.test-logo {
  width: 100%;
  max-width: 400px;
  background: white;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.home-container h1 {
  font-size: 5vw;
  color : white;
  opacity: 0;
  animation: fadeInOnly 5s ease forwards;
  animation-delay: 2s;
  margin : 0;
}

.home-container p {
  font-size: 60px;;
  font-weight: 700;
  line-height: 1em;
  color : white;
  opacity: 0;
  animation: fadeInOnly 5s ease forwards;
  animation-delay: 2s;
  margin : 0;
}

.home-container button {
  border : none;
  background: none;
  border : solid 1px rgba(255,255,255,0.9);
  background-color: rgba(255,255,255,0.9);;
  color : black;
  border-radius: 50px;
  padding: 10px 40px;
  font-weight: 600;
  font-size: 1.5vw;
  margin-top : 70px;
  cursor : pointer;
  opacity: 0;
  animation: fadeInOnly 4s ease forwards;
  animation-delay: 4s;
}

.home-container button:hover {
  background-color: transparent;
  color : white;
}

@keyframes fadeInBG {
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInOnly  {
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .home {
    margin-top: 60px;
  }

  .home-container h1 {
    font-size: 6.5vw;
  }
  .home-container p {
    font-size: 4vw;
  }

  .home-container button {
    font-size: 3vw;
  }
}*/