*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat',sans-serif;
}
h1{
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;   
}

h2{
    font-size: 30px;
    font-weight: 600;
    line-height: 40px;
    color: #444444;
    text-align: center;
    text-transform: uppercase;
}
h2 > span {
    position: relative;
}
h2 > span::after{
    content: "";
    height: 2px;
    background: #444444;
    width: 40%;
    margin-left: -20%;
    left: 50%;
    top:120%;
    position: absolute;
}
h3 {
    font-size: 24px;
    font-weight: 600;
}
.services, .how_it_works, .team, .blog, .contact, footer {
    padding: 60px 0;
}
.main-wrapper{
    margin: 0 auto;
    max-width: 1170px;
    padding: 0 15px;
}
.active body{
    overflow: hidden;
}
.bb{
    border: 1px solid red;
}

header{
    background-color: #161c35;
    height: 65px;
    position: fixed;
    width: 100%;
    left: 0;
    top:0;
    z-index: 10;
}
header .main-wrapper{
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-between;
    position: relative;
}
.main-menu {
    margin-left: auto;
}
.logo-header{
    z-index: 50;
}
.main-menu > ul > li {
    display: inline-block;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: white;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
}
.header_burger {
    z-index: 3;
}
.main-menu > ul{
    display: flex;
    position: relative;
    z-index: 3;

}
.main-menu > ul > li > a {
    text-decoration: none;
    color: inherit;
}

.main-menu > ul > li:last-child {
    margin-right: 0;
}

.main-menu > ul > li::after {
    content: '';
    width: 10%;
    height: 3px;
    background: #00D5C3;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 25px;
    opacity: 0;
    transition-duration: 0.3s;
}

.main-menu > ul > li:hover::after {
    opacity: 1;
    width: 100%;
}
.header::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #161c35; 
    z-index: 2;
}
@media (max-width:800px) {
    .header_burger {
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
    }
    .header_burger span{
       position: absolute;
       background: white;
       width: 100%;
       left: 0;
       height: 2px;
       top: 9px;
       transition: all 0.3s ease 0s;
   }
   .header_burger::before ,
   .header_burger::after {
          content: "";
          background: white;
          position: absolute;
          width: 100%;
          height: 2px;
          left: 0;
          transition: all 0.3s ease 0s;
          
   }
   .header_burger::before {
       top: 0;
   }
   .header_burger::after {
       bottom: 0;
   }

   .active .header_burger::before{
       top: 9px; 
       transform: rotate(45deg); 

   }
   .active .header_burger::after{
       bottom: 9px; 
       transform: rotate(-45deg); 
   }
   .active .header_burger span{
       transform: scale(0); 
   }
   .main-menu {
       position: fixed;
       top: 0;
       left: -100%;
       overflow: auto;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.801);
       padding-top: 100px;
       transition: all 0.3s ease 0s;
   }
   .active .main-menu{
       left: 0;
   }
   .main-menu ul {
       flex-direction: column;
       text-align: center;
   }
   .main-menu > ul > li{
       margin-bottom: 20px;
       margin-left: 0;
       margin-right: 0;
   }
   body.lock{
       overflow: hidden;
   }

};
.main{
   margin-top: 100px;    
}
.main-bord{
    margin-top: 65px;
    height: 500px;
    background: url(img/src/bg.jpg) fixed no-repeat;
    background-size: cover;
    position: relative;
}
.main-bord::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(33, 43, 73, 0.6);
    z-index: 1;
}
.main-bord .main-wrapper{
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 2;
}

.main-bord_left-blok{
    width: 50%;
}
.main-board__image {
    margin: auto;
}
.main-bord h1 {
    color: #FFFFFF;
    padding: 25px 0 0 30px;
    position: relative;  
    margin-bottom: 35px;
}
.main-bord h1::after{
    content: "";
    width: 5px;
    height: 115px;
    position: absolute;
    background: #00D5C3;
    top: 0;
    left: 0;
    
}
.main-bord h1::before{
    content: "";
    width: 115px;
    height: 5px;
    position: absolute;
    background: #00D5C3;
    top: 0;
    left: 0;

}

