:root{
    --white: #f9f9f9;
    /* --green1: #00AF64;  изначальный */
    --green1: #5f9f52; 
    --green2:  #007241; /* мобильное меню */
    --green3: #C9F83E; 
    --green4:#003E10; /* активноое мобильное */
    --grey: #f3f3f3;
    --grey2: #e7e7e7;
    --grey3: #2a2a2a;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-width: 320px;
    font-family: sans-serif;
    font-family: 'Montserrat', sans-serif;
    background: #ffff;
    color: rgba(0, 0, 0, 0.87)
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}


.container {
    max-width: 1440px;
    margin: 0 auto; /* центрирование по горизонтали */
    padding: 0 100px;
}

.header {
background-color:  var(--green1);
}

.head-topline {
    padding: 20px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--white);
    font-size: 18px;
    align-items: center; /*вертикальное центрирование*/
}

.block-top {
    flex-grow: 1;
    flex-basis: 200px;
    padding-bottom: 10px; 
}

.block-top-name {
    flex-grow: 8;
    flex-basis: 200px;
    padding-bottom: 10px;
font-weight: 700;
font-size: 24px;
}

.header-link {
color: var(--white);
text-decoration: none;
transition: color 0.15s;
}

.header-link:hover {
    transition: all .3s;
    color: var(--green3);
}



.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /*довнес против ломки телефона*/
    padding: 0px 20px 30px 20px;
    background-color: var(--green1);
    color: var(--white);
    margin-top: 20px;   
}

.nav-links a {
    color: var(--white);
}

.phone-top {
font-size: 20px; 
}

.menu {
    display: flex;
    font-size: 18px;
}

li a:hover {
    background-size: 100% 2px;
}

.menu li {
    padding: 5px 15px;
}

.menu li a:hover {
    transition: all .1s;
    color: var(--green3);
}

#checkbox_toggle {
    display: none;
}

.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

.hamburger-line {
    background-color: var(--white);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
}

.hamburger-line::before,
.hamburger-line::after {
    background-color: var(--white);
    content: '';
    display: block;
    position: absolute;
    transition: all .3s;
    width: 100%;
    height: 100%;
}

.hamburger-line::before {
    top: 7px;
}

.hamburger-line::after {
    top: -7px; 
}


.top-box {
    background-color: aqua;
}


.parallax_top-index{
    background: url(../img/indexpage/forest01.jpg); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 25vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/
}


.parallax_top-zks{
    background: url(../img/zks/zks_scape.jpg); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 25vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/
}

.parallax_top-oks {
    background: url(../img/oks/oks-scape.jpg); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 25vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/
}

.parallax_top-index h1 {
    margin: 0 auto; /* центрирование по горизонтали */   
    color: white;
    font-weight: 700;
    font-size: 50px;
    line-height: 64px;
    letter-spacing: 2px;
}
.parallax_top-zks h1 {
    margin: 0 auto; /* центрирование по горизонтали */   
    color: white;
    font-weight: 700;
    font-size: 50px;
    line-height: 64px;
    letter-spacing: 2px;
}

.parallax_top-oks h1 {
    margin: 0 auto; /* центрирование по горизонтали */   
    color: white;
    font-weight: 700;
    font-size: 50px;
    line-height: 64px;
    letter-spacing: 2px;
}


.parallax_top-index h2 {
    margin-top: 32px;
    font-weight: 500;
font-size: 27px;
line-height: 38px;
color: white;
}

.parallax_top-zks h2 {
    margin-top: 32px;
    font-weight: 500;
font-size: 27px;
line-height: 38px;
color: white;
}

.parallax_top-oks h2 {
    margin-top: 32px;
    font-weight: 500;
font-size: 27px;
line-height: 38px;
color: white;
}

.backonindex {
color: white;
}

/* hero */
.hero {
    padding: 50px 0 0 0;
}

.hero__content {

}

.hero__title {
    text-align: center;
    font-weight: 700;
    font-size: 50px;
    line-height: 64px;
    color: var(--green1);
    padding-bottom: 32px;
}

.hero__subtitle {
    text-align: center;
    font-weight: 400;
font-size: 20px;
line-height: 28px;
color: rgba(0, 0, 0, 0.87);
}
/* end hero */



.parallax_footer{
    background: url(../img/indexpage/forest02.jpg); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 20vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/    
}

