.bg-gradient-project {
  background: radial-gradient(
    ellipse 64.87% 29.46% at 19.69% 79.54%,
    color-mix(in srgb, var(--active-color) 70%, transparent) 0%,
    #f4f2ff 100%
  );
}

.project-image-mobile {
  width: calc(100% - 40px);
}

@media (min-width: 1024px) {
  .project-image-mobile {
    width: 420px;
  }
}

.reno-projects-swiper {
  width: 100%;
  height: 800px; /* Mobile: < 1024px */
  padding: 20px 0;
  margin-left: 0;
  margin-right: auto;
}

@media (min-width: 364px) {
  .reno-projects-swiper {
    height: 600px;
  }
}

@media (min-width: 415px) {
  .reno-projects-swiper {
    height: 600px;
  }
}

@media (min-width: 690px) {
  .reno-projects-swiper {
    height: 600px;
  }
}

@media (min-width: 770px) {
  .reno-projects-swiper {
    height: 525px;
  }
}

@media (min-width: 1024px) {
  .reno-projects-swiper {
    height: 725px;
  }
}

@media (min-width: 1115px) {
  .reno-projects-swiper {
    height: 690px;
  }
}

@media (min-width: 1350px) {
  .reno-projects-swiper {
    height: 400px;
  }
}

.reno-projects-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%; /* Full width for cards */
  border-radius: 18px; /* Add rounded corners like the demo */
  background: white; /* Ensure white background for cards */
  overflow: hidden; /* Prevent content overflow */
  position: relative; /* Required for overlay positioning */
}

/* Base overlay for all slides - initially transparent */
.reno-projects-swiper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 1;
  pointer-events: none;
  border-radius: 18px;
  transition: background 0.3s ease 0.3s;
}

/* Active slide has no overlay - instant transition with no delay */
.reno-projects-swiper .swiper-slide-active::before {
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0s ease 0s !important;
}

/* First card behind active (light overlay) */
.reno-projects-swiper .swiper-slide-next::before {
  background: rgba(0, 0, 0, 0.3);
}

/* Second card behind active (stronger overlay) */
.reno-projects-swiper .swiper-slide-next + .swiper-slide::before {
  background: rgba(0, 0, 0, 0.6);
}