body {
    background-color: #35577b;
    padding: 40px;
    margin: 0;
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.logo-photo {
    text-align: center;
}

.logo-photo img {
    height: 70px;
}

.block {
    width: 80px;
    height: 40px;
    background-color: #25425e;
    border: 1px solid #25425e;
    margin: 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.container {
    margin-top: 70px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

h1 {
    color: #35577b;
}

p {
    color: #333;
}

.white-block {
    margin-top: 20px;
    background-color: #c7c7c7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

.blue-block {
    background-color: #007bff;
    width: 500px;
    height: 500px;
    margin: 60px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Полупрозрачный синий фон */
.blue-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 80, 153, 0.5); /* Полупрозрачный синий фон */
    z-index: 2;
}

.blue-block h2 {
    position: absolute;
    left: 20px; /* Немного отступа от левого края */
    bottom: 35px; /* Выше желтого низа */
    color: white;
    font-size: 36px;
    z-index: 3; /* Текст будет сверху */
}

.blue-block img {
    z-index: 1; /* Картинка будет под фоном */
}

/* Желтый низ */
.blue-block::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    height: 35px;
    background-color: yellow;
    border-radius: 0 0 15px 15px;
    z-index: 4; /* Желтый низ поверх фона */
}

.gray-block {
    margin-top: 20px;
    background-color: #c7c7c7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
}

/* Новый раздел */
.flex-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

.flex-row .small-block {
    width: 30%;
    height: 300px;
    background-color: yellow;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 50px;
}

.flex-row .large-block {
    width: 60%;
    height: 300px;
    background-color: #007bff;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 50px;
}

/* Три блока внизу */
.bottom-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
}

.bottom-row .block-left {
    width: 25%;
    height: 600px;
    background-color: #007bff;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 50px;
}

.bottom-row .block-right {
    width: 25%;
    height: 600px;
    background-color: #007bff;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 50px;
}

.bottom-row .block.middle {
    width: 45%; /* Ширина блока */
    height: 600px; /* Высота блока */
    background-color: #c7c7c7; /* Цвет фона */
    position: relative; /* Позиционирование для абсолютных элементов */
    border-radius: 15px; /* Закругление углов */
    overflow: hidden; /* Скрыть содержимое, выходящее за пределы */
    display: flex; /* Использование flexbox для выравнивания содержимого */
    flex-direction: column; /* Вертикальное расположение содержимого */
    justify-content: flex-start; /* Выравнивание содержимого в начале */
}

.large-text {
    color: #35577b; /* Цвет текста */
    font-size: 24px; /* Размер текста */
    font-weight: bold; /* Сделать текст жирным */
    margin: 10px 0; /* Отступы сверху и снизу */
    text-align: center; /* Выравнивание текста по центру */
}


/* Желтый текстовый блок */
.yellow-text-block {
    position: absolute;
    bottom: 35px;
    left: 20px;
    background-color: yellow;
    padding: 10px;
    border-radius: 10px;
    z-index: 5;
    color: #35577b;       /* Цвет текста */
    font-size: 18px;
    font-weight: bold;
}

.yellow-text-block-forsmall {
    position: absolute;
    background-color: yellow;
    padding: 10px;
    border-radius: 10px;
    z-index: 5;
    left: 50%;      /* Отцентрировать по горизонтали */
    top: 50%;       /* Отцентрировать по вертикали */
    transform: translate(-50%, -50%); /* Смещение блока для точного центрирования */
    color: #35577b;       /* Цвет текста */
    font-size: 40px;      /* Размер текста */
    font-weight: bold;
}


.block img, .small-block img, .large-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.block-three {
    margin-top: 20px;
    background-color: #c7c7c7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

.block-three-one {
    background-color: #007bff;
    width: 500px;
    height: 500px;
    margin: 60px;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.block-three-one h2 {
    position: absolute;
    left: 20px; /* Немного отступа от левого края */
    bottom: 0; /* Выше желтого низа */
    color: #ffffff;
    font-size: 25px;
    z-index: 5; /* Текст будет сверху */
}

.block-three-one img {
    z-index: 1; /* Картинка будет под фоном */
}

/* Желтый низ */
.block-three-one::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    height: 25%;
    background-color: #35577b;
    border-radius: 0 0 15px 15px;
    z-index: 4; /* Желтый низ поверх фона */
}
.background-image-for {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.block-three-two {
    background-color: #007bff;
    width: 500px;
    height: 500px;
    margin: 60px;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.block-three-two h2 {
    position: absolute;
    left: 20px; /* Немного отступа от левого края */
    bottom: 0; /* Выше желтого низа */
    color: #35577b;
    font-size: 25px;
    z-index: 5; /* Текст будет сверху */
}

.block-three-two img {
    z-index: 1; /* Картинка будет под фоном */
}

/* Желтый низ */
.block-three-two::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    height: 25%;
    background-color: yellow;
    border-radius: 0 0 15px 15px;
    z-index: 4; /* Желтый низ поверх фона */
}

.block-three-three {
    background-color: #007bff;
    width: 1120px;
    height: 500px;
    margin: 60px;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.block-three-three h2 {
    display: flex;
    justify-content: center;
    position: absolute;
    color: #ffffff;
    font-size: 36px;
    z-index: 5; /* Текст будет сверху */
}

.block-three-three img {
    z-index: 1; /* Картинка будет под фоном */
}

.block-three-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 80, 153, 0.5); /* Полупрозрачный синий фон */
    z-index: 2;
}

.img-block {
    background-color: #007bff;
    width: 1120px;
    height: auto;
    margin: 60px;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.img-block h2 {
    display: flex;
    justify-content: center;
    position: absolute;
    color: #ffffff;
    font-size: 36px;
    z-index: 5; /* Текст будет сверху */
}

.img-block img {
    z-index: 1; /* Картинка будет под фоном */
}


/* Мобильная адаптация */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Уменьшено для мобильных */
    }

    .header {
        flex-direction: column; /* Изменено на вертикальное расположение */
        align-items: center;
    }

    .logo-photo img {
        height: 50px; /* Уменьшено для мобильных */
    }

    .block {
        width: 60px; /* Уменьшено для мобильных */
        height: 30px; /* Уменьшено для мобильных */
        margin: 0 10px; /* Уменьшено для мобильных */
    }

    .blue-block h2 {
        position: absolute;
        left: 20px;
        bottom: 35px;
        color: white;
        font-size: 15px;
        z-index: 3;
    }

    .blue-block {
        background-color: #007bff;
        width: 100%;
        height: 100%;
        margin: 40px;
        border-radius: 20px;
        display: flex;
        position: relative;
        overflow: hidden;
    }

    .block{
        display: none;
    }

    .flex-row .small-block {
        width: 100%;
        height: 200px;
        background-color: yellow;
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        margin: 50px;
    }

    .flex-row .large-block {
        width: 100%;
        height: 300px;
        background-color: #007bff;
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        margin: 0 50px;
    }

    .bottom-row .block-left {
        width: 100%;
        height: 600px;
        background-color: #007bff;
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        margin: 0 50px;
    }

    .yellow-text-block {
        position: absolute;
        margin-top: 10px;
        padding: 5px;
    }

    .container {
        margin-top: 20px; /* Уменьшено для мобильных */
    }

    .white-block,
    .gray-block,
    .block-three {
        padding: 10px; /* Уменьшено для мобильных */
    }

    .flex-row,
    .bottom-row {
        flex-direction: column; /* Вертикальное расположение блоков */
        align-items: center; /* Центрируем по горизонтали */
    }

    .small-block,
    .large-block,
    .block-left,
    .block-right,
    .block.middle {
        width: 100%; /* Полная ширина для мобильных */
        margin: 10px 0; /* Отступы сверху и снизу */
        height: auto; /* Авто высота */
    }

    .yellow-text-block-forsmall {
        font-size: 18px; /* Уменьшен размер шрифта для мобильных */
    }

    .bottom-row .block-right {
        width: 100%;
        height: 500px;
    }

    .block-three-one,
    .block-three-two,
    .block-three-three,
    .img-block {
        width: 90%; /* Уменьшено для мобильных */
        margin: 20px auto; /* Центрируем блоки */
        border-radius: 20px;
    }

    .block-three-one h2,
    .block-three-two h2,
    .block-three-three h2,
    .img-block h2 {
        font-size: 20px; /* Уменьшен размер шрифта для мобильных */
    }

    .yellow-text-block {
        font-size: 14px; /* Уменьшение размера шрифта */
    }

    .bottom-row .block.middle {
        width: 100%;
        height: 400px;
    }

    h1 {
        font-size: 24px; /* Уменьшен размер заголовка */
    }

    h2 {
        font-size: 20px; /* Уменьшен размер подзаголовка */
    }

    p {
        font-size: 14px; /* Уменьшен размер текста */
    }
}