.footer-line { 
    color: white;
    font-size: 18px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center; /*вертикальное центрирование*/
}

.content_item {
    min-width: 250px;
    max-width: 250px;
    padding-bottom: 10px;
    }


    .card-box{
        display: flex;
        justify-content: space-between;
        padding-top: 50px;
        padding-bottom: 50px;    
    }


    
    
    .card{
        width: 359px;
        padding: 44px 32px;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 5px 20px 50px rgba(23, 216, 6, 0.2);
        border-radius: 10px;
        display: flex;
        flex-direction: column; 
        transition-duration: .5s;
    }       


    .heading-mini{
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0.05em;
        color: var(--green1);
        margin-bottom: 14px;
        text-align: center;
    }

    .heading-micro{
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0.05em;
  

    }




    .card_text-link{
        color: rgba(0, 0, 0, 0.87);
        text-decoration: none;
    }

    
/* чтобы карточка анимировалась */  

.card:hover {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

.card__img{ 
    align-self: center;
    margin-bottom: 20px ;
    height:70px;
}

.card_img_certif { 
align-self: center;
    height: 240px;
    margin-bottom: 51px;
    border-radius: 5px;
}

.card__link{
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.05em;
    color: #5A98D0;
    text-decoration: none;
}

.arrow{
    width: 14px;
    margin-left: 24px;
}

.card_link_arrow{
    display: flex;
    justify-content: flex-start;
}


.certificate {
    background: url(../img/indexpage/forest03.jpg); /*Здесь мы задаем фон*/
    background-position: center; /*Центрируем фон*/
   background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    text-align: center; /*Центрируем текст*/
}


.advantages_area {
    display: flex;
    flex-wrap: wrap;
        }

        .advantages_card {;
            text-align: center;
          }
        
        .advantages_area-block {
        text-align: left;
        flex-grow: 1;
        flex-basis: 500px;
        color: rgba(0, 0, 0, 0.87);
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0.05em;
        padding: 24px 0 64px 0;
        }



   /* zks avantages */
.zks_advantag {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30px;
        }
        
        .zks_advantag_item{
          display: flex;
        border-radius: 5px;
        flex-grow: 1;
        flex-basis: 300px;
        padding: 20px 0 20px 20px;
        }    
        
    .zkscol_1 {
        background-color: #ebebeb;
    }
    
    .zkscol_2 {
        background-color: #9ce48e;
    } 
    
    .zkscol_3 {
        background-color: #313131;
    }
    
    .zks_advantag_description {
        padding: 0 0 0 30px;
    }    

    .zks_advantag_text-1 {
        padding-top: 30px;
        padding-right: 25px;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color: rgb(119, 119, 119);
        }

        .zks_advantag_text-2 {
            padding-top: 30px;
            padding-right: 25px;
            font-weight: 400;
            font-size: 20px;
            line-height: 28px;
            color: black; 
            }

    .zks_advantage-3 {
        color: white;
    } 

    .zks_advantag_text-3 {
        padding-top: 30px;
        padding-right: 25px;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color: rgba(255, 255, 255, 0.8);
        }
    /* end zks avantages */


/* -- окс зкс карточки -- */
    .cardokszks {
        display: flex;
        flex-wrap: wrap;
        }        
        
        .cardokszks_item{
            display: flex;
            flex-grow: 1;
            flex-basis: 300px;
            padding: 47px 0 47px 0;
        } 

        .cardokszks_item-photo {
            border-radius: 10px;
        }

        .cardokszks_item-descript {
padding: 0 20px;
        }
/* -- окс зкс карточки -- */

    .errorpicarea {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0 20px 0;
        box-sizing: border-box;
    }



       /* -- котнтактная форма -- */
       .contacts__title {
        font-weight: 700;
        font-size: 48px;
        line-height: 60px; 
        color: var(--green4);
        margin-bottom: 32px;
        }

        .contacts__item-title {
            margin-bottom: 14px;
            font-weight: 700;
            font-size: 24px;
            line-height: 34px; 
            color: var(--green1);
        }




        .contact-block__info {
            flex-grow: 1; /* блоки равны */
          } /* это адаптив */


.contact-form {
    max-width: 300px;

}

.form-input, .form-label {
font-weight: 700;
font-size: 18px;
line-height: 38px;
color: var(--green1);
}

.form-control {
    border: 2px solid #d7d7d7;
    border-radius: 5px;
    margin-bottom: 5px;
}



    .d-none{
        display: none;
        margin-top: 30px;
        font-weight: 700;
        font-size: 18px;
        line-height: 38px;
    }

    .dext{
        width: 100%;
        height: 320px;    
        display: flex;    
        flex-flow: column;
        align-items: center;
        margin-top: 32px;
        margin-bottom: 32px;
    }


    .cformblock {
        display: flex;
        flex-wrap: wrap;
        }
        
        .cformblock_item-one{
            display: flex;
            flex-grow: 1;
            flex-basis: 300px;
            padding-bottom: 50px;
} 

.cformblock_item-two{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-basis: 300px;
    padding-bottom: 50px;
} 

.policytext {
    color: var(--green1);
}

    /* -- котнтактная форма end -- */
    

    .hero__button {
        margin-top: 12px;
        display: inline-flex; /*центрирование пр исворачивании окна*/
        justify-content: center;  /*горизонт центрирование*/
        align-items: center;  /*вертик центрирование*/
        padding: 12px 20px;
        background-color: var(--green1);
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
        border-radius: 7px;    
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-decoration: none;
        color: #FFFFFF;
        cursor: pointer;
        border: none;
        font-family: inherit; /* наследование от родителя */
        transition: color 0.15s;
    }
    
    .hero__button:hover {
        background-color: var(--green2);     
    } 
    

    
/*---медиа запросы для Планшет----*/
@media (max-width: 1024px) {
    .card-box{
        flex-direction: column;
        align-items: center;
    }

    

    .card{
        margin-bottom: 32px;
    }   
    
    .errorpicarea {
width: 100%;
    }
    
    .errorpic{ 
    height: auto;
    width: 100%;
} 

.cardokszks_item {
    flex-direction: column;  
}
}





/*---медиа запросы для mobile----*/

@media (max-width: 768px) {
    
    .container {
        padding: 0;
    }

    .menu {
       /* display: none; */
        max-height: 0px;
        overflow: hidden;
        position: absolute;
        background-color: var(--green2); 
        text-align: center;
        right: 0;
        left: 0;
        margin-top: 20px;
    }

    .menu li a {
        color: var(--white);
        display: block;
        padding: 15px;
    }

    .menu li {
        transition: all .5s;
    }

    .menu li:hover {
        background-color: var(--green4);
    }


    .hamburger {
        display: block;
        padding: 20px 0;
    }

    #checkbox_toggle:checked ~ .menu {
display: block;
max-height: 100%;
transition: all .5s;
    }

#checkbox_toggle:checked ~ .hamburger .hamburger-line {
    background-color: transparent;
}

