/* SCC Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Bahnschrift"; /* Имя шрифта */
}

/* fonts */
@font-face {
    font-family: "Bahnschrift"; /* Имя шрифта */
    src: url(fonts/bahnschrift.woff); /* Путь к файлу со шрифтом */
}

.section_menu{
    width: 100%;  
    height: 100px;      
    display: flex;
    justify-content: center;
    padding: 0 150px;
    background: #459d47;
    position: fixed;
    z-index: 5;
}


.section_container{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section_logo{
    height: 80px;
    background-size: cover;
}

.section_ssylka{
    text-decoration: none;
    color: white;
    margin-left: 20px;
}

.animated_container{
    height: 100vh;
    width: 100%;
    background-image: url("img/background_big.webp");
}

.colortext{
    color: #cd272e;
}

.banner_in_animated{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.zag_banner{
    font-size: 100px;
    width: 100%;
    height: 100px;  
    color: #ececec;
}

.par_banner{
    text-align: center;
    position: absolute;
    margin-bottom: -200px;
    font-size: 40px;
    color: #e2e2e2;
}

.ssykka_in_animated{
    position: absolute;
    margin-bottom: -370px;
    text-decoration: none;
    background-color: #459d47;
    font-size: 33px;
    color: white;
    border-radius: 7px;
    padding: 5px;
}

.button_section{
    /* background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT4wX6jQOpxgV4q1ReWWnnOjxvIX9H6ZzNdw&usqp=CAU'); */
    width: 100px;
    height: 100px;
    background-size: cover;
}

/* О компании */
.section_kompany{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    text-align: center;
}

.container_o_kompanii{
    padding: 135px;
}

.zag_o_kompanii{
    font-size: 40px;
}

/* Что мы производим */
.productions{
    width: 100%;
    display: flex;
    background-image: url('img/wood_big.webp');
    background-size: cover;
}

.container_production{
    padding: 100px 120px 250px 80px;
}

.logo_pruduction{
    width: 100px;
}


.zag_production{
    font-size: 45px;
    color: white;
}

.par_production{
    color: white;
    font-size: 18px;
}

.container_tovar{
    display: flex;
    justify-content: space-between;
}

.tovar1{
    width: 400px;
    height: 200x;
    background-color: black;
    opacity: 0.9;
    justify-content: center;
    align-items: center ;
    display: flex;
    flex-direction: column;
    padding: 40px;
}

.zag_tovar1{
    color: white;
}

.kartinka_tovar1{
    width: 80px;
    height: 80px;
}

.tovar2{
    width: 400px;
    height: 200px;
    background-color: black;
    opacity: 0.9;
    justify-content: center;
    align-items: center ;
    display: flex;
    flex-direction: column;
}

.zag_tovar2{
    color: white;
}

.tovar3{
    width: 400px;
    height: 200px;
    background-color: black;
    opacity: 0.9;
    justify-content: center;
    align-items: center ;
    display: flex;
    flex-direction: column;
}

.kartinka2{
    width: 80px;
    height: 80px;
}

.kartinka3{
    width: 80px;
    height: 80px;
}

.zag_tovar3{
    color: white;
}

/* Приемущества */

.advantages{
    width: 100%;
    display: flex;
    background-color: #459d47;
    padding: 100px 150px 0px 150px;   
    flex-direction: column;
    align-items: center;
}

.container_advantanges{
    width: 1200px;

}

.advantages_wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.card{
    width: 100px;
    height: 200px;
    background-color: white;
    width: 23%;
    margin-bottom: 2vw;
    font-size: 20px;
    padding: 20px;
    border-radius: 10px;
}

.zag_advantages{
    color: white;
    text-align: center;
    padding: 0px 0px 30px 0px;
    font-size: 40px;
}

.cifra{
    font-size: 40px;
    color:darkgreen;
}

/* спецификация */
.specification{
    display: flex;
    width: 100%;
    padding: 150px 100px 100px 150px;
}

.container_specification{
    width: 100%;
   
}

.wrap_specification{
    border-bottom: 2px solid green;
    display: flex;
   justify-content: space-between;
   padding: 15px 0px 15px 0px;
}


.specification_zag{
    color:darkgreen;
    padding: 40px 0px;
    font-size: 40px;
}

.specification_h3{
    color: darkgreen;
    padding: 0px 80px 80px 0px;
}

/* стоимость */
.cost{
    display: flex;
    width: 100%;
}

.container_cost{
    width: 50%;
    padding: 150px;
}

.zag_cost{
    font-size: 40px;
}

.par_cost{
    font-size: 20px;
}

.container_cost2{
    background-image: url('img/wood.jpg');
    padding: 150px;
    width: 50%;
}

.zag_container2{
    font-size: 40px;
    color: white;
}

.podzag_cost2{
    color: white;
    font-size: 30px;
}

.par_cost2{
    color: white;
}

.mail_cost2{
    font-size: 20px;
    color: white;
}

.burger{
    width: 100px;
    display: none;
}

.download{
    width: 100px;
    background-color: #459d47;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    margin-left: 72%;
    margin-top: 2%;
}


.download2{
    width: 100px;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    margin-left: 62%;
    margin-top: 2%;
    border: solid green 2px;
}


@media (max-width: 768px){
    .section_menu{
            width: 100%;  
            height: 100px;      
            display: flex;
            justify-content: center;
            padding: 0 150px;
            background: #459d47;
            position: fixed;
            z-index: 5;
            flex-direction: row;
    }

    .nav_section{
        display: none   ;
    }

    .section_container{
        flex-direction: row-reverse;
        width: 768px;
    }

    .button_section{
        width: 100px;
        height: 100px;
    }

    .zag_banner{
        font-size: 70px;
    }

    .ssykka_in_animated{
        position: absolute;
        margin-bottom: -370px;
        text-decoration: none;
        background-color: #459d47;
        font-size: 25px;
        color: white;
        border-radius: 7px;
        padding: 5px;
    }

    .par_o_kompanii{
        font-size: 15px;
    }

    .logo_pruduction{
        width: 80px;
        height: 90px;
    }

    .par_production{
        font-size: 17px;
    }

    .container_tovar {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }

    .tovar1{
        width: 32%;
        height: 200px;
        font-size: 9px;
    }

    .tovar2{
        width: 32%;
        height: 200px;
        font-size: 10px;
    }

    .tovar3{
        width: 32%;
        height: 200px;
        font-size: 10px;
    }

    .card{
        width: 47%;
    }

    .zag_advantages{
        font-size: 27px;
    }

    .container_advantanges{
        width: 100%;
    }

    .cost{
        flex-direction: column;
    }

    .container_cost{
        width: 100%;
    }

    .container_cost2{
        width: 100%;
    }

    .download{
        width: 100px;
        background-color: #459d47;
        padding: 10px;
        border-radius: 5px;
        position: absolute;
        margin-left: 60%;
        margin-top: 2%;
    }
    
    
    .download2{
        width: 100px;
        padding: 10px;
        border-radius: 5px;
        position: absolute;
        margin-left: 45%;
        margin-top: 2%;
        border: solid green 2px;
    }


    .burger{
        width: 220px;
        display: block;
        overflow: hidden;
        background-color: #459d47;
        border: 0px;
    }

    .burger_kart{
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 320px) {
    .section_menu{
        width: 100%;  
        height: 100px;      
        display: flex;
        justify-content: center;
        padding: 0 210px;
        background: #459d47;
        position: fixed;
        z-index: 5;
        flex-direction: row;
    }

    .zag_banner{
        font-size: 42px;
    }

    .par_banner{
        font-size: 30px;
    }

    .ssykka_in_animated{
        margin-bottom: -460px;
    }

    .section_kompany{
        width: 100%;
    }

    .zag_o_kompanii{
        font-size: 32px;
    }

    .par_o_kompanii{
        font-size: 19px;
    }
    /* продукция */
    .container_production{
        width: 100%;
        padding: 0px 0px 20px 0px;
    }

    .container_tovar{
        flex-direction: column;
        padding: 0px 5px ;
    }

    .zag_production{
        font-size: 30px;
    }

    .tovar1{
        width: 290px;
    }

    .tovar2{
        width: 290px;
    }

    .tovar3{
        width: 290px;
    }

    .zag_tovar1{
        font-size: 20px;
    }

    .zag_tovar2{
        font-size: 20px;
    }

    .zag_tovar3{
        font-size: 20px;
    }

    /* адвантаджес */
    .advantages{
        width: 100%;
        padding: 0;
    }

    .container_advantanges{
        width: 100%;
        padding: 20px 0px 0px 0px;
    }

    .card{
        font-size: 16px;
        width: 300px;
    }

    /* спецификация */
    .specification{
        width: 100%;
        padding: 0px 0px 50px 0px;
    }

    .specification_zag{
        font-size: 30px;
    }

    .wrap_specification{
        flex-direction: column;
    }

    .container_cost{
        padding: 20px 0px;
    }

    .container_cost2{
        padding: 0;
        padding: 20px 0px;
    }

    .zag_cost{
        font-size: 25px;
    }

    .par_cost{
        font-size: 15px;
    }

    .zag_container2{
        font-size: 25px;
    }

    .podzag_cost2{
        font-size: 17px;
    }

    .download{
        width: 100px;
        background-color: #459d47;
        padding: 12px;
        border-radius: 5px;
        position: absolute;
        margin-left: 50%;
        margin-top: 2%;
    }
    
    
    .download2{
        width: 100px;
        padding: 10px;
        border-radius: 5px;
        position: absolute;
        margin-left: 15%;
        margin-top: 2%;
        border: solid green 2px;
    }

    .burger{
        width: 70px;
        position: absolute;
        margin-left: -280px;
        display: block;
        height: 100px;
    }

    .burger_kart{
        width: 70px;
        height: 100px;
    }   
}