html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:var(--color-black);text-decoration:none}mark{background-color:#ff9;color:var(--color-black);font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}ul{list-style: none;}input:focus,select:focus,textarea:focus{outline: none;}





html{overflow-x: hidden; position: relative;}


:root{
    --black: #071714;
    --yellow: #E1EB13;
}


body{
    font-family: "Inter", sans-serif;
	background: #fff;
    font-size: 16px;
    line-height: 1.2;
	color: var(--black);
	min-width: 320px;
    font-weight: normal;
    position: relative;
    padding: 0;
}

.container{max-width: 1420px; margin: 0 auto; box-sizing: border-box; width: 100%;}






header{position: fixed; top: 25px; left: 0; width: 100%; z-index: 600; transition: all 0.2s;}
    header.f-nav .data{padding: 7px 15px 7px 30px; box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.1);}
    header .data{background: #fff; padding: 15px 15px 15px 30px; border-radius: 100px; transition: all 0.2s;}
    header .flex{align-items: center}
    header ul{display: flex; align-items: center; justify-content: center; gap: 40px}
        header ul li a{color: var(--black); border-bottom: 1px solid transparent;}
            header ul li a:hover{border-bottom: 1px solid var(--black);}
    header .pull{display: none;}






#promo{background: url("../img/promo_bg.webp") 50% 100% no-repeat; background-size: cover; color: #fff; padding: 260px 0 40px;}
    #promo .text{max-width: 840px; position: relative; z-index: 3}
    #promo .image{position: absolute; bottom: 0; left: calc(50% + 1px)}
    #promo h1{text-transform: uppercase; margin-bottom: 30px; font-weight: 700; font-size: 56px;}
        #promo h1 span{color: var(--yellow);}
    #promo h2{margin-bottom: 40px; font-size: 25px; font-weight: normal; max-width: 790px;}
    #promo .flex{justify-content: flex-start; gap: 40px; align-items: center;}
    #promo .online{font-size: 18px;}
    #promo .counts{margin-top: 150px; width: 100%; position: relative; z-index: 3; padding: 20px 0 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.5); font-size: 18px; font-weight: 600;}
        #promo .counts .count{font-style: italic; font-size: 52px; font-weight: 500; line-height: 1.6;}
    #promo:after{position: absolute; bottom: 0; left: 0; width: 100%; height: 240px; content: ''; background: linear-gradient(0deg, #041B11 0%, rgba(4, 27, 17, 0) 100%);}





#about{background: #F3F8F4}
    #about .flex{align-items: center}
    #about .image{width: 635px;}
        #about .image img{width: 100%; border-radius: 20px;}
    #about .text{width: calc(100% - 700px);}





#services{}
    .items__service img{width: 100%; height: 280px; margin-bottom: 20px; border-radius: 20px;}
    .items__service .title{margin-bottom: 20px; font-size: 22px; font-weight: 600;}
    .items__service strong{display: block; margin-bottom: 3px;}
    .items__service .btn{display: none; justify-content: space-between; margin-top: 15px;}
    .items__service .btn img{width: auto; height: auto; margin: 0;}





#reviews{}
    #reviews .block-title{text-align: center;}
    .item__review{position: relative; overflow: hidden; border-radius: 20px; cursor: pointer;}
        .item__review img{width: 100%; height: 510px;}
        .item__review .play{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 23, 20, 0.5) url("../img/play.svg") 50% 50% no-repeat; transition: all 0.2s;}
        .item__review:hover .play{background-color: rgba(0, 0, 0, 0.4);}
        .item__review video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: none;}





#contacts{background: url("../img/bg_contacts.webp") 50% 100% no-repeat; background-size: cover; overflow: inherit;}
    #contacts .text{max-width: 580px; position: relative; z-index: 3}
    #contacts .image{position: absolute; bottom: 0; left: calc(50% + 10px)}
    #contacts p{margin-bottom: 30px; font-size: 25px;}







.content h3{margin-bottom: 20px; font-weight: 600; line-height: 23px;}
.content ul{margin-bottom: 20px}
    .content ul li{padding: 0 0 0 32px; margin-bottom: 10px; background: url("../img/ls.svg") 0 0 no-repeat;}
        .content ul li:last-child{margin: 0}











