:root {
    --primary-bg-color: #f0f2f5; /* Светлый фон всей страницы */
    --brand-purple: #8A2BE2; /* Пурпурный цвет для лого и акцентов */
    --gradient-start: #8A2BE2; /* Начало градиента для блока */
    --gradient-end: #4B0082; /* Конец градиента для блока */
    --text-color-light: #ffffff; /* Белый текст на темном фоне */
    --text-color-dark: #0F172A; /* Темный текст для лого и футера */
    --light-grey-text: #cccccc; /* Светло-серый текст для мелкого шрифта */
}


@font-face {
    font-family: 'Alumni Sans SC'; /* Это имя, которое вы будете использовать в CSS */
    src: url('./fonts/AlumniSansSC.ttf') format('truetype'); /* Укажите правильный путь к вашему файлу */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Рекомендуется для лучшей производительности загрузки шрифтов */
}


@font-face {
    font-family: 'Manrope'; /* Это имя, которое вы будете использовать в CSS */
    src: url('./fonts/Manrope.ttf') format('truetype'); /* Укажите правильный путь к вашему файлу */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Рекомендуется для лучшей производительности загрузки шрифтов */
}


body {
    font-family: 'Manrope', sans-serif; /* Montserrat остается для остального текста */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--primary-bg-color);
    color: var(--text-color-dark);
    line-height: 1.6;
}

.container {
    max-width: 1769px;
    width: 90%;
    text-align: center;
    padding: 20px 0;
}

/* Header */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.logo-icon {
    width: 60px; /* Размер иконки логотипа */
    height: 60px;
    margin-bottom: 10px;
    /* Если у вас SVG, можете применить fill: var(--brand-purple); */
}

.logo-text {
    font-weight: 700; /* Убедитесь, что этот вес поддерживается вашим TTF файлом */
    color: var(--text-color-dark);
    margin: 0;
    font-family: "Alumni Sans SC";
    font-size: 74.202px;
    font-style: normal;
    font-weight: 700;
    line-height: 67.872%;
}

/* Content Box */
.content-box {
    background-image: url('bg.png'), linear-gradient(to right, var(--gradient-start), var(--gradient-end));
    background-size: cover; /* Растянуть изображение, чтобы покрыть весь блок */
    background-position: center; /* Центрировать изображение */
    background-repeat: no-repeat; /* Не повторять фоновое изображение */
    border-radius: 20px;
    padding: 40px;
    min-height: calc(460px - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 50px;
    color: var(--text-color-light); /* Убедитесь, что текст остается читаемым на фоне */
}

.text-content {
    color: var(--text-color-light);
    text-align: center;
}


.text-content h1 {
    font-size: 3em;
    /*font-size: 48px;*/
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 48px */
    letter-spacing: -0.03em;
}

.text-content p {
    font-size: 1.1em;
    font-weight: 400;
    color: #FFFFFF;
}

.image-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Занимает всю доступную ширину в рамках flex-контейнера */
}

.container-image {
    max-width: 100%; /* Адаптивность изображения */
    height: auto;
    display: block; /* Убирает лишний отступ снизу у img */
}

/* Footer */
.footer p {
    font-size: 1em;
    color: #6D28D9;
    font-weight: 600;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .text-content h1 {
        font-size: 2em;
        line-height: 110%;
    }
}

@media (min-width: 768px) {
    .header {
        justify-content: center;
        gap: 15px;
    }

    .logo-text {
        font-size: 3em;
    }

    .content-box {
        flex-direction: row;
        justify-content: space-between;
        align-items: end;
        text-align: left;
        padding: 50px;
    }

    .text-content {
        flex: 1; /* Занимает доступное пространство */
        text-align: left;
        padding-right: 30px; /* Отступ от изображения */
    }

    .image-content {
        flex: 1; /* Занимает доступное пространство */
        display: flex;
        justify-content: flex-end; /* Выравнивание изображения справа */
    }

    .container-image {
        max-width: 90%; /* Можно регулировать размер изображения относительно блока */
    }
}

@media (min-width: 1024px) {
    .content-box {
        padding: 60px;
    }
    .text-content h2 {
        font-size: 2.5em;
    }

    .text-content h3 {
        font-size: 4em;
    }

    .text-content p {
        font-size: 1.2em;
    }
}