/* ===================================== */
/* ========= Общие стили ========= */
/* ===================================== */
body {
    font-family: sans-serif;
    margin: 0;
    padding:0;
    color: #333;
    display: flex; /* Для прибивания футера к низу */
    flex-direction: column; /* Для прибивания футера к низу */
    min-height: 100vh; /* Для прибивания футера к низу */
}

.container {
    width: 80%;
    margin:auto;
    max-width: 1600px;
    padding: 0 15px; /* Добавляем горизонтальный паддинг для небольших экранов */
    box-sizing: border-box; /* Важно, чтобы padding не увеличивал ширину */
}

/* ===================================== */
/* ========= Header (Шапка) ========= */
/* ===================================== */
header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 10px 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку на маленьких экранах */
    text-align: center; /* Центрируем содержимое по умолчанию */
}

.logo {
    
    margin-left: -300px;  /*Изначальный отрицательный отступ */
    flex-basis: 250px; /* Минимальная ширина для логотипа, чтобы он не схлопывался */
    flex-shrink: 0; /* Не позволяет логотипу сжиматься */
   
}

.logo img {
    width: 100%;
    max-width:150%; /* Гарантируем, что изображение не выйдет за пределы контейнера */
}

.header-text {
    flex-grow: 1; /* Позволяет тексту занимать доступное пространство */
    padding-left: 0px; /* Отступ от логотипа */
    text-align:center; /* Центрируем текст внутри flex-элемента */
}

header h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

header p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    background-color: #fff;
    color: #3498db;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #eee;
}

/* ===================================== */
/* ========= Features (Преимущества) ========= */
/* ===================================== */
.features {
    padding: 80px 0;
    text-align: center;
}

.features h2 {
    font-size: 2.5em;
    margin-bottom: 50px;
}

.feature-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
    gap: 30px; /* Отступ между элементами */
}

.feature {
    width: 300px; /* Базовая ширина для ПК */
    margin-bottom: 30px; /* Отступ между элементами при wrap */
    flex-shrink: 0; /* Не позволяет элементу сжиматься ниже 300px */
}

.feature img {
    width: 80px;
    margin-bottom: 20px;
    max-width: 100%; /* Убедимся, что изображения не вылезут */
}

.start-instruction {
    text-align: center;
    margin-top: 60px;
    /* flex-grow: 10; - Это свойство не имеет смысла здесь, так как .start-instruction не является flex-элементом. */
}



/* ===================================== */
/* ========= Footer (Подвал) ========= */
/* ===================================== */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    margin-top: auto; /* Прибивает футер к низу, если content-wrapper не заполняет всю высоту */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
    text-align: center; /* Центрируем содержимое по умолчанию */
}

.contacts p {
    margin: 0;
}

.contacts a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}

.copyright p {
    margin: ;
}

/* ===================================== */
/* ========= Стили для страниц ошибок (503.html, 8003.html) ========= */
/* ===================================== */
/* Обратите внимание: Эти стили должны быть либо в отдельном файле
   для страниц ошибок, либо быть очень специфичными.
   Я их включил прямо сюда, как было в вашем 503.html/8003.html. */
.error-container {
    text-align: center;
    padding: 80px 20px;
    max-width: 800px;
    margin: 50px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.error-container h1 {
    font-size: 3.5em;
    color: #3498db;
    margin-bottom: 25px;
}

.error-container p {
    font-size: 1.25em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.error-container p.main-message {
    font-size: 1.6em;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
}

.error-container strong {
    color: #2980b9;
}

.error-container .btn {
    display: inline-block;
    background-color: #3498db;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 30px;
}

.error-container .btn:hover {
    background-color: #2980b9;
}

/* Обертка для центрирования содержимого между header и footer на страницах ошибок */
.main-content-wrapper {
    flex: 1; /* Заставляет обертку растягиваться */
    display: flex;
    align-items: center; /* Центрирует .error-container вертикально */
    justify-content: center; /* Центрирует .error-container горизонтально */
}

/* Убираем специфичные стили для логотипа, если они есть в style.css и мешают на страницах ошибок */
header .logo {
    margin-left: 0 !important; /* Убираем специфичный отрицательный отступ на этих страницах */
}

/* ===================================== */
/* ========= Адаптивность (Медиазапросы) ========= */
/* ===================================== */

/* Для больших планшетов и настольных ПК (ширина до 1024px) */
@media (max-width: 1024px) {
    header h1 {
        font-size: 2.5em;
    }
    header p {
        font-size: 1.1em;
    }
    .error-container h1 {
        font-size: 3em;
    }
    .error-container p {
        font-size: 1.1em;
    }
    .error-container p.main-message {
        font-size: 1.4em;
    }
}

/* Для планшетов (ширина до 768px) */
@media (max-width: 768px) {
    .container {
        width: 90%; /* Увеличиваем ширину контейнера для использования большего пространства */
    }

    .header-content {
        flex-direction: column; /* Элементы шапки в столбец */
        align-items: center; /* Центрируем по горизонтали */
    }

    .logo {
        margin-left: 0; /* Убираем отрицательный отступ для логотипа */
        margin-bottom: 20px; /* Отступ под логотипом */
        flex-basis: auto; /* Позволяем ширине подстраиваться */
    }

    .header-text {
        padding-left: 0; /* Убираем отступ */
        text-align: center; /* Центрируем текст */
    }

    header h1 {
        font-size: 2em; /* Уменьшаем размер заголовка */
        margin-bottom: 15px;
    }

    header p {
        font-size: 1em;
        margin-bottom: 20px;
    }

    .feature-list, .price-list {
        flex-direction: column; /* Элементы в столбец */
        align-items: center; /* Центрируем элементы */
    }

    .feature, .price-item {
        width: 90%; /* Занимают почти всю ширину контейнера */
        max-width: 400px; /* Ограничиваем максимальную ширину */
    }

    .footer-content {
        flex-direction: column; /* Элементы футера в столбец */
        text-align: center;
    }

    .contacts, .copyright {
        margin-bottom: 10px;
    }

    .error-container {
        padding: 40px 15px;
        margin: 20px auto;
    }

    .error-container h1 {
        font-size: 2.5em;
    }

    .error-container p {
        font-size: 1em;
    }

    .error-container p.main-message {
        font-size: 1.2em;
    }

    .error-container .btn {
        padding: 12px 25px;
        font-size: 0.9em;
    }
}

/* Для маленьких мобильных устройств (ширина до 480px) */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.8em;
    }
    header p {
        font-size: 0.9em;
    }
    .features h2, .pricing h2 {
        font-size: 2em;
        margin-bottom: 30px;
    }
    .price-item h3 {
        font-size: 1.5em;
    }
    .price {
        font-size: 1.3em;
    }
    .error-container h1 {
        font-size: 2em;
    }
    .error-container p {
        font-size: 0.9em;
    }
    .error-container p.main-message {
        font-size: 1.1em;
    }
}