.main-bord_left-blok>div:first-of-type{
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 45px;
}
.main-bord_left-blok>div:last-of-type{
    display: flex;
}

.main-bord_left-blok>div:last-of-type {
   gap: 20px;
}
.main-board__button-link{
    display: flex;
    align-items: center;
    width: 165px;
    height: 50px;
    border: 1px solid #00D5C3;
    font-size: 18px;
    border-radius: 0 5px 0 5px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 12px;
    transition-duration: 0.3s;
}
.main-board__button-link > i {
    margin-left: 20px;
    margin-right: 15px;
    font-size: 30px;
    color: #00D5C3;
    width: 26px;
    transition-duration: 0.3s;
}


.main-board__button-link_bold {
    font-size: 14px;
    font-weight: 600;
}
.main-board__button-link:hover{
    background: #00D5C3;

}
.main-board__button-link:hover>i{
    color: #fff;
}



.services__block-item {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.services__item {
    padding: 30px;
    flex: 0 0 32%;
    text-align: center;
    transition-duration: 0.3s;
    border-radius: 5px;
}

.services__item:hover {
    box-shadow: 0px 5px 25px 0px rgba(5, 5, 5, 0.2);
}
.box-icon {
    border: 1px solid #161C35;
    border-radius: 50%;
    height: 108px;
    line-height: 108px;
    text-align: center;
    width: 108px;
    margin: 0 auto;
    transition-duration: 0.3s;
}
.box-icon > i {
    font-size: 54px;
    color: #161C35;
    line-height: 108px;
    transition-duration: 0.3s;
}

.services__item:hover .box-icon {
    background: #161C35;
}

.services__item:hover .box-icon > i {
    color: #FFFFFF;
}

.services__item > h3 {
    margin:23px 0;
    color: #161C35;
    text-align: center;
}

.services__item > p {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    line-height: 24px;
    margin-bottom: 20px;
    color: #666666;
}

.services__item > a {
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    color: #161C35;
    font-size: 18px;
    border-radius: 0 5px 0 5px;
    border: 1px solid #161C35;
    text-decoration: none;
    transition-duration: 0.3s;
}

.services__item > a:hover {
    background: #161C35;
    color: #FFFFFF;
}





/*.how_it_works{
    background: url(img/src/banner-bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
}
.how_it_works h2{
    color: #fff;
}
.how_it_works>.main-wrapper{
   position: relative;
   margin-top: 50px;
}
.works_kontent{
    display: flex;
    margin-top: 30px;
}
.left_blok_work_kontent{
    width: 50%;
}
.how_it_works>.main-wrapper>.works_kontent>img{
    margin: auto;
}
*/

.how_it_works {
    background: url(img/src/banner-bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
}

.how_it_works::after, .blog::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(33, 42, 73, 0.6);
    z-index: 1;
}
.how_it_works > .main-wrapper {
    position: relative;
    z-index: 2;
}

.how_it_works > .main-wrapper > .works_kontent {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.how_it_works h2{
    color: #FFFFFF;
}
.how_it_works h2 > span::after{
    background: #FFFFFF;
}
.left_blok_work_kontent {
    flex: 0 0 60%;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    line-height: 24px;
    color: #FFFFFF;

}
.left_blok_work_kontent  > h3 {
    margin-bottom: 30px;
}
.left_blok_work_kontent > ul {
    margin-top: 20px;
    list-style: none;
}

.left_blok_work_kontent> ul > li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 15px;
}

.left_blok_work_kontent > ul > li::before {
    content: '\f105';
    position: absolute;
    left: 0;
    font-family: fontawesome;
    color: #00D5C3;
}




.team-container{
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 30px;
}


.person{
    flex: 0 0 255px;
    display: flex;
    flex-direction: column;
}
.person_infa{
    padding: 20px;
    box-shadow: 4px 4px 18px 0px #cccccc;
}
.person_infa > span, .person_infa > h3 {
    display: block;
}
.person_infa>h3{
    color: #666666;
}
.person_infa>span{
    color: #666666;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}
.person>figure{
    position: relative;
    height: 260px;
    overflow: hidden;
}
.person> figure  > figcaption {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(22, 28, 53, 0);
    display: flex;
    justify-content: center;
    transition-duration: 0.1s;
}
.person > figure  > figcaption > a {
    text-decoration: none;
    width: 30px;
    height: 30px;
    border: 1px solid #FFFFFF;
    margin: 10px;
    margin-top: auto;
    margin-bottom: 20px;
    color: white;
    line-height: 30px;
    text-align: center;
    transition-duration: 0.5s;
}

.person > figure  > figcaption > a:nth-child(1) {
    transform: translateY(50px);
}

.person> figure  > figcaption > a:nth-child(2) {
    transform: translateY(90px);
}

.person > figure  > figcaption > a:nth-child(3) {
    transform: translateY(130px);
}

.person > figure  > figcaption > a:hover {
    color: #00D5C3;
    background: white;
}
.person > figure > img {
    transition-duration: 1s;
} 

.person > figure:hover > img {
    transform: scale3d(1.1, 1.1, 1);
}

.person> figure:hover > figcaption {
    background: rgba(22, 28, 53, 0.7);
}

.person> figure:hover > figcaption > a {
    transform: translateY(0px);
}




.blog {
    background: url(img/src/blog-bg.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.blog>.main-wrapper{
    position: relative;
    z-index: 2;
}

.blog-container{
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.blog-cord{
    height: 275px;
    flex: 0 0 49%;
    display: flex;
    background-color: white;
    margin-bottom: 22px;
    text-decoration: none;
}
.card-1{
    background: url(img/src/6-850x850.jpg);
}
.card-2{
    background: url(img/src/5-850x850.jpg);
}
.card-3{
    background: url(img/src/2-850x850.jpg);
}
.card-4{
    background: url(img/src/1-850x850.jpg);
}
.img_blog-cord{
   flex: 0 0  50%;
   height: 100%;
   transition-duration: 0.3s;
   position: relative;
   background-position: center center;
   background-size: cover;
   filter: grayscale(0.9);
}
.blog h2{
    color: #fff;
}
.blog h2 > span::after{
    background: #FFFFFF;
}
.blog-cord:hover>.img_blog-cord {
    filter: grayscale(0);
}
.blog-cord_content>span{
    font-size: 12px;
    letter-spacing: 2px;
    color: #333;
}
.blog-cord_content{
    text-align: center;
    padding: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-weight: 600;
    text-transform: uppercase;
}
.blog-cord_content>p{
font-size: 18px;
letter-spacing: 1px;
color: #161C35;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.blog_button-link{
    display: inline-block;
    border: 1px solid #00D5C3;
    font-size: 18px;
    border-radius: 0 5px 0 5px;
    text-decoration: none;
    color:  #00D5C3;
    transition-duration: 0.3s;
    margin-top: 30px;
    padding: 10px 30px;
}
.blog>.main-wrapper{
    text-align: center;
}
.blog_button-link:hover{
   background:  #00D5C3;
   color: #fff;
}
.contact .map {
    margin-top: 30px;
}
.form{
    height: 200px;
    background: url(img/src/bg.jpg) no-repeat fixed;
    background-size: cover;
    position: relative;
}
.form::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(33, 43, 73, 0.6);
    z-index: 1;
}
.form>.main-wrapper{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.form__main-text>span{
    color: #fff;
    font-weight: 600;
}
.form__main-text{
    font-size: 20px;
    font-weight: 300;
    color: #00D5C3;
    margin-bottom: 20px;    
}
input[type="email\ "]{
    background: transparent;
    border: 1px solid #00D5C3;
    color: #FFFFFF;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding: 10px;
    width: 450px;
}
input:focus{
    border: 1px solid #64ffed;
    outline: none;
}
button{
    background: #00D5C3;
    border: 1px solid #00D5C3;
    color: #FFFFFF;
    font-size: 22px;
    transition-duration: 0.3s;
    width: 100px;
}
.form form {
    display: flex;
    justify-content: center;
}
form>button:hover{
   background: #fff;
   border: 1px solid #fff;
   color: #00D5C3;
   cursor: pointer;
}
.form input::-webkit-input-placeholder {
    color: rgb(204, 204, 204);
}
footer>.main-wrapper{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.social{
    margin: 20px;
}
.social > a {
    color: #161C35;
    font-size: 16px;
    margin: 10px;
    text-decoration: none;
    position: relative;
    width: 20px;
    text-align: center;
    display: inline-block;
    transition-duration: 0.3s;
}
.social > a::before {
    content: '';
    width: 25px;
    height: 25px;
    border: 1px solid #161C35;
    transform: rotate(45deg);
    position: absolute;
    left: -3px;
    top: -5px;
    transition-duration: 0.3s;
    z-index: -1;
}
@media  (max-width: 1150px) {
    .team-container {
        overflow-y: scroll;
        padding-bottom: 20px;
    }

    .person{
        margin-right: 10px;
    }

    .person:last-of-type {
        margin-right: 0
    }

    .services__item {
        border: 1px solid #161c356e;
    }

 
}
@media  (max-width: 1150px) {

    .how_it_works > .main-wrapper > .works_kontent{
        flex-wrap: wrap;
        justify-content: center;    
    }
    .left_blok_work_kontent {
        flex-grow: 1;
        margin-bottom: 20px;
    }

}
@media  (max-width: 900px) {
   
  

}
@media  (max-width: 920px) {
    .services__item > p {
        flex-shrink: 1;
        overflow: hidden;
    }
    .services__block-item {
        flex-wrap: wrap;
        justify-content: center;
    }
    .services__item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .services__item {
        flex: 0 0 47%;
        margin: 10px;
    }
}
@media  (max-width: 700px) {
    .services__item {
        flex: 0 0 80%;
    }
}
@media  (max-width: 920px){
        .blog-container{
            flex-wrap: wrap;
        }
        .blog-cord
        {
             flex-basis: 100%;
        }
}
@media  (max-width: 600px){
    .main-wrapper>form{
        width: 450px;
    }
}
@media  (max-width: 480px){
    .main-wrapper>form{
        width: 320px;
    }
    .form__main-text {
        font-size: 16px;

    }
}
@media  (max-width: 385px){
    input[type="email\ "] {
        width: 217px;
    }
    button{
        width: 70px;
    }
    .services__item {
        flex: 0 0 95%;
    }
}
@media (max-width: 348px)
{
.services__item {
    
    margin-left: 0;
    margin-right: 0;
}
}
@media  (max-width: 388px){
    .main-bord_left-blok>div:last-of-type {
     flex-wrap: wrap;
    }
}
@media  (max-width: 520px){
    .blog-cord{
     flex-direction: column;
     height: auto;
    }
    .img_blog-cord{
        min-height: 300px;
    }
}

@media (max-width:414px) {
    .work-img{
        display: none;
    }
}

@media (max-width:670px) {
    .main-bord h1 {
        font-size: 35px;
        line-height: 45px;
    }
    .main-bord h1::before {
       width: 100px;
    }
    .main-bord h1::after {
        height: 100px;
     }
}
@media (max-width:400px) {
    .main-bord h1 {
        font-size: 24px;
        line-height: 34px;
    }
    .main-bord_left-blok>div:first-of-type {
        font-size: 13px;
    }
    .main-bord h1::before {
       width: 65px;
    }
    .main-bord h1::after {
        height: 65px;
     }
}
@media (max-width:924px) {
    .main-board__image{
        display: none;
    }
    .main-bord_left-blok{
        margin-top: 20px;
        width: auto;
    }
    .main-bord .main-wrapper{
        flex-wrap: wrap;
    }
    .main-bord{
        flex-flow: wrap;
        height: auto;   
    }
    .main-bord_left-blok>div:last-of-type{
        justify-content: center;
        margin-bottom: 30px;
    }
    /* .left_blok_work_kontent img{
        display: none
    } */

};
@media (max-width:354px) {
    input[type="email\ "] {
        width: 185px;
    }

}


@media  (max-width: 425px){
   header{
    height: 55px;
   }
   .logo-header {
    width: 50%;
   }
   .main-bord {
    margin-top: 55px;
   }
}