/*Banner CSS*/

/* Wrapper for the entire banner content */
.m-banner__content {
  position: relative;
  height: 50vh; /* 50% height */
  overflow: hidden; /* Hide overflow for the scrolling effect */
}

/* Background wrapper for the images */
.hero-bg_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform: rotate(15deg); /* Rotate container by 45 degrees */
  transform-origin: center center; /* Keep the rotation centered */
  overflow: hidden; /* Ensure content doesn't overflow */
}

/* Each column that holds images */
.hero-bg_wrap-cols {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 150%;
}

/* Column style - each containing a set of slides */
.hero-bg_wrap-col {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: scrollImages 10s linear infinite; /* Infinite scroll animation */
  overflow: hidden;
  width: 30vw; /* Adjust the width of the column */
}

/* Slide container for the images */
.hero-bg_wrap-slides {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  animation: slideMovement 10s linear infinite; /* Animation for vertical scrolling */
}

/* Individual image slide */
.hero-bg_wrap_slide {
  display: block;
  margin-bottom: 10px; /* Space between images */
}

/* Image styling */
.hero-bg_wrap_slide img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the image maintains its aspect ratio */
}

/* Animation for the image scroll effect */
@keyframes slideMovement {
  0% {
    transform: translateY(0); /* Start from the top */
  }
  100% {
    transform: translateY(-100%); /* Scroll upwards */
  }
}

/* Background gradient overlay */
.hero-bg-gradient_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Dark overlay for better visibility of images */
  pointer-events: none;
}

.banner-container {
position: relative; z-index: 1000; background-color: rgba(0, 0, 0, 0.6)
}