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

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

iframe {display: block;}


.portfolio-result-file-item, .header-menu-item, .header, .owl-prev, .owl-next, .law-zoom, .help-body, .help-arrow, .help-title {-webkit-transition: all .2s;-o-transition: all .2s;transition: all .2s;}


.input {height: 52px; border-color: #fff;}
.input:focus {border-color: #fff;}

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

.header {background: #2b2b2b; box-shadow: 0 1px 13px rgba(0,0,0,.1); position: fixed; top: 0; left: 0; width: 100%; z-index: 20;}
.header-items {display: flex; align-items: center; height: 80px; justify-content: space-between;}
.header-logo {width: 90px;}
.header-menu {display: flex; align-items: center;}
.header-menu-item {margin: 0 14px; color: #fff;}
.header-menu-item:hover {color: #0bb697;}


.header-phone {display: flex; align-items: center; gap: 12px; color: #fff;}
.header-phone-icon {width: 27px;}

.offer {margin-top: 80px; background: url('../images/banner.jpeg'); background: url(../images/banner-2.jpg); background-position: center; background-size: cover;}
.offer-items {padding: 100px 0; gap: 20px; display: flex; align-items: center; justify-content: center;}
.offer-item {width: 50%;}
.offer-title {font-size: 55px; font-weight: 400; line-height: 65px; margin-bottom: 40px; color: #fff;}
.offer-description {font-size: 23px; color: #fff; margin-bottom: 40px;}

.offer-advantage {display: flex; align-items: flex-start; flex-direction: column; gap: 46px;}
.offer-advantage-item {display: flex; align-items: center;}
.offer-advantage-icon {width: 60px; height: 60px; background: #222222; border-radius: 50px; margin-right: 20px; display: flex; align-items: center; justify-content: center;}
.offer-advantage-icon img {width: 40px;}
.offer-advantage-title {color: #fff;}
.offer-button .button {line-height: 65px;}

.title {font-size: 39px; font-weight: 600; margin-bottom: 30px; text-align: center;}

.about {padding: 70px 0;}
.about-title, .team-title, .contact-title {font-size: 39px; font-weight: 600; margin-bottom: 30px;}
.about-title {margin-bottom: 20px;}
.about-items {display: flex; align-items: center;}
.about-content {padding-left: 45px;}
.about-video, .about-content, .team-content, .team-image {width: 50%;}
.about-advantage {margin-bottom: 25px;}

.about-advantage-items {display: flex; flex-direction: column; gap: 12px;}
.about-advantage-item {display: flex; align-items: center; gap: 12px;}
.about-advantage-title {background: #0bb697; color: #fff; padding: 3px 10px; border-radius: 7px;}



.why {background: #2b2b2b; padding: 70px 0; color: #fff;}
.why-items {display: flex; flex-wrap: wrap; gap: 30px;}
.why-item {width: calc(33.333% - 20px); gap: 10px; display: flex; align-items: center; flex-direction: column; padding: 25px; background: #333; border-radius: 15px; overflow: hidden;}
.why-icon {width: 55px; min-width: 55px; margin-bottom: 10px;}
.why-title {text-align: center; padding: 0 30px;}


.service {padding: 70px 0;}
.service-items {display: flex; flex-wrap: wrap; gap: 30px;}
.service-item {width: calc(33.333% - 20px); background: #fff; padding: 25px 20px; box-shadow: 0 5px 15px 0 rgba(0,0,0,.13); position: relative; overflow: hidden; border-radius: 15px;}
.service-container {display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center;}
/* .service-item:after {content: ""; position: absolute; top: -30px; right: -30px; transform: rotate(45deg); background: #0bb697; width: 50px; height: 50px;} */
.service-icon {width: 80px; min-width: 80px; padding: 15px; border-radius: 50px; background: #0bb698;}
.service-title {margin-bottom: 10px; text-align: center; min-height: 55px;}
.service-content {text-align: center;}

.service-button .button {border: 1px solid #0bb697;}
.service-mobile-button {display: none;}
.service-mobile-button .button {width: 100%;}


.feedback {background: #2b2b2b; overflow: hidden;}
.feedback-container {position: relative;}
.feedback-background {transform: translate(0%, -50%); position: absolute; width: 400px; top: 50%; left: 40px; z-index: 2;  opacity: .045;}
.feedback-items {display: flex; align-items: center; position: relative; z-index: 3; flex-wrap: wrap;}
.feedback-content {width: 60%; padding: 40px 100px 40px 0;}
.feedback-form {width: 40%; position: relative;}
.feedback-form {background: #333; padding: 60px 23px;}
.feedback-form-input {margin-bottom: 15px;}
.feedback-title {font-size: 35px; font-weight: 600; line-height: 55px; margin-bottom: 20px; color: #fff;}
.feedback-form-button .button {width: 100%;}
.feedback-form-button {padding-top: 30px;}
.feedback-description {color: #fff;}
.feedback-form-title {text-align: center; color: #fff; line-height: 34px; margin-bottom: 30px; font-size: 28px; font-weight: 600;}


.recommend {padding: 70px 0;}
.recommend-items {display: flex; flex-wrap: wrap; gap: 30px;}
.recommend-item {display: flex; align-items: center; width: calc(50% - 20px); gap: 20px; padding: 20px 20px; box-shadow: 0 5px 15px 0 rgba(0,0,0,.13); position: relative; overflow: hidden; border-radius: 15px;}
.recommend-number {width: 70px; min-width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; background: #0bb698; color: #fff; border-radius: 50%;}


.portfolio {background: #2b2b2b; padding: 70px 0;}
.portfolio .title {color: #fff;}
.portfolio-item {display: flex; padding: 20px; background: #fff; border-radius: 15px;}
.portfolio-problem {margin-right: 40px; padding-right: 40px; border-right: 1px dashed #2b2b2b;}
.portfolio-problem-title, .portfolio-result-title {font-size: 19px; line-height: 27px; font-weight: 600; margin-bottom: 20px;}
.portfolio-result-row {margin-bottom: 20px;}

.portfolio-result-file-items {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.portfolio-result-file-item {display: flex; align-items: center; gap: 10px; padding: 5px 15px; border-radius: 8px; background: #0cb699; color: #fff;}
.portfolio-result-file-item:hover {color: #fff; background: #089b82;}
.portfolio-result-file-icon {width: 25px;}

.portfolio-items .owl-item {opacity: 0; height: 0;}
.portfolio-items .active {opacity: 1; height: auto;}


.progress {padding: 70px 0;}
.progress-items {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px;}
.progress-item {border-left: 10px solid #0bb697; display: flex; align-items: center; width: calc(50% - 30px); padding: 20px 20px; box-shadow: 0 5px 15px 0 rgba(0,0,0,.13); position: relative; overflow: hidden; border-radius: 5px 15px 15px 5px;}
.progress-number {min-width: 80px; font-size: 40px; font-weight: 800; margin-right: 10px;}

.law {padding: 70px 0;}
.law-item {position: relative;}
.law-item:hover .law-zoom {opacity: 1;}
.law-zoom {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.70); border-radius: 15px;}
.law-zoom-icon {background: url(../images/zoom.svg); position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; width: 35px; height: 35px;}


.team {background: #2b2b2b; padding: 70px 0; color: #fff;}
.team-items {display: flex; align-items: center;}
.team-mobile {display: none;}
.team-count {display: flex; flex-wrap: wrap; gap: 20px;}
.team-count-item {display: flex; align-items: center; flex-direction: column; gap: 5px; width: calc(50% - 10px); background: #333; padding: 15px; border-radius: 15px; overflow: hidden;}
.team-count-value {font-size: 31px; font-weight: 600;}
.team-count-title {font-size: 21px; font-weight: 500;}
.team-count-subtitle {text-align: center;}
.team-text {margin-bottom: 30px;}
.team-count-other {font-size: 21px;}

.count {background: #2b2b2b; padding: 70px 0; color: #fff;}
.count-items {display: flex; align-items: flex-start; gap: 30px; padding-top: 30px;}
.count-item {text-align: center; width: calc(25% - 20px); background: #333; border-radius: 15px; overflow: hidden; padding: 20px;}
.count-value {font-size: 32px; font-weight: 800; margin-bottom: 20px;}


.marker {color: #0bb697;}

.manager-item {display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px 0 rgba(0,0,0,.13);}
.manager-container {padding: 20px;}
.manager-container ul li {margin-bottom: 14px; display: flex; align-items: center; gap: 20px;}
.manager-list-check {width: 10px; min-width: 10px; height: 10px; background: #0bb697; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 50px;}
.manager-container ul li:last-child {margin-bottom: 0;}
.manager-title {font-size: 23px; font-weight: 600;}
.manager-photo {max-height: 550px; max-width: 490px; overflow: hidden;}
.manager-list-title {max-width: 550px;}

.manager-list-dolj {margin-top: 20px; display: inline-block; background: #0bb698; padding: 5px 10px; color: #fff;}


.help {padding: 70px 0;}
.help-item .help-body {height: 0; margin: 0 20px;}
.help-item {margin-bottom: 20px;}
.help-item:last-child {margin-bottom: 0;}
.help-item-show .help-body {height: auto; padding: 25px 0;}
.help-title {border-left: 0px solid #0bb697; cursor: pointer; background: #fff; padding: 25px 20px; box-shadow: 0 5px 15px 0 rgba(0,0,0,.13); position: relative; overflow: hidden; border-radius: 5px 15px 15px 5px;}
.help-title:hover, .help-item-show .help-title {border-left: 8px solid #0bb697;}
.help-arrow {position: absolute; top: 50%; right: 25px; width: 15px; transform: translate(-50%,-50%);}
.help-item-show .help-arrow {transform: translate(-50%,-50%) rotate(180deg);}
.help-body {overflow: hidden;}



.contact {background: #2b2b2b; color: #fff;}
.contact-items {display: flex; align-items: center; flex-wrap: wrap;}
.contact-content {width: 60%; padding: 40px 0;}
.contact-form {width: 40%; position: relative;}
.contact-form {background: #333; padding: 60px 23px;}
.contact-feedback-item {display: flex; gap: 15px; margin-bottom: 35px;}
.contact-feedback-item:last-child {margin-bottom: 0;}
.contact-feedback-icon {width: 30px; min-width: 30px;}


.modal-container {position: relative; padding: 30px 50px;}
.modal-input-row {margin-bottom: 20px;}
.modal-input-row + .modal-input-row, .modal-info {margin-bottom: 35px;}
.modal-info {font-size: 14px;}
.modal-button .button {width: 100%; border: 1px solid #0bb697;}
.modal-title {font-size: 28px; font-weight: 600; margin-bottom: 20px; text-align: center;}
.modal-description {text-align: center; margin-bottom: 20px;}
.modal-input-row .input {border-radius: 0; border-bottom: 2px solid #0bb697; padding: 0;}


.modal-success {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border-radius: 15px; align-items: center; justify-content: center; font-size: 23px; font-weight: 600;}
.contact-success {background: #333; border-radius: 0; color: #fff;}
.is_visible {display: flex;}


@media (max-width: 1400px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {
    .header-menu {display: none;}
    .offer-advantage {flex-direction: column; align-items: flex-start;}
    .about-items {flex-direction: column;}
    .about-video, .about-content {width: 100%;}
    .about-content {padding-left: 0;}
    .why-item, .service-item {width: calc(50% - 20px);}
    .portfolio-item {flex-direction: column;}
    .portfolio-problem {padding-right: 0; margin-right: 0; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed #2b2b2b; border-right: 0;}
    .owl-nav {width: 100%!important; z-index: 99;}
    .owl-prev, .owl-next {background: #2b2b2b!important; color: #fff!important;}
    .team-items {flex-direction: column;}
    .team-content {width: 100%; margin-bottom: 30px;}
    .team-image {width: 100%;}
    .count-items {flex-wrap: wrap;}
    .count-item {text-align: left;}
    .progress-item, .count-item, .feedback-form, .feedback-content, .contact-content, .contact-form {width: 100%;}
    .about-title, .team-title, .feedback-title, .feedback-description, .contact-title, .team-text {text-align: center;}
    .about, .why, .service, .recommend, .portfolio, .count, .law, .team, .help, .progress {padding: 30px 0;}
    .about-title, .team-title, .feedback-title, .contact-title, .title {font-size: 29px; line-height: 39px;}
    .offer-items {padding: 50px 0;}
    .offer-title {font-size: 38px; line-height: 51px;}
    .feedback-content {padding: 40px 0;}
    .why-items, .service-items, .recommend-items, .progress-items, .count-items {gap: 20px;}
    .header-button, .team-pc {display: none;}
    .team-mobile {display: block;}
    .feedback-background {transform: translate(-50%, -50%); left: 50%;}
    .portfolio-result-file-title {white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 180px;}
    .header-logo {width: 80px;}
}

@media (max-width: 768px) {
    body {line-height: 1.4;}
    .why-item, .service-item, .recommend-item {flex-direction: row; width: 100%;}
    .service-container {flex-direction: row;}
    .why-title, .service-title {text-align: left;}
    .feedback-form, .contact-form {padding: 30px 23px;}
    .recommend-item {padding: 10px 20px;}
    .recommend-number {width: 50px; min-width: 50px; height: 50px;}
    .progress-item {padding: 15px 20px;}
    .count-value {margin-bottom: 5px;}
    .help-title {padding: 15px 60px 15px 20px;}
    .service-button {display: none;}
    .service-mobile-button {display: block;}
    .service-content {margin-bottom: 0;}
    .service-container {margin-bottom: 20px; justify-content: flex-start;}
    .why-title {padding: 0 20px;}
    .about-advantage {margin-bottom: 15px;}
    .about-advantage-item {align-items: flex-start;}
    .about-advantage-title {min-width: 100px; text-align: center;}
    body, .button {font-size: 16px;}
    .offer-items {flex-direction: column;}
    .offer-item {width: 100%;}
    .offer-advantage {margin-top: 15px; gap: 15px;}
    .offer-title {margin-bottom: 20px;}
    .offer-description {margin-bottom: 30px;}
    .team-count-item {width: 100%; flex-direction: row;}
    .manager-item {flex-direction: column; gap: 10px;}
    .manager-photo {max-height: 280px;}
    .manager-items .owl-item {opacity: 0; height: 0;}
    .manager-items .active {opacity: 1; height: auto;}
    .team-count-other {font-size: 31px;}
    .team-count-item {gap: 15px;}
    .team-count-subtitle {text-align: left;}
    .team-count-value {min-width: 130px;}
    .manager-list-check {width: 10px; min-width: 10px; margin-top: 9px;}
    .manager-container ul li {align-items: flex-start; gap: 10px; margin-bottom: 11px;}
    .manager-title {font-size: 19px;}
    .manager-container ul {margin-top: 20px;}
    .title {margin-bottom: 20px;}
}

@media (max-width: 480px) {
    .offer-button .button {width: 100%;}
}