.parallax-container {
  position: relative;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  perspective: 1px; /* Creates the parallax effect */
}

/* Background Image */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("assets/img/banner_bg_landscape.png") no-repeat center center;
  background-size: cover;
  z-index: -2; /* Keeps it behind the foreground */
}

/* Additional background that moves horizontally */
.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* Make it wider to allow horizontal movement */
  height: 100%;
  background: url("assets/img/banner_bg_sky.png") repeat-x; /* Use repeat-x for horizontal tiling */
  background-size: cover;
  animation: horizontal-scroll 120s linear infinite; /* Smooth horizontal animation */
  z-index: -3; /* Place behind the main background */
}

.background-text {
  color: white;
  text-align: center;
  padding: 40px 20px; /* Adjust padding for spacing */
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  max-width: 80%;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center using transform */
}

/* Foreground Image */
.foreground {
  position: absolute;
  top: 20%;
  left: 80%; /* Move the image more to the right by increasing the value */
  transform: translate(-50%, -50%); /* Keeps the element centered around its new position */
}

.foreground img {
  width: 50%; /* Adjust size as needed */
  z-index: -1;
}


/* Keyframes for horizontal scrolling */
@keyframes horizontal-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Adjust for smooth movement */
  }
}