#checkbox_toggle:checked ~ .hamburger .hamburger-line::before {
    transform: rotate(-45deg);
    top: 0;
}

#checkbox_toggle:checked ~ .hamburger .hamburger-line::after {
    transform: rotate(45deg);
    top: 0;
}

.parallax_top-index{
    background: url(../img/indexpage/forest02.png); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 5vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/
}

.parallax_top-zks{
    background: url(../img/indexpage/forest02.png); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 5vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/
}

.parallax_top-oks {
    background: url(../img/indexpage/forest02.png); /*Здесь мы задаем фон*/
    background-repeat: no-repeat; /*Запрещаем повтор изображения на фоне, для того что бы при уменьшении не было других копий фона*/
    background-position: center; /*Центрируем фон*/
    background-size: cover; /*Указываем что наш фон будет РАВНОМЕРНО заполнять блок*/
    background-attachment: fixed;
    padding: 5vh 0; /*Центрируем текст*/
    text-align: center; /*Центрируем текст*/
}

.parallax_top-index h1 {
font-weight: 700;
font-size: 30px;
line-height: 44px;
letter-spacing: 0px;
}

.parallax_top-zks h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
}

.parallax_top-oks h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
}


.card-box{
    padding-top: 32px;
}


.card{
    width: 100%;
}

.hero__title {
    font-weight: 700;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
}

.hero__subtitle {
padding: 0 7px
}

.zks_advantag_item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cformblock_item-two{
    display: none;

} 

.contact-block__info {
width: 80%;
padding: 0 20px;
}

}