@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
body {
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* container takes full screen */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  animation: fadeIn 1.5s ease-out forwards;
}
/* hide mobile image by default */
.hero-img.mobile { display: none; }

/* show mobile image on <=1024px */
@media (max-width: 1024px) {
  .hero-img.desktop { display: none; }
  .hero-img.mobile { display: block; }
}

/* text overlay */
.hero-text {
  position: absolute;
  top: 60%;
  left: 35%;
  transform: translate(-50%, -50%);
 
  color: #fff;
  padding: 20px;
   


}

/* responsive text sizing */
.hero-text h1 {
  margin: 0 0 10px;
  font-size: 3rem;
  font-weight: 500;
}

.hero-text p {
  margin: 0;
  font-size: 1.8rem;
}

@media (max-width: 768px)  {
  .hero-text h1 { font-size: 1.8rem; }
  .hero-text p { font-size: 0.8rem; }
  .hero-text{
      top: 85%;
  left: 36%;
  }
}

@media (min-width: 768px) and (max-width:1024px){
    .hero-text{
      top: 75%;
  left: 35%;
  }
}