/* Стили для секции связанных постов */
.related-posts-section {
	margin-top: 40px;
	/* padding-top: 40px;
	border-top: 1px solid #e0e0e0; */
}

.related-posts-header h3 {
	font-size: 24px;
	margin-bottom: 20px;
	color: #333;
	text-align: center;
}

.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.related-post-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.related-post-thumbnail {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.related-post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-thumbnail img {
	transform: scale(1.05);
}

.related-post-content {
	padding: 20px;
}

.related-post-title {
	margin: 0 0 10px 0;
	font-size: 18px;
	line-height: 1.4;
}

.related-post-title a {
	color: #333;
	text-decoration: none;
}

.related-post-title a:hover {
	color: #007cba;
}

.related-post-excerpt {
	color: #666;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
}

.related-post-date {
	color: #999;
	font-size: 12px;
	text-transform: uppercase;
}

/* Адаптивность */
@media (max-width: 768px) {
	.related-posts-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.related-posts-header h3 {
		font-size: 20px;
	}
	
	.related-post-content {
		padding: 15px;
	}
	
	.related-post-title {
		font-size: 16px;
	}
}




.image-wrapper {
  position: relative;
  width: auto; /* или под ваш дизайн */
  height: 100%;
}
.svg-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;      /* или object-fit: cover; если хотите заполнить без сохранения пропорций */
}

.svg-placeholder {
  position: absolute;
  
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: auto;
  display: flex; align-items: center; justify-content: center;
}
.work-image {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* по умолчанию скрыто! style="display:none;" */
}

.head-placeholder-image {
	opacity: 0.4;
}
.swiper-pagination-bullet {
	width: 40px;
	height: 40px;
	background: #93C7C1;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	opacity: 1 !important;
	font-size: 14px;
	flex-shrink: 0;
	position: relative;
	z-index: 5;
}


.swiper-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

.pagination-container {
	flex: 1;
	display: flex;
	justify-content: center;
	max-width: 500px;
	padding-top: 32px;
}

.swiper-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
}




.nav-arrow {
  /* Layout (размер и флекс-контейнер) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;

  /* Positioning */
  position: relative;
  z-index: 10;
  top: -6px;
  margin-top: 30px;

  /* Visual appearance */
  background: #93C7C1;
  border-radius: 50%;
  border: 1px solid #93C7C1;
  color: white;

  /* Interaction and transition */
  cursor: pointer;
  transition: all 0.3s ease;
}


/* Увеличиваем только SVG стрелки */
.nav-arrow svg {
	width: 28px;   /* Увеличили с 20px до 28px */
	height: 28px;  /* Увеличили с 20px до 28px */
}

/* ДОБАВЛЕНО: псевдо-элемент для области клика */
.nav-arrow::after {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border-radius: 50%;
}

/* ДОБАВЛЕНО: стили для изображений */
.nav-arrow img {
	display: block;
	position: relative;
	z-index: 1;
	
}

.nav-arrow:hover {
	background-color: #fff;
	color: #203B49;
	transform: scale(1.1);
	border: 1px solid #93C7C1;
}



.swiper-pagination-bullet:hover,
.swiper-pagination-bullet-active {

	/* transform: scale(1.1); */
	/* background-color: #fff !important; */
	color: #203B49 !important;
	border: 1px solid #93C7C1 !important;
	background: #ffffff;
	color: #203B49;
}



/* Исправление z-index */
.swiper-navigation {
	position: relative; /* Добавляем контекст позиционирования */
	z-index: 1; /* Поднимаем всю навигацию */
}



.pagination-container {
	position: relative;
	z-index: 5; /* Пагинация между стрелками и контентом */
}

.swiper-pagination {
	position: relative;
	z-index: 5;
}


