/* @media only screen and (max-width: 4400px) {
  html {
    font-size: 178.5%;
  }
}

@media only screen and (max-width: 4300px) {
  html {
    font-size: 174.5%;
  }
}

@media only screen and (max-width: 4200px) {
  html {
    font-size: 170.5%;
  }
}

@media only screen and (max-width: 4100px) {
  html {
    font-size: 166.5%;
  }
}

@media only screen and (max-width: 4000px) {
  html {
    font-size: 162.5%;
  }
}

@media only screen and (max-width: 3900px) {
  html {
    font-size: 158.5%;
  }
}

@media only screen and (max-width: 3800px) {
  html {
    font-size: 154.5%;
  }
}

@media only screen and (max-width: 3700px) {
  html {
    font-size: 150.5%;
  }
}

@media only screen and (max-width: 3600px) {
  html {
    font-size: 146.5%;
  }
}

@media only screen and (max-width: 3500px) {
  html {
    font-size: 142.5%;
  }
}

@media only screen and (max-width: 3400px) {
  html {
    font-size: 138.5%;
  }
}

@media only screen and (max-width: 3300px) {
  html {
    font-size: 134.5%;
  }
}

@media only screen and (max-width: 3200px) {
  html {
    font-size: 130.5%;
  }
}

@media only screen and (max-width: 3100px) {
  html {
    font-size: 126.5%;
  }
}

@media only screen and (max-width: 3000px) {
  html {
    font-size: 122.5%;
  }
}

@media only screen and (max-width: 2900px) {
  html {
    font-size: 118.5%;
  }
}

@media only screen and (max-width: 2800px) {
  html {
    font-size: 114.5%;
  }
}

@media only screen and (max-width: 2700px) {
  html {
    font-size: 110.5%;
  }
}

@media only screen and (max-width: 2600px) {
  html {
    font-size: 106.5%;
  }
}

@media only screen and (max-width: 2500px) {
  html {
    font-size: 102.5%;
  }
}

@media only screen and (max-width: 2400px) {
  html {
    font-size: 98.5%;
  }
}

@media only screen and (max-width: 2300px) {
  html {
    font-size: 94.5%;
  }
}

@media only screen and (max-width: 2200px) {
  html {
    font-size: 90.5%;
  }
}

@media only screen and (max-width: 2100px) {
  html {
    font-size: 86.5%;
  }
}

@media only screen and (max-width: 2000px) {
  html {
    font-size: 82.5%;
  }
}

@media only screen and (max-width: 1900px) {
  html {
    font-size: 78.5%;
  }
}
 */
@media only screen and (max-width: 1800px) {
   html {
    font-size: 9.5px;
  }
}

@media only screen and (max-width: 1700px) {
  html {
    font-size: 9px;
  }
}

@media only screen and (max-width: 1600px) {
  html {
    font-size: 8.5px;
  }
}

@media only screen and (max-width: 1499px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (max-width: 1399px) {
  html {
    font-size: 7.5px;
  }
}

@media only screen and (max-width: 1299px) {
  html {
    font-size: 7px;
  }
}

@media only screen and (max-width: 1199px) {
  html {
    font-size: 6.5px;
  }
}

@media only screen and (max-width: 1099px) {
  html {
    font-size: 6px;
  }
}

@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 992px) {
  html {
    font-size: 5.5px;
  }
}

