body {
    margin: 0;
    padding: 0;
    background-color: black; /* Чёрный фон */
    width: 100%;
    height: 100vh;
    /*overflow: hidden; */
}

.progress-bar {
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;      
  background-color: #FF0000; /* Зеленый цвет   #FF0000;  #4CAF50*/
}                    


/* Контейнер для формы */
.order-form-container {
    background-color: #f0f0f0; /* Светло-серый фон #f0f0f0; */
    padding: 20px;
    border-radius: 10px;
    width: 320px;
   
    margin: 20px auto; /* Центрирование формы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

.order-form-container h2 {
    text-align: center;
    color: black;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Стили для группы полей */
.form-group {
    margin-bottom: 15px;
}

/* Стили для полей ввода */
input[type="text"], input[type="tel"] {
    width: 100%;
    padding: 10px;
    border-radius: 8px; /* Закругленные углы */
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box; /* Учитываем padding в общей ширине */
}

/* Поле с ценой */
.final-price {
    font-size: 20px;
    color: #FE5100;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Кнопка отправки */
.submit-button {
    width: 100%; /* На всю ширину */
    padding: 15px;
    background-color: #FFD700;
    color: black;
    border: none;
    border-radius: 8px; /* Закругленные углы */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    position: relative; /* Додаємо позицію для абсолютного позиціонування іконки */
}


.submit-button::before {
  content: "\f07a"; /* Юнікод символ іконки корзини */
  font-family: Font Awesome\ 5 Free; /* Шрифт Font Awesome */
  position: absolute;
  left: 10px; /* Відступ зліва від тексту кнопки */
  top: 50%;
  transform: translateY(-50%); /* Вертикальне центрування іконки */
}

.submit-button:hover {
    background-color: #ffcc00; /* Изменение цвета при наведении */
}



.container {
    width: calc(100% - 20px); /* Устанавливаем ширину контейнера на 100% минус 20px */
    margin: 0; /* Убираем автоматическое центрирование */
    padding: 0 10px; /* Отступы по бокам: 10px слева и справа */
    overflow-y: auto;
    overflow-x: auto;
}

.product-container {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.product-image {
    width: 100%;
    position: relative; /* Позволяет использовать абсолютное позиционирование для дочерних элементов */
}

.price-image {
    position: absolute;
    top: 10px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    width: auto; /* Ширина изображения */
    height: auto; /* Высота изображения */
     transform: scale(0.3); /* Масштабирование изображения на 60% */
    transform-origin: top right; /* Точка масштабирования — верхний правый угол */
}

.product-image img {
    width: 100%; /* Оставляем размер изображения как есть */
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.product-title {
  font-family: 'Montserrat', sans-serif; /* Выбираем шрифт */
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Добавляем тень */
}

.price {
    position: absolute;
    top: 0px; /* Позиция цены в правом верхнем углу */
    right: 10px;
    color: #FE5100; /* Яркий жёлтый цвет */
    font-size: 24px; /* Увеличенный размер шрифта */
    font-weight: bold; /* Жирный шрифт */
  
    padding: 5px;
    border-radius: 5px;
}

.buy-button {
    position: absolute;
    bottom: 10px; /* Позиция кнопки в нижнем левом углу */
    left: 10px;
    background-color: #FFD700;
    color: #FE5100;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
}

/* Стили для баннера */
.banner {
    width: 100%; /* Ширина баннера 100% от контейнера */
    height: auto; /* Автоматическая высота */
}

.banner img {
    width: 100%; /* Ширина баннера */
    height: auto; /* Автоматическая высота */
}

.pferd {
    text-align: center; /* Центрирование текста */
    color: white; /* Белый цвет текста */
    margin: 10px 0; /* Отступы сверху и снизу */
    padding: 0 20px; /* Дополнительный отступ внутри для контроля ширины */
}

.main-text {
    color: white;
    text-align: left; /* Выравнивание по левому краю */
}

.title {
    text-align: left; /* Центрирование текста */
    color: white; /* Белый цвет текста */
    margin: 0px 0; /* Отступы сверху и снизу */
    padding: 0 20px; /* Дополнительный отступ внутри для контроля ширины */
    
}

.slogan {
    font-size: 24px;
    color: white;
    font-weight: bold;
    padding: 10px;
}

.company-info {
    text-align: center;
    margin: 20px 0;
    color: #CCCCCC; /* Светло-серый цвет для контраста с фоном */
    font-size: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.testimonial {
    flex: 1 1 45%;
    background-color: black; /* Светло-серый фон */
    border-radius: 8px; /* Закругление углов */
    padding: 15px; /* Отступы внутри блока */
    margin: 20px 0; /* Отступы сверху и снизу */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень для эффекта глубины */
    position: relative; /* Для позиционирования псевдоэлемента */
}
.testimonials-title {
    text-align: center;
    margin-bottom: 20px;
     color: white;
}

.testimonials {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


/* Сообщение с хвостиком */
.message {
    padding: 10px 15px; /* Отступы внутри сообщения */
    border-radius: 10px; /* Закругление углов сообщения */
    background-color: #ffffff; /* Белый фон для сообщения */
    position: relative; /* Для позиционирования псевдоэлемента */
}

/* Хвостик сообщения */
.message::after {
    content: ''; /* Необходимый контент для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование */
    bottom: 100%; /* Позиция хвостика над сообщением */
    left: 20px; /* Позиция хвостика (можно отрегулировать) */
    border-width: 10px; /* Ширина хвостика */
    border-style: solid; /* Стиль рамки */
    border-color: transparent transparent #ffffff transparent; /* Цвет хвостика: белый */
    margin-left: -5px; /* Центрируем хвостик относительно сообщения */
}

.customer-name {
    font-weight: bold; /* Жирный шрифт для имени покупателя */
    margin-bottom: 5px; /* Отступ снизу имени */
}

.customer-comment {
    font-style: italic; /* Курсив для комментария */
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
}

/* Основной стиль для контейнера таймера */
.countdown-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.countdown-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}




.footer-links {
  display: flex;
  flex-direction: column; /* Изменяем направление на столбец */
  align-items: center; /* Центрируем ссылки по горизонтали */
  margin-top: 20px;
  
}

.footer-links a {
    margin: 0 15px; /* Отступ между ссылками */
    text-decoration: none; /* Убирает подчеркивание */
    color: white; /* Цвет текста */
}

.footer-links a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}

/* Стили для контейнера видео */
.video-container {
    text-align: center;
    padding: 20px;
    margin-bottom: 40px; /* Отступ перед секцией отзывов */
    background-color: black; /* Цвет фона под общий стиль */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для выделения блока */
}

/* Заголовок видео */
.video-title {
    font-size: 24px;
    color: white; /* Белый цвет текста под общий стиль */
    margin-bottom: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Тень текста для акцента */
}

/* Контейнер для видео */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background-color: #333; /* Темный фон позади видео */
    border-radius: 10px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .container {
        max-width: 480px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 480px;
        padding: 40px;
    }
}