.hero {
  width: 100%;
  height: calc(90vh - 80px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.hero .background-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("/prism/assets/images/about/profilee.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the video covers the entire area */
  position: absolute;
  z-index: -1;
}
.hero .container0 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 50px;
  height: 40%;
  width: 100%;
  padding-bottom: 15px;
  background-image: url("/prism/assets/images/home/black_gradient.png");
  background-position: top;
  background-size: cover;
  background-repeat: repeat-x;
  margin: 0;
  color: white;
}
.hero .container0 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scroll-arrow {
  position: relative;
  bottom: 20px; /* Adjust as per your need */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  cursor: pointer;
}

.arrow {
  display: inline-block;
  font-size: 2rem; /* Adjust size as needed */
  color: #f4a100; /* Adjust to match your website's color scheme */
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

/*# sourceMappingURL=hero.css.map */

/* Extra small devices (portrait phones, 320px and up) */
@media (min-width: 320px) {
  /* Your styles here */
}

/* Small devices (landscape phones, 480px and up) */
@media (min-width: 480px) {
  /* Your styles here */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Your styles here */
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  /* Your styles here */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Your styles here */
}

/* Ultra-large devices (4K monitors, 1600px and up) */
@media (min-width: 1600px) {
  /* Your styles here */
}