/* Стили для единого попапа */
.popup-master {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.popup-container {
	background: white;
	border-radius: 12px;
	max-width: 1200px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	position: relative;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0px 0px 0px;
	border-bottom: 1px solid #eee;
	background: #fff;
	
}

.popup-title h2 {
	margin: 0;
	font-size: 24px;
	color: #203B49;
}

.popup-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

.consultation-btn {
	/* background: #93C7C1;
	color: white;
	border: none;
	padding: 12px 20px;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	transition: background 0.3s ease; */
	padding-left: 45px;
	position: relative;
	font-weight: bold;
	color: rgb(255, 255, 255) !important;
	border-width: 2px;
	border-style: solid;
	border-color: rgb(147, 199, 193);
	border-image: initial;
}

.consultation-btn:hover {
	background: #7bb3ad;
}

.popup-close {
	background: none;
	border: none;
	font-size: 30px;
	cursor: pointer;
	color: #666;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.3s ease;
}

.popup-close:hover {
	background: #f5f5f5;
}

.popup-content {
	padding: 0;
	/* max-height: calc(90vh - 80px); */
	overflow: auto;
}

.popup-swiper {
	position: relative;
	padding: 0px;
}

.popup-work-slide {
	padding: 10px 0px 10px 0px;
}

.work-comparison {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

.work-images {
	display: flex;
	gap: 30px;
	width: 100%;
}

.work-before,
.work-after {
	flex: 1;
}

.image-container {
	position: relative;
	margin-bottom: 10px;
}

.image-container img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 8px;
}

.image-description {
	margin-top: 10px;
	padding: 10px;
	background: #f9f9f9;
	border-radius: 6px;
	font-size: 14px;
	color: #666;
}

.image-label {
	text-align: center;
	font-weight: 600;
	color: #203B49;
	font-size: 16px;
}

.popup-navigation {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: none;
}

.popup-arrow {
	background: #93C7C1;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: all;
	transition: all 0.3s ease;
	color: white;
}

.popup-arrow:hover {
	background: #7bb3ad;
	transform: scale(1.1);
}

.popup-arrow svg {
	width: 24px;
	height: 24px;
}

/* Адаптивность */
@media (max-width: 768px) {
	.popup-overlay {
		padding: 10px;
	}
	
	.popup-header {
		padding: 15px 20px;
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
	}
	
	.popup-actions {
		width: 100%;
		justify-content: space-between;
	}
	
	.popup-swiper {
		padding: 15px;
	}
	
	.work-comparison {
		flex-direction: column;
		gap: 0px;
	}
	
	.work-images {
		flex-direction: column;
		gap: 20px;
	}
	
	.image-container img {
		height: 300px;
	}
	
	.popup-arrow {
		width: 40px;
		height: 40px;
	}
	
	.popup-arrow svg {
		width: 20px;
		height: 20px;
	}
}


.swiper-button-disabled {
	opacity: 0 !important;
	  pointer-events: none !important;
}


/* Стили для кнопки как в примере */
.case-cta {
	display: inline-block;
}

.btn-new {
	box-shadow: rgba(111, 179, 171, 0.43) 0px 2px 5px;
	color: rgb(255, 255, 255);
	display: inline-block;
	background: linear-gradient(rgb(147, 199, 193) 0%, rgb(75, 158, 148) 100%);
	border-radius: 22.5px;
	padding: 12px 17px;
	transition: 0.5s;
	text-decoration: none;
	font-weight: bold;
	border: 2px solid rgb(147, 199, 193);
	position: relative;
	padding-left: 45px;
}

.consult-btn {
	padding-left: 45px;
	position: relative;
	font-weight: bold;
	color: rgb(255, 255, 255) !important;
	border-width: 2px;
	border-style: solid;
	border-color: rgb(147, 199, 193);
	min-width: 264px;
}

.consult-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	
	
	background-image: url('../img/consult-ico.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Ховер эффекты */
.btn-new:hover {
	transform: translateY(-2px);
	box-shadow: rgba(111, 179, 171, 0.6) 0px 4px 10px;
	background: linear-gradient(rgb(130, 185, 179) 0%, rgb(65, 145, 135) 100%);
	color: rgb(255, 255, 255) !important;
	text-decoration: none;
}

.btn-new:active {
	transform: translateY(0);
	box-shadow: rgba(111, 179, 171, 0.3) 0px 1px 3px;
}



/* Стили для галерерии */
#second_block {
	padding: 50px 0;
}

.swiper-wrapper {

	height: auto!important;
	
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 15px 0px 15px 0px;
}

.tab.active {
	background-color: #93C7C1;
}

.tab {
	/* padding: 8px 16px; */
	border: 1px solid #93C7C1;
	font-weight: 500;
	font-size: 16px;
	line-height: 131%;
	color: #325D73;
	border-radius: 4px;
	cursor: pointer;
	/* margin-right: 10px; */
	/* margin-top: 5px; */
}

.tab a {
	text-decoration: none;
	color: inherit;
}

.tab a {
	display: block;
	width: 100%;
	height: 100%;
}

.tab a {
	cursor: pointer;
}

.tab {
  position: relative; /* для позиционирования дочерних элементов */
 
}

.tab a {
  /* position: absolute; */
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  
  padding: 8px 16px;  /* Чтобы текст не прилипал к краям */
  box-sizing: border-box;
}


@media (max-width: 576px) {
	.tab {
		padding: 8px 12px;
		font-size: 14px;
		line-height: 131%;
	}
	
	.tab a {
	padding: 0px 16px;
	 box-sizing: border-box;
	 font-size: 15px;
	 
 }
	.tabs {
		margin: 15px 0px 15px 0px;
	}
}
/* Скрываем ненужные версии */
.gallery-mobile {
	display: none;
}

.gallery-desktop {
	display: block;
}

/* Десктоп версия - Swiper */
.desktop-swiper {
	overflow: hidden;
}

.desktop-swiper .swiper-wrapper {
	display: flex;
}

.desktop-swiper .work-slide {
	/* width: calc(33.333% - 20px) !important; /* 3 работы в ряд */ */
	height: auto;
}

/* Стили для работы */
.work-item,
.work-grid-item {
	background: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 4px rgba(0,0,0,0.2);
	transition: transform 0.3s ease;
	cursor: pointer;
}

.work-item:hover,
.work-grid-item:hover {
	transform: translateY(-5px);
}

.comparison-container {
	display: flex;
	height: 200px;
}

.before, .after {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.before {
	border-right: 1px solid #fff;
}

.work-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	font-size: small;
	color: #9e9e9e;
}

.image-label {
	position: absolute;
	bottom: 8px;
	left: 8px;
	background: rgba(0, 0, 0, 0.85);
	color: white;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
}

.work-info {
	padding: 15px;
	display: none;
}

.work-title {
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
}

.work-timing {
	font-size: 12px;
	color: #666;
}

/* Навигация Swiper */
.swiper-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 25px;
	gap: 20px;
}



