@media screen and (max-width: 1199px) {
  h1 {
    font-size: 6.5rem;
  }
  .bar-menu,
  .bar-contact {
    padding: 10rem 8rem;
  }
  .case-block {
    max-width: 30rem;
    min-width: 30rem;
    max-height: 30rem;
    min-height: 30rem;
  }
  .case-hover {
    max-width: 30rem;
    min-width: 30rem;
    max-height: 30rem;
    min-height: 30rem;
  }
  .case-hover-border {
    max-width: 24rem;
    min-width: 24rem;
    max-height: 24rem;
    min-height: 24rem;
  }
  .case-hover-title {
    min-height: 8rem;
    font-size: 1.5rem;
  }
  .case-hover h3 {
    font-size: 1.8rem;
    height: 8rem;
  }
  .case-last {
    max-width: 30rem;
    min-width: 30rem;
    max-height: 30rem;
    min-height: 30rem;
  }
  .case-last-border {
    max-width: 24rem;
    min-width: 24rem;
    max-height: 24rem;
    min-height: 24rem;
  }
  .case-last-title {
    min-height: 8rem;
    font-size: 1.5rem;
  }
  .case-last h3 {
    font-size: 1.8rem;
    height: 8rem;
  }
  .contact-form {
    padding: 10rem 0 3rem;
  }
  .contact-form h2 {
    font-size: 4.6rem;
  }
  .contact-form p {
    font-size: 3rem;
    margin: 5rem 0 7.5rem;
  }
  .contact-form p span {
    font-size: 3.5rem;
  }
  .contact-form input,
  .contact-form button {
    width: 100%;
    margin-bottom: 3rem;
  }
  .contact-form button {
    margin-top: 3rem;
  }
  .offer-bg {
    width: 110rem;
  }
}
@media screen and (max-width: 991px) {
  section {
    padding: 5rem 0;
  }
  h1 {
    font-size: 6rem;
    width: 100%;
  }
  h2 {
    font-size: 5.5rem;
  }
  .main header .menu {
    display: none;
  }
  .bar a {
    letter-spacing: normal;
  }
  .bar-mail {
    margin-top: 1.5rem;
  }
  .bar-menu,
  .bar-contact {
    padding: 8rem 0rem;
  }
  .bar-menu a {
    font-size: 4rem;
  }
  .popUp-left {
    padding: 9rem 2rem 2rem 2rem;
  }
  .popUp-right {
    padding: 9rem 0 0 2rem;
  }
  .popUp-title {
    font-size: 5.5rem;
    line-height: 7.5rem;
    margin-bottom: 4rem;
  }
  .popUp-descr {
    font-size: 2rem;
  }
  .popUp form input,
  .popUp form button {
    height: 6rem;
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .popUp form button {
    height: 7.5rem;
    font-size: 1.6rem;
    margin-top: 2.5rem;
  }
  .services-left {
    position: relative;
    top: 0;
  }
  .services-right {
    position: relative;
    top: 0;
  }
  .services-title {
    height: 12.5rem;
  }
  .services-descr {
    min-height: 100%;
    max-height: 100%;
  }
  .contact-form p {
    font-size: 2rem;
    margin: 5rem 0 5rem;
  }
  .contact-form p span {
    font-size: 3rem;
  }
  .contact-form input,
  .contact-form button {
    margin-bottom: 2.5rem;
    height: 6rem;
    font-size: 1.4rem;
  }
  .contact-form button {
    margin-top: 2.5rem;
    height: 6rem;
    padding: 1.5rem 6rem;
    font-size: 1.5rem;
  }
  footer button {
    padding: 1.5rem 3rem !important;
    max-width: 23.5rem;
  }
  .benefits-icon {
    height: 18rem;
  }
  .benefits img {
    width: 8rem;
    height: 8rem;
  }
  .benefits p {
    width: 90%;
  }
  .benefits-price p {
    width: 100%;
  }
  .offer-bg {
    width: 85rem;
  }
  .steps-developer-line {
    height: 179rem;
  }
  .steps-developer h3 {
    margin-top: 0;
  }
  .steps-developer-descr {
    height: 23rem;
  }
  .steps-developer-img {
    height: 23rem;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 767px) {
  section {
    padding: 4rem 0;
  }
  h1 {
    font-size: 5rem;
    letter-spacing: normal;
    padding-bottom: 2.5rem;
  }
  h2 {
    font-size: 4.7rem;
  }
  .decor-line {
    width: 15rem;
  }
  .main-footer {
    display: none;
  }
  .main-content p {
    padding: 2.5rem 0;
  }
  .bar a {
    font-size: 2.5rem;
  }
  .bar-mail {
    margin-top: 1.5rem;
  }
  .bar-menu,
  .bar-contact {
    padding: 6rem 0rem;
  }
  .bar-menu a {
    font-size: 3.5rem;
  }
  .popUp-title {
    font-size: 4rem;
    line-height: 5.5rem;
    margin-bottom: 3rem;
  }
  .popUp-descr {
    font-size: 1.6rem;
  }
  .popUp form input,
  .popUp form button {
    height: 5.5rem;
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
  .popUp form button {
    height: 6.5rem;
    font-size: 1.5rem;
    margin-top: 2rem;
  }
  .offer-bg {
    width: 73rem;
  }
  .offer h2 {
    font-size: 4.5rem;
  }
  .offer p {
    padding-left: 5rem;
    font-size: 1.6rem;
    width: 100%;
  }
  .offer .acall {
    font-size: 2.6rem;
  }
  .case-block {
    max-width: 36rem;
    min-width: 36rem;
    max-height: 36rem;
    min-height: 36rem;
  }
  .case-last {
    max-width: 36rem;
    min-width: 36rem;
    max-height: 36rem;
    min-height: 36rem;
  }
  .case-last-border {
    max-width: 30rem;
    min-width: 30rem;
    max-height: 30rem;
    min-height: 30rem;
  }
  .case-hover {
    max-width: 36rem;
    min-width: 36rem;
    max-height: 36rem;
    min-height: 36rem;
  }
  .case-hover-border {
    max-width: 30rem;
    min-width: 30rem;
    max-height: 30rem;
    min-height: 30rem;
  }
  .contact-form {
    padding: 4rem 0 3rem;
  }
  .contact-form h2 {
    text-align: center;
  }
  .contact-form .decor-line {
    margin: 0 auto;
  }
  .contact-form p {
    text-align: center;
    font-size: 1.8rem;
    margin: 2rem auto 3rem;
  }
  .contact-form p span {
    font-size: 2.5rem;
  }
  .contact-form form {
    text-align: center;
  }
  .contact-form input,
  .contact-form button {
    max-width: 41rem;
    margin: 0 auto;
  }
  footer button {
    padding: 2rem 6rem !important;
    max-width: 23.5rem;
  }
  .benefits-bg {
    width: 50%;
  }
  .benefits-icon {
    height: 12rem;
  }
  .benefits img {
    width: 8rem;
    height: 8rem;
  }
  .benefits p {
    width: 90%;
  }
  .benefits-slick {
    display: block!important;
  }
  .benefits-grid {
    display: none !important;
  }
  .benefits-price p {
    width: 100%;
  }
  .benefits button {
    padding: 1.5rem 4rem;
  }
  .steps-developer-line {
    display: none;
  }
  .steps-developer h3 {
    font-size: 2.5rem;
  }
  .steps-developer .steps-grid {
    display: none !important;
  }
  .steps-developer .steps-slick {
    display: block;
  }
  .steps-developer .steps-slick .steps-block {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .steps-developer-descr {
    height: 100%;
    max-width: 42rem;
    margin-right: auto;
    margin-left: auto;
  }
  .steps-developer-img {
    height: 21rem;
    margin: auto;
    margin-bottom: 2rem;
    max-width: 32rem;
  }
  .steps-developer .slick-dots {
    bottom: -25px;
  }
  .steps-developer .prev {
    bottom: -3.3rem;
  }
  .steps-developer .next {
    bottom: -3.3rem;
  }
  .services-title-border h3 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 575px) {
  section {
    padding: 3rem 0;
  }
  .button-theme-tr {
    padding: 1.5rem 3rem;
  }
  .decor-line {
    width: 10rem;
  }
  h1 {
    font-size: 4.5rem;
  }
  h2 {
    font-size: 4rem;
  }
  .main-content {
    width: 90%;
  }
  .main-footer {
    display: none;
  }
  .bar a {
    font-size: 2rem;
  }
  .bar-mail {
    margin-top: 1.5rem;
  }
  .bar-menu,
  .bar-contact {
    padding: 2rem 0 0 0;
  }
  .bar-menu a {
    font-size: 2.5rem;
  }
  .popUp-close {
    background-image: url(../images/close.svg);
  }
  .popUp-bg {
    padding: 0;
    width: 100%;
    z-index: -1;
  }
  .popUp-left {
    padding: 0;
    padding-top: 9rem;
    text-align: center;
  }
  .popUp-right {
    padding: 0;
    padding-top: 2rem;
  }
  .popUp-title {
    font-size: 4.5rem;
    line-height: 5.5rem;
    margin-bottom: 3rem;
  }
  .popUp-descr {
    font-size: 1.6rem;
  }
  .popUp form {
    margin: 0 auto;
  }
  .popUp form input,
  .popUp form button {
    height: 5.5rem;
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
  .popUp form button {
    height: 6.5rem;
    font-size: 1.5rem;
    margin-top: 2rem;
  }
  .services-title-border h3 {
    font-size: 2.6rem;
  }
  .offer-bg {
    width: 100%;
  }
  .offer h2 {
    padding-top: 4rem;
    padding-left: 0;
  }
  .offer .decor-line {
    margin: 3.5rem 0rem;
  }
  .offer p {
    padding-left: 0rem;
  }
  .offer .acall {
    padding: 4rem 0rem 3.5rem;
  }
  .offer button {
    margin: 0 0rem 4rem;
  }
  .case-block {
    max-width: 32rem;
    min-width: 32rem;
    max-height: 32rem;
    min-height: 32rem;
  }
  .case-last {
    max-width: 32rem;
    min-width: 32rem;
    max-height: 32rem;
    min-height: 32rem;
  }
  .case-last-border {
    max-width: 26rem;
    min-width: 26rem;
    max-height: 26rem;
    min-height: 26rem;
  }
  .case-last-title {
    min-height: 8rem;
    font-size: 1.5rem;
  }
  .case-last h3 {
    font-size: 1.8rem;
    height: 8rem;
  }
  .case-hover {
    max-width: 32rem;
    min-width: 32rem;
    max-height: 32rem;
    min-height: 32rem;
  }
  .case-hover-border {
    max-width: 26rem;
    min-width: 26rem;
    max-height: 26rem;
    min-height: 26rem;
  }
  .case-hover-title {
    min-height: 8rem;
    font-size: 1.5rem;
  }
  .case-hover h3 {
    font-size: 1.8rem;
    height: 8rem;
  }
  .benefits p {
    max-width: 25rem;
  }
  .benefits-price {
    height: 30rem;
    max-width: 100%;
    padding: 2rem;
  }
  .benefits-price-border {
    height: 26rem;
  }
  .benefits-price p {
    font-size: 1.3rem;
    max-width: 100%;
    padding: 1rem 2rem;
  }
  .benefits button {
    margin-top: 2rem;
    font-size: 1.5rem;
  }
  .benefits .prev {
    bottom: -4.3rem;
  }
  .benefits .next {
    bottom: -4.3rem;
  }
}
@media screen and (max-width: 400px) {
  .main-content p {
    width: 100%;
  }
  .services-title-border h3 {
    font-size: 2rem;
  }
  .case-block {
    max-width: 28rem;
    min-width: 28rem;
    max-height: 28rem;
    min-height: 28rem;
  }
  .case-last {
    max-width: 28rem;
    min-width: 28rem;
    max-height: 28rem;
    min-height: 28rem;
    padding: 2rem;
  }
  .case-last-border {
    max-width: 24rem;
    min-width: 24rem;
    max-height: 24rem;
    min-height: 24rem;
  }
  .case-hover {
    max-width: 28rem;
    min-width: 28rem;
    max-height: 28rem;
    min-height: 28rem;
    padding: 2rem;
  }
  .case-hover-border {
    max-width: 24rem;
    min-width: 24rem;
    max-height: 24rem;
    min-height: 24rem;
  }
  .benefits button {
    padding: 1rem 2rem;
  }
}