/* Benzin Regular */
@font-face {
    font-family: 'BenzinR';
    src: url('fonts/benzin/Benzin-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

/* Benzin Bold */
@font-face {
    font-family: 'BenzinB';
    src: url('fonts/benzin/Benzin-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Futura BT Light */
@font-face {
    font-family: 'Futura BTL';
    src: url('fonts\futurabt\futura-light-bt.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

/* Futura BT Heavy */
@font-face {
    font-family: 'Futura BTH';
    src: url('fonts\futurabt\futura-heavy-bt.ttf') format('truetype');
    font-weight: 900; /* Heavy */
    font-style: normal;
}

/* Контейнер для контента */
.container {
    max-width: 1100px; /* Ограничиваем ширину контейнера */
    width: 100%;
    justify-content: center; /* Центрируем по горизонтали */
    padding: 20px;
    border-radius: 10px; /* Скругление углов */
}

header h1 {
    font-family: 'BenzinB', Arial, sans-serif; /* Шрифт Benzin */
    font-weight: 700; /* Bold */
    font-size: 2.5em; /* Размер шрифта */
    color: #000000; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    padding-top: 70px; /* Смещение текста вниз */
    margin: 0; /* Убираем внешние отступы */
    letter-spacing: 2px; /* Расстояние между буквами */
}

header p {
    font-family: 'BenzinR', Arial, sans-serif; /* Шрифт Benzin */
    font-weight: 400; /* Bold */
    font-size: 1.5em; /* Размер шрифта */
    color: #000000; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    padding-top: 15px; /* Смещение текста вниз */
    margin: 0; /* Убираем внешние отступы */
    letter-spacing: 2px; /* Расстояние между буквами */
}

/* Контейнер для картинок */
.images-container {
    display: flex;
    gap: 50px; /* Расстояние между картинками */
    flex-wrap: wrap; /* Разрешаем перенос на новую строку */
    justify-content: center; /* Центрируем картинки по горизонтали */
    margin-top: 20px;
    width: 100%; /* Занимает всю ширину */
    max-width: 1200px; /* Ограничиваем максимальную ширину контейнера */
    padding: 0 20px; /* Добавляем отступы по бокам */
}

/* Стили для SVG-картинок */
.svg-image {
    justify-content: center;
    width: 500px; /* Уменьшаем ширину картинок */
    height: auto; /* Сохраняем пропорции */
    max-width: 100%; /* Ограничиваем максимальную ширину */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .images-container {
        flex-direction: column; /* Картинки в столбец */
    }

    .svg-image {
        width: 250px; /* Ещё больше уменьшаем на мобильных */
    }
}