@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

body {
    font-family: "Roboto", Arial, sans-serif;
    color: #000;
}

.navigation, .service-image, .header-navigation-item, .menu {-webkit-transition: all .2s;-o-transition: all .2s;transition: all .2s;}


.header-items {display: flex; align-items: center; justify-content: space-between; padding: 18px 0;}
.header-logo {width: 45px;}
.header-navigation {display: flex; align-items: center; gap: 45px;}
.header-navigation-item {color: #000;}
.header-right {display: flex; align-items: center; gap: 20px;}
.header-menu {display: none;}
.header-navigation-item:hover {color: #f5914f;}
.header-telegram-button {display: block; width: 37px;}

.home {padding: 40px 0 80px 0;}
.home-items {display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px;}
.home-cover {width: 50%;}
.home-tips {width: 25%; display: flex; flex-direction: column; justify-content: space-around;}
.home-tip {text-transform: uppercase; font-weight: 800; font-size: 18px; width: 100%; border-radius: 12px; padding: 20px; border: 2px dashed #F5914F; text-align: center;}
.home-button {text-align: center;}
.home-mobile-cover {display: none;}
.home-button .button {font-size: 19px; line-height: 55px;}

.header-menu {width: 28px; flex-wrap: wrap; align-items: center; height: 24px; cursor: pointer;}
.header-menu-line {height: 1px; background: #212b36; width: 100%;}

.button {font-size: 15px; line-height: 45px; cursor: pointer; text-align: center; padding: 0 20px; border-radius: 10px; background: #F5914F; color: #fff; display: inline-block;}
.button:hover {background: #F5914F; color: #fff;}


.preview {margin-bottom: 80px; background: #53514f; overflow: hidden; position: relative;}
.preview-items {display: flex; background: #fff;}
.preview-content {width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 35px 40px 35px 0; background: rgb(84,82,80); background: linear-gradient(90deg, rgba(84,82,80,1) 0%, rgba(31,37,41,1) 100%); border-radius: 0 15px 15px 0;}
.preview-text {color: #fff; margin-bottom: 15px;}
.preview-sign {font-size: 25px; color: #fff;}
.preview-cover {position: absolute; top: 0; right: 0; width: 50%; height: 100%; min-height: 100%; background: url(../images/photo-right.png); background-position: top; background-size: cover;}

.title {font-size: 39px; font-weight: 600; color: #fff; margin-bottom: 15px;}
.title-orange {color: #F5914F;}
.title-color {color: #F5914F;}
.title-number-color {color: #F5914F; font-size: 19px; font-weight: 700;}
.title-bold-color {color: #F5914F; font-weight: 700;}
.title-count-buh {font-size: 25px;}

.about {margin-bottom: 80px; overflow: hidden; position: relative;}
.about-items {display: flex;}
.about-content {margin-left: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 35px 0 35px 40px;}
.about-cover {position: absolute; top: 0; left: 0; width: 50%; height: 100%; min-height: 100%; background: url(../images/photo-left.png); background-position: top; background-size: cover; border-radius: 0 15px 15px 0;}
.about-content .title {color: #000;}


.advantage {padding: 70px 0; margin-bottom: 80px; background: rgb(84,82,80); background: linear-gradient(90deg, rgba(84,82,80,1) 0%, rgba(31,37,41,1) 100%);}
.advantage .title {text-align: center; margin-bottom: 50px;}

.advantage-items {display: flex; flex-wrap: wrap; gap: 20px;}
.advantage-item {display: flex; width: calc(50% - 10px); color: #fff;}
.advantage-number {min-width: 60px; width: 60px; min-height: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border: 2px solid #f5914f; border-radius: 50%; margin-right: 20px; font-size: 35px; font-weight: 900; color: #f5914f;}


.step .title {color: #000; text-align: center;}
.step-subtitle {color: #F5914F;}
.subtitle {text-align: center; font-size: 21px; margin-bottom: 50px;}

.step {margin-bottom: 80px;}
.step-items {display: flex; gap: 20px;}
.step-item {display: flex; width: calc(33.333% - 10px);}
.step-container {width: 100%; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .13); border-radius: 15px; border-bottom: 6px solid #f5914f;}
.step-header {border-bottom: 1px solid #e9e9e9; font-size: 25px; font-weight: 600;}
.step-header, .step-subtitle {padding: 20px;}
.step-content {padding: 0 20px 20px 20px;}
.step-subtitle {font-size: 19px; line-height: 28px; font-weight: 500;}



.service {padding: 70px 0; margin-bottom: 80px; background: rgb(84,82,80); background: linear-gradient(90deg, rgba(84,82,80,1) 0%, rgba(31,37,41,1) 100%);}
.service .title, .partner .title {text-align: center; color: #F5914F;}
.service .subtitle {color: #fff;}
.service-items {display: flex; flex-wrap: wrap; gap: 20px;}
.service-item {display: flex; width: calc(16.6666% - 17px);}
.service-container {display: flex; align-items: center; justify-content: center; width: 100%; background: #fff; padding: 20px; border-radius: 12px; position: relative;}
.service-button {width: 20px; height: 20px; position: absolute; top: 10px; right: 10px;}
.service-image {display: flex; align-items: center; justify-content: center;}
.service-image img {width: 120px;}



.partner {margin-bottom: 80px;}
.partner .title {margin-bottom: 60px;}
.partner-items {display: flex; flex-wrap: wrap; gap: 60px;}
.partner-item-logo {display: flex; align-items: center; gap: 20px;}
.partner-item-logo-image {width: 110px; min-width: 110px;}
.partner-item-logo-title {font-size: 22px; text-transform: uppercase;}



.team {padding: 70px 0; background: rgb(84,82,80); background: linear-gradient(90deg, rgba(84,82,80,1) 0%, rgba(31,37,41,1) 100%);}
.team .title {text-align: center; color: #F5914F; margin-bottom: 90px;}
.team-items {display: flex; flex-wrap: wrap; justify-content: space-around;}
.team-items + .team-items {padding-top: 120px;}
.team-item {display: flex; width: 270px;}
.team-container {width: 100%; background: #fff; border-radius: 12px; position: relative; padding: 50px 20px 20px 20px;}
.team-photo {left: 50%; top: 0; position: absolute; transform: translate(-50%, -50%); width: 90px; height: 90px; border-radius: 50%; overflow: hidden; border: 1px solid #fff;}
.team-post, .team-name, .team-phone {text-align: center;}
.team-post, .team-phone {font-size: 19px; font-weight: 500;}
.team-name {padding: 6px 0;}
.team-part-title {text-align: center; color: #fff; padding: 90px 0; font-size: 28px;}

.navigation {position: fixed; top: -200px; left: 0; width: 100%; background: #fff; box-shadow: 0 1rem 1.7rem rgba(0,0,0,.05); z-index: 999;}
.nav-fixed {top: 0;}


.service-item {cursor: pointer;}
.service-item:hover .service-image {transform: scale(1.1);}

.remodal-items {display: flex; align-items: center; gap: 20px;}
.remodal-image {width: 150px; min-width: 150px;}
.remodal-text {text-align: left;}

.menu {position: fixed; top: 0; left: -140%; width: 100%; height: 100%; z-index: 9999;}
.menu-container {box-shadow: 0 5px 35px 0 rgba(0, 0, 0, .16); width: 100%; height: 100%; background: #fff; position: relative; padding: 20px;}
.menu-logo {width: 60px; margin-bottom: 20px;}
.menu-navigation-item {display: block; padding: 15px 0; color: #000;}
.menu-navigation-item:hover {color: #000;}
.menu-close {position: absolute; top: 20px; right: 20px;}


@media (max-width: 1400px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {
    body, .subtitle {font-size: 16px;}
    .header-navigation {display: none;}
    .header-menu {display: flex;}
    .preview-items, .about-items {flex-direction: column;}
    .preview-content, .about-content {width: 100%; border-radius: 0; padding: 35px 20px 35px 20px; text-align: center;}
    .preview-cover, .about-cover {width: 100%; height: 460px; position: relative;}
    .preview .mid, .about .mid {padding-left: 0; padding-right: 0;}
    .about-content {margin-left: 0; order: 1;}
    .about-cover {order: 2;}
    .preview {margin-bottom: 0;}
    .advantage-item {padding: 0 30px;}
    .advantage-item, .step-item {width: 100%;}
    .step-items {flex-direction: column;}
    .home {padding: 40px 0;}
    .about {margin-bottom: 0;}
    .service-item {width: calc(33.333% - 17px);}
    .home-tip {padding: 8px;}
    .owl-nav {width: 100%!important; z-index: 999;}
    .team-items .team-item:nth-child(3) {margin-top: 80px;}

    .advantage-item:nth-child(1) {
        order: 1;
    }
    .advantage-item:nth-child(2) {
        order: 5;
    }
    .advantage-item:nth-child(3) {
        order: 2;
    }
    .advantage-item:nth-child(4) {
        order: 6;
    }
    .advantage-item:nth-child(5) {
        order: 3;
    }
    .advantage-item:nth-child(6) {
        order: 7;
    }
    .advantage-item:nth-child(7) {
        order: 4;
    }
    .advantage-item:nth-child(8) {
        order: 8;
    }
}

@media (max-width: 768px) {
    body, .subtitle {font-size: 15px;}
    .home-cover {display: none;}
    .home-tips {width: 50%; gap: 20px; justify-content: flex-start;}
    .home-tip {height: 120px; display: flex; align-items: center; justify-content: center;}
    .home-mobile-cover {max-width: 390px; margin: 0 auto 30px auto; display: block;}
    .advantage-item {padding: 0;}
    .title {font-size: 30px; line-height: 38px;}
    .preview-sign {font-size: 21px;}
    .advantage {padding: 40px 0; margin-bottom: 40px;}
    .home-items {flex-wrap: wrap; gap: 10px;}
    .home-tips {width: 100%; gap: 10px;}
    .home-tip {height: auto;}
    .service-item {width: calc(50% - 10px);}
    .team-item {width: 100%; margin: 30px 0;}
    .team-items .team-item:nth-child(3) {margin-top: 30px;}
    .team-container {max-width: 70%; margin: 0 auto;}
    .team-part-title {padding: 40px 0;}
    .team-items + .team-items {padding-top: 0px;}
    .remodal-items {flex-direction: column;}
    .header-items {padding: 11px 0;}
    .header-logo {width: 37px;}
    .home-button .button {font-size: 16px; line-height: 45px;}
    .advantage .title {margin-bottom: 30px;}
    .service, .team {padding: 50px 0; margin-bottom: 40px;}
    .team {margin-bottom: 0;}
    .subtitle {margin-bottom: 20px;}
    .partner-item-logo-image {width: 70px; min-width: 70px;}
    .partner-item-logo-title {font-size: 17px;}
}

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