* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  outline: none!important;
}
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #2B2C34;
  line-height: normal;
  position: relative;
}
img {
  display: block;
  text-decoration: none; 
  border: 0;
}
input {
 border: none;  
 outline: none!important; 
}
a {
text-decoration: none;
}
.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;   
}
.flex-wrap {
  -khtml-box-lines:multiple;
  -webkit-box-lines:multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap; 
}
.justify-content-between {
  -webkit-box-pack:justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.justify-content-center {
  -webkit-box-pack:center;
  -webkit-justify-content: center;
  justify-content: center;
}
.align-items-center {
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
}
.d-block {
  display: block;
}
.img-fluid {
max-width: 100%;
}
.text-bold {
font-weight: 700;
}
.h2 {
font-size: 36px;
font-weight: 900;
letter-spacing: 3.78px;
text-transform: uppercase;
margin-bottom: 48px;
}
.container {
  width: 100%;
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
}
.header-container {
  padding: 0 32px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 16px 0;
  z-index: 100;
}
.header__logo {
  margin-right: auto;
}
.header__nav {
border-radius: 86px;
background: #5F6C7B;
padding: 20px 41px;
margin-right: 27px;
}
.top-menu li {
  list-style: none;
}
.top-menu li:not(:last-child) {
  margin-right: 80px;
}
.top-menu li a {
font-family: 'Raleway', sans-serif;
font-weight: 700;
color: #fff!important;
}
.top-menu li a:hover {
  color: rgba(255,255,255,.8);
}
.header__phone a {
color: #2B2C34!important;
font-weight: 700;
letter-spacing: 2.1px;
text-transform: uppercase;
}
.header__phone a:hover {
color: rgba(43, 44, 52, .8)!important;
}
.promo {
  width: 1280px;
  max-width: 100%;
  padding-top: 173px;
  background: url(../img/house-bg-xs.png) 100% 44px no-repeat;
  background-size: auto 100%;
  margin: 0 auto 124px;
}
.promo__title {
font-family: 'Montserrat', sans-serif;
font-size: 64px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 54px;
}
.promo__list {
  margin-bottom: 166px;
}
.promo__list li {
list-style: none;
color: #000;
font-size: 24px;
font-weight: 500;
letter-spacing: 2.52px;
text-transform: uppercase;
margin-bottom: 30px;
}
.btn {
width: 302px;
max-width: 100%;
height: 76px;
line-height: 76px;
color: #fff!important;
font-weight: 700;
letter-spacing: 2.1px;
text-transform: uppercase;
text-align: center;
border-radius: 101px;
background: #3DA9FC;
cursor: pointer;
box-shadow: 10px 13px 25.7px 0px rgba(61, 169, 252, 0.25);
}
.btn:hover {
  background: rgba(61, 169, 252, .8);
}
.benefits {
  margin-bottom: 130px;
}
.benefits-item {
  height: 267px;
}
.benefits-item__pic {
  margin-bottom: 44px;
}
.benefits-item__pic img {
  margin: 0 auto;
}
.benefits-item__text {
color: #000;
font-size: 24px;
font-weight: 700;
letter-spacing: 2.52px;
text-transform: uppercase;
}
.benefits-item__text-xs {
  font-size: 20px;
  letter-spacing: 2.1px;
}
.services {
  margin-bottom: 116px;
}
.services__row {
  margin: 0 -40px;
}
.services-item {
  width: 25%;
  padding: 0 40px;
  margin-bottom: 80px;
}
.services-item__pic {
  margin-bottom: 32px;
}
.services-item__pic img {
border-radius: 30px;
overflow: hidden;
}
.services-item__name {
font-weight: 700;
letter-spacing: 2.1px;
text-transform: uppercase;
}
.workflow {
margin-bottom: 349px;
}
.workflow-list li {
  list-style: none;
  min-height: 62px;
  padding-left: 102px;
  counter-increment: step;
  position: relative;
  font-size: 28px;
font-weight: 600;
letter-spacing: 2.94px;
  margin-bottom: 48px;
}
.workflow-list li::before {
content: counter(step);
display: block;
width: 62px;
height: 62px;
line-height: 62px;
border-radius: 50%;
background: #094067;
text-align: center;
font-size: 40px;
font-weight: 700;
letter-spacing: 4.2px;
color: #fff;
position: absolute;
top: 0;
left: 0;
}
.projects {
  margin-bottom: 214px;
}
.projects__row {
  gap: 40px;
}
.projects-item {
  width: 580px;
  max-width: 100%;
  padding-bottom: 6px;
}
.projects-item__pic {
margin-bottom: 20px;
} 
.projects-item__pic img {
border-radius: 30px;
overflow: hidden; 
}
.projects-item__name {
height: 58px; 
font-size: 24px;
font-weight: 700;
letter-spacing: 2.52px;
margin-bottom: 36px;
}
.projects-item__info__row {
font-size: 24px;
font-weight: 500;
letter-spacing: 2.52px;
margin-bottom: 10px; 
}
.faq {
margin-bottom: 268px;
}
.faq-group {
  margin-bottom: 76px;
}
.faq-group__title {
position: relative;
font-size: 32px;
font-weight: 800;
letter-spacing: 3.36px;
text-transform: uppercase;
padding-right: 102px;
}
.faq-btn {
width: 22px;  
position: absolute;
top: 4px;
right: 16px;
font-size: 32px;
font-weight: 700;
line-height: 1;
letter-spacing: 3.36px;
cursor: pointer;
} 
.faq-group__text {
  display: none;
  padding-top: 16px;
  font-size: 30px;
  letter-spacing: 3.15px;
}
.text-spacing {
letter-spacing: 3.15px;
}
.fw-600 {
  font-weight: 600;
}
.feedback {
  padding: 31px 0 3px;
  margin-bottom: 147px;
  background: url(../img/feedback-bg-xs.png) 50% 0 no-repeat;
  background-size: cover;
}
.feedback .h2 {
text-align: center;
color: #fff;
font-size: 48px;
font-weight: 800;
letter-spacing: 4.08px;
text-transform: none;
margin-bottom: 76px;
}
.feedback-form__input,
.modal-form__input {
display: block;
width: 370px;
max-width: 100%;
height: 59px;
padding: 0 10px 0 20px;
font: 500 32px 'Inter', sans-serif;
letter-spacing: 2.72px;
color: #fff;
border-radius: 30px;
border: 1px solid #fff;
background: transparent;
margin: 0 auto 28px;
}
.feedback-form__input:last-child {
  margin-bottom: 0;
}
.feedback-form__input::placeholder {
font: 500 32px 'Inter', sans-serif;
letter-spacing: 2.72px;
color: #999898;
}
.feedback-form__input::-webkit-input-placeholder {
font: 500 32px 'Inter', sans-serif;
letter-spacing: 2.72px;
color: #999898;
}
.feedback-form__input:-ms-input-placeholder {
font: 500 32px 'Inter', sans-serif;
letter-spacing: 2.72px;
color: #999898;
}
.feedback-form__input::-moz-placeholder {
font: 500 32px 'Inter', sans-serif;
letter-spacing: 2.72px;
color: #999898;
}
.feedback-form__input:-moz-placeholder {
font: 500 32px 'Inter', sans-serif;
letter-spacing: 2.72px;
color: #999898;
}
.footer {
  color: #fff;
  padding: 9px 0 44px;
  background: #094067;
}
.footer-col {
  width: 405px;
  max-width: 100%;
}
.footer-col:last-child {
  width: 436px;
}
.footer__company {
font-size: 32px;
font-weight: 900;
letter-spacing: 3.36px;
text-transform: uppercase;
margin-bottom: 32px;
}
.footer-menu li {
  list-style: none;
}
.footer-menu li:not(:last-child) {
  margin-bottom: 24px;
}
.footer-menu li a,
.footer-menu li span {
font-size: 24px;
font-weight: 600;
letter-spacing: 2.52px;
color: #fff!important;
text-transform: uppercase;
cursor: pointer;
}
.footer-socials {
  padding-top: 20px;
}
.footer-socials__title {
font-size: 32px;
font-weight: 700;
letter-spacing: 3.36px;
text-transform: uppercase;
margin-bottom: 16px;
}
.footer-socials__item {
display: block;
width: 80px;
height: 80px;
margin: 0 20px 21px 0;
}
.footer__phone a {
color: #fff!important;
font-size: 32px;
font-weight: 700;
letter-spacing: 3.36px;
text-transform: uppercase;
}
.top-menu li a:hover,
.footer__phone a:hover,
.footer-menu li span:hover,
.footer-menu li a:hover {
color: rgba(255,255,255,0.8)!important;
}
.modal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}
.modal-inner {
  width: 100%;
  padding-top: 88px;
}
.modal-body {
width: 500px;
max-width: 100%; 
padding: 30px;
margin: 0 auto;
background: #fff;
position: relative;
}
.cls-btn {
width: 24px;
height: 24px;
text-align: center;  
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #2B2C34;
cursor: pointer;
}
.modal__title {
font-size: 28px;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
.modal-form__input {
font: 500 22px 'Inter', sans-serif;
color:  #2B2C34;
border-color: #2B2C34;
}
.modal-form__input::placeholder {
font: 500 22px 'Inter', sans-serif;
color: #999898;
}
.modal-form__input::-webkit-input-placeholder {
font: 500 22px 'Inter', sans-serif;
color: #999898;
}
.modal-form__input:-ms-input-placeholder {
font: 500 22px 'Inter', sans-serif;
color: #999898;
}
.modal-form__input::-moz-placeholder {
font: 500 22px 'Inter', sans-serif;
color: #999898;
}
.modal-form__input:-moz-placeholder {
font: 500 22px 'Inter', sans-serif;
color: #999898;
}
.modal-form__submit {
display: block;  
width: 370px;
max-width: 100%;
height: 59px;
padding: 0 10px 0 20px;
font: 500 22px 'Inter', sans-serif;
margin: 0 auto; 
}


@media screen and (min-width: 481px) {
 .promo {
  background: url(../img/house-bg.png) 100% 0 no-repeat;
} 
.feedback {
background: url(../img/feedback-bg.png) 50% 0 no-repeat;
background-size: auto 100%; 
}
}


@media screen and (max-width: 1199px) {
  body {
    font-size: 18px;
  }
  .services-item__pic {
    margin-bottom: 22px;
}
}

@media screen and (max-width: 1100px) {
  .header__nav {
    display: none;
  }
  .services-item__name {
    font-size: 14px;
    letter-spacing: 1.47px;
}
}

@media screen and (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }
  .services__row {
    margin: 0 -20px;
}
.services-item {
  padding: 0 20px;
  margin-bottom: 50px;
}
.benefits {
    margin-bottom: 100px;
}
.workflow,
.projects,
.faq {
    margin-bottom: 150px;
}
.faq-group {
    margin-bottom: 50px;
}
.faq-group__title {
  font-size: 26px;
  letter-spacing: 2.36px;
}
.faq-group__text {
  font-size: 24px;
  letter-spacing: 2.15px;
}
.benefits-item__text {
  font-size: 20px;
  letter-spacing: 2.1px;
}
  .footer {
    padding: 15px 0 25px;
  }
  .footer__company {
    font-size: 20px;
    letter-spacing: 2.1px;
    margin-bottom: 24px;
  }
  .footer-menu li a, 
  .footer-menu li span {
    font-size: 16px;
    letter-spacing: 1.68px; 
  }
  .footer-socials {
    padding: 0;
    margin-bottom: 22px;
  }
  .footer-socials__title {
    font-size: 20px;
    letter-spacing: 2.1px;
  }
  .footer__phone a {
    font-size: 24px;
    letter-spacing: 2.52px;
  }
}