footer{padding: 30px 0 15px; background: var(--black); text-align: center; color: rgba(255, 255, 255, 0.5);}
    footer .flex{align-items: center;}
    footer .copyright{padding: 15px 0 0; margin-top: 30px; border-top: 1px solid #fff;}
    footer ul{display: flex; align-items: center; justify-content: center; gap: 40px}
        footer ul li a{color: #fff; border-bottom: 1px solid transparent;}
            footer ul li a:hover{border-bottom: 1px solid #fff;}
    footer .btn{color: #fff; border-color: #fff;}
        footer .btn:hover{background: rgba(255, 255, 255, 0.4);}





.section{padding: 100px 0;}




.s__data{padding-bottom: 40px; border-bottom: 1px solid var(--black); margin-bottom: 40px; align-items: flex-end!important;}
    .s__data .block-title{margin-bottom: 0; max-width: 400px;}
    .s__data .block-note{max-width: 46%;}


.block-note{line-height: 23px;}


.block-title{margin-bottom: 30px;}
    .block-title span{display: inline-block; margin-bottom: 15px; line-height: 40px; padding: 0 20px; border-radius: 100px; font-weight: normal; border: 1px solid var(--black); font-size: 18px;}
    .block-title strong{display: block; font-size: 30px; font-weight: normal;}
    .block-title.bt-large strong{font-weight: 600; font-size: 45px;}





.section-note{text-align: center; font-weight: 600; font-size: 32px; margin: 0 auto 40px; max-width: 1000px}















section{position: relative; z-index: 2; overflow: hidden;}






.flex{display: flex; justify-content: space-between; flex-wrap: wrap;}
    .flex.flex__center{justify-content: center;}
    .flex.flex__start{justify-content: flex-start; gap: 16px;}
    .flex.flex__end{justify-content: flex-end;}




.grid{display: grid; grid-template-columns: repeat(1,1fr); gap: 30px;}
    .grid.grid-2{grid-template-columns: repeat(2,1fr);}
    .grid.grid-3{grid-template-columns: repeat(3,1fr);}
    .grid.grid-4{grid-template-columns: repeat(4,1fr);}
    .grid.grid-5{grid-template-columns: repeat(5,1fr);}
    .grid.grid-6{grid-template-columns: repeat(6,1fr);}
    .grid.grid-7{grid-template-columns: repeat(7,1fr);}










section{box-sizing: border-box; position: relative;}







button{background: transparent;}




a,svg,svg path,rect{text-decoration: none; transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;}
	a:hover{transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a:focus{outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

svg,svg path,rect{transition: all 0.2s ease-out;}

img{display: block;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-width: 100%; height: auto; transition: all 0.2s ease-out; object-fit: cover;}
div{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}



.btn,.btn:after{font-family: "Roboto", sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; text-align: center; cursor: pointer; padding: 0; border: none; transition: all 0.2s ease-out; box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;}
	.btn:hover{transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}




.btn-white-tr{padding: 0 20px; border-radius: 100px; border: 1px solid var(--black); color: var(--black); gap: 20px; font-weight: 600; font-size: 16px; height: 56px;}
    .btn-white-tr:hover{background: var(--yellow);}



.btn-white{padding: 0 7px 0 20px; border-radius: 100px; border: 1px solid #fff; background: #fff; color: var(--black); gap: 20px; font-weight: 600; font-size: 18px; height: 64px;}
    .btn-white:hover{background: var(--yellow);}





@media screen and (max-width: 1440px){
    .container{max-width: 1100px}


    #promo .image{left: calc(50% + 100px);}
}



@media screen and (max-width: 1140px){
    .container{max-width: 100%; padding: 0 16px;}

    html,body{overflow-x: hidden;}

    header .data{padding: 7px 16px!important}
    header .logo{max-width: 120px;}
    header nav ul{gap: 15px; font-size: 14px;}


    #promo{padding: 160px 0 40px;}
    #promo .text{max-width: 500px;}
    #promo h1{font-size: 32px;}
    #promo h2{font-size: 20px;}
    #promo .image{width: 500px; left: calc(100% - 400px)}
    #promo .counts{margin-top: 100px;}
    #promo .counts .count{font-size: 40px;}


    #about .image{width: 100%; order: 1}
    #about .text{width: 100%; margin-bottom: 20px; order: 0}


    .s__data .block-title{max-width: 100%; width: 100%; margin-bottom: 30px;}
    .s__data .block-note{max-width: 100%;}


    .grid.grid-3{grid-template-columns: repeat(2, 1fr);}


    #contacts .image{width: 350px; left: calc(100% - 240px)}


    footer nav{display: none;}
}




@media screen and (max-width: 767px){
    .section{padding: 50px 0;}

    .block-title.bt-large strong{font-size: 30px;}


    header{top: 0;}
    header .container{padding: 0}
    header .data{border-radius: 0;}
    header .btn{display: none;}
    header nav{display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border-bottom: 5px solid var(--black);}
    header nav ul{display: block;}
    header nav ul li a{display: block; padding: 16px; text-transform: uppercase;}
    header nav ul li{border-top: 1px solid rgba(0, 0, 0, 0.2);}
    header .pull{display: flex; width: 32px; height: 32px; background: url("../img/pull.svg") 50% 50% no-repeat; background-size: 80%;}


    #promo{z-index: 500;}
    #promo{padding: 100px 0 40px;}
    #promo .text{z-index: 10}
    #promo .btn{position: fixed; bottom: 0; left: 0; width: 100%; z-index: 500; border-radius: 0; background: var(--yellow); border: none; z-index: 20}
    #promo .counts{font-size: 14px; margin-top: 200px}
    #promo .counts .count{font-size: 30px;}
    #promo .image{width: 350px; left: calc(100% - 280px)}


    .grid.grid-3{grid-template-columns: repeat(1, 1fr);}


    #contacts .image{display: none;}

    .items__service .btn{display: flex; width: 100%;}

    .btn{width: 100%;}


    footer{padding: 30px 0 100px;}
    footer .logo{margin: 0 auto;}
    footer .info{display: none;}
}