@media screen and (max-width: 1340px){
	.container{max-width: 100%; padding: 0 30px;}

	header{padding: 20px 30px;}
	header .container{padding: 0}
	header nav{display: none;}
	header .pull{display: flex; align-items: center; justify-content: center; background: var(--green); width: 68px; background: #E8EEF1;}
	header .pull.open{background: var(--green) url("../img/closew.svg") 50% 50% no-repeat;}
	header .pull.open svg{opacity: 0;}
	header .pull svg path{fill: #000}


	#promo h1{width: calc(100% - 500px); font-size: 44px; line-height: normal;}
	#promo h1 br{display: none;}


	#services .text{max-width: 100%;}
	#services .clear{display: none;}
	#services .grid{grid-template-columns: repeat(2, 1fr);}


	#steps{background-position: calc(50% + 350px) 0}
	#steps .data{width: 100%; max-width: 100%;}


	#about .items{gap: 0}
	#about .item{width: calc(100%/3 - 20px)}
	#about .btn{margin-top: 50px;}


	#prices .grid{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0}
	#prices .item:first-child{width: 100%;}
	#prices .item{width: calc(50% - 10px); box-sizing: border-box;}
	#prices .bt br{display: none;}
	#prices .detail{position: relative; margin-top: 20px;}


	#advantages .text{width: 100%;}
	#advantages .swiper{overflow-x: inherit;}
	#advantages .swiper-slide{width: 48%;}


	#faq .list__faq{width: 100%; margin-bottom: 20px;}
	#faq .data{margin: 0 auto;}
	#faq .data .btn{width: 100%;}


	#contacts .items{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0}
	#contacts .item{width: calc(50% - 10px); margin-bottom: 20px; box-sizing: border-box;}
	#contacts .item:last-child{width: 100%; margin: 0}


	#directions .swiper{overflow-x: inherit;}
	#directions .swiper-slide{width: 315px;}


	#customers .items{grid-template-columns: repeat(2, 1fr);}
	#customers .btn{position: relative; top: 0; width: 100%; margin-top: 32px;}


	#calc.section__calc img{width: 100%; margin-bottom: 10px}
	#calc.section__calc .form{width: 100%;}


	footer .logo{width: 100%; margin-bottom: 40px;}
	footer .logo img{margin: 0 auto}
}


@media screen and (max-width: 959px){
	header .callback{display: none;}
	header .pull{background: var(--green); border-radius: 0 8px 8px 0}
	header .pull svg path{fill: #fff}


	#promo h1{width: 100%; margin-bottom: 30px;}
	#promo .images img{width: calc(50% - 10px)!important; height: 300px}


	#about .items{gap: 20px;}
	#about .item,#about .item:last-child{width: 100%; max-width: 100%; text-align: center;}
	#about .note{margin-bottom: 20px; max-width: 100%; text-align: left;}
	#about .image{margin: 0 auto;}
	#about .counts{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 0;}
	#about .item__count{text-align: left; width: calc(100% / 3 - 10px); border-bottom: none; padding-bottom: 0; margin-bottom: 0}


	#calc img{width: 100%; margin-bottom: 10px; height: 210px;}
	#calc .form{width: 100%;}


	#advantages .swiper-wrapper{align-items: stretch;}
	#advantages .swiper-slide{height: auto;}


	#contacts .item{width: 100%;}


	#promo .information{position: relative; bottom: 0; left: 0; width: 100%; margin-top: 10px;}



	footer nav{width: 100%; margin-bottom: 40px; gap: 0}
	footer nav ul{width: 50%;}
	footer .callback{width: calc(100% - 100px)}
	footer .callback .btn{width: 100%;}
}


@media screen and (max-width: 767px){
	.container{padding: 0 15px}


	.section{padding: 40px 0;}

	.bt__small{margin-bottom: 24px;}
	.bt{font-size: 36px; margin-bottom: 24px; line-height: normal;}


	header{padding: 10px 15px;}
	header .container{padding: 8px 15px;}
	header .logo{width: auto; border: none; max-width: 94px; height: auto;}
	header .phone{display: none;}
	header .telegram a{width: 45px; height: 45px; border-radius: 8px; background: #E8EEF1; margin-right: 6px;}
	header .pull{width: 45px; height: 45px; border-radius: 8px;}


	#navigation{left: 15px; width: calc(100% - 30px); top: 80px; height: calc(100% - 100px)}


	#promo{padding: 105px 0 40px;}
	#promo h1{margin-bottom: 24px; font-size: 36px;}
	#promo ul,#promo .data{font-size: 18px; line-height: 32px}
	#promo ul{padding-left: 20px;}
	#promo .text{margin-bottom: 32px;}
	#promo .images img{height: 200px; width: 150px!important}
	#promo .images img:last-child{width: calc(100% - 160px)!important}
	#promo .images.full img:last-child{width: 100%!important;}
	#promo .mobile{display: block; width: 100%; padding: 30px 0 0;}
	#promo .mobile .btn{width: 100%;}


	#services .items{display: flex; flex-wrap: wrap; justify-content: space-between;}
	#services .items .item{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px}
	#services .items .item .image{width: 100%; order: 0}
	#services .items .item img{height: 220px;}
	#services .items .item .description{width: 100%; order: 1; padding: 24px;}
	#services .items .item .info{position: relative; padding: 0}
	#services .items .item .title{font-size: 24px; margin-bottom: 24px;}


	#steps{background: #E8EEF1;}
	#steps .swiper{padding-bottom: 36px; overflow-x: inherit;}
	#steps .swiper-slide{width: 337px;}
	#steps .item__steps{padding: 24px}
	#steps .item__steps span{margin-bottom: 16px;}
	#steps .item__steps .title{font-size: 20px; margin-bottom: 16px;}
	#steps .btn{width: 100%;}


	#about .bt{margin-bottom: 24px;}
	#about .item{order: 2}
	#about .item:nth-child(2){order: 1}
	#about .item:last-child{order: 0}
	#about .item__count{width: 100%; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #E9E9E9}
	#about .image{width: 100%;}
	#about .image img{width: 100%;}
	#about .btn{width: 100%; margin-top: 30px;}


	#prices .item{width: 100%; padding: 24px; margin-bottom: 20px;}
	#prices .item:last-child{margin: 0}
	#prices .item__price .title{font-size: 24px;}
	#prices .item__price .price{font-size: 28px;}
	#prices .item__price .note{margin-bottom: 24px; padding-bottom: 24px;}
	#prices .btn,#prices .detail{width: 100%;}


	#calc .form .btn{width: 100%; margin-bottom: 32px;}
	#calc .form .price{text-align: left;}


	#advantages .swiper-slide{width: 337px; padding: 24px;}
	#advantages .swiper-slide .icon{width: 40px; height: 40px; margin-bottom: 20px;}
	#advantages .swiper-slide .title{font-size: 24px; margin-bottom: 16px;}
	#advantages .btn{width: 100%;}


	#faq .item .question{padding: 14px 50px 14px 16px; font-size: 16px; line-height: 21px; background-size: 32px 32px; background-position: calc(100% - 15px) 50%}
	#faq .item .question:after{width: 32px; height: 32px; background-size: 32px 32px; right: 15px; top: calc(50% - 16px)}
	#faq .item .answer{width: calc(100% - 32px); margin-bottom: 16px; padding: 12px; font-size: 12px; line-height: normal;}
	#faq .data{width: 100%;}
	#faq .data img{margin: 0 auto;}


	#contacts .socials{width: 100%; margin-top: 24px;}
	#contacts .item{padding: 24px;}
	#contacts .item:nth-child(2) p{display: none;}
	#contacts iframe{height: 275px;}


	.box__modal{padding: 60px 16px 30px;}
	.box__modal .modal__title{font-size: 26px;}
	.box__modal .note{font-size: 16px; margin-bottom: 32px;}


	#directions .slider-sw .swiper-button-next,#directions .slider-sw .swiper-button-prev{display: none;}
	#directions .swiper{padding-bottom: 42px;}
	#directions .swiper-pagination{display: block;}
	#directions .slider-sw .swiper-pagination-bullet{background: #F2F2F2}
	#directions .slider-sw .swiper-pagination-bullet.swiper-pagination-bullet-active{background: var(--green);}


	#customers .items{grid-template-columns: repeat(1, 1fr);}
	#customers .items .item{height: 275px;}
	#customers .item .data{padding: 24px;}
	#customers .item .title{min-height: 0; margin-bottom: 24px; font-size: 24px;}
	#customers .item .dots{top: 24px; left: 24px;}


	#breadcrumbs{top: -20px; font-size: 14px;}


	#calc .list__auto label{width: calc(50% - 5px); margin-bottom: 10px;}
	#calc .list__auto label span svg{width: 40px; height: 40px;}
	#calc .list__auto label span{height: 85px; padding: 0; overflow: hidden;}
	#calc .list__auto label span i{font-size: 14px;}


	.form .flex input,.form select{max-width: 100%; width: 100%;}


	footer{padding: 32px 0 0; position: relative;}
	footer .top{position: absolute; bottom: 32px; right: 15px;}
	footer .top a{width: 40px; height: 40px;}
	footer .top a svg{width: 30px;}
	footer .logo{margin-bottom: 32px;}
	footer .logo img{margin: 0}
	footer nav ul{width: 100%; margin-bottom: 16px;}
	footer nav ul:last-child{margin: 0}
	footer .callback{width: 100%;}
	footer .privacy{padding: 32px 0; margin-top: 32px;}
	footer .privacy .flex{gap: 24px;}
	footer .privacy p{width: 100%;}
}