@media screen and (max-width: 900px) {
.projects__row {
  display: block;
}
.projects-item:first-child {
  margin-bottom: 50px;
}
.projects-item__name {
  height: auto;
  margin-bottom: 20px;
}
}

@media screen and (max-width: 800px) {
  .promo {
padding-bottom: 50px;
}
  .promo__title {
    font-size: 40px;
  }
  .benefits-item {
    width: 33%;
  }
  .services-item {
    width: 50%;
  }
  .services-item__pic {
    margin-bottom: 12px;
  }
  .services-item__pic img {
    margin: 0 auto;
  }
  .services-item__name {
    width: 270px;
    max-width: 100%;
    margin: 0 auto;
  }
  .projects-item__pic {
   margin-bottom: 34px;
  }
}


@media screen and (max-width: 768px) {
.promo__title {
  font-size: 40px;
}  
.promo__list {
  width: 55%;
  margin-bottom: 50px;
}
.benefits__row {
display: block;
}  
.benefits-item {
width: 300px;
 height: auto;
margin: 0 auto; 
}
.benefits-item:not(:last-child) {
margin-bottom: 56px;
}
.workflow-list li {
min-height: 40px;  
font-size: 16px;
letter-spacing: 1.68px;
padding-left: 52px;
margin-bottom: 32px;
}
.workflow-list li::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  letter-spacing: 2.52px;
  top: calc(50% - 20px);
}
.workflow-list li:last-child::before {
  top: 0;
}
.projects {
  margin-bottom: 67px;
}
.faq-group {
    margin-bottom: 64px;
}
.faq-group__title {
  font-size: 16px;
  letter-spacing: 1.68px;
  padding-right: 56px;
}
.faq-btn {
  width: 16px;
  font-size: 24px;
  letter-spacing: 2.52px;
  top: 0;
  right: 0;
}
.faq-group__text {
  font-size: 14px!important;
  letter-spacing: 1.47px!important;
  padding-top: 8px;
}
.feedback {
    padding: 18px 0 21px;
}
.feedback .h2 {
  font-size: 24px;
  letter-spacing: 2.04px;
  margin-bottom: 36px;
}
.footer-row {
display: block;
}
.footer-col:first-child {
  margin-bottom: 105px;
}
 .footer-socials__title {
  margin-bottom: -5px;
}
.footer-socials__item {
  margin-bottom: 20px;
}
.feedback-form__input, 
.modal-form__input,
.modal-form__submit {
width: 294px;  
height: 42px;
font-size: 16px;
letter-spacing: 1.36px;
margin-bottom: 12px;
}
.feedback-form__input::placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.feedback-form__input::-webkit-input-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.feedback-form__input:-ms-input-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.feedback-form__input::-moz-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.feedback-form__input:-moz-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.modal-form__input::placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.modal-form__input::-webkit-input-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.modal-form__input:-ms-input-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.modal-form__input::-moz-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
.modal-form__input:-moz-placeholder {
font-size: 16px;
letter-spacing: 1.36px;
}
}


