/* Стили для заголовка "О проекте" */
.section-title {
    text-align: center; /* Центрируем текст */
    margin-bottom: 20px; /* Отступ снизу для разделения от блока контента */
    font-size: 2em; /* Примерный размер шрифта, можете настроить */
    color: #ffffff; /* Примерный цвет текста, можете настроить */
}

/* Стили для контейнера, который будет использовать Flexbox */
.info-content-wrapper {
    display: flex; /* Включаем Flexbox */
    align-items: flex-start; /* Выравниваем элементы по верху */
    gap: 20px; /* Расстояние между изображением и текстом */
    /* Можно добавить padding или margin для внутреннего отступа, если нужно */
}

/* Стили для иконки (изображения) */
.info-icon {
    flex-shrink: 0; /* Запрещаем изображению сжиматься */
    width: 400px; /* Задайте нужную ширину изображения */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    max-width: 100%; /* Гарантируем, что изображение не выйдет за пределы родителя */
}

/* Стили для текстового блока */
.info-text {
    flex-grow: 1; /* Позволяем текстовому блоку занимать всё доступное пространство */
     text-indent: 2em; /* Добавляет отступ первой строки абзаца */
    color: #ffffff; /* Цвет текста, можете настроить */
    font-size: 1.2em; /* Размер шрифта, можете настроить */
    line-height: 1.6; /* Межстрочный интервал для лучшей читаемости */
    max-width: 1000px; /* Максимальная ширина текстового блока */
    padding: 20px; /* Внутренний отступ для текстового блока */

}
    /* Можете добавить свои стили для параграфов внутри, если нужно */


/* Общие стили для info-container и info-item, если они еще не заданы */
.info-container {
    background: linear-gradient(to right,#48265d #0f0f25); /* Градиентный фон */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.344);
    margin: 0 auto; /* Центрирование контейнера по горизонтали */
    max-width: 1400px; /* Максимальная ширина контейнера */
}

/* Если у вас уже есть стили для info-item, сохраните их. */
/* В данном случае, info-content-wrapper выполняет основную работу по расположению. */

/* Дополнительные стили для параграфов внутри, если они не заданы */
.info-text p {
    margin-bottom: 1em; /* Отступ между параграфами */
    line-height: 1.6; /* Межстрочный интервал для читаемости */
    color: #eee; /* Цвет текста */
}
.indentation {
    margin-top: 200px;
}
/* Исходное состояние: скрыт и смещен вправо */
.info-section {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 1s ease-out, transform 1s ease-out; /* Плавный переход для обоих свойств */
    /* Важно: уберите animation свойство отсюда, оно будет применяться через класс ниже */
}

/* Состояние, когда блок должен быть виден и анимирован */
.info-section.is-visible {
    opacity: 1;
    transform: translateX(0);
}