/* 
/* Мобильная версия - Grid */
@media (max-width: 768px) {
	
	/* Навигация Swiper */
	.swiper-navigation {
		margin-top: 0px;
	}

	
	.nav-arrow {
	  width: 40px;
	  height: 40px;
	  
  }
	.gallery-mobile {
		display: block;
	}
	
	.gallery-desktop {
		display: none;
	}
	
	.works-grid {
		display: grid;
		overflow-x: hidden;
		grid-template-columns: 1fr 1fr; /* 2 колонки */
		gap: 12px;
		max-height: 600px; /* Ограничение высоты для 3 рядов */
		/* overflow-y: auto; /* Скролл если больше 6 работ */ */
		padding: 5px;
	}
	
	.work-grid-item {
		/* height: 180px; /* Фиксированная высота для выравнивания */ */
	}
	
	.comparison-container {
		height: 120px;
	}
	
	.work-info {
		padding: 10px;
		display: block;
	}
	
	.work-title {
		font-size: 13px;
		margin-bottom: 5px;
	}
	
	.work-timing {
		font-size: 11px;
	}
	
	.image-label {
		font-size: 11px;
		padding: 3px 8px;
		bottom: 5px;
		left: 5px;
	}
	
	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		background: #DCD0BA;
		
		border-radius: 50%;
		display: flex !important
	;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s 
	ease;
		opacity: 1 !important;
		font-size: 0px;
		flex-shrink: 0;
		position: relative;
		z-index: 5;
	}
	
	
	.swiper-pagination-bullet:hover,
	.swiper-pagination-bullet-active {
	
		transform: scale(1.1);
		/* background-color: #fff !important; */
		color: #203B49 !important;
		border: 1px solid #93C7C1 !important;
		background: #9EC5C0;
		color: #203B49;
	}
	
	/* Скрываем навигацию на мобилках */
	.swiper-navigation {
		display: flex;
	}
	
	
} */

/* Планшеты */
@media (min-width: 769px) and (max-width: 1023px) {
	.desktop-swiper .work-slide {
		/* width: calc(50% - 15px) !important; /* 2 работы в ряд на планшетах */ */
	}
}

/* Десктоп */
@media (min-width: 1024px) {
	.desktop-swiper .work-slide {
		/* width: calc(33.333% - 20px) !important; /* 3 работы в ряд */ */
	}
	
	.comparison-container {
		height: 220px;
	}
}


/* Попап на весь экран */
.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	overflow: hidden;
}

.popup-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.popup-container {
	width: 100%;
	max-width: 1200px;
	height: 90vh;
	background-color: rgb(241, 241, 241);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Шапка попапа */
.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	background-color: rgb(241, 241, 241);
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
	gap: 50px;
}


.popup-title h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: #2c3e50;
}

.popup-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* Кнопка записи */
.consultation-btn {
	
	padding-left: 45px;
	position: relative;
	font-weight: bold;
	color: rgb(255, 255, 255) !important;
	border-width: 2px;
	border-style: solid;
	border-color: rgb(147, 199, 193);
	border-image: initial;
	box-shadow: rgba(111, 179, 171, 0.43) 0px 2px 5px;
	color: rgb(255, 255, 255);
	display: inline-block;
	background: linear-gradient(rgb(147, 199, 193) 0%, rgb(75, 158, 148) 100%);
	border-radius: 22.5px;
	padding: 12px 17px;
	transition: 0.5s;
	/* display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: #007cba;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease; */
}

