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;}


@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}




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


:root{
    --black: #030519;
    --green: rgba(1,181,103,1);
}


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

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






header{position: absolute; top: 0; left: 0; width: 100%; color: #fff; font-size: 18px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); z-index: 200}
    header.page{background: var(--black); position: relative;}





#promo{height: 100vh; min-height: 600px; color: #fff; box-sizing: border-box;}
    #promo img{width: 100%; height: 100%;}
    #promo .data{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; padding: 100px 0; background: rgba(0, 0, 0, 0.65);}
    #promo .text{max-width: 600px}
    #promo h1{font-size: 54px; font-weight: 700; margin-bottom: 30px;}
        #promo h1 span{color: var(--green); text-decoration: underline;}
    #promo h2{font-size: 42px; font-weight: 700; margin-bottom: 30px;}
    #promo ul{margin-bottom: 50px; font-size: 26px; list-style: disc; font-weight: 600; padding-left: 50px;}
        #promo ul li{margin-bottom: 15px;}
            #promo ul li:last-child{margin: 0}





#services{padding: 100px 0;}
    #services .service-item:nth-child(4),#services .service-item:nth-child(5){width: calc(50% - 15px)}
    .service-item{box-sizing: border-box; border: 1px solid var(--black); width: calc(100%/3 - 15px); padding: 20px; position: relative; margin-bottom: 30px; transition: all 0.2s;}
        .service-item:hover{cursor: default; background: var(--green); color: #fff; border-color: var(--green);}
        .service-item .icon{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 25px;}
            .service-item .icon span{display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 90px; height: 90px; background: var(--black);}
            .service-item .icon .service-type{color: rgba(3,5,25,.15); font-size: 50px; font-weight: 700;}
        .service-item .title{font-weight: 700; font-size: 24px; margin-bottom: 15px;}
        .service-item ul{list-style: disc; padding-left: 30px;}
            .service-item ul li{margin-bottom: 5px;}
                .service-item ul li:last-child{margin: 0}





#about{padding: 100px 0; background: rgba(243,244,246,.5)}
    #about .flex{align-items: center1;}
    #about .image{width: calc(100% - 600px);}
        #about .image img{height: 100%;}
    #about .text{width: 560px;}
    #about .block-title{text-align: left;}
        #about .block-title span:after{display: none;}
    #about h3{font-size: 20px; font-weight: 700; margin-bottom: 30px;}
    #about ul{list-style: disc; padding-left: 30px; font-size: 18px; padding-bottom: 20px;}
        #about ul li{margin-bottom: 15px;}
            #about ul li:last-child{margin: 0}
    #about p{margin-bottom: 20px;}
    #about .btn{min-width: 270px;}





#contacts{background: rgba(17,23,57,1) url("../img/footer-bg.webp") 100% 50% no-repeat; background-size: auto 100%; color: #fff; padding: 100px 0;}
    #contacts .block-title{text-align: left;}
        #contacts .block-title span:after{display: none;}
    #contacts .data{align-items: center;}
    #contacts .consult{position: relative;}
        #contacts .consult img{position: absolute; bottom: 100%; left: -50px; margin-bottom: 50px}
    #contacts .text{position: relative; z-index: 4; max-width: 800px}
    #contacts h3{font-size: 32px; font-weight: 700; margin-bottom: 40px;}
    #contacts h4{color: var(--green); font-size: 26px; margin-bottom: 25px;}
    #contacts ul{font-size: 20px; padding-bottom: 50px;}
        #contacts ul strong{display: block; margin-bottom: 7px;}
        #contacts ul li{margin-bottom: 20px;}
            #contacts ul li:last-child{margin: 0}





#page{padding: 100px 0; box-sizing: border-box; min-height: calc(100vh - 130px)}
    #page .block-title{text-align: left;}
        #page .block-title span:after{display: none;}





.content{line-height: 1.4; font-size: 18px;}
    .content h2,.content h3,.content h4{font-size: 22px; font-weight: 700; margin-bottom: 20px;}
    .content p{margin-bottom: 20px;}
    .content a{color: var(--green); border-bottom: 1px solid var(--green);}
        .content a:hover{border-color: transparent;}








footer{padding: 40px 0; background: var(--black); color: #fff; font-size: 14px;}
    footer .flex{align-items: center;}
    footer ul{display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;}
        footer ul li a{color: #fff; border-bottom: 1px solid transparent;}
            footer ul li a:hover{color: var(--green); border-color: var(--green);}





#callback{position: fixed; bottom: 70px; right: 20px; z-index: 600;}
    #callback a{text-align: center; color: #fff; display: flex; flex-wrap: wrap;}
        #callback a span{width: 100%;}
        #callback a:hover{transform: translateY(-6px);}
        #callback img{width: 40px; height: 40px; margin: 10px auto 0;}




















.block-title{text-align: center; text-transform: uppercase; color: var(--green); margin-bottom: 25px; font-size: 32px;}
    .block-title span{position: relative;}
        .block-title span:after,.block-title span:before{position: absolute; top: calc(50% - 1px); width: 100px; height: 2px; background: var(--green); content: ''}
        .block-title span:after{left: -150px}
        .block-title span:before{right: -150px}





.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 30px; border-radius: 10px; border: 2px solid #fff; color: #fff; font-weight: 600; font-size: 20px; height: 70px;}
    .btn-white-tr:hover{background: rgba(1,181,103,.2);}


.btn-green{padding: 0 30px; border-radius: 10px; border: 2px solid var(--green); color: #fff; font-weight: 600; font-size: 20px; height: 70px; background: var(--green);}
    .btn-green:hover{background: transparent; color: var(--green);}


.btn-green-tr{padding: 0 30px; border-radius: 10px; border: 2px solid var(--green); color: var(--green); font-weight: 600; font-size: 20px; height: 70px;}
    .btn-green-tr:hover{background: var(--green); color: #fff;}




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


    .section-note{font-size: 24px;}
    .service-item{width: calc(50% - 15px)}


    #promo h1{font-size: 36px;}
    #promo h2{font-size: 28px;}
    #promo ul{font-size: 20px;}


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


    #contacts .consult img{display: none;}


    footer .flex{justify-content: flex-start; gap: 25px;}
    footer .copyright{width: 100%; order: 2}
    footer ul{width: 100%; order: 1; justify-content: flex-start;}
    footer .address{width: 100%; order: 0}
}


@media screen and (max-width: 767px){
    .container{padding: 0 20px;}
    .section-note{font-size: 20px;}


    #promo h2{font-size: 24px;}
    #promo .btn{width: 100%;}


    #about .btn{width: 100%;}


    #services,#about,#contacts{padding: 50px 0;}


    .service-item{width: 100%!important;}


    #contacts h3{font-size: 24px;}
    #contacts h4{font-size: 20px;}
    #contacts .btn{width: 100%;}
    #contacts ul{font-size: 18px}


    #callback{bottom: 20px; right: 16px;}
    #callback span{display: none;}


    footer ul{border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 20px 0;}
    footer ul li{width: 100%;}
}