/* Стили для первого блока */
.content {
  margin-left: 15%; /* Левый отступ в процентах */
  margin-right: 15%; /* Правый отступ в процентах */
  padding: 20px;
}

/* Медиа-запрос для изменения отступов при уменьшении экрана до размера планшета */
@media screen and (max-width: 992px) {
  .content {
    margin-left: 10%; /* Уменьшаем левый отступ */
    margin-right: 10%; /* Уменьшаем правый отступ */
  }
}

/* Медиа-запрос для изменения отступов при уменьшении экрана до размера мобильного устройства */
@media screen and (max-width: 576px) {
  .content {
    margin-left: 2%; /* Уменьшаем левый отступ */
    margin-right: 2%; /* Уменьшаем правый отступ */
  }
}

.wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 10px; /* Отступ сверху 20 пикселей */
  padding-bottom: 10px; /* Отступ снизу 40 пикселей */
  padding-left: 10px; /* Отступ слева 10 пикселей */
}

.custom-heading {
  margin-top: 40px; /* Задаем отступ сверху в 20 пикселей */
  color: white; /* Устанавливаем белый цвет текста */
}

.button {
  color: white; /* Цвет текста */
  border: 1px solid white; /* Белая граница без скругления */
  background-color: #3464ad; /* Прозрачный фон */
  padding: 20px 40px; /* Отступы внутри кнопки */
  text-decoration: none; /* Убираем подчеркивание */
  transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */
  margin-top: 100px; /* Отступ сверху кнопки */
  width: 150px; /* Ширина кнопки */
  height: 60px; /* Высота кнопки */
  margin-left: 145px; /* Отступ слева, чтобы сместить кнопку правее */
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
  .button {
    margin-left: 0; /* Убираем отступ для мобильных устройств */
  }
}

.button:hover {
  background-color: #3464ad; /* Цвет фона при наведении */
}

.col-md-12 {
  display: flex;
  justify-content: center;
}

.col-sm-12 {
  display: flex;
  justify-content: center;
}

.video-js {
  max-width: 100%; /* Ограничиваем максимальную ширину видео */
  height: auto; /* Позволяет видео изменять высоту в соответствии с его шириной */
}

.otstup {
  height: 90px; /* Высота отступа для обычных устройств */
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 576px) {
  .otstup {
    height: 50px; /* Устанавливаем большую высоту отступа на мобильных устройствах */
    overflow: hidden; /* Обеспечиваем, что никакой контент не будет отображаться */
  }
}