.consultation-btn:hover {
	background: #005a87;
}

.btn-icon {
	font-size: 16px;
}

/* Кнопка закрытия */
.popup-close {
	width: 40px;
	height: 40px;
	background: none;
	color: #b2b2b2;
	border: none;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.popup-close:hover {
	background: #495057;
}

/* Основной контент */
.popup-content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	position: relative;
}

.popup-swiper {
	width: 100%;
	height: 100%;
	position: relative;
}

.popup-work-slide {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Сравнение работ */
.work-comparison {
	width: 100%;
	max-width: 1200px;
	padding: 0 0px;
}

.work-images {
	display: flex;
	gap: 20px;
	height: 60vh;
}

.work-before,
.work-after {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.image-container {
	flex: 1;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background-color: rgb(241, 241, 241);
}

.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Описание под изображением "До" */
.image-description {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	color: #000;
	font-size: 13.5px;
	line-height: 125%;
	bottom: 9px;
	left: 9px;
	border-radius: 4px;
}

.image-description p {
	margin: 0;
}

/* Подписи изображений */
.image-label {
	display: none;
	text-align: center;
	padding: 5px 10px 5px 10px;
	font-weight: 600;
	color: #2c3e50;
	font-size: 13px;
	background: #f8f9fa;
	border-radius: 8px 8px 8px 8px;
}

/* Навигационные стрелки */
.popup-navigation {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	pointer-events: none;
	z-index: 10;
}

.popup-arrow {
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	pointer-events: all;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.popup-arrow:hover {
	background: white;
	transform: scale(1.1);
}

.popup-arrow svg {
	color: #2c3e50;
}

.image-description-mobile {
	display: none;
}

.popup-actions-mobile {
	display: none;
}
.case-name {
	font-size: calc(1.325rem + .9vw);
	line-height: 140%;
	/* font-size: 24px !important; */
	/* line-height: 100%; */
	/* color: #2BABA1; */
	/* font-weight: 700; */
	/* background-color: #fff; */
	/* border: 1px solid #2BABA1; */
	/* border-radius: 4px; */
	padding: 10px 0px 00px 0px;
	margin-top: 20px;
}

.swipe-icon {
	display: none;
}

.swipe-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.swipe-icon img {
  width: 20px;
  height: 20px;
}
.image-container {
  position: relative;
}

/* Только на мобилке */
@media (max-width:600px) {
  .swipe-icon {
	display: flex;
  }
}


.popup-topbar .close-icon {
  font-size: 45px;
  color: #b2b2b2;
  cursor: pointer;
  transition: color 0.15s;
  padding-right: 10px;
  /* на случай Bootstrap — padding-right если надо */
}

/* стили при наведении */
.popup-topbar .close-icon:hover {
  color: #aaa;
}


/* Адаптивность для мобильных */
@media (max-width: 768px) {
	
	.popup-topbar {
		width: 100%;
		height: 50px;
		background: #111;
		display: flex;
		align-items: center;
	}
	
	.popup-topbar .close-icon {
	  font-size: 45px;
	  width: 0px;
	  height: 0px;
	  padding-top: 6px;
	  color: #b2b2b2;
	  cursor: pointer;
	  transition: color 0.15s;
	  padding-right: 10px;
	  /* на случай Bootstrap — padding-right если надо */
	}
	
	/* стили при наведении */
	.popup-topbar .close-icon:hover {
	  color: #aaa;
	}
	


	/* .swipe-icon {
		display: block;
	}
	
	.swipe-icon {
		display: none;
		position: absolute;
		bottom: 8px;
		right: 8px;
		background-color: #fff;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		padding: 3px;
	} */
	
	.popup-after img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.svg-placeholder {
		position: absolute;
		top: -15px;
		left: 0;
		right: 0;
		bottom: 0;
		width: 110%;
		height: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	h2 {
		font-size: calc(1.125rem + .3vw)!important;
		line-height: 130%!important;
	}
	
	h3 {
		font-size: calc(1.025rem + .2vw) !important;
		line-height: 130% !important;
	}
	
	
	.case-cta {
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.consult-btn {
		/* padding-left: 45px;
		position: relative;
		font-weight: bold;
		color: rgb(255, 255, 255) !important;
		border-width: 2px;
		border-style: solid;
		border-color: rgb(147, 199, 193);
		min-width: 264px; */
		width: 100%;
	}
	.case-name {
		font-size: calc(1.125rem + .3vw);
		line-height: 130%;
		padding: 0px;
		margin-top: 0px;
		font-family: 'Futura-Bold', Arial, sans-serif;
	}
	
	.popup-actions{
		display: none;
	}
	.popup-actions-mobile {
		display: block;
	}
	/* Стили для секции связанных постов */
	.related-posts-section {
		margin-top: 0px;

		padding: 0px 10px 0px 10px;
	}
	
	.popup-container,
	  .popup-content,
	  .popup-swiper {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100vw;
		max-width: 100vw;
	  }
	  .works-grid-page {
		width: 100%;
		margin: 0;
	  }
	  .work-grid-item {
		margin: 0;
		width: 50%; /* для двух фото в ряд */
		box-sizing: border-box;
	  }
	 
	  
	  
	.popup-overlay {
		padding: 10px;
	}
	
	.popup-container {
		height: 95vh;
		border-radius: 8px;
	}
	
	.popup-header {
		padding: 0px 10px 0px 10px;
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}
	
	.popup-title h2 {
		font-size: 20px;
		text-align: center;
	}
	
	.popup-actions {
		justify-content: space-between;
		padding: 0px 10px 20px 10px;
	}
	
	.consultation-btn {
		padding: 10px 15px;
		font-size: 13px;
	}
	
	.work-images {
		flex-direction: row;
		height: auto;
		gap: 2px;
	}
	
	.work-before,
	.work-after {
		height: 40vh;
	}
	
	.popup-navigation {
		padding: 0 10px;
		display: none;
	}
	
	.popup-arrow {
		width: 40px;
		height: 40px;
	}
	
	.image-description {
		padding: 10px;
		font-size: 12px;
	}
	
	.image-description-mobile {
		padding: 0px 10px 0px 10px;
		display: block
	}
	.image-description {
		display: none;
	}
}

/* Анимация появления */
.popup {
	animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.popup-container {
	animation: popupSlideIn 0.3s ease;
}

@keyframes popupSlideIn {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Полноэкранный попап */
.popup-master {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	/* background: rgba(0, 0, 0, 0.95); */
	z-index: 9999;
	display: none;
	background-color: rgb(241, 241, 241);
}

.popup-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.popup-content {
	flex: 1;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	position: relative;
	max-width: 1200px;
	margin: 0 auto; /* Добавь эту строку */
	width: 100%; /* И эту */
}

.popup-topbar {
  width: 100%;
  height: 60px;
  background: #111;
  display: flex;
  align-items: center;
  /* перепад padding удалён, всё центрует внутри контейнера */
}

.popup-topbar .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}




.works-grid-page {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	padding: 10px;
}

.mobile-grid-swiper {
	width: 100%;
	overflow: hidden;
}

@media (min-width: 768px) {
	.works-grid-page {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Убедитесь, что оригинальные work-grid-item скрыты в мобильной версии */
.gallery-mobile .works-grid {
	display: none; /* Скрываем оригинальный grid, т.к. теперь он в Swiper */
}

.mobile-grid-swiper .work-grid-item {
	display: block; /* Показываем элементы внутри Swiper */
	width: 100%;
}

.works-grid-page {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	padding: 0px; 
}

@media (min-width: 768px) {
	.works-grid-page {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		padding: 0px;
	}
}


.popup-next {
	left:12px;
}
/* 
.swiper-pagination-bullet[tabindex="0"] {
	display: none !important;
} */


.swiper-pagination {
	width: auto !important; /* или достаточно большое число — например: */
	min-width: 100% !important;
}
.svg-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	animation: bgPulse 0.9s ease-in-out infinite;
}

@keyframes bgPulse {
	0%, 100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.1);
	}
}


.swiper-pagination-bullet-ellipsis {
	background: transparent !important;
	cursor: default !important;
}


/* Показываем только нужные буллеты */
.swiper-pagination-bullet-active-main,
.swiper-pagination-bullet-active-prev {
	display: block !important;
}

/* Скрываем все остальные буллеты */
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active-main):not(.swiper-pagination-bullet-active-prev) {
	display: none !important;
}

/* Базовые стили для буллетов */
.swiper-pagination-bullet {
	display: none; /* по умолчанию скрыты */
}

.swiper-pagination-bullet {
	display: none; /* по умолчанию скрыты */
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}
/* Показываем только нужные буллеты */
.swiper-pagination-bullet-active-main,
.swiper-pagination-bullet-active-prev {
	display: flex !important; /* меняем на flex для лучшего выравнивания */
	align-items: center !important;
	justify-content: center !important;
}