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

	.bt,#contacts .bt{font-size: 38px; margin-bottom: 30px; line-height: 1.3;}

	header nav{display: none; position: absolute; top: 100%; right: 0; background: #fff; width: 100%; box-shadow: 1px 5px 5px 0px rgba(0,47,255,0.05);}
	header nav ul{display: block;}
	header nav ul li{border-top: 1px solid rgba(0, 0, 0, 0.1);}
	header nav ul li a{display: block; padding: 15px 20px;}
	header .ct{gap: 20px;}
	header .pull{display: flex; width: 30px; height: 30px; background: url("../img/pull.svg") 50% 50% no-repeat; background-size: 100%;}
	header .pull.open{background: url("../img/close.svg") 50% 50% no-repeat; background-size: 22px;}


	#promo{padding: 150px 0 0;}
	#promo h1{font-size: 36px; line-height: 1.3;}
	#promo .data{position: relative; top: 0; left: 0; right: 0; margin: 40px auto 0}


	#services,#additional-services,#why{padding: 50px 0 0;}


	#contacts{padding: 50px 0;}
	#contacts .text{max-width: 100%; width: 100%;}
	#contacts .image{position: relative; top: 0; right: 0; left: 0;}
	#contacts .form{max-width: 100%; margin-bottom: 40px}


	#promo .data .map__locations .location .detail{padding: 10px; font-size: 12px; width: 200px; right: calc(50% - 100px); top: -160px; z-index: 10}
	#promo .data .map__locations .location .detail .row{font-size: 12px; margin-bottom: 5px;}
	#promo .data .map__locations .location.location1 .detail{}


	footer .logo{margin-bottom: 30px;}
	footer nav{width: 100%; margin-bottom: 30px}
	footer nav ul{flex-wrap: wrap; justify-content: flex-start; gap: 0}
	footer nav ul li{margin-bottom: 15px; width: 50%;}
}



@media screen and (max-width: 767px){
	.bt,#contacts .bt{font-size: 28px; margin-bottom: 20px; line-height: 1.3;}


	header{padding: 20px 0;}
	header .btn{font-size: 11px; padding: 0 15px; height: 40px}


	#promo{padding: 100px 0 0;}
	#promo h1{font-size: 28px; margin-bottom: 15px}
	#promo .text p{font-size: 16px; margin-bottom: 30px;}
	#promo .partners{gap: 0; justify-content: space-between;}
	#promo .partners img{width: 25%;}
	#promo .data{max-width: 400px;}
	#promo .detail{display: none;}
	#promo .data .map__locations .location.location1{top: 13px; left: 80px}
	#promo .data .map__locations .location.location2{top: 20px; left: 190px}
	#promo .data .map__locations .location.location3{top: 109px; left: 93px}
	#promo .data .map__locations .location.location4{top: 70px; left: 169px}
	#promo .data .map__locations .location.location5{top: 25px;left: 269px;}


	#services .container{padding-left: 20px !important; padding-right: 20px !important;}
	#services .swiper{overflow: hidden !important;}
	#services .swiper-slide{width: 100% !important; padding: 15px 15px 330px 15px !important; box-sizing: border-box !important;}
	#services .more{top: 20px; right: 15px;}
	#services .title{font-size: 16px; max-width: calc(100% - 60px) !important; width: auto !important;}
	#services .description{font-size: 14px;}
	#services .image{bottom: 15px; width: calc(100% - 30px); left: 15px; height: 300px; padding: 15px;}
	#services .swiper-pagination{display: block;}
	/* Скрываем SVG в слайдерах на мобильных по умолчанию, но показываем для активного слайда */
	#services .swiper-slide:not([data-animation-started="true"]):not(.swiper-slide-active) .image svg{opacity: 0 !important; visibility: hidden !important;}
	#services .swiper-slide[data-animation-started="true"] .image svg,
	#services .swiper-slide-active .image svg{opacity: 1 !important; visibility: visible !important;}

	#additional-services .container{padding-left: 20px !important; padding-right: 20px !important;}
	#additional-services .swiper{overflow: hidden !important;}
	#additional-services .swiper-slide{width: 100% !important; padding: 15px 15px 330px 15px !important; box-sizing: border-box !important;}
	#additional-services .more{top: 20px; right: 15px;}
	#additional-services .title{font-size: 16px; max-width: calc(100% - 60px) !important; width: auto !important;}
	#additional-services .description{font-size: 14px;}
	#additional-services .image{bottom: 15px; width: calc(100% - 30px); left: 15px; height: 300px; padding: 15px;}
	#additional-services .swiper-pagination{display: block;}
	/* Скрываем SVG в слайдерах на мобильных по умолчанию, но показываем для активного слайда */
	#additional-services .swiper-slide:not([data-animation-started="true"]):not(.swiper-slide-active) .image svg{opacity: 0 !important; visibility: hidden !important;}
	#additional-services .swiper-slide[data-animation-started="true"] .image svg,
	#additional-services .swiper-slide-active .image svg{opacity: 1 !important; visibility: visible !important;}


	#why .item{width: 100%; border-top: none!important; border-right: none!important; border-bottom: 1px dashed #DADADA; padding-right: 24px;}
	#why .item:last-child{border-bottom: none!important;}
	#why .item .title{font-size: 18px}
	#why .item p{font-size: 14px;}


	#cases .swiper,#services .swiper,#additional-services .swiper{margin-bottom: 40px}
	#cases .swiper-slide{width: 100%;}
	#cases .title{font-size: 18px; margin-bottom: 15px;}
	#cases .description{font-size: 14px;}


	.form .flex input{width: 100%;}
	.form .btn{font-size: 16px;}

	#promo .map__locations .location.open .detail{display: none;}
}

/* Оптимизация для очень маленьких экранов (320px) */
@media screen and (max-width: 360px) {
	header .ct{gap: 10px;}
	header .logo svg{width: 70px; height: auto;}
	header .callback{font-size: 11px; padding: 0 10px;}
	header .btn{font-size: 11px; padding: 0 12px; height: 36px;}
}

@media screen and (max-width: 320px) {
	header .ct{gap: 6px;}
	header .logo svg{width: 65px;}
	header .callback{font-size: 10px; padding: 0 8px;}
	header .btn{font-size: 10px; padding: 0 10px; height: 34px;}
}