@media screen and (max-width: 600px) {
body {
  font-size: 14px;
}   
.h2 {
font-size: 20px;
letter-spacing: 2.1px;
margin-bottom: 20px;
} 
.faq .h2 {
  font-size: 16px;
  letter-spacing: 1.68px;
  margin-bottom: 33px;
}
  .container {
    padding: 0 10px;
  }
.header {
  padding: 15px 0;
}
.header__logo {
  width: 40px;
}
.header__phone a {
  letter-spacing: 1.47px;
}
.promo {
padding-top: 79px;
padding-bottom: 76px;
background-size: auto 100%;
background-position: 150% -22px;
margin-bottom: 0;
}
.promo__title {
  font-size: 24px;
  letter-spacing: normal;
  margin-bottom: 16px;
}
.promo__list {
  margin-bottom: 63px;
}
.promo__list li {
  font-size: 14px;
  letter-spacing: 1.47px;
  margin-bottom: 16px;
}
.btn {
width: 198px;
height: 50px;
line-height: 50px;
letter-spacing: 1.47px;
}
.modal-form__submit {
  width: 294px;
  height: 42px;
  padding: 0;
  line-height: unset;
}
.benefits {
margin-bottom: 123px;
}
.benefits-item {
  width: 200px;
}
.benefits-item__pic {
    margin-bottom: 32px;
}
.benefits-item__pic img {
width: 40px;
margin: 0;
}
.benefits-item__text {
  font-size: 14px;
  letter-spacing: 1.47px;
}
.services {
    margin-bottom: 34px;
}
.services__row {
    margin: 0 -10px;
}
.services-item {
    padding: 0 10px;  
}
.workflow {
  margin-bottom: 86px;
}
.projects-item {
  padding: 0;
}
.projects-item:first-child {
    margin-bottom: 35px;
}
.projects-item__pic {
    margin-bottom: 12px;
}
.projects-item__name,
.projects-item__info__row {
  font-size: 16px;
  letter-spacing: 1.68px;
}
.projects-item__name {
  margin-bottom: 24px;
}
.projects-item__info__row {
  margin-bottom: 10px;
}
.faq {
  margin-bottom: 129px;
}
.feedback-form {
padding-right: 6px;
}
.footer-socials__row {
-khtml-box-lines:multiple;
-webkit-box-lines:multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
}

@media screen and (max-width: 480px) {
.promo {
background-size: 147px auto;
background-position: 100% 44px;
} 
.benefits-item__pic img {
  margin: 0 auto;
} 
.services {
    margin-bottom: 77px;
}  
.services__row {
  display: block;
  margin: 0;
}
.services-item {
width: 216px; 
padding: 0;
margin: 0 auto 43px;
}
.footer__company {
    width: 70%;
}
}