.slider {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden; /* спрячем вертикальный скролл */
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding-bottom: 10px;
}


.slide {
    opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  flex: 0 0 calc((100% - 40px) / 3); /* 3 слайда на экране, с учётом gap */
  background: #66cc33;
  border: 2px solid #e0cfc2;
  border-radius: 10px;
  padding: 20px;
  scroll-snap-align: start;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-width: 0; /* позволяет адекватно сжиматься */
   height: 280px; /* делаем высоту больше ширины, чтобы вытянуть вверх */
   background-size: cover;         /* масштабування на весь блок */
  background-position: center;    /* центрування картинки */
  background-repeat: no-repeat;   /* не повторювати */
  /* Опционально, чтобы скрыть скроллбар в Firefox (свойство) */
  scrollbar-width: thin;
  scrollbar-color: #c49e00 #f3e5ab; /* цвет ползунка и трека для Firefox */
}
/* Полоса скроллбара */
.slider::-webkit-scrollbar {
  height: 12px; /* высота горизонтального скроллбара */
}

/* Трек (фон полосы) */
.slider::-webkit-scrollbar-track {
  background: #f3e5ab; /* светло-бежевый */
  border-radius: 10px;
}

/* Ползунок */
.slider::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c49e00, #7b5e00);
  border-radius: 10px;
  border: 3px solid #f3e5ab;
  transition: background 0.3s ease;
}

/* Ползунок при наведении */
.slider::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e6c300, #a67c00);
}
.slide.visible {
  opacity: 1;
  transform: translateY(0);
  border-color: yellow; /* для наглядности */
}

.slide:nth-child(1) { transition-delay: 0.1s; }
.slide:nth-child(2) { transition-delay: 0.3s; }
.slide:nth-child(3) { transition-delay: 0.5s; }
.slide:nth-child(4) { transition-delay: 0.1s; }
.slide:nth-child(5) { transition-delay: 0.1s; }
.slide h3 {
  font-size: 28px;
  margin-bottom: 14px;
  color: white;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.9),
    2px 2px 10px rgba(0, 0, 0, 0.9),
    4px 4px 14px rgba(0, 0, 0, 0.8);
}

.slide p {
  font-size: 20px;
  color: white;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    2px 2px 8px rgba(0, 0, 0, 0.9),
    3px 3px 12px rgba(0, 0, 0, 0.8);
}

.advantages-section {
  padding: 40px 20px;
  background-color: #66cc33;
  text-align: center;
  overflow: hidden; /* если вдруг анимация смещает */
}

.advantages-title {
  font-size: 2rem;
  margin-bottom: 24px;
  color: black; /* шоколадний */
}
.text-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5); /* темна підкладка */
  padding: 20px;
  border-radius: 10px;
}