.blockso{
	padding: 60px 0 60px 0;
}

.image-container {
	position: relative; /* Для позиционирования текста поверх изображения */
	width: 100%; /* Или любая желаемая ширина */
	height: auto; /* Или фиксированная высота */
	overflow: hidden; /* Обрезка содержимого, если текст или изображение выходят за границы */
}

.blur-image {
	width: 100%;
	height: auto;
	display: block; /* Убираем лишний пробел под изображением */
	filter: blur(0px); /* Начальное состояние: без размытия */
	transition: filter 1s ease-out; /* Плавный переход для размытия */
}

.blur-image.blurred {
	filter: blur(7px); /* Состояние с размытием */
}

.overlay-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Центрирование текста */
	color: white; /* Цвет текста */
	font-size: 2em; /* Размер шрифта */
	text-align: center;
	opacity: 0; /* Начальное состояние: скрыт */
	transition: opacity 1s ease-in; /* Плавное появление текста */
	pointer-events: none; /* Чтобы текст не мешал взаимодействию с элементами под ним */
	z-index: 2; /* Убедимся, что текст находится поверх изображения */
	width: 86%;
}

.overlay-text.visible {
	opacity: 1; /* Состояние: виден */
}


.box-bubble {
}
.item {
	backdrop-filter: blur(5px);
}

/*.backs {
	background-image: url(../../img/main_bg.png);
	background-size: cover;
	background-repeat:no-repeat;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}*/

.feature-box {
	position: relative; /* Обязательно: родитель должен быть позиционирован */
	padding-bottom: 50px; /* Добавьте padding-bottom, чтобы кнопка не наезжала на другие элементы, когда поднимется */
	/* ... другие ваши стили для feature-box ... */
}

.button-wrapper {
	position: relative;
	bottom: -20px; /* Поднимает кнопку на 20px выше от нижнего края .feature-box */
	left: 50%; /* Начинаем позиционирование от середины по горизонтали */
	transform: translateX(-50%); /* Сдвигаем кнопку влево на половину её ширины, чтобы отцентрировать */
	width: 90%; /* Или фиксированная ширина, чтобы кнопка не занимала 100% от .feature-box, оставляя немного отступов */
	/* Если у вас уже есть ширина 100% на самой кнопке (style="width: 100%;"), то это width: 90%; будет применять к .button-wrapper */
}

/* Уберите mt-3 с самой кнопки в HTML, так как позиционирование будет управлять отступами */
.gb_but {
	/* ... ваши существующие стили для кнопки ... */
	/* Убедитесь, что нет margin-top или margin-bottom, которые будут конфликтовать с абсолютным позиционированием */
}

.carto {
	background-image: url(../../img/mod.png);
	background-size: cover;
	background-repeat:no-repeat;
	background-position: center;
	background-color: #0000002B;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(5px);
}


.itemo {
	background-image: url(../../img/mod.png);
	background-size: cover;
	background-repeat:no-repeat;
	background-position: center;
	background-color: #0000002B;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(5px);
}
.text-press {
	display: inline-block;
	font-size: 32px;
	font-weight: bold;
	color: #333;
	transition: all 0.2s ease;
	cursor: pointer;
	position: relative;
	text-shadow: 0 4px 0 #bbb;
}
.text-press::after {
	content: '';
	position: absolute;
	bottom: -5px; /* под текстом */
	left: 0;
	height: 3px;
	width: 60%;
	background-color: #333; /* цвет полоски */
	transition: width 0.3s ease;
}
.text-press:hover {
	transform: translateY(2px);
	text-shadow: 0 1px 0 #bbb;
	color: #9f2d2d;
}
.text-press:hover::after {
	content: '';
	position: absolute;
	bottom: -5px; /* под текстом */
	left: 0;
	height: 3px;
	width: 100%;
	background-color: #9f2d2d; /* цвет полоски */
	transition: width 0.3s ease;
}

/* Стиль для обтекания картинки слева */
.note-float-left {
	float: left;
	margin-right: 18px; /* Отступ справа от картинки, чтобы текст не прилипал */
	height: auto; /* Сохраняет пропорции */
}

/* Стиль для обтекания картинки справа */
.note-float-right {
	float: right;
	margin-left: 18px; /* Отступ слева от картинки */
	height: auto;
}

@media (max-width: 767.98px) {
	.note-float-left,
	.note-float-right {
		float: none !important; /* Убираем обтекание */
		margin-left: auto;     /* Центрируем изображение */
		margin-right: auto;
		display: block;        /* Делаем блочным для центрирования */
		max-width: 100%;       /* Занимает всю доступную ширину */
	}
}


.containero {
	position: relative; /* Обязательно для позиционирования псевдоэлемента */
	padding: 40px;
	/* Убираем все стили фона и размытия отсюда */
	/* background-image: url(img/blur_rot.png); */
	/* background-size: cover; */
	/* background-repeat:no-repeat; */
	/* background-position: center; */
	/* background-color: #0000002B; */
	/* filter: blur(8px); */
}

