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

	.services_about-text {
		padding-left: 50px;
	}
}

@media only screen and (max-width: 1350px) {
	.pageBanner-title,
	.banner-title {
		font-size: 100px;
	}

	.services_about-text {
		padding-left: 0px;
	}

	.pageBanner-img {
		margin-left: 320px;
	}


}
@media only screen and (max-width: 1350px) {
	.blog-item:not(:last-child) {
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 1300px) {
		/* убираем индивидуальные margin-top */
	.services-item:nth-child(3n + 1),
	.services-item:nth-child(3n + 2),
	.services-item:nth-child(3n + 3) {
		margin-top: 0 !important;
	}

	/* одинаковый отступ между элементами */
	.services-item:not(:last-child) {
		margin-bottom: 70px !important;
	}
} 

@media only screen and (max-width: 1250px) {
	.pageBanner-title,
	.banner-title {
		font-size: 95px;
	}

	.footer-info-services-list {
		margin-right: 50px;
	}



	.services_price-item-element:nth-child(3) {
		opacity: 1;
	}

	.portfolio-container img {
	width: 400px;
}
}

@media only screen and (max-width: 1050px) {
	.pavel-hero {
		padding-top: 120px;
	}

	.pavel-hero__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.pavel-hero__media {
		max-width: 100%;
		justify-self: start;
	}

	.pavel-hero__media-frame {
		max-width: 560px;
	}

	.pavel-hero__description {
		font-size: 20px;
		max-width: 100%;
	}

	.pavel-content {
		padding-top: 48px;
	}

	.pageBanner-title,
	.banner-title {
		font-size: 90px;
	}


.services_about-img img{
	width: 500px;
}
	.case-what-title {
		font-size: 80px;
	}

	.portfolio-title {
		font-size: 40px;
	}

	.portfolio-description  {
		font-size: 13px;
	}

	.portfolio-text {
		font-size: 14px;
	}

	.services_price-item-element span{
		font-size: 16px;
	}

	.services_price-item-title {
		font-size: 22px;
	}

	.services_about-title {
		font-size: 40px;
	}

	.services_about-text {
		font-size: 20px;
	}
		.pageBanner-img {
		margin-left: 280px;
	}

	.footer-contacts-info {
		margin-right: 50px;
	}

	.footer-info-links::before {
		right: -50px;
	}

	.footer-contacts-title {
		font-size: 50px;
	}
}

@media only screen and (max-width: 950px) {
	.pageBanner-title,
	.banner-title {
		font-size: 80px;
	}

	.utm-builder__grid,
	.utm-extra__grid {
		grid-template-columns: 1fr;
	}

	.utm-result {
		position: static;
	}

	.services_about-row {
		flex-direction: column;
	}
		.case-image {
		width: 100%;
	}


.services_about-text {
	text-align: center;
	padding-right: 0;
}

.services_about-row {
	padding-top: 25px;
}

		.pageBanner-img {
		margin-left: 250px;
	}

	.footer-contacts-description {
		margin-bottom: 50px;
	}

	.form-alert {
		margin-right: 50px;
	}

	.footer-contacts-info {
		margin-right: 0;
	}

	.footer-contacts {
		flex-wrap: wrap;
	}
	.services-list {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.footer-politica {
		margin-top: 10px;
		margin-bottom: 10px;
	}






	.services-item {
		height: 300px;
	}
	.services-item img {
		position: absolute;
	}
	.pageBanner-img,
		.services-item img {
filter: invert(100%) grayscale(100%);


	}

	/* Service pages: keep hero icon visible (don't invert on black background) */
	body:not(.home) .service-page-hero .pageBanner-img {
		filter: none !important;
		opacity: 1 !important;
	}
}

@media only screen and (max-width: 900px) {
	.services-compare {
		padding: 56px 0 62px;
	}

	.services-compare .container {
		min-height: 0;
		display: block;
		padding-top: 0;
		padding-bottom: 0;
	}

	.services-compare__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.services-compare__title {
		font-size: 42px;
	}

	.services-compare__desc {
		font-size: 16px;
		margin-top: 16px;
	}

	.services-compare__btn {
		margin-top: 28px;
	}

	.services-compare__table {
		display: none;
	}

	.services-compare-mobile {
		display: block;
	}

	.services_about--process {
		padding: 50px 0;
	}

	.services_about--process .container {
		height: auto;
		min-height: 0;
		position: static;
		padding-top: 0;
		padding-bottom: 0;
	}

	.services-about-process__head {
		margin-bottom: 24px;
		gap: 12px;
	}

	.services-about-process__title {
		font-size: 34px;
	}

	.services-about-process__label {
		font-size: 16px;
	}

	.services-about-process__content {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.services-about-process__steps {
		padding-right: 0;
		gap: 18px;
	}

	.services-about-process__step {
		flex-direction: column;
		gap: 10px;
		opacity: 1;
	}

	.services-about-process__step::before {
		display: none;
	}

	.services-about-process__step-image {
		display: block;
		width: 100%;
		height: auto;
		max-height: 320px;
		object-fit: cover;
		border-radius: 16px;
		border: 0;
		margin: 0 0 6px;
	}

	.services-about-process__step::before {
		left: -2px;
		top: 8px;
		width: 9px;
		height: 9px;
	}

	.services-about-process__step-num {
		font-size: 12px;
		flex-basis: auto;
		padding-top: 0;
		opacity: 0.55;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.services-about-process__step-title {
		font-size: 34px;
	}

	.services-about-process__step-text {
		font-size: 19px;
		margin-top: 8px;
	}

	.services-about-process__media {
		display: none;
	}

	.stages-list,
	.blog-list {
		justify-content: center;
	}

	.services_price-item {
		display: flex;
		flex-direction: column;
		align-items: left;
	}

	.services_price-item-element {
		padding: 20px 0;
	}

	section {
		padding: 50px 0;
	}
	.pageBanner {
		padding: 100px 0;
	}

	.section-title {
		padding-top: 50px !important;
	}

	.blog-list {
		padding-top: 50px;
	}

}

@media only screen and (max-width: 850px) {
	.pageBanner-title,
	.banner-title {
		font-size: 70px;
	}

		.portfolio-container img {
	width: 300px;
}

		.pageBanner-img {
		margin-left: 200px;
	}
	.footer-info-services {
		display: none;
	}

	.footer-info-links::before {
		display: none;
		right: 0;
	}

	.services_about-img {
		width: 100%;
		margin-bottom: 30px;
	}

	
}

@media only screen and (max-width: 750px) {
	.pageBanner-title,
	.banner-title {
		font-size: 60px;
	}

	.utm-hero {
		padding: 130px 0 60px;
	}

	.utm-hero__text {
		font-size: 18px;
	}

	.utm-builder {
		padding: 50px 0 80px;
	}

	.utm-form,
	.utm-result {
		padding: 22px;
		border-radius: 22px;
	}

	.utm-form__row,
	.utm-result__actions {
		flex-direction: column;
	}

	.utm-preset,
	.utm-copy,
	.utm-open {
		width: 100%;
	}

		.pageBanner-img {
		margin-left: 0;
	}

		.case-what-list {
		flex-direction: column;
		justify-content: center;
	}
.case-numbers-item,
		.case-what-item {
width: 100%;
		}


.services_about-img img{
	width: 100%;
}

	.services_about-title {
		font-size: 35px;
	}



	.popup-title {
		font-size: 25px;
	}

	.portfolio-container {
		flex-direction: column;
	}

	.portfolio-container img {
  order: 1;
}

.portfolio-container .portfolio-content {
  order: 2;
}


.portfolio-content {
	width: 100%;
	padding-bottom: 100px;
}

.portfolio-container img {
	width: 300px;
}

	.portfolio-title {
		font-size: 32px;
	}

	.portfolio-description  {
		font-size: 11px;
	}

	.portfolio-text {
		font-size: 13px;
	}
}

@media only screen and (max-width: 650px) {
	.pageBanner-title,
	.banner-title {
		font-size: 50px;
	}


		.case-numbers-item {
		font-size: 20px;
	}

	.case-what-title {
		font-size: 50px;
	}
	.form-alert {
		font-size: 10px;
	}

	.services_about-title {
		font-size: 30px;
	}


		.popup-title {
		font-size: 20px;
		padding: 0 10px;
	}
}

@media only screen and (max-width: 550px) {
	.pageBanner-title,
	.banner-title {
		font-size: 40px;
	}

			.case-what-item {
		font-size: 20px;
	}

	.case-about-text {
		font-size: 16px;
	}

	.case-about_title {
		font-size: 32px;
	}

	.footer-contacts-description {
		font-size: 14px;
	}

	.footer-contacts-title {
		font-size: 40px;
	}

	.footer-info-links,
	.footer-info {
		flex-wrap: wrap;
	}

	.footer-info-links {
		flex-direction: row;
	}

	.footer-info-links a {
		margin-right: 20px;
	}

	.footer-info-contacts {
		margin-bottom: 50px;
	}

	.footer-info-description {
		margin-right: 20px;
	}

	.banner-description {
		font-size: 20px;
	}

	.services_price-list {
	padding-top: 10px;
}


}

@media only screen and (max-width: 500px) {
	.pavel-hero {
		padding: 104px 0 56px;
	}

	.pavel-hero__title {
		font-size: 50px;
		max-width: 100%;
	}

	.pavel-hero__description {
		font-size: 18px;
		margin-top: 20px;
	}

	.pavel-hero__media-frame {
		max-width: 100%;
	}

	.pavel-content .container {
		font-size: 18px;
	}

	.stages-item,
	.services-item {
		width: 100%;
	}

	.stages-item-title {
		font-size: 20px;
	}

	.popup-container {
		margin: 0 10px;
	}

	.stages-item-description {font-size: 16px;}



	.footer-info {
		margin-bottom: 50px;
	}
	.blog-item img {
		width: 100%;
	}

	.services-item_title {
		font-size: 40px;
	}

	.services-item_description {
		font-size: 18px;
	}

	.team-item img {
		width: 100%;
		height: 360px;
		object-fit: cover;
		object-position: center;
	}

	.team-item {
		margin-right: 20px;
	}

	.popup-container .form-button {
		flex-direction: column;
	}

	.popup-container .form-button .button {
		margin-top: 30px;
		margin-left: auto;
	}


}

@media only screen and (max-width: 450px) {
	.banner-container,
	.banner {
		height: 100svh;
		min-height: 100svh;
	}
}



@media only screen and (max-width: 400px) {
	.banner-description {
		font-size: 18px;
	}

	.services-item_title {
		font-size: 35px;
	}

	.services-item_description {
		font-size: 16px;
	}
}


/* ===== HOME MOBILE: GIF темнее + меньше + НЕ перекрывает текст ===== */
@media (max-width: 768px){

  /* Слои: контент выше, гифки ниже */
  .banner{ position: relative; overflow: hidden; }
  .banner-container{ position: relative; z-index: 3; }

  /* Текст/стрелка всегда сверху */
  .banner-row{ z-index: 4; }
  .banner-description,
  .banner-arrow{ position: relative; z-index: 4; }

  /* Гифки уводим на фон и уменьшаем/затемняем */
  .banner::before,
  .banner::after{
    z-index: 1;
    pointer-events: none;
    filter: brightness(0.6);   /* темнее (0.5–0.75) */
  }

  /* Нижняя гифка */
  .banner::before{
    opacity: 0.7;             /* было 0.5 */
    height: 700px;             /* меньше по вертикали */
    background-size: 200% auto; /* меньше */
    background-position: center bottom;
  }

  /* Центральная гифка */
  .banner::after{
    opacity: 0.8;
    height: 380px;
    background-size: 70% auto;
    background-position: center;
  }
}


@media (max-width: 768px){

  /* 1) Лучше чем hidden: не ломает эффекты так часто */
  body{
    overflow-x: clip;
  }

  /* fallback для браузеров без clip */
  @supports not (overflow: clip){
    body{
      overflow-x: hidden;
    }
  }

  /* 2) на всякий — чтобы точно ничего не вылезало */
  .wrapper, .main{
    overflow-x: clip;
  }
  @supports not (overflow: clip){
    .wrapper, .main{
      overflow-x: hidden;
    }
  }
}

@media (max-width: 768px){
  #site-header.header-fixed{
    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset !important;
  }
}


/* ==== FIX horizontal swipe on mobile (images/sliders overflow) ==== */
@media (max-width: 768px){

  /* 1) Жёстко запрещаем вылезать за экран */
  html, body{
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2) Любые картинки/видео/свг никогда не шире экрана */
  img, svg, video, iframe{
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 3) Частые виновники — секции со слайдерами/абсолютами */
  .banner,
  .partners,
  .team,
  .blog,
  .services_about{
    overflow: hidden;
  }

  /* 4) Slick: обязательно обрезаем всё, что выходит за рамки */
  .slider,
  .slick-list{
    overflow: hidden !important;
  }

  /* 5) Убираем “лишний” правый отступ у карточек в слайдере (у тебя есть .team-item { margin-right: 20px; }) */
  .team-item{
    margin-right: 0 !important;
  }
}


@media (max-width: 768px){

  /* карточка */
  .services-item{
    position: relative;
    height: 300px;          /* подгони если нужно */
    overflow: hidden;
  }

  /* фон-картинка остаётся фоном */
  .services-item img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }

  /* контейнер с текстом */
  .services-item_content{
    position: relative;
    z-index: 1;

    height: 100%;
    padding: 22px;          /* одинаковые отступы по краям */
    padding-bottom: 82px;   /* резерв под кнопку */

    display: flex;
    flex-direction: column;
    justify-content: center; /* ВЕРТИКАЛЬНЫЙ ЦЕНТР */
    gap: 12px;               /* расстояние между title и desc */
  }

  /* убираем любые "плавающие" отступы */
  .services-item_title,
  .services-item_description{
    margin: 0 !important;
    padding: 0 !important;
  }

  .services-item_description{
    line-height: 1.35;
  }

  /* кнопка всегда внизу слева */
  .services-item_content .button{
    position: absolute;
    left: 22px;
    bottom: 22px;
    margin: 0 !important;
  }
}


@media (max-width: 768px){

  /* Общий контейнер кейса */
  .portfolio-container{
    padding: 70px 20px 40px;   /* сверху / по бокам / снизу */
    justify-content: center;
    align-items: center;
    gap: 22px;
  }

  /* Картинка (логотип/изображение кейса) — по центру */
  .portfolio-container > img{
    display: block;
    margin: 0 auto 50px;       /* центр + отступ вниз */
    max-width: 260px;          /* подгони 180–260 */
    width: 100%;
    height: auto;
  }

  /* Контент кейса тоже выравниваем нормально */
  .portfolio-content{
    width: 100%;
    text-align: left;
    padding: 0 6px;
  }

  /* Заголовки/тексты — чтобы не липли друг к другу */
  .portfolio-title{
    margin: 10px 0 10px;
  }
  .portfolio-description{
    margin: 0 0 16px;
  }
  .portfolio-text{
    margin: 0 0 22px;
  }
}

@media (max-width: 768px){

  /* меньше воздуха сверху (над картинкой) */
  .portfolio-container{
		padding-top: 24px !important;  /* было 0 — чтобы картинка не уезжала вверх */
  }

  /* больше воздуха над кнопкой */
  .portfolio-content .button{
    margin-top: 50px !important;   /* подгони 20–40 */
  }
}

@media (max-width: 768px){

  /* гарантируем, что отступ сверху у кнопки работает */
  .portfolio-content a.button{
    display: inline-block !important;
    margin-top: 28px !important;   /* меняй 20–50 */
  }

}
@media (max-width: 768px){
  /* Убираем картинку в первом экране услуг */
	.pageBanner:not(.service-page-hero) .pageBanner-img{
		display: none !important;
	}

	body:not(.home) .service-page-hero .pageBanner-img{
		display: block !important;
	}

  /* Если ранее добавляли затемнение через ::after — убираем */
  .pageBanner::after{
    content: none !important;
  }

  /* На всякий случай оставим чистый фон */
  .pageBanner{
    background: #000 !important;
  }
}


@media (max-width: 550px){

  /* Отступ сверху над "Контакты" */
  .footer-info-contacts .footer-info-description{
    margin-top: 5px !important;   /* подгони 10–30 */
    margin-bottom: 18px !important;
  }

  /* Отступ между почтой и телефоном */
  .footer-info-contacts .footer-info-mail{
    display: block !important;
  }
  .footer-info-contacts .footer-info-mail + .footer-info-mail{
    margin-top: 10px !important;   /* подгони 6–16 */
  }
}



@media (min-width: 851px){
  .footer-info-links{
    display: none !important;
  }
}

@media (max-width: 850px){
  .footer-info-links{ display: none !important; }
}


@media (max-width: 550px){

  /* 1) Уменьшаем разрыв между контактами и нижним блоком */
  .footer-contacts{
    padding-top: 60px !important;    /* было 130 — подгони 40–80 */
    padding-bottom: 25px !important; /* добавим чуть воздуха */
  }

  /* 2) Копирайт по центру */
  .footer-bottom{
    justify-content: center !important;
    text-align: center !important;
    gap: 10px 0;
  }
  .footer-agency{
    width: 100%;
    text-align: center !important;
    margin: 0 !important;
  }

  /* 3) Рейтинг: в одну строку, по центру, с небольшим отступом сверху */
  .footer-rating{
    width: 100%;
    justify-content: center !important;
    margin-top: 10px !important;  /* подгони 6–16 */
  }

  .footer-rating-stars{
    display: flex !important;
    flex-direction: row !important;
    gap: 6px;
    margin: 0 10px 0 0 !important;
  }
  .footer-rating-stars img{
    display: block;
    width: 14px;  /* подгони 12–16 */
    height: 14px;
  }
}

@media (max-width: 550px){
  .footer-info{
    padding-top: 60px !important;   /* вместо 225 */
    padding-bottom: 40px !important;
  }
}


.footer-rating--kksr .kk-star-ratings{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;                 /* как копирайт */
  line-height: 1.2;
  color: rgba(174,174,174,1);      /* как копирайт */
}

/* звёзды: под размер копирайта */
.footer-rating--kksr .kksr-stars{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.footer-rating--kksr .kksr-star{
  font-size: 14px;                 /* звезды = копирайт */
  line-height: 1;
  color: rgba(174,174,174,1);
}

/* текст справа */
.footer-rating--kksr .kksr-legend{
  margin: 0 !important;
  font-size: 14px;                 /* как копирайт */
  line-height: 1.2;
  color: rgba(174,174,174,1);
  white-space: nowrap;
}

/* чтобы по клику не уезжало */
.footer-rating--kksr a,
.footer-rating--kksr button{
  text-decoration: none;
}

.footer-rating--kksr .kksr-star:hover{
  opacity: .9;
}


@media only screen and (max-width: 900px){
  .pageBanner{
    display: block !important;
    position: relative;
    min-height: 45vh !important;
    padding-top: 80px !important;
    padding-bottom: 30px !important;
    overflow: hidden;          /* чтобы фон/слои не расширяли страницу */
    background-color: #000;    /* на всякий */
  }

	/* Service pages: vertically center hero content (account for fixed mobile header) */
	body:not(.home) .service-page-hero.pageBanner{
		padding-top: 72px !important;
		padding-bottom: 0 !important;
		min-height: 100svh !important;
		min-height: 100dvh !important;
	}

	body:not(.home) .service-page-hero .banner-container{
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: calc(100svh - 72px) !important;
		min-height: calc(100dvh - 72px) !important;
	}

  .pageBanner.has-mobile-bg{
    position: relative;
    background-image: none !important;
  }

  .pageBanner.has-mobile-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: var(--mobile-hero-bg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    filter: brightness(.55);
    transform: scale(1.02);
    opacity: 1;
  }

  .pageBanner > *{
    position: relative;
    z-index: 1;
  }
}


@media only screen and (max-width: 900px){
  .menu-drawer__footer{
    padding-bottom: 70px; /* подними выше: 40-120px */
  }

  /* если нужно чуть выше именно контакты */
  .menu-contacts{
    margin-bottom: 16px;
  }
}