html{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;

    font-family: 'Helvetica Neue', sans-serif;
    font-size: 2.2vh;
    font-weight: 100;
    color: white;

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.header {
    position: absolute;
    display: flex;
    flex-direction: row;

    padding-top: 1%;
    padding-bottom: 2vh;
    padding-left: 10%;
    padding-right: 10%;

    width: 80%;
    background-color: rgba(0,0,0,.4);
}

.header-links {
    display: flex;
    gap: 7%;
    width: 30%;
    margin-left: 30%;
    margin-top: 1vh;
    font-size: 2vh;
}
.header-links a {
    color: #ffffff;
}
.heaeder-contacts {
    display: flex;
    flex-direction: column;

    margin-left: 15%;
}
.heaeder-contacts p {
    margin: 0;
    font-size: 2.5vh;
    font-weight: 500;
}
.heaeder-contacts span {
    margin: 0;
    font-size: 1.6vh;
    margin-left: 52px;
}


.content {
    width: 100%;

}

/* FIRST BLOCK */

.img-block {
    background-image: url(img/first.webp);
    background-size: cover;
    background-position: center;

    height: 100vh;
}

.img-block-text {
    background-image: url(img/first-text.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    width: 35%;
    height: 30%;

    position: relative;
    top: 25%;
    left: 10%;
}

.img-block-desc {
    background-color: rgba(0,0,0,.8);

    width: 32%;
    height: 10%;

    position: relative;
    top: 25%;

    border-radius: 0px 15px 15px 0px;
}

.img-block-desc p {
   position: relative;
   left: 32%;
   top: 5%;
   line-height: 1.2;
}

.img-block-bottom {
    position: absolute;
    bottom: 0;
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
}
.order-button {
    color: white;

    border: solid 0.1vh;
    border-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5.5vh;
    width: 18%;
}

.order-button:hover {
    transition: 0.5s;
    background-color: #007AFF;
    border-color: #007AFF;
}

.arrow-down:hover {
    cursor: pointer;
}

/* SECOND BLOCK */

.img-block-2 {
    background-image: url(img/second.webp);
    background-size: cover;
    background-position: center;

    height: 100vh;
}

.img-block-bottom-2 {
    position: absolute;
    bottom: -100vh;
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
}

.img-block-text-2 {
    background-image: url(img/second-text.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    width: 40%;
    height: 35%;

    position: relative;
    top: 25%;
}

.img-block-apparat-2 {
    background-image: url(img/second_apparat.svg);
    background-size: cover;
    background-position: center;

    height: 472.65px;
    width: 778px;

    position: absolute;
    left:45%;
    top:125vh;
}

.img-block-desc-2 {
    background-color: rgba(0,0,0,.8);

    width: 30%;
    height: 21.5%;

    position: relative;
    top: 17%;

    border-radius: 0px 15px 15px 0px;
}

.img-block-desc-2 p {
   position: relative;
   left: 50%;
   top: 5%;
   line-height: 1.2;
}

/* THIRD BLOCK */

.img-block-3 {
    background-image: url(img/third.webp);
    background-size: cover;
    background-position: center;

    height: 100vh;
}

.img-block-bottom-3 {
    position: absolute;
    bottom: -200vh;
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
}

.img-block-text-3 {
    background-image: url(img/third-text.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    width: 35%;
    height: 30%;

    position: relative;
    top: 25%;
}

.img-block-desc-3 {
    background-color: rgba(0,0,0,.8);

    width: 30%;
    height: 10%;

    position: relative;
    top: 20%;

    border-radius: 0px 15px 15px 0px;
}

.img-block-desc-3 p {
   position: relative;
   left: 32%;
   top: 5%;
   line-height: 1.2;
}

/* FOURTH BLOCK */

.img-block-4 {
    background-image: url(img/fourth.webp);
    background-size: cover;
    background-position: center;

    height: 100vh;
}

.img-block-bottom-4 {
    position: absolute;
    bottom: -300vh;
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
}

.img-block-text-4 {
    background-image: url(img/fourth-text.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    width: 30%;
    height: 25%;

    position: relative;
    top: 25%;
    left: 10%;
}

.img-block-desc-4 {
    background-color: rgba(0,0,0,.8);

    width: 30%;
    height: 10%;

    position: relative;
    top: 20%;

    border-radius: 0px 15px 15px 0px;
}

.img-block-desc-4 p {
   position: relative;
   left: 32%;
   top: 5%;
   line-height: 1.2;
}

/* INFO */

.info {
    background-image: url(img/info-back.webp);
    background-size: cover;
    background-position: center;

    height: 100vh;

    display: flex;
    flex-direction: column;
    width: 100%;
}

.advantages {
    display: flex;
    flex-direction: column;

    height: 30%;
    width: 50%;
    margin-left: 25%;
    margin-top: 7%;
    padding: 2%;

    background-color: rgba(0,0,0,.6);
    border-radius: 15px;
}

.advantages span {
    font-size: 4vh;
    font-stretch:condensed;
    font-weight: 500;
}

.advantages-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5%;
    height: 80%;
}

.advantage {
    display: flex;
    flex-direction: row;

    width: 50%;
    margin-top: 4%;
}

.advantage img {
    height: 8vh;
    margin-right: 25px;
}

.advantage-desc {
    display: flex;
    flex-direction: column;
}

.advantage-desc p {
    margin: 0;
    font-weight: 500;
    font-size: 2.5vh;
}

.advantage-desc span {
    font-size: 2vh;
    font-weight: 200;
}






.contacts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 100%;
    margin-top: 5%;
}

.social {
    display: flex;
    flex-direction: column;
    width: 50%;

}

.social p {
    font-size: 4vh;
    font-weight: 500;

    margin-left: 20%;
    margin-bottom: 10px;
}

.social-links {
    background-color: rgba(0,0,0,.8);
    border-radius: 0px 15px 15px 0px;

    width: 80%;
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;

    display: flex;
    flex-direction: row;
}

.social-links-text{
    margin-left: 25%;
    font-size: 2.5vh;
    margin-top: 0;

    margin-top: 11px;
}

.social-links a {
    margin-left: 2%;
}

.mail {
    display: flex;
    flex-direction: column;

    width: 50%;
    margin-top: 2%;
}

.mail-text {
    font-size: 2.5vh;
    width: 100%;

    background-color: rgba(0,0,0,.8);
    border-radius: 15px 0px 0px 15px;
    padding: 3vh 5% 3vh 5%;

    margin-bottom: 1%;
}

.mail-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
}

.mail-form-element {
    display: flex;
    flex-direction: column;

}

.mail-form-element {
    font-size: 1.6vh;
}

.mail-form-element input {
    font-size: 2vh;
    padding: 10px;
    border-radius: 7px;
    border: none;
    margin-top: 5px;
    background-color: rgba(230, 230, 230, 0.8);
    font-family: 'Helvetica Neue', sans-serif;
}

.mail-checkbox {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}


.mail-checkbox {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.mail-checkbox label {
    margin-left: 5px;
    font-size: 1.6vh;
}

.mail-button {
    color: white;
    background: none;
    border: solid 0.1vh;
    border-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5.5vh;
    width: 50%;
    margin-left: 35%;
    margin-top: 1%;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 100;
    font-size: 2.2vh;
}

.mail-button:hover {
    transition: 0.5s;
    background-color: #007AFF;
    border-color: #007AFF;
}

.map {
    width: 100%;
    height: 500px;
}

.map-text {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 5%;

    padding: 70px 30px 70px 30px;
    width: 25%;
    height: 360px;
    background-color: #0b0128ce;
}

.map-text p {
    font-size: 4vh;
    font-weight: 500;
    margin-bottom: 25px;
}

.footer {
    height: 430px;
    width: 100%;
    background-color: #0B0128;
    padding-top: 4vh;
}

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

.footer-text {
    margin-left: 40%;
    margin-top: 2vh;
}

.footer-links {
    margin-top: 4vh;
    text-align: center;
}

.footer-links a {
    margin-left: 15px;
}

.footer-links a img {
    filter: grayscale(100%);
}

.footer-copyright {
    text-align: center;
    font-size: 2vh;
    margin-top: 3vh;
}

.checkbox-label {
    margin-top: 2px;
}

/* ADAPTIVE */

@media only screen and (max-width: 600px) {
    .header {
        display: none;
    }

    .img-block-apparat-2 {
        display: none;
    }

    .img-block-text {
        width: 80%;
        height: 18%;
    }

    .img-block-desc {
        width: 90%;
    }

    .img-block-desc p {
        left: 10%;
        top:10%;
    }

    .order-button {
        width: 70%;
    }

    .img-block-text-2 {
        top: 15%;
        width: 90%;
    }

    .img-block-desc-2 {
        width: 90%;
        top: 2%;
    }

    .img-block-desc-2 p {
        left: 15%;
        top:8%;
    }

    .img-block-text-3 {
        width: 90%;
    }

    .img-block-desc-3 {
        width: 95%;
        top: 17%;
    }

    .img-block-desc-3 p {
        left: 10%;
        top:10%;
    }

    .img-block-text-4 {
        width: 80%;
    }

    .img-block-desc-4 {
        width: 95%;
        top: 17%;
    }

    .img-block-desc-4 p {
        left: 10%;
        margin-bottom: 0;
        top:10%;
    }

    .info {
        height: 172vh;
    }

    .advantages{
        width: 100%;
        height: 80vh;
        margin-left: 0;
        margin-top: 0;
        padding-top: 10vh;
        border-radius: 0;
        padding-left: 4%;
    }
    .advantage {
        width: 93%;
        margin-left: 0%;
        height: 15vh;
        margin-top: 0;
    }
    .advantages span {
        margin-bottom: 2vh;
        
    }

    .social {
        width: 100%;
    }

    .social p {
        margin-left: 5%;
        margin-right: 5%;
        font-size: 3.5vh;
    }

    .social-links {
        width: 98%;
    }

    .social-links a img {
        height: 32px;
        margin-left: 10px;
    }

    .social-links-text {
        margin-left: 5%;
        font-size: 2vh;
        margin-top: 7px;
    }

    .mail {
        width: 100%;
    }

    .mail-text {
        font-size: 2vh;
        margin-bottom: 1vh;
    }

    .mail-form {
        padding-right: 5%;
        padding-left: 5%;
    }

    .mail-form-element {
        width: 100%;
    }

    .mail-checkbox {
        margin-left: 5%;
    }

    .mail-button {
        margin-top: 2vh;
        width: 90%;
        margin-left: 5%;
    }

    .map-text {
        display: none;
    }

    .footer-text {
        margin-left: 5%;
        font-size: 2vh;
    }
}