.containero::before {
	content: ""; /* Важно для псевдоэлемента */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../../img/foot.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.containero .row {
	position: relative; /* Опционально, но хорошая практика для Z-index */
	z-index: 1; /* Убедимся, что .row находится поверх псевдоэлемента */
}


/* Кнопки */
.gb_but {
	background-color: #303030; /* Green */
	border: 2px solid #303030;
	color: white;
	padding: 8px 16px 8px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/*font-size: 16px;*/
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	border-radius: 4px;
	font-weight: 700;
}
.gb_but_h:hover {
	background-color: #e8e8e8;
	border: 2px solid #e8e8e8;
	color: #9f2d2d;
	font-weight: 700;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.option-btn {
	display: inline-block;
	background-color: #303030;
	color: #ffffff;
	padding: 10px 20px;
	margin: 5px;
	border-radius: 4px;
	cursor: pointer;
	transition: 0.2s;
	font-weight: bold;
}

.option-btn.active {
	background-color: #e8e8e8;
	color: #9f2d2d;
}

/*.service-card {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	padding: 30px 40px;
	transition: background-color 0.4s ease, justify-content 0.4s ease;
	position: relative;
	overflow: hidden;
	min-height: 120px;
}

.service-card .icon {
	transition: all 0.6s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-card .icon img {
	width: 80px;
	height: 80px;
	transition: transform 0.4s ease;
}

.service-card .text {
	margin-left: 20px;
	transition: opacity 0.3s ease, margin 0.4s ease;
}

.service-card .text h4 {
	margin: 0;
	font-size: 20px;
	color: #333;
	transition: color 0.3s ease;
}

!* ХОВЕР: фон темнеет, текст исчезает, иконка плывёт в центр *!
.service-card:hover {
	background-color: #222;
	justify-content: center;
}

.service-card:hover .text {
	opacity: 0;
	margin-left: -20px;
	pointer-events: none;
}

.service-card:hover .icon img {
	transform: scale(1.5);
	justify-content: center;
}*/


/*.service-card {
	position: relative;
	background-color: rgba(228, 228, 228, 0.7);
	border-radius: 20px;
	padding: 30px 30px;
	height: 140px;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.4s ease;
}*/

.service-card {
	position: relative;
	background: rgba(228, 228, 228, 0.2); /* лёгкая прозрачность */
	border-radius: 20px;
	padding: 30px 30px;
	height: 140px;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.4s ease, backdrop-filter 0.3s ease;
	backdrop-filter: blur(12px); /* 🎯 ЭТО главный эффект */
	-webkit-backdrop-filter: blur(12px); /* Safari support */
	border: 1px solid rgba(255, 255, 255, 0.2); /* стеклянный отблеск */
}


.service-card .icon {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.5s ease;
	z-index: 2;
}

.service-card .icon img {
	width: 64px;
	height: 64px;
	transition: transform 0.4s ease;
}

/*.service-card .text {
	position: relative;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
	z-index: 1;
}

.service-card .text h3 {
	margin: 0;
	font-size: 20px;
	color: #262626;
	transition: color 0.3s ease;
}

!* Ховер *!
!*.service-card:hover {
	!*background-color: #2c3034;*!
	background-color: rgba(44, 48, 52, 0.9);
}*!

.service-card:hover {
	background-color: rgba(38, 38, 38, 0.8);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.service-card:hover .text {
	opacity: 0;
	pointer-events: none;
}

.service-card:hover .icon {
	left: 50%;
	transform: translate(-50%, -50%);
}

.service-card:hover .icon img {
	transform: scale(1.5);
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(312deg) brightness(104%) contrast(101%);
}*/

.service-card .text {
	position: absolute; /* Или absolute, если удобнее */
	right: 0; /* Изначальное положение текста */
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s ease, left 0.5s ease; /* Добавляем transition для свойства left */
	z-index: 1;
	/* Добавьте ширину, чтобы текст не был слишком узким, если он длинный */
	width: calc(100% - 100px); /* Пример: 100% ширины карточки - (left и padding) - (ширина иконки и ее отступы) */
	text-align: left; /* Центровка только если нужно */
}

/* Ховер */
.service-card:hover {
	background-color: rgba(38, 38, 38, 0.8);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.service-card:hover .text {
	opacity: 0;
	left: -100px; /* Сдвигаем текст влево за пределы видимости */
	pointer-events: none; /* Чтобы текст не реагировал на события мыши, когда он невидим */
}

.service-card:hover .icon {
	left: 50%;
	transform: translate(-50%, -50%);
}

.service-card:hover .icon img {
	transform: scale(1.5);
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(312deg) brightness(104%) contrast(101%);
}