:root { --gap: 40px; }

.slider-section { position: relative; padding-top:20px;}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  column-gap: var(--gap);
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { height: 0; }
.slider-track { scrollbar-width: none; }

.slider-item { scroll-snap-align: start; flex: 0 0 calc((100% - 2*var(--gap)) / 3); }
@media (max-width: 991.98px) { .slider-item { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 575.98px) { .slider-item { flex-basis: 100%; } }

/* card + image + overlay title */
.slider-card {
  position: relative;
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  background: #fff;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.slider-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Overlay title */
.overlay-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(25, 135, 84, 0.8); /* Bootstrap “success” green with opacity */
  color: #fff;
  padding: .35rem .75rem;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  text-align: center;
}

.slider-card .card-body {
  font-size: .95rem;
  padding: .75rem;
  flex-grow: 1;
}

/* buttons */
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 42px; height: 42px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #198754; color: #fff; border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.slider-btn:hover { background: #157347; }
.slider-btn:disabled { opacity: .4; cursor: not-allowed; }
.slider-btn.prev { left: -10px; }
.slider-btn.next { right: -10px; }
@media (max-width: 575.98px) {
  .slider-btn.prev { left: 4px; }
  .slider-btn.next { right: 4px; }
}