@media only screen and (max-width: 767px) {
  html {
    font-size: 62.5%;
  }

  /* -- header ----- */

  .main__header .logo {
    max-width: 9.8rem;
  }
  .main__header .block__phone a {
    font-size: 1.2rem;
  }


  .main__header .block__address a {
    font-size: 1.2rem;
  }


  .main__header {
  
    min-height: 8rem;
  }
  /* .btn {
   
    height: 4.5rem;
   
    padding: 0 2.4rem;
  
    font-size: 1.6rem;
    line-height: 4.5rem;
  } */
  h1 {
    font-size: 5.6rem;
    
  }
  h2 {
    font-size: 3.5rem;
    
  }
  .rows{
    flex-direction: column !important;
  }
  .column{
    width: 100% !important;
  }

/* -- hero ----- */

  .hero {
    padding: 4rem 0 4rem;
    min-height: calc(89.5rem / 1.6);
   
  }

  .hero__overlay .hero__overlay__element1 {
    width: calc(130.5rem / 2) ;
    height: calc(83.1rem / 2) ;
    bottom: calc(-2.9rem / 2) ;
   
  }
  .hero__overlay .hero__overlay__element2 {
    width: calc(143.4rem / 2) ;
    height:  calc( 66.8rem /2);
    bottom:  calc(20.2rem /2);
   
  }

  .hero__overlay .hero__overlay__element3 {
    width: calc(261.1rem/ 2);
    height: calc(59.7rem/ 2);
    bottom: calc(14.8rem/ 2);
   
  }
  .hero__overlay .hero__overlay__element4 {
    width: calc(116rem/ 2);
    height: calc(116rem/ 2);
    bottom: calc(-37.8rem/ 2);
    left: calc(-3.8rem/ 2);
  }

  .hero__overlay .hero__overlay__element5 {
    width: calc(115.5rem/ 2);
    height: calc(115.5rem/ 2);
    bottom: calc(-39.1rem/ 2);
    right: calc(-3rem/ 2);
  }
  .hero__overlay .hero__overlay__element6 {
    width: calc(89.3rem/ 2);
    height: calc(73.6rem/ 2);
    left: calc(-8.3rem/ 2);
  }

  .hero h3 {
    font-size: 2rem;
  
  }
  .hero .hero__discount {
    font-size: 6rem;
   
  }
  .hero .hero__bottom {
    max-width: 26rem;
  }


  /* --------- about -------- */

  .about {
    text-align: center;
    padding: 4rem 0 4rem;
    position: relative;
    min-height: calc(82.3rem / 1.6);
  }
  .about__overlay__element1 {
   
    width: calc(109rem/ 2);
    height: calc(82.3rem/ 2);
    left: calc(-13rem/ 2);
    
  }

  .about .about__item {
    width: calc(100% / 2 - 3rem);
  }
  .about h2 {
    font-size: 3.5rem;
  }
  .about p {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .about .right {
    order: -1;
    margin-bottom: 3.2rem;
  }


  /* ----- services -------- */

  .services .services__top p {
    font-size: 1.6rem;
    
  }
  .services {
    min-height: calc(82.2rem / 1.6);
    padding: 4rem 0 6rem;
  }

  .services .services__slide h3 {
    font-size: 2rem;
  }
  .services .services__slide.swiper-slide-active {
    top: 8rem;
    opacity: 1;
  }

  .services .services__slide {
 
    padding: 2.6rem 4.6rem;
 
  }
  .services__slider__nav {
    width: 100%;
  
  }

  /* --- estimate --------- */

  .estimate__overlay__element1 {
    position: absolute;
    width: calc(59.8rem/ 2);
    height: calc(52.4rem/ 2);
    top: calc(-26.8rem/ 3);
    left: calc(-128.5rem/ 3);
  }
  .estimate .column {
    padding: 8rem 0;
    
  }
  .estimate p {
    font-size: 1.6rem;
    
  }
  .estimate .tel__list li {
    font-size: 2rem;
 
    margin-top: 1.6rem;
  }
  .estimate .tel__list li img {
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin-left: 2.4rem;
  }
  .estimate .right {
    padding: 0;
  }
  .estimate .estimate__inner {
    overflow: visible;
  }
  .estimate .container {
   overflow: hidden;
  }

  /* ------ examples -------- */

  .examples .examples__header {
    margin-left: 0;
    max-width: 50rem;
    margin: 0 auto;
  }

  .examples {
    min-height: calc(112.2rem / 1.6);
    position: relative;
    padding: 8rem 0;
  }

  .examples .left {
    padding: 4rem 0;
   
  }
  .examples .examples__slider__img__info {
    
    padding-left: 1rem;
  }
  .examples .examples__slider__text__wrapper {
    padding: 3rem 3.4rem;
    margin-top: 0;
    text-align: center;
  }
  .examples  h2{
   
    text-align: center;
  }
  .examples .examples__slide__text p {
    font-size: 1.6rem;
   
  }
  .examples .examples__slider__img__info h2 {
    font-size: 2.4rem;
  }
  .examples .examples__slide__img__box {
    margin-top: 3.8rem;
  }
  .examples .examples__slider__img {
    max-width: 37.5rem;
    
  }
  .examples .content__side {
    max-width: 41rem;
    margin: 0 auto;
  }

  .examples__overlay__element1 {
    width: calc(96.2rem / 2);
    height: calc(90.4rem / 2);
    bottom: calc(13rem / 2);
    left: calc(-100.6rem / 3);
  }
  .examples__overlay__element2 {
    width: calc(242rem / 2);
    height: calc(187rem / 2);
    bottom: calc(-52.3rem / 2);
    left: calc(-48rem);
  }

  /* ----- footer ----------- */

  .footer .contact__list li a {
    
    font-size: 1.8rem;
  }
  .footer .contact__list li a span {
    font-size: 2.4rem;
  }
  .footer .phone__list li a {
    font-size: 2rem;
  }
  .footer .phone__list {
    margin-top: 2.4rem;
  }
  
}

@media only screen and (max-width: 599px) {
  h1 {
    font-size: 3.6rem;
    
  }
  h2 {
    font-size: 3rem;
  }
  .hero h1 {

    max-width: 36rem;
    flex-direction: column;
  }

  /* --------- about -------- */

  .about .about__item {
    width: calc(100%  - 3rem);
  }
  /* ----- services -------- */

  .services .services__slide h3 {
    font-size: 2.8rem;
  }

}

@media only screen and (max-width: 499px) {

  .services .services__slide {
 
    padding: 2.6rem 2.6rem;
 
  }
  .services .services__slide h3 {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 400px) {

  h1 {
    font-size: 3rem;
    
  }
  .services .services__slide h3 {
    font-size: 2rem;
  }
}