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


	#promo .image img{height: 550px}
	#promo .data{box-sizing: border-box; align-items: flex-start; padding-top: 50px; top: 0}


	#news .flex__center{right: 30px;}


	#contacts .data{left: calc(100% - 470px);}


	#subscribe .text{max-width: 450px}
	#subscribe .form{width: calc(100% - 500px)}


	#coaches__block .item__coach{width: 100%;}
}


@media screen and (max-width: 1100px){
	body{padding: 116px 0 0;}

	header{height: 116px;}
	header .top{padding: 12px 0; font-size: 12px;}
	header .top .container .flex{display: none;}
	header .bottom{padding: 16px 0;}
	header .bottom .logo{max-width: 160px; left: 85px; top: calc(50% - 19px)}
	header .bottom ul{display: none;}
	header .bottom .actions .phone{display: flex; background: url("../img/phoneb.svg") 50% 50% no-repeat; width: 46px; height: 46px; box-sizing: border-box; font-size: 0; border-radius: 4px; border: 1px solid #E4E4E7;}


	#promo .data{padding: 50px 30px;}
	#promo .title{font-size: 48px;}


	#about .info img{margin: 0}


	.item__program .title{font-size: 18px;}
	.item__program .image img{height: 200px;}


	#register .data{width: 100%; max-width: 100%; margin-bottom: 40px;}
	#register .info{
		width: 100%;
		height: 74px;
		background: url(../img/learn_text.svg) no-repeat;
		background-size: contain;
	}
	#register .info img{display: none;}


	#news .flex__center{position: relative; right: 0; top: 0; padding-top: 50px}
	.item__news img{height: 200px}


	#page__programs .grid,#page__news .grid{grid-template-columns: repeat(2, 1fr);}


	#subscribe .text{max-width: 100%; width: 100%; margin-bottom: 40px;}
	#subscribe .form{width: 100%;}


	.list__coaches{padding: 80px 0 0; grid-template-columns: repeat(1, 1fr)!important;}


	#page__contacts img{width: 100%; margin-bottom: 20px; height: 500px;}
	#page__contacts .data{width: 100%;}


	#department .grid{grid-template-columns: repeat(1, 1fr);}


	#program__about .gallery{width: 100%; order: 1; margin-top: 40px;}
	#program__about .info{width: 100%; order: 0}
	#program__about .info .bt{margin-bottom: 40px}
	#program__about .info .text{max-width: 100%;}
	#program__about .slider-sw.swiper.swiper__gallery__main{margin: 0 0 16px;}


	#spring .grid{grid-template-columns: repeat(2, 1fr);}


	#coaches__block{overflow: hidden;}
	#coaches__block .coaches{left: 30px}
	#coaches__block .info{width: 100%; margin-bottom: 40px; max-width: 100%;}
	#coaches__block .data{width: 100%; max-width: 100%;}
	#coaches__block .data .swiper{overflow-x: inherit;}
	#coaches__block .data .swiper-slide{width: 325px;}


	#navigation .container{padding: 0}
	.f-nav #navigation .col{height: calc(100vh - 115px);}
	#navigation .wrapper{padding-top: 116px!important}
	#navigation .col{height: calc(100vh - 150px); padding: 60px 0;}
	#navigation ul li{padding: 0 40px}
	#navigation .col{padding-top: 80px}
	#navigation .back{position: absolute; top: 0; left: 0; z-index: 300}
	#navigation .back a{padding: 0; width: 42px; height: 42px; left: 20px; top: 20px}

	#navigation .information{position: absolute; bottom: 100px; left: 0; z-index: 3; padding: 0;}


	#navigation ul.sub-menu{left: 0; width: 100%; box-shadow: none; border: none; height: 100vh;}
	#navigation .col {
    position: relative;
    overflow: hidden; /* важно — скрывает смещения */
		height: 100vh;
  }

  /* Все уровни меню становятся на один слой и могут двигаться */
  #navigation ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 80px 0;
    box-sizing: border-box;
    transition: left .3s ease;
    background: #fff;
    height: calc(100vh - 150px);
  }

  /* Скрытые уровни по умолчанию находятся справа */
  #navigation ul.sub-menu {
    left: 100%;
    display: block !important; /* включаем, но не показываем, оно смещено */
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none;
    border-left: none;
    background: #fff;
  }

  /* Отключаем ховер-логики десктопа */
  #navigation li:hover > ul.sub-menu {
    transform: none;
  }



	footer .col{max-width: 100%; width: 48%; margin-bottom: 60px;}
	footer .col:nth-child(1){width: 100%;}
	footer .col:nth-child(4){margin: 0}
}


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


	.bt{font-size: 32px; margin-bottom: 24px;}
	.bt span{font-s12px; margin-bottom: 14px;}


	.section{padding: 80px 0;}


	header .btn-grey-tr{display: none;}
	header .bottom .logo{left: 68px}
	header .btn-red{padding: 0 12px; font-size: 14px;}
	header .top .ct{overflow: hidden; white-space: nowrap;}


	#promo .image img{height: 710px;}
	#promo .data{padding: 100px 16px 0;}
	#promo .title{font-size: 50px; margin-bottom: 30px;}
	#promo .text p{font-size: 16px;}
	#promo .actions{gap: 20px;}
	#promo .actions .btn{width: 230px; padding: 0}
	#promo .sw__nav{width: 226px; left: calc(50% - 113px)}


	#about{background-position: calc(100% - 16px) 310px;}
	#about .bt{margin-bottom: 40px;}
	#about .info{width: 100%;}
	#about .data{width: 100%;}
	#about .info img.about_text{width: 100%; max-width: 100%;}
	#about .info img{margin: 0 auto; max-width: 220px;}


	#programs{background-position: 0 290px; background-size: 110px}
	#programs .grid{grid-template-columns: repeat(1, 1fr); gap: 40px}
	.item__program .image img{height: 250px}
	.item__program .title{font-size: 26px;}


	#register{padding: 80px 0 40px;}


	#coaches{overflow-x: hidden;}
	#coaches .swiper{overflow-x: inherit;}
	#coaches .swiper-slide{width: 325px;}


	#questions{padding: 80px 0;}
	#questions .data{max-width: 100%; padding: 40px 16px;}
	#questions .image{display: none;}
	#questions .form{max-width: 318px;}


	#news .grid{grid-template-columns: repeat(1, 1fr); gap: 40px}
	.item__news img{height: 240px;}
	#news .flex__center{padding: 60px 0 0;}
	#news .flex__center .btn{padding: 0; min-width: 220px;}


	#contacts .data{width: 294px; left: calc(100% - 310px); padding: 24px;}
	#contacts .bt{margin-bottom: 24px;}
	#contacts .row{margin-bottom: 24px;}


	#page__news{padding: 80px 0;}
	#page__news .grid{grid-template-columns: repeat(1, 1fr); gap: 40px}
	#page__news .item__news{margin: 0}


	#page__programs{padding: 80px 0}
	#page__programs .grid{grid-template-columns: repeat(1, 1fr); gap: 40px}
	#page__programs .item__program{margin: 0}


	#promo__page{padding: 0 0 80px;}
	#promo__page .bt{font-size: 42px;}


	#subscribe .data{background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), linear-gradient(284.59deg, #ED1C24 74.54%, #871015 100%); box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15); backdrop-filter: blur(15px); border-radius: 4px;}
	#subscribe .data{padding: 80px 16px;}
	#subscribe .form .in{width: 100%; margin-bottom: 40px;}
	#subscribe .form .btn{height: 42px;}


	.content__gallery{gap: 16px; grid-template-columns: repeat(2, 1fr);}
	.content__gallery img{height: 140px;}


	#promo__page.about{height: 320px}


	#about.page__about .info{margin-bottom: 30px}
	#about.page__about .info img{display: none;}
	#about.page__about .info img.about_text{display: block;}


	#tabs{background-position: calc(100% + 70px) 0;}
	#tabs .filters{justify-content: flex-start; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap;}


	#gallery{background-size: 200px; background-position: -73px 0;}


	#page__coaches{background-position: 110% 0}
	#page__coaches .flex{gap: 40px;}
	#page__coaches .item{width: 100%;}


	.list__coaches .item .image{width: 100%; margin-bottom: 20px;}
	.list__coaches .item .image img{height: 300px; width: 100%;}
	.list__coaches .item .info{width: 100%;}


	#page__contacts .data{padding: 40px 30px;}


	#program__about .swiper__gallery__main img{height: 400px;}
	#program__about .swiper__gallery__thumbs img{height: 90px;}


	#spring .grid{grid-template-columns: repeat(1, 1fr);}


	#coaches__block .coaches{left: 16px; max-width: 380px}
	#coaches__block .info{margin: 50px 0 40px;}


	#navigation ul{padding: 30px 0}
	#navigation .information{bottom: 130px}



	footer{padding: 80px 0 24px;}
	footer .container{padding: 0 32px;}
	footer .col{max-width: 100%; width: 100%; margin-bottom: 30px;}
	footer .col:nth-child(1){margin-bottom: 60px;}
	footer .logo img{margin-bottom: 60px;}
	footer ul li{font-size: 16px;}
	footer .copyright{padding: 24px 0 0; margin: 0}
	#gallery-1, #gallery-2 {
		grid-template-columns: 1fr 1fr;
	}
	#gallery-1.gallery-columns-3,#gallery-2.gallery-columns-3 {
		grid-template-columns: 1fr 1fr;
	}
	#gallery-1 img,#gallery-2 img {
		height: 160px;
	}
	#gallery-1.gallery-columns-3 img,#gallery-2.gallery-columns-3 img {
		height: 160px;
	}


	/* new navigation starts here */
	.avm-menu-wrapper {
		width: 100%;
		top: 116px;
		bottom: 0;
		left: 0;
		right: 0;
		display: none;
		box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		will-change: transform;
	}

	.avm-menu-wrapper .container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.f-nav .avm-menu-wrapper {
    top: 116px;
  }

	.avm-menu-container {
		width: 100%;
		max-width: 343px;
		position: relative;
		background: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 0;
		height: 100%;
		max-height: 100%;
	}

	.avm-menu-link{
		padding: 8px 40px;
  }

	.avm-menu-level {
		width: 100%;
		min-width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		opacity: 0;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
		z-index: 1;
		box-shadow: none;
	}

	.avm-menu-level.avm-level-0 {
		position: relative;
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		z-index: 10;
		background: #fff;
		flex: 1 1 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 40px 0;
		min-height: 0;
		max-height: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.avm-menu-level.avm-level-0 > li {
		flex-shrink: 0;
		flex-grow: 0;
	}

	.avm-menu-level.avm-level-0 .information {
		flex-shrink: 0;
		flex-grow: 0;
		margin-top: auto;
		padding-bottom: 50px;
		padding-top: 10px;
	}

	.avm-menu-level.avm-level-1,
	.avm-menu-level.avm-level-2,
	.avm-menu-level.avm-level-3 {
		position: absolute;
		left: 0;
		background: #fff;
		top: 0;
		bottom: 0;
		height: 100%;
		opacity: 0;
		visibility: hidden;
		transform: translateX(100%);
		padding: 0;
		pointer-events: none;
		transition: 0.24s all ease;
	}

	.avm-menu-level.avm-level-1.avm-active,
	.avm-menu-level.avm-level-2.avm-active,
	.avm-menu-level.avm-level-3.avm-active {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		transition: 0.24s all ease;
		z-index: 20;
		pointer-events: auto;
	}

	.avm-menu-level.avm-level-1::before, .avm-menu-level.avm-level-2::before, .avm-menu-level.avm-level-3::before {
    display: none;
  }

	/* Скрыть родительское меню когда активно подменю */
	.avm-menu-level.avm-level-0.avm-hidden,
	.avm-menu-level.avm-level-1.avm-hidden,
	.avm-menu-level.avm-level-2.avm-hidden,
	.avm-menu-level.avm-level-3.avm-hidden {
		opacity: 0;
		visibility: hidden;
		transform: translateX(-100%);
		z-index: 1;
		transition: 0.24s all ease;
	}

	/* Кнопка "Назад" видна только на мобильных и в подменю */
	.avm-menu-level.avm-level-1 .avm-back-button,
	.avm-menu-level.avm-level-2 .avm-back-button,
	.avm-menu-level.avm-level-3 .avm-back-button {
		display: flex;
	}

	/* Стрелки всегда видимы на мобильных */
	.avm-arrow {
		display: inline-flex !important;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(237, 28, 36, 0.2);
		tap-highlight-color: rgba(237, 28, 36, 0.2);
		/* Увеличиваем область клика */
		padding: 4px;
		margin: -4px -4px -4px 4px;
	}
	
	.avm-arrow:active {
		opacity: 0.7;
	}

	/* Отключить hover эффекты на мобильных */
	.avm-menu-link:hover {
		background: transparent;
		color: rgba(77, 77, 77, 1);
	}

	.avm-menu-link:active {
		background: rgba(247, 247, 248, 1);
	}

	.avm-menu-item.avm-has-open-submenu > .avm-menu-link {
		background-color: transparent;
		color: rgba(77, 77, 77, 1);
	}

	/* Улучшенные стили для кнопки "Назад" на мобильных */
	.avm-back-button {
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	.avm-back-button:active {
		background: rgba(247, 247, 248, 1);
	}
	/* new navigation ends here */
}
@media screen and (max-width: 424px){
	header .bottom .logo {
		max-width: 120px;
		top: calc(50% - 14px);
	}
	#promo .title{font-size: 40px;}
}
@media screen and (max-width: 370px){
	header .bottom .actions .phone{display: none;}
}