.video-container {
  overflow-x: auto; /* Включаем горизонтальную прокрутку */
  white-space: nowrap; /* Убираем перенос строк */
  display: flex; /* Делаем элементы строчными */
  gap: 16px; /* Отступы между элементами */
  padding: 16px; /* Внутренние отступы */
  scroll-snap-type: x mandatory; /* Плавная прокрутка */
}

.video-wrapper {
  display: flex; /* Горизонтальное выравнивание всех элементов */
}

.video-item {
  flex: 0 0 auto; /* Устанавливаем фиксированную ширину для каждого видео */
  width: 300px; /* Ширина каждого видео-блока (регулируйте под нужный размер) */
  scroll-snap-align: start; /* Выравнивание для плавной прокрутки */
  text-align: center; /* Центрируем кнопку */
}

iframe {
  width: 100%; /* Видео растягивается на всю ширину блока */
  height: 200px; /* Высота видео (регулируйте) */
}

button {
  margin-top: 8px;
  padding: 8px 16px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #555;
}

.video-item:first-child {
  margin-left: -30px; /* Сдвигаем только первое видео влево */
}


/* Общие стили */
.projects-container {
  display: flex; /* Включаем флекс */
  overflow-x: auto; /* Включаем горизонтальную прокрутку */
  padding: 16px; /* Отступы */
  scroll-snap-type: x mandatory; /* Плавная фиксация элементов */
}

.projects-wrapper {
  display: flex; /* Горизонтальная компоновка элементов */
  gap: 16px; /* Отступы между элементами */
}

.project-item {
  flex: 0 0 auto; /* Фиксированная ширина для каждого элемента */
  scroll-snap-align: start; /* Фиксация элементов при свайпе */
}

.project-item img {
  width: 200px; /* Регулируем ширину изображений */
  height: auto;
  border-radius: 10px; /* Закруглённые углы */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для изображений */
}

/* Только для мобильных устройств */
@media (max-width: 768px) {
  .projects-container {
    display: flex;
    overflow-x: auto; /* Прокрутка только в мобильной версии */
    white-space: nowrap; /* Убираем перенос строк */
  }

  .project-item {
    flex: 0 0 150px; /* Уменьшаем ширину элементов */
    margin-right: 8px; /* Отступ между элементами */
  }

  .project-item img {
    width: 100%; /* Изображение занимает весь контейнер */
    height: auto;
  }
}
.projects-container {
  touch-action: pan-x; /* Ограничиваем прокрутку только по горизонтали */
}

@keyframes colorChange {
  0% { color: red; }
  50% { color: blue; }
  100% { color: red; }
}

.animated-text {
  animation: colorChange 3s infinite;
}