/* 
* Изображения на фоне во вступительном блоке и блоге услуг
*/

.has-image-bg {
	position: relative;
	overflow: hidden;
}

.has-image-bg * {
	position: relative;
	z-index: 2;
}

.has-image-bg:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image: url('/wp-content/uploads/2022/02/rainbow-vortex.svg'); /* если фото для фона нет, подставится шаблонный */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
}

/* Почти полное затемнение для главного верхнего блока */
.has-image-bg.dark {
	background: rgba(0,0,0,0.99);
	color: white;
}

.has-image-bg.dark a {
	color: white;
}

.has-image-bg.dark a:hover {
	text-decoration: none;
	color: rgba(255,255,255,0.7);
}

/* Фото для главного верхнего блока */
.hero-bg:before {
	opacity: 0.2;
	background-image: url('/wp-content/uploads/2022/02/hero-bg.jpg');
}

/* Список преимуществ в главном верхнем блоке */
ul.hero-list {
	list-style: none;
	padding: 0;
	font-size: 30px;
}

@media (max-width: 500px) {
	ul.hero-list { font-size: 20px; }
}

@media (min-width: 501px) and (max-width: 1100px) {
	ul.hero-list { font-size: 25px; }
}

ul.hero-list li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 80px;
	padding-left: 80px;
	margin: 20px 0;
}

ul.hero-list li:before {
	content: '';
	position: absolute;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z'/%3E%3Cpath d='M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	width: 60px;
	height: 60px;
	left: 0;
}


/*
* Блоки с услугами *
*/

/* Блок побольше (без фото на фоне) */
.page-block {
	border-radius: 20px;
	background-color: rgba(50,116,49,1);
	color: #ffffff;
	padding: 30px;
	min-height: 300px;
}

.page-block:hover {
	background-color: rgba(50,116,49,0.9);
}

/* Блок поменьше (с фото на фоне) */
.page-small-block {
	border-radius: 20px;
	height: 265px;
	background-color: #327431;
	color: #ffffff;
}

.page-small-block:hover{
	background-color: #000000;
	opacity: 0.9;
}

.title-small-block {
	padding: 170px 10px 10px 20px;
	position: relative;
	z-index: 2;
}

.exterior-interior a, a.page-small-link {
	text-decoration: none;
}

@media screen and (max-width: 1240px) {
	.title-small-block   {
		padding: 150px 10px 10px 20px;
	}
	.page-small-block {
		min-height: 280px;
	}
}

@media screen and (max-width: 991px) {
	.title-small-block   {
		padding: 100px 10px 10px 20px;
	}
	.page-small-block {
		min-height: 280px;
	}
}

@media screen and (max-width: 780px) {
	.title-small-block   {
		padding: 150px 10px 10px 20px;
	}
}

/* не используется?
.image-bg.dark {
background: rgba(0,0,0,0.9);
color: white;
}
*/

/* дублирует код has-image-bg
.image-bg {
	position: relative;
	overflow: hidden;

}

.image-bg:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image: url('/wp-content/uploads/2022/02/rainbow-vortex.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
}

*/

/* иконки технологического процесса */
.green-icon-tech-steps {
	filter: invert(40%) sepia(13%) saturate(2135%) hue-rotate(70deg) brightness(89%) contrast(89%);
	width: 100px;
	height: 100px;
}

/*

a.service-block-link {
text-decoration: none;
color: white;
}

.is-service-block {
padding: 30px;
min-height: 30vh;
display: flex;
flex-direction: column;
justify-content: center;
}

a.service-block-link:hover .has-image-bg.dark {
background: rgba(0,0,0,1);
}

*/