.marquee-wrapper {
  /* width: 90%;
  max-width: 1536px; */
  margin-inline: auto;
  position: relative;
  height: 6rem;
  margin-top: 5rem;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes marquee {
  form {
    left: 100%;
  }

  to {
    left: -10rem;
  }
}

.items {
  width: 8.5rem;
  height: 4rem;
  /* background-color: crimson; */
  border-radius: 0.4rem;
  position: absolute;
  left: max(calc(8.5rem * 8), 100%);
  animation-name: marquee;
  animation-duration: 24s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.item1 {
  animation-delay: calc(24s / 8 * (8 - 1) * -1);
}
.item2 {
  animation-delay: calc(24s / 8 * (8 - 2) * -1);
}
.item3 {
  animation-delay: calc(24s / 8 * (8 - 3) * -1);
}
.item4 {
  animation-delay: calc(24s / 8 * (8 - 4) * -1);
}
.item5 {
  animation-delay: calc(24s / 8 * (8 - 5) * -1);
}
.item6 {
  animation-delay: calc(24s / 8 * (8 - 6) * -1);
}
.item7 {
  animation-delay: calc(24s / 8 * (8 - 7) * -1);
}
.item8 {
  animation-delay: calc(24s / 8 * (8 - 8) * -1);
}
/* ============================ */
/* ============================================== */
/* ==================================== */




/* custom card hover effect  */
.hover-shadow {
  transition: transform 0.2s, box-shadow 0.2s;
}

.hover-shadow:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Custom CSS for the slider */
.testimonial-slider .slick-slide {
  padding: 0 10px !important; /* Add spacing between slides */
}

/* Change dot color to dark gray */
.testimonial-slider .slick-dots {
  bottom: -30px !important; /* Adjust dot position */
}

.testimonial-slider .slick-dots li button:before {
  color: #333 !important; /* Dark gray color for dots */
}

.testimonial-slider .slick-dots li.slick-active button:before {
  color: #333 !important; /* Dark gray color for active dot */
}

/* Change arrow color to dark gray */
.testimonial-slider .slick-prev,
.testimonial-slider .slick-next {
  z-index: 1 !important; /* Ensure arrows are above slides */
}

.testimonial-slider .slick-prev:before,
.testimonial-slider .slick-next:before {
  color: #333 !important; /* Dark gray color for arrows */
}

/* Adjust arrow position */
.testimonial-slider .slick-prev {
  left: -20px !important; /* Move left arrow further left */
}

.testimonial-slider .slick-next {
  right: -20px !important; /* Move right arrow further right */
}



/* equal size images */
.card-img,
.card-img-top {
  object-fit: cover;
  aspect-ratio: 1/0.7;
}

/* product cards  */

.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Ensure the image stays within the card */
}

.product-card:hover {
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

.card-img-container {
  overflow: hidden; /* Ensure the image stays within the container */
}

.product-card img {
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.1); /* Slight zoom on image */
}


/* background images */
.background-img1 {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure content is above the pseudo-element */
  color: white; /* Text color for better contrast */
}

.background-img1::before {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background-images/boxed-water-is-better-7H1hDt694s8-unsplash.webp'); /* Replace with your image URL */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  opacity: 0.2; /* Adjust the opacity of the image */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.background-img1::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 60% opacity */
  z-index: -1; /* Place the pseudo-element behind the content */
}





.background-img2 {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure content is above the pseudo-element */
  color: white; /* Text color for better contrast */
}

.background-img2::before {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background-images/clark-street-mercantile-P3pI6xzovu0-unsplash.webp'); /* Replace with your image URL */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  opacity: 0.5; /* Adjust the opacity of the image */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.background-img2::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 60% opacity */
  z-index: -1; /* Place the pseudo-element behind the content */
}



.background-img3 {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure content is above the pseudo-element */
  color: white; /* Text color for better contrast */
}

.background-img3::before {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background-images/freestocks-_3Q3tsJ01nc-unsplash.webp'); /* Replace with your image URL */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  opacity: 0.5; /* Adjust the opacity of the image */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.background-img3::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 60% opacity */
  z-index: -1; /* Place the pseudo-element behind the content */
}


.background-img4 {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure content is above the pseudo-element */
  color: white; /* Text color for better contrast */
}

.background-img4::before {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background-images/joshua-rawson-harris-YNaSz-E7Qss-unsplash.webp'); /* Replace with your image URL */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  opacity: 0.5; /* Adjust the opacity of the image */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.background-img4::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 60% opacity */
  z-index: -1; /* Place the pseudo-element behind the content */
}


.background-img5 {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure content is above the pseudo-element */
  color: white; /* Text color for better contrast */
}

.background-img5::before {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background-images/tamanna-rumee-eD1RNYzzUxc-unsplash.webp'); /* Replace with your image URL */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  opacity: 0.5; /* Adjust the opacity of the image */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.background-img5::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 60% opacity */
  z-index: -1; /* Place the pseudo-element behind the content */
}


.background-img6 {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure content is above the pseudo-element */
  color: white; /* Text color for better contrast */
}

.background-img6::before {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background-images/william-daigneault-Cd84YdL9px8-unsplash.webp'); /* Replace with your image URL */
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  opacity: 0.5; /* Adjust the opacity of the image */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.background-img6::after {
  content: ""; /* Required for pseudo-element */
  position: absolute; /* Position the pseudo-element */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 60% opacity */
  z-index: -1; /* Place the pseudo-element behind the content */
}



/* withdarw section  */
.deposit-box {
  background: #16213e;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #ff9f1c;
}

.balance {
  background: snow;
  padding: 10px;
  border-radius: 5px;
}

.continue-btn {
  background: #ff9f1c;
  color: #000;
}

.continue-btn:hover {
  background: #e58900;
}