.main-banner-marquee {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative !important;
  z-index: 50 !important;
}

.marquee-container {
  width: 250px; /* Adjust as needed */
  height: 600px; /* Adjust as needed */
  overflow: visible;
  margin-right: 20px;
  margin-left: 10px;
  transform: rotate(20deg);
}

.marquee-content {
  display: flex;
  flex-direction: column;
  animation: marquee 100s linear infinite;
}

.marquee-content img {
  margin-bottom: 20px; /* Adjust as needed */
  border-radius: 20px;
  width: 100%;
  position: relative !important;
  z-index: 50 !important;
  height: 80%;
  
}

@keyframes marquee {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.marquee-container2 {
  width: 250px; /* Adjust as needed */
  height: 600px; /* Adjust as needed */
  overflow: visible;
  margin-right: 20px;
  transform: rotate(20deg);
}

.marquee-content2 {
  display: flex;
  flex-direction: column-reverse;
  animation: marquee2 100s linear infinite;
}

.marquee-content2 img {
  margin-bottom: 20px; /* Adjust as needed */
  border-radius: 20px;
  width: 100%;
  height: 80%;
  position: relative !important;
  z-index: 50 !important;
}

@keyframes marquee2 {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.marquee-container3 {
  width: 200px; /* Adjust as needed */
  height: 700px; /* Adjust as needed */
  /* overflow: hidden; */
  margin-right: 20px;
  transform: rotate(-45deg);
}

.marquee-content3 {
  display: flex;
  flex-direction: column-reverse;
  animation: marquee3 150s linear infinite;
}

.marquee-content3 img {
  margin-bottom: 20px; /* Adjust as needed */
  border-radius: 20px;
  width: 200px;
  height: 300px;
}

@keyframes marquee3 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

/* Add this to your existing CSS */

/* Smooth rotation transition */
.marquee-container,
.marquee-container2 {
  transform: rotate(20deg);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.marquee-container3 {
  transform: rotate(-45deg);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}