body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Запрещает прокрутку */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.logo img {
    max-height: 80px;  /* Ограничиваем максимальную высоту */
    width: auto;  /* Устанавливаем авто-ширину для сохранения пропорций */
    position: absolute;
    z-index: 2;
    top: 2.5%;  /* Логотип будет оставаться на фиксированном расстоянии сверху */
    left: 2.5%;  /* Логотип будет центрироваться по горизонтали */
}

.get-btn {
    background: linear-gradient(90deg, #02856A, #BAD897);
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 25px;
    font-weight: bold;
    transition: background 0.3s;
    max-width: 150px;  /* Ограничивает максимальную ширину */
    width: 80%;  /* Ширина кнопки зависит от ширины родительского элемента */
    height: 60px; /* Высота кнопки остаётся фиксированной */
    position: absolute;
    z-index: 2;
    top: 5%;
    right: 3%;
    display: flex; /* Включаем Flexbox */
    justify-content: center; /* Горизонтальное выравнивание */
    align-items: center; /* Вертикальное выравнивание */
}

.get-btn1 {
    background: #ffffff00;
    color: #ffffff00;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 25px;
    font-weight: bold;
    transition: background 0.3s;
    max-width: 500px;  /* Ограничивает максимальную ширину */
    width: 80%;  /* Ширина кнопки зависит от ширины родительского элемента */
    height: 120px; /* Высота кнопки остаётся фиксированной */
    position: absolute;
    z-index: 2;
    top: 88%;
    right: 37.5%;
}


.image2 {
    top: 0;
    right: 20%;
    position: absolute;
    z-index: 1;
}

.image3 {
    top: 0;
    left: 0%;
    position: absolute;
    z-index: -1;
}

.image5 {
    top: 10%;
    left: 0%;
    position: absolute;
    z-index: -1;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding: 20px;
}

.content h2 {
    font-size: 2.5rem;
    color: #02856A;
    margin: 0;
}

.content p {
    font-size: 1.5rem;
    margin: 20px 0;
    color: #333;
}

.content .image1 {
    position: relative
}

.content .image4 {
    top: 65%;
    left: 10%;
    position: absolute;
    z-index: -1;
}

.content .image6 {
    top: 35%;
    right: 0%;
    position: absolute;
    z-index: -1;
}

.content .image7 {
    top: 50%;
    right: 0%;
    position: absolute;
    z-index: -1;
}

.content .image8 {
    bottom: 0; /* Прикрепляет элемент к нижней границе окна */
    right: 32.5%; /* Сохраняет отступ справа */
    position: absolute;
    z-index: -1; /* Оставляет элемент позади других */
}

/* Адаптивность */
@media (max-width: 600px) {
    
    .logo img {
        max-height: 5%;  /* Ограничиваем максимальную высоту */
        position: absolute;
        z-index: 2;
        top: 2.5%;  /* Логотип будет оставаться на фиксированном расстоянии сверху */
        left: 2.5%;  /* Логотип будет центрироваться по горизонтали */
    }

    .get-btn {
        background: linear-gradient(90deg, #02856A, #BAD897);
        color: #fff;
        cursor: pointer;
        border-radius: 50px;
        font-size: 16px;
        font-weight: bold;
        transition: background 0.3s;
        max-width: 110px;  /* Ограничивает максимальную ширину */
        width: 50%;  /* Ширина кнопки зависит от ширины родительского элемента */
        height: 5%; /* Высота кнопки остаётся фиксированной */
        position: absolute;
        z-index: 2;
        top: 2.5%;
        right: 3%;
        display: flex; /* Включаем Flexbox */
        justify-content: center; /* Горизонтальное выравнивание */
        align-items: center; /* Вертикальное выравнивание */
    }

    .get-btn1 {
        background: #e2040400;
        color: #ffffff00;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 50px;
        font-size: 25px;
        font-weight: bold;
        transition: background 0.3s;
        max-width: 500px;  /* Ограничивает максимальную ширину */
        width: 50%;  /* Ширина кнопки зависит от ширины родительского элемента */
        height: 60px; /* Высота кнопки остаётся фиксированной */
        position: absolute;
        z-index: 2;
        top: 110%;
        right: 25.5%;
    }

    .image2 {
        top: 10%;
        left: 40%;
        position: absolute;
        z-index: 1;
        transform: rotate(90deg) scale(0.5); /* Поворот на 90 градусов и уменьшение размера на 25% */
    }
    
    .image3 {
        top: -40%;
        left: -90%;
        position: absolute;
        z-index: -1;
        transform:scale(0.5);
    }

    .content .image4 {
        top: 65%;
        left: 0%;
        position: absolute;
        z-index: -1;
        transform: scale(0.5);
    }

    .image5 {
        top: 0%;
        left: -15%;
        position: absolute;
        z-index: -1;
        transform: scale(0.5);
    }

    .content .image6 {
        top: 50%;
        right: -90%;
        position: absolute;
        z-index: -1;
        transform: scale(0.5);
    }

    .content .image7 {
        top: 60%;
        right: -20%;
        position: absolute;
        z-index: -1;
        transform: scale(0.5);
    }

    .content .image8 {
        bottom: 0; /* Закрепляем за нижней гранью */
        top: 70.5%;
        left: 5%; /* Помещаем левый край в центр окна */
        position: absolute; /* Фиксированное позиционирование относительно окна */
        z-index: -1; /* Оставляет элемент позади других */
        transform: scale(0.5) translateX(-50%); /* Масштабирование и смещение влево на половину ширины элемента для центровки */
    }

    .content h2 {
        font-size: 2rem;
    }

    .content p {
        font-size: 1.2rem;
    }

    .content .image1 {
        font-size: 1